'路由'

3 months ago · e3289e6b5b
parent 14e03415f6
commit e3289e6b5b
19 changed files with 237 additions and 21 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>运营平台管理系统</title>
+    <title>小得盈满，爱逢其时</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -21,7 +21,9 @@
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.8",
    "element-plus": "^2.8.7",
-    "vue": "^3.5.12"
+    "pinia": "^2.2.8",
    "vue": "^3.5.12",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.25.9",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -17,9 +17,15 @@ importers:
      element-plus:
        specifier: ^2.8.7
        version: 2.8.7(vue@3.5.12(typescript@5.6.3))
      pinia:
        specifier: ^2.2.8
        version: 2.2.8(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
      vue:
        specifier: ^3.5.12
        version: 3.5.12(typescript@5.6.3)
      vue-router:
        specifier: ^4.5.0
        version: 4.5.0(vue@3.5.12(typescript@5.6.3))
    devDependencies:
      '@babel/eslint-parser':
        specifier: ^7.25.9
@ -849,6 +855,9 @@ packages:
  '@vue/compiler-vue2@2.7.16':
    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
  '@vue/devtools-api@6.6.4':
    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
  '@vue/language-core@2.1.10':
    resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
    peerDependencies:
@ -2523,6 +2532,18 @@ packages:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}
  pinia@2.2.8:
    resolution: {integrity: sha512-NRTYy2g+kju5tBRe0oNlriZIbMNvma8ZJrpHsp3qudyiMEA8jMmPPKQ2QMHg0Oc4BkUyQYWagACabrwriCK9HQ==}
    peerDependencies:
      '@vue/composition-api': ^1.4.0
      typescript: '>=4.4.4'
      vue: ^2.6.14 || ^3.5.11
    peerDependenciesMeta:
      '@vue/composition-api':
        optional: true
      typescript:
        optional: true
  posix-character-classes@0.1.1:
    resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
    engines: {node: '>=0.10.0'}
@ -3259,6 +3280,11 @@ packages:
    peerDependencies:
      eslint: '>=6.0.0'
  vue-router@4.5.0:
    resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
    peerDependencies:
      vue: ^3.2.0
  vue-tsc@2.1.10:
    resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
    hasBin: true
@ -4028,6 +4054,8 @@ snapshots:
      de-indent: 1.0.2
      he: 1.2.0
  '@vue/devtools-api@6.6.4': {}
  '@vue/language-core@2.1.10(typescript@5.6.3)':
    dependencies:
      '@volar/language-core': 2.4.8
@ -5853,6 +5881,14 @@ snapshots:
  picomatch@2.3.1: {}
  pinia@2.2.8(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3)):
    dependencies:
      '@vue/devtools-api': 6.6.4
      vue: 3.5.12(typescript@5.6.3)
      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
    optionalDependencies:
      typescript: 5.6.3
  posix-character-classes@0.1.1: {}
  possible-typed-array-names@1.0.0: {}
@ -6654,6 +6690,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color
  vue-router@4.5.0(vue@3.5.12(typescript@5.6.3)):
    dependencies:
      '@vue/devtools-api': 6.6.4
      vue: 3.5.12(typescript@5.6.3)
  vue-tsc@2.1.10(typescript@5.6.3):
    dependencies:
      '@volar/typescript': 2.4.8
--- a/src/App.vue
+++ b/src/App.vue
@ -1,15 +1,7 @@
 <template>
  <div>
-    <h1>ces</h1>
+    <router-view></router-view>
  </div>
 </template>
-<script setup lang="ts">
+<script setup lang="ts"></script>
 import request from '@/utils/request'
 import { onMounted } from 'vue'
 import { reqLogin } from '@/api/user'
 onMounted(() => {
  reqLogin({ username: 'admin', password: '111111' })
 })
 </script>
 <style scoped></style>
--- a/src/assets/images/background.jpg
+++ b/src/assets/images/background.jpg
--- a/src/assets/images/error_images/401.png
+++ b/src/assets/images/error_images/401.png
--- a/src/assets/images/error_images/404.png
+++ b/src/assets/images/error_images/404.png
--- a/src/assets/images/error_images/cloud.png
+++ b/src/assets/images/error_images/cloud.png
--- a/src/assets/images/login_form.png
+++ b/src/assets/images/login_form.png
--- a/src/assets/images/notData.png
+++ b/src/assets/images/notData.png
--- a/src/assets/images/tabbar-bg.png
+++ b/src/assets/images/tabbar-bg.png
--- a/src/main.ts
+++ b/src/main.ts
@ -5,6 +5,12 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 //全局配置国际化的配置
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 //引入路由
 import router from '@/router'
 import pinia from '@/store'
 import App from '@/App.vue'
 //获取应用实例对象
 const app = createApp(App)
@ -18,18 +24,20 @@ app.use(ElementPlus, {
 // console.log(import.meta.env, '===========')
 //测试axios数据
-import axios from 'axios'
+// import axios from 'axios'
-axios({
+// axios({
-  url: '/api/user/login',
+//   url: '/api/user/login',
-  method: 'post',
+//   method: 'post',
-  data: {
+//   data: {
-    username: 'admin',
+//     username: 'admin',
-    password: '111111',
+//     password: '111111',
-  },
+//   },
-})
+// })
 //svg插件需要配置代码
 import 'virtual:svg-icons-register'
 import '@/styles/index.scss'
 app.use(router)
 app.use(pinia)
 // 将应用挂载到挂载点上
 app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,19 @@
 //通过vue-router插件实现模板路由配置
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { constantRoute } from '@/router/routes'
 //创建路由器
 let router = createRouter({
  //路由模式
  history: createWebHashHistory(),
  routes: constantRoute,
  //混动行为
  scrollBehavior() {
    return {
      //水平方向
      left: 0,
      //垂直方向
      top: 0,
    }
  },
 })
 export default router
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@ -0,0 +1,23 @@
 //对外暴露配置的路由(常量路由)
 export const constantRoute = [
  {
    name: 'login',
    path: '/',
    component: () => import('@/views/login/index.vue'),
  },
  {
    name: 'home',
    path: '/home',
    component: () => import('@/views/home/index.vue'),
  },
  {
    name: '404',
    path: '/404',
    component: () => import('@/views/404/index.vue'),
  },
  {
    name: 'Any',
    path: '/:pathMatch(.*)*',
    redirect: '/404',
  },
 ]
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -0,0 +1,5 @@
 //仓库大仓库
 import { createPinia } from 'pinia'
 //创建大仓库
 let pinia = createPinia()
 export default pinia
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@ -0,0 +1,25 @@
 //创建用户相关的小仓库
 import { defineStore } from 'pinia'
 //引入登录接口
 import { reqLogin } from '@/api/user'
 //引入数据类型
 import type { loginForm } from '@/api/user/type'
 //创建小仓库
 let useUserStore = defineStore('User', {
  //小仓库存储数据的地方
  state: () => {},
  //异步|逻辑的地方
  actions: {
    //用户登录方法
    //括号内data收集参数(实参)
    async userLogin(data: loginForm) {
      //登录请求
      let result = await reqLogin(data)
      console.log(result)
    },
  },
  getters: {
  },
 })
 export default useUserStore
--- a/src/views/404/index.vue
+++ b/src/views/404/index.vue
@ -0,0 +1,7 @@
 <template>
  <div>
    <h1>404</h1>
  </div>
 </template>
 <script setup lang="ts"></script>
 <style scoped></style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -0,0 +1,7 @@
 <template>
  <div>
    <h1>2级路由</h1>
  </div>
 </template>
 <script setup lang="ts"></script>
 <style scoped></style>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -0,0 +1,87 @@
 <template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form">
          <h1>Hello</h1>
          <h2>欢迎登录</h2>
          <el-form-item>
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="Lock"
              type="password"
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              type="primary"
              size="large"
              @click="loginHandle"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
 </template>
 <script setup lang="ts">
 import { User, Lock } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
 import { useRouter } from 'vue-router'
 //引入用户相关的小仓库
 import useUserStore from '@/store/modules/user'
 let useStore = useUserStore()
 //收集账号和密码的数据
 const loginForm = reactive({
  username: 'admin',
  password: '111111',
 })
 const loginHandle = () => {
  //通知仓库发登录请求
  //请求成功后跳转到首页（展示数据的home页面）
  //登录失败弹出登录失败信息
  useStore.userLogin(loginForm) //传形参loginForm
 }
 </script>
 <style scoped lang="scss">
 .login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
 }
 .login_form {
  width: 80%;
  top: 30vh;
  position: relative; //相对
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 40px;
  h1 {
    color: white;
    font-size: 40px;
  }
  h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: white;
    font-size: 20px;
  }
  .login_btn {
    width: 100%;
    background: deepskyblue;
  }
 }
 </style>