devbox
机器笔尖舞者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3.2后台管理系统搭建学习笔记_module '"d:/works/wuwei-admin-vue/src/modules/base

作者：机器笔尖舞者 | 2024-02-04 13:43:24

赞

踩

module '"d:/works/wuwei-admin-vue/src/modules/base/layout/components/amenu.v

1、创建项目更改版本

1-1、创建项目

vue create vue3-admin

1-2、更改vue版本

更改前

更改后

 

2、开发项目

1、按需引入element-plus

1、安装

npm install element-plus --save

2、按需导入（自动导入）

cnpm install -D unplugin-vue-components unplugin-auto-import

3、Webpack配置（vue.config.js）

  1. const AutoImport = require('unplugin-auto-import/webpack')
  2. const Components = require('unplugin-vue-components/webpack')
  3. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  4.  
  5. module.exports = {
  6. intOnSave:false,
  7.   devServer:{
  8.     open:true,
  9.     port:9000,
  10.   },
  11.   configureWebpack: {
  12.     plugins: [
  13.       AutoImport({
  14.         resolvers: [ElementPlusResolver()],
  15.       }),
  16.       Components({
  17.         resolvers: [ElementPlusResolver()],
  18.       }),
  19.     ]
  20.   },
  21. }

4、使用

tips:在main.js中引入样式（避免弹出框等组件样式错乱）

import 'element-plus/dist/index.css'

2、使用element-plus Icon图标 

1、安装

cnpm install @element-plus/icons-vue

2、注册全局组件

  1. //main.js
  2. import * as ELIcons from '@element-plus/icons-vue'
  3. for (const iconName in ELIcons) {
  4.   app.component(iconName, ELIcons[iconName])
  5. }

 3、使用（左侧菜单icon）

  1. <template #title>
  2.    <el-icon>
  3.     <component :is="iconList[index]"></component>
  4.    </el-icon>
  5.    <span>{{ item.authName }}</span>
  6. </template>

3、样式初始化，使用scss变量

1、导入初始样式,导出变量值

 2、在main.js中引入

import '@/styles/index.scss'

3、配置webpack

  1. css: {
  2.     loaderOptions: {
  3.       sass: {
  4.         // 8版本用prependData:
  5.         prependData: `
  6.           @import "@/styles/variables.scss";  // scss文件地址
  7.           @import "@/styles/mixin.scss";     // scss文件地址
  8.         `
  9.       }
  10.     }
  11.   }

4、使用svg，全局注册

1、svg图标导入到项目

 2、在components文件夹下创建SvgIcon组件

  1. <template>
  2.   <svg class="svg-icon" aria-hidden="true">
  3.     <use :xlink:href="iconName"></use>
  4.   </svg>
  5. </template>
  6.  
  7. <script setup>
  8. import { defineProps, computed } from 'vue'
  9. const props = defineProps({
  10.   icon: {
  11.     type: String,
  12.     required: true
  13.   }
  14. })
  15.  
  16. const iconName = computed(() => {
  17.   return `#icon-${props.icon}`
  18. })
  19. </script>
  20.  
  21. <style lang="scss" scoped>
  22. .svg-icon {
  23.   width: 1em;
  24.   height: 1em;
  25.   vertical-align: -0.15em;
  26.   fill: currentColor;
  27.   overflow: hidden;
  28. }
  29. </style>

4、在icons 文件夹下新建index.js

  1. import SvgIcon from '@/components/SvgIcon'
  2.  
  3. const svgRequired = require.context('./svg', false, /\.svg$/)
  4. svgRequired.keys().forEach((item) => svgRequired(item))
  5.  
  6. export default (app) => {
  7.   app.component('svg-icon', SvgIcon)
  8. }

5、在main.js中引入

  1. import SvgIcon from '@/icons'
  2. const app=createApp(App)
  3. SvgIcon(app)

6、安装依赖

cnpm i --save-dev svg-sprite-loader@6.0.9

7、配置webpack

  1. const path = require('path')
  2. function resolve(dir) {
  3.   return path.join(__dirname, dir)
  4. }
  5. const webpack = require('webpack')
  6.  
  7. module.exports = {
  8. chainWebpack(config) {
  9.     // 设置 svg-sprite-loader
  10.     // config 为 webpack 配置对象
  11.     // config.module 表示创建一个具名规则，以后用来修改规则
  12.     config.module
  13.       // 规则
  14.       .rule('svg')
  15.       // 忽略
  16.       .exclude.add(resolve('src/icons'))
  17.       // 结束
  18.       .end()
  19.     // config.module 表示创建一个具名规则，以后用来修改规则
  20.     config.module
  21.       // 规则
  22.       .rule('icons')
  23.       // 正则，解析 .svg 格式文件
  24.       .test(/\.svg$/)
  25.       // 解析的文件
  26.       .include.add(resolve('src/icons'))
  27.       // 结束
  28.       .end()
  29.       // 新增了一个解析的loader
  30.       .use('svg-sprite-loader')
  31.       // 具体的loader
  32.       .loader('svg-sprite-loader')
  33.       // loader 的配置
  34.       .options({
  35.         symbolId: 'icon-[name]'
  36.       })
  37.       // 结束
  38.       .end()
  39.     config
  40.       .plugin('ignore')
  41.       .use(
  42.         new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
  43.       )
  44.     config.module
  45.       .rule('icons')
  46.       .test(/\.svg$/)
  47.       .include.add(resolve('src/icons'))
  48.       .end()
  49.       .use('svg-sprite-loader')
  50.       .loader('svg-sprite-loader')
  51.       .options({
  52.         symbolId: 'icon-[name]'
  53.       })
  54.       .end()
  55.   },
  56. }

8、使用

<svg-icon icon="user" class="svg-container"></svg-icon>

5、请求封装

1、安装axios 

cnpm i axios --save

 2、新建utils文件夹，新建auth.js设置过期时间

  1. const TOKEN_TIME = 'tokenTime'
  2.  
  3. const TOKEN_TIME_VALUE = 2 * 60 * 60 * 1000
  4.  
  5. // 登录时设置时间
  6. export const setTokenTime = () => {
  7.   localStorage.setItem(TOKEN_TIME, Date.now())
  8. }
  9.  
  10. // 获取
  11. export const getTokenTime = () => {
  12.   return localStorage.getItem(TOKEN_TIME)
  13. }
  14.  
  15. // 是否已经过期
  16. export const diffTokenTime = () => {
  17.   const currentTime = Date.now()
  18.   const tokenTime = getTokenTime()
  19.   return currentTime - tokenTime > TOKEN_TIME_VALUE
  20. }

3、新建api文件夹，新建request.js文件

  1. import axios from 'axios'
  2. import { ElMessage } from 'element-plus'
  3. import { diffTokenTime } from '@/utils/auth'
  4. import store from '@/store'
  5. const service = axios.create({
  6.   baseURL: process.env.VUE_APP_BASE_API,
  7.   timeout: 5000
  8. })
  9.  
  10. service.interceptors.request.use(
  11.   (config) => {
  12.     if (localStorage.getItem('token')) {
  13.       if (diffTokenTime()) {
  14.         store.dispatch('app/logout')
  15.         return Promise.reject(new Error('token 失效了'))
  16.       }
  17.     }
  18.     config.headers.Authorization = localStorage.getItem('token')
  19.     return config
  20.   },
  21.   (error) => {
  22.     return Promise.reject(new Error(error))
  23.   }
  24. )
  25.  
  26. service.interceptors.response.use(
  27.   (response) => {
  28.     const { data, meta } = response.data
  29.     if (meta.status === 200 || meta.status === 201) {
  30.       return data
  31.     } else {
  32.       ElMessage.error(meta.msg)
  33.       return Promise.reject(new Error(meta.msg))
  34.     }
  35.   },
  36.   (error) => {
  37.     console.log(error.response)
  38.     error.response && ElMessage.error(error.response.data)
  39.     return Promise.reject(new Error(error.response.data))
  40.   }
  41. )
  42. export default service

4、本地跨域配置

  1.   devServer: {
  2.     https: false,
  3.     hotOnly: false,
  4.     open:true,
  5.     port:9000,
  6.     proxy: {
  7.       '/api': {
  8.         target: 'https://*******/api/private/v1/',
  9.         changeOrigin: true,
  10.         pathRewrite: {
  11.           '^/api': ''
  12.         }
  13.       }
  14.     }
  15.   },

5、全局坏境变量定义

 新建 .env.development、.env.production文件

  1. ENV = 'development'
  2.  
  3. VUE_APP_BASE_API = '/api'
  1. ENV = 'production'
  2.  
  3. VUE_APP_BASE_API = '/prod-api'

6、全局导航守卫 

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  2.  
  3. const routes = [
  4.   {
  5.     path: '/login',
  6.     name: 'Login',
  7.     component: () => import('../views/login/index.vue')
  8.   },
  9.   {
  10.     path: '/',
  11.     name: '/',
  12.     component: () => import('../layout'),
  13.     redirect: '/users',
  14.     children: [
  15.       {
  16.         path: 'users',
  17.         name: 'users',
  18.         component: () => import('@/views/users/index.vue')
  19.       },
  20.       {
  21.         path: 'categories',
  22.         name: 'categories',
  23.         component: () => import('@/views/categories/index.vue')
  24.       },
  25.       {
  26.         path: 'goods',
  27.         name: 'goods',
  28.         component: () => import('@/views/goods/index.vue')
  29.       },
  30.       {
  31.         path: 'orders',
  32.         name: 'orders',
  33.         component: () => import('@/views/orders/index.vue')
  34.       },
  35.       {
  36.         path: 'params',
  37.         name: 'params',
  38.         component: () => import('@/views/params/index.vue')
  39.       },
  40.       {
  41.         path: 'reports',
  42.         name: 'reports',
  43.         component: () => import('@/views/reports/index.vue')
  44.       },
  45.       {
  46.         path: 'rights',
  47.         name: 'rights',
  48.         component: () => import('@/views/rights/index.vue')
  49.       },
  50.       {
  51.         path: 'roles',
  52.         name: 'roles',
  53.         component: () => import('@/views/roles/index.vue')
  54.       }
  55.     ]
  56.   }
  57. ]
  58.  
  59.  
  60. const router = createRouter({
  61.   history: createWebHashHistory(),
  62.   routes
  63. })
  64.  
  65. export default router

1、新建router/permission.js

  1. import router from './index'
  2. import store from '@/store'
  3.  
  4. const whiteList = ['/login']
  5. router.beforeEach((to, from, next) => {
  6.   if (store.getters.token) {
  7.     if (to.path === '/login') {
  8.       next('/')
  9.     } else {
  10.       next()
  11.     }
  12.   } else {
  13.     if (whiteList.includes(to.path)) {
  14.       next()
  15.     } else {
  16.       next('/login')
  17.     }
  18.   }
  19. })

2、main.js引入 

import '@/router/permission'

5、登录 

1、新增登录界面login/index.vue

  1. <template>
  2.   <div class="login-container">
  3.     <el-form ref="loginFormRef" :model="loginForm" class="login-form" :rules="rules">
  4.       <div class="title-container">
  5.         <h3 class="title">后台管理系统</h3>
  6.       </div>
  7.       <el-form-item prop="username">
  8.         <svg-icon icon="user" class="svg-container"></svg-icon>
  9.         <el-input v-model="loginForm.username"></el-input>
  10.       </el-form-item>
  11.       <el-form-item prop="password">
  12.         <svg-icon icon="password" class="svg-container"></svg-icon>
  13.         <el-input v-model="loginForm.password" :type="passwordType"></el-input>
  14.         <svg-icon
  15.           class="svg-container"
  16.           :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
  17.           @click="changeType"
  18.         ></svg-icon>
  19.       </el-form-item>
  20.       <el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
  21.     </el-form>
  22.   </div>
  23. </template>
  24.  
  25. <script setup>
  26. import { ref,reactive} from 'vue'
  27. import { useStore } from 'vuex'
  28. const store = useStore()
  29. const loginForm = reactive({
  30.   username: 'admin',
  31.   password: '123456'
  32. })
  33.  
  34. const rules = reactive({
  35.   username: [
  36.     { required: true, message: '请输入用户名', trigger: 'blur' },
  37.   ],
  38.   password: [
  39.     {
  40.       required: true,
  41.       message: '请输入密码',
  42.       trigger: 'blur'
  43.     }
  44.   ]
  45. })
  46.  
  47. const loginFormRef = ref(null)
  48. const handleLogin = () => {
  49.   loginFormRef.value.validate(async (valid) => {
  50.     if (valid) {
  51.       store.dispatch('app/login', loginForm)
  52.     } else {
  53.       console.log('error submit!!')
  54.       return false
  55.     }
  56.   })
  57. }
  58.  
  59. const passwordType = ref('password')
  60. const changeType = () => {
  61.   if (passwordType.value === 'password') {
  62.     passwordType.value = 'text'
  63.   } else {
  64.     passwordType.value = 'password'
  65.   }
  66. }
  67. </script>
  68.  
  69. <style lang="scss" scoped>
  70. $bg: #2d3a4b;
  71. $dark_gray: #889aa4;
  72. $light_gray: #eee;
  73. $cursor: #fff;
  74.  
  75. .login-container {
  76.   min-height: 100%;
  77.   width: 100%;
  78.   background-color: $bg;
  79.   overflow: hidden;
  80.  
  81.   .login-form {
  82.     position: relative;
  83.     width: 520px;
  84.     max-width: 100%;
  85.     padding: 160px 35px 0;
  86.     margin: 0 auto;
  87.     overflow: hidden;
  88.  
  89.     :deep(.el-form-item) {
  90.       border: 1px solid rgba(255, 255, 255, 0.1);
  91.       background: rgba(0, 0, 0, 0.1);
  92.       border-radius: 5px;
  93.       color: #454545;
  94.       height: 50px;
  95.       .el-input{
  96.         flex:1;
  97.         .el-input__wrapper{
  98.           background-color:transparent;
  99.           box-shadow: none;
  100.           .el-input__inner{
  101.              color: #fff;
  102.           }
  103.         }
  104.       }
  105.     }
  106.     .login-button {
  107.       width: 100%;
  108.       box-sizing: border-box;
  109.     }
  110.   }
  111.  
  112.   .tips {
  113.     font-size: 16px;
  114.     line-height: 28px;
  115.     color: #fff;
  116.     margin-bottom: 10px;
  117.  
  118.     span {
  119.       &:first-of-type {
  120.         margin-right: 16px;
  121.       }
  122.     }
  123.   }
  124.  
  125.   .svg-container {
  126.     padding: 6px 5px 6px 15px;
  127.     color: $dark_gray;
  128.     vertical-align: middle;
  129.     display: inline-block;
  130.   }
  131.  
  132.   .title-container {
  133.     position: relative;
  134.  
  135.     .title {
  136.       font-size: 26px;
  137.       color: $light_gray;
  138.       margin: 0px auto 40px auto;
  139.       text-align: center;
  140.       font-weight: bold;
  141.     }
  142.  
  143.     :deep(.lang-select) {
  144.       position: absolute;
  145.       top: 4px;
  146.       right: 0;
  147.       background-color: white;
  148.       font-size: 22px;
  149.       padding: 4px;
  150.       border-radius: 4px;
  151.       cursor: pointer;
  152.     }
  153.   }
  154.  
  155.   .show-pwd {
  156.     // position: absolute;
  157.     // right: 10px;
  158.     // top: 7px;
  159.     font-size: 16px;
  160.     color: $dark_gray;
  161.     cursor: pointer;
  162.     user-select: none;
  163.   }
  164. }
  165. </style>

2、新建api/login.js

  1. import request from './request'
  2.  
  3. export const login = (data) => {
  4.   return request({
  5.     url: '/login',
  6.     method: 'POST',
  7.     data
  8.   })
  9. }

3、新建store/modules/app.js

  1. import { login as loginApi } from '@/api/login'
  2. import router from '@/router'
  3. import { setTokenTime } from '@/utils/auth'
  4. export default {
  5.   namespaced: true,
  6.   state: () => ({
  7.     token: localStorage.getItem('token') || '',
  8.     siderType: true,
  9.   }),
  10.   mutations: {
  11.     setToken(state, token) {
  12.       state.token = token
  13.       localStorage.setItem('token', token)
  14.     },
  15.     changeSiderType(state) {
  16.       state.siderType = !state.siderType
  17.     },
  18.   },
  19.   actions: {
  20.     login({ commit }, userInfo) {
  21.       return new Promise((resolve, reject) => {
  22.         loginApi(userInfo)
  23.           .then((res) => {
  24.             console.log(res)
  25.             commit('setToken', res.token)
  26.             setTokenTime()
  27.             router.replace('/')
  28.             resolve()
  29.           })
  30.           .catch((err) => {
  31.             reject(err)
  32.           })
  33.       })
  34.     },
  35.     // 退出
  36.     logout({ commit }) {
  37.       commit('setToken', '')
  38.       localStorage.clear()
  39.       router.replace('/login')
  40.     }
  41.   }
  42. }

4、store/getters.js、store/index.js

  1. export default {
  2.   token: (state) => state.app.token,
  3.   siderType: (state) => state.app.siderType,
  4. }
  1. import { createStore } from 'vuex'
  2. import app from './modules/app'
  3. import getters from './getters'
  4. export default createStore({
  5.   modules: {
  6.     app
  7.   },
  8.   getters
  9. })

3、Layout 布局

  1. <template>
  2.     <el-container class="content_wrapper">
  3.       <el-aside :width="asideWidth" class="sidebar-container">
  4.         <Menu />
  5.       </el-aside>
  6.       <el-container
  7.       class="right_container"
  8.       :class="{ hidderContainer: !$store.getters.siderType }"
  9.     >
  10.       <el-header><Headers /></el-header>
  11.       <el-main>
  12.         <router-view />
  13.       </el-main>
  14.     </el-container>
  15.     </el-container>
  16. </template>
  17.  
  18.  
  19. <script setup>
  20. import Menu from './Menu'
  21. import Headers from './headers'
  22. import { computed } from 'vue'
  23. import variables from '@/styles/variables.scss'
  24. import { useStore } from 'vuex'
  25. const store = useStore()
  26. // const asideWidth = ref(variables.sideBarWidth)
  27. const asideWidth = computed(() => {
  28.   return store.getters.siderType
  29.     ? variables.sideBarWidth
  30.     : variables.hideSideBarWidth
  31. })
  32. </script>
  33.  
  34. <style lang="scss" scoped>
  35.  
  36.   .content_wrapper{
  37.      width: 100%;
  38.     height: 100%;
  39.     display: flex;
  40.     align-items: center;
  41.     :deep(.sidebar-container){
  42.       flex-shrink: 0;
  43.     }
  44.     :deep(.right_container){
  45.       flex:1;
  46.       height: 100%;
  47.     }
  48.   }
  49.  
  50. </style>

1、左侧菜单 新建layout/Menu/index.vue

  1. <template>
  2.   <el-menu
  3.     active-text-color="#ffd04b"
  4.     :background-color="variables.menuBg"
  5.     class="el-menu-vertical-demo"
  6.     :default-active="defaultActive"
  7.     text-color="#fff"
  8.     router
  9.     unique-opened
  10.     :collapse="!$store.getters.siderType"
  11.   >
  12.     <el-sub-menu
  13.       :index="item.id+''"
  14.       v-for="(item, index) in menusList"
  15.       :key="item.id"
  16.     >
  17.       <template #title>
  18.         <el-icon>
  19.           <component :is="iconList[index]"></component>
  20.         </el-icon>
  21.         <span>{{ item.authName }}</span>
  22.       </template>
  23.       <el-menu-item
  24.         :index="'/' + it.path"
  25.         v-for="it in item.children"
  26.         :key="it.id"
  27.         @click="savePath(it.path)"
  28.       >
  29.         <template #title>
  30.           <el-icon>
  31.             <component :is="icon"></component>
  32.           </el-icon>
  33.           <span>{{  it.authName  }}</span>
  34.         </template>
  35.       </el-menu-item>
  36.     </el-sub-menu>
  37.   </el-menu>
  38. </template>
  39.  
  40. <script setup>
  41. import { menuList } from '@/api/menu'
  42. import { ref } from 'vue'
  43. import variables from '@/styles/variables.scss'
  44.  
  45. const iconList = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart'])
  46. const icon = ref('menu')
  47.  
  48. const defaultActive = ref(sessionStorage.getItem('path') || '/users')
  49. const menusList = ref([])
  50. const initMenusList = async () => {
  51.   menusList.value = await menuList()
  52. }
  53. initMenusList()
  54.  
  55. const savePath = (path) => {
  56.   sessionStorage.setItem('path', `/${path}`)
  57. }
  58. </script>
  59.  
  60. <style lang="scss" scoped></style>

menu数据 

  1. {
  2.   "data": [
  3.     {
  4.       "id": 125,
  5.       "authName": "用户管理",
  6.       "path": "users",
  7.       "children": [
  8.         {
  9.           "id": 110,
  10.           "authName": "用户列表",
  11.           "path": "users",
  12.           "children": [
  13.             
  14.           ],
  15.           "order": null
  16.         }
  17.       ],
  18.       "order": 1
  19.     },
  20.     {
  21.       "id": 103,
  22.       "authName": "权限管理",
  23.       "path": "rights",
  24.       "children": [
  25.         {
  26.           "id": 111,
  27.           "authName": "角色列表",
  28.           "path": "roles",
  29.           "children": [
  30.             
  31.           ],
  32.           "order": null
  33.         },
  34.         {
  35.           "id": 112,
  36.           "authName": "权限列表",
  37.           "path": "rights",
  38.           "children": [
  39.             
  40.           ],
  41.           "order": null
  42.         }
  43.       ],
  44.       "order": 2
  45.     },
  46.     {
  47.       "id": 101,
  48.       "authName": "商品管理",
  49.       "path": "goods",
  50.       "children": [
  51.         {
  52.           "id": 104,
  53.           "authName": "商品列表",
  54.           "path": "goods",
  55.           "children": [
  56.             
  57.           ],
  58.           "order": 1
  59.         },
  60.         {
  61.           "id": 115,
  62.           "authName": "分类参数",
  63.           "path": "params",
  64.           "children": [
  65.             
  66.           ],
  67.           "order": 2
  68.         },
  69.         {
  70.           "id": 121,
  71.           "authName": "商品分类",
  72.           "path": "categories",
  73.           "children": [
  74.             
  75.           ],
  76.           "order": 3
  77.         }
  78.       ],
  79.       "order": 3
  80.     },
  81.     {
  82.       "id": 102,
  83.       "authName": "订单管理",
  84.       "path": "orders",
  85.       "children": [
  86.         {
  87.           "id": 107,
  88.           "authName": "订单列表",
  89.           "path": "orders",
  90.           "children": [
  91.             
  92.           ],
  93.           "order": null
  94.         }
  95.       ],
  96.       "order": 4
  97.     },
  98.     {
  99.       "id": 145,
  100.       "authName": "数据统计",
  101.       "path": "reports",
  102.       "children": [
  103.         {
  104.           "id": 146,
  105.           "authName": "数据报表",
  106.           "path": "reports",
  107.           "children": [
  108.             
  109.           ],
  110.           "order": null
  111.         }
  112.       ],
  113.       "order": 5
  114.     }
  115.   ],
  116.   "meta": {
  117.     "msg": "获取菜单列表成功",
  118.     "status": 200
  119.   }
  120. }

2、右侧头部

  1. <template>
  2.   <div class="navbar">
  3.     <Hamburger />
  4.     <Breadcrumb />
  5.     <div class="navbar-right">
  6.       <Driver class="navbar-item" />
  7.       <screen-full class="navbar-item" />
  8.       <Avatar class="navbar-item" />
  9.     </div>
  10.   </div>
  11. </template>
  12.  
  13. <script setup>
  14. import Hamburger from './components/hamburger.vue'
  15. import Breadcrumb from './components/breadcrumb.vue'
  16. import Avatar from './components/avatar.vue'
  17. import ScreenFull from './components/screenFull.vue'
  18. import Driver from './components/driver'
  19. </script>
  20.  
  21. <style lang="scss" scoped>
  22. .navbar {
  23.   width: 100%;
  24.   height: 60px;
  25.   overflow: hidden;
  26.   background-color: #fff;
  27.   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  28.   padding: 0 16px;
  29.   display: flex;
  30.   align-items: center;
  31.   box-sizing: border-box;
  32.   position: relative;
  33.   .navbar-right {
  34.     flex: 1;
  35.     display: flex;
  36.     align-items: center;
  37.     justify-content: flex-end;
  38.     ::v-deep .navbar-item {
  39.       display: inline-block;
  40.       margin-left: 18px;
  41.       font-size: 22px;
  42.       color: #5a5e66;
  43.       box-sizing: border-box;
  44.       cursor: pointer;
  45.     }
  46.   }
  47. }
  48. </style>

1、hamburger.vue 控制左侧菜单折叠展开

  1. <template>
  2.   <div class="hamburger-container" @click="toggleClick" id="hamburger">
  3.     <svg-icon :icon="icon"></svg-icon>
  4.   </div>
  5. </template>
  6.  
  7. <script setup>
  8. import { useStore } from 'vuex'
  9. import { computed } from 'vue'
  10. const store = useStore()
  11. const toggleClick = () => {
  12.   store.commit('app/changeSiderType')
  13. }
  14. const icon = computed(() => {
  15.   return store.getters.siderType ? 'hamburger-opened' : 'hamburger-closed'
  16. })
  17. </script>
  18.  
  19. <style lang="scss" scoped>
  20. .hamburger-container {
  21.   margin-right: 16px;
  22.   box-sizing: border-box;
  23.   cursor: pointer;
  24. }
  25. </style>

2、breadcrumb.vue 面包屑导航

  1. <template>
  2.   <el-breadcrumb separator="/">
  3.     <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
  4.       <span class="no-redirect" v-if="index === breadcrumbList.length - 1">{{
  5.         item.name
  6.       }}</span>
  7.       <span class="redirect" v-else @click="handleRedirect(item.path)">{{
  8.       item.name
  9.       }}</span>
  10.     </el-breadcrumb-item>
  11.   </el-breadcrumb>
  12. </template>
  13.  
  14. <script setup>
  15. import { watch, ref } from 'vue'
  16. import { useRoute, useRouter } from 'vue-router'
  17. const route = useRoute()
  18. const router = useRouter()
  19.  
  20. const breadcrumbList = ref([])
  21.  
  22. const initBreadcrumbList = () => {
  23.   breadcrumbList.value = route.matched
  24.   console.log(route.matched)
  25. }
  26. const handleRedirect = (path) => {
  27.   router.push(path)
  28. }
  29.  
  30. watch(
  31.   route,
  32.   () => {
  33.     initBreadcrumbList()
  34.   },
  35.   { deep: true, immediate: true }
  36. )
  37. </script>
  38.  
  39. <style lang="scss" scoped>
  40. .no-redirect {
  41.   color: #97a8be;
  42.   cursor: text;
  43. }
  44. .redirect {
  45.   color: #666;
  46.   font-weight: 600;
  47.   cursor: pointer;
  48.   &:hover {
  49.     color: $menuBg;
  50.   }
  51. }
  52. </style>

3、screenFull.vue 全屏组件

1、安装

cnpm i screenfull --save

2、使用

  1. <template>
  2.   <div @click="handleFullScreen" id="screenFul">
  3.     <svg-icon :icon="icon ? 'exit-fullscreen' : 'fullscreen'"></svg-icon>
  4.   </div>
  5. </template>
  6.  
  7. <script setup>
  8. import screenfull from 'screenfull'
  9. import { ref, onMounted, onBeforeMount } from 'vue'
  10.  
  11. const icon = ref(screenfull.isFullscreen)
  12. const handleFullScreen = () => {
  13.   if (screenfull.isEnabled) {
  14.     screenfull.toggle()
  15.   }
  16. }
  17.  
  18. const changeIcon = () => {
  19.   icon.value = screenfull.isFullscreen
  20. }
  21.  
  22. onMounted(() => {
  23.   screenfull.on('change', changeIcon)
  24. })
  25.  
  26. onBeforeMount(() => {
  27.   screenfull.off('change')
  28. })
  29. </script>
  30.  
  31. <style lang="scss" scoped></style>

4、driver引导组件

1、安装

cnpm i driver.js --save

2、使用

  1. <template>
  2.   <div id="guide" @click.prevent.stop="handleGuide">
  3.     <svg-icon icon="guide"></svg-icon>
  4.   </div>
  5. </template>
  6.  
  7. <script setup>
  8. import Driver from 'driver.js'
  9. import 'driver.js/dist/driver.min.css'
  10. import { onMounted } from 'vue'
  11. const steps=[
  12.   {
  13.     element: '#guide',
  14.     popover: {
  15.       title: 'guideBtn',
  16.       description: 'Body of the popover',
  17.       position: 'left'
  18.     }
  19.   },
  20.   {
  21.     element: '#hamburger',
  22.     popover: {
  23.       title: 'hamburgerBtn',
  24.       description: 'Body of the popover',
  25.       position: 'bottom'
  26.     }
  27.   },
  28.   {
  29.     element: '#screenFul',
  30.     popover: {
  31.       title: 'fullScreen',
  32.       description: 'Body of the popover',
  33.       position: 'left'
  34.     }
  35.   }
  36. ]
  37.  
  38. let driver
  39. onMounted(() => {
  40.   initDriver()
  41. })
  42. const initDriver = () => {
  43.   driver = new Driver({
  44.     animate: false, // Whether to animate or not
  45.     opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
  46.     padding: 10, // Distance of element from around the edges
  47.     allowClose: true, // Whether the click on overlay should close or not
  48.     overlayClickNext: false, // Whether the click on overlay should move next
  49.     doneBtnText: 'doneBtnText', // Text on the final button
  50.     closeBtnText: 'closeBtnText', // Text on the close button for this step
  51.     stageBackground: '#ffffff', // Background color for the staged behind highlighted element
  52.     nextBtnText: 'nextBtnText', // Next button text for this step
  53.     prevBtnText: 'prevBtnText' // Previous button text for this step
  54.   })
  55. }
  56.  
  57.  
  58. const handleGuide = () => {
  59.   driver.defineSteps(steps)
  60.   driver.start()
  61. }
  62. </script>
  63.  
  64. <style lang="scss" scoped></style>

 5、头像下拉 退出

  1. <template>
  2.   <el-dropdown>
  3.     <span class="el-dropdown-link">
  4.       <el-avatar shape="square" :size="40" :src="squareUrl"></el-avatar>
  5.     </span>
  6.     <template #dropdown>
  7.       <el-dropdown-menu>
  8.         <el-dropdown-item @click="logout">退出</el-dropdown-item>
  9.       </el-dropdown-menu>
  10.     </template>
  11.   </el-dropdown>
  12. </template>
  13.  
  14. <script setup>
  15. import { ref } from 'vue'
  16. import { useStore } from 'vuex'
  17. const store = useStore()
  18.  
  19. const squareUrl = ref(
  20.   'https://img0.baidu.com/it/u=1056811702,4111096278&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  21. )
  22.  
  23. const logout = () => {
  24.   store.dispatch('app/logout')
  25. }
  26. </script>
  27.  
  28. <style lang="scss" scoped>
  29. ::v-deep .el-dropdown-menu__item {
  30.   white-space: nowrap;
  31. }
  32. </style>

4、用户管理开发

1、搜索功能 、结果列表展示

  1. <template>
  2.   <el-card class="users">
  3.     <div class="top">
  4.         <div class="search_box">
  5.            <el-input
  6.               v-model="queryForm.query"
  7.               clearable
  8.               placeholder="请输入用户名"
  9.             />
  10.         </div>
  11.           <el-button type="primary" :icon="Search" @click="getUsersTableData">查询</el-button>
  12.           <el-button type="primary" :icon="Plus" @click="handleDialogValue()">新增用户</el-button>
  13.     </div>
  14.     <div class="bottom">
  15.     <el-table class="users_table" :data="tableData" border style="width: 100%">
  16.       <el-table-column  align="center" :key="index" v-for="(item,index) in options" :prop="item.prop" :label="item.label" :width="item.width">
  17.         <template v-slot="{row}" v-if="item.prop=='mg_state'">
  18.           <el-switch v-model="row.mg_state" @change='changeState(row)' />
  19.         </template>
  20.         <template v-slot="{row}" v-else-if="item.prop=='create_time'">
  21.           {{$filters.filterTimes(row.create_time)}}
  22.         </template>
  23.         <template #default="{row}"  v-else-if="item.prop=='action'">
  24.           <el-button size="small" :icon="Edit" type="primary" @click="handleDialogValue(row)"></el-button>
  25.           <el-button size="small" :icon="Setting" type="warning"></el-button>
  26.           <el-button size="small" :icon="Delete" type="danger" @click="delUser(row)"></el-button>
  27.         </template>
  28.       </el-table-column>
  29.     </el-table>
  30.     <el-pagination
  31.       background
  32.       v-model:currentPage="queryForm.pagenum"
  33.       v-model:page-size="queryForm.pagesize"
  34.       :page-sizes="[1, 2, 5, 10]"
  35.       layout="total, sizes, prev, pager, next, jumper"
  36.       :total="total"
  37.       @size-change="handleSizeChange"
  38.       @current-change="handleCurrentChange"
  39.     />
  40.     </div>
  41.   </el-card>
  42.   <Dialog v-model="dialogVisible" :dialogTableValue="dialogTableValue" @initUserList="getUsersTableData" :dialogTitle="dialogTitle" v-if="dialogVisible" />
  43. </template>
  44.  
  45. <script setup>
  46. import {  Search,Edit,Setting,Delete,Plus } from '@element-plus/icons-vue'
  47. import { ref,reactive,onMounted } from 'vue'
  48. import { getUsersList,changeUserState,deleteUser } from '@/api/users'
  49. import { ElMessage,ElMessageBox} from 'element-plus'
  50. import { isNull } from '@/utils/filters'
  51. import Dialog from './components/dialog'
  52. const options = [
  53.   {
  54.     label:'username',
  55.     prop:'username'
  56.   },
  57.   {
  58.     label:'email',
  59.     prop:'email'
  60.   },
  61.   {
  62.     label:'mobile',
  63.     prop:'mobile'
  64.   },
  65.   {
  66.     label:'role_name',
  67.     prop:'role_name'
  68.   },
  69.   {
  70.     label:'mg_state',
  71.     prop:'mg_state'
  72.   },
  73.   {
  74.     label:'create_time',
  75.     prop:'create_time'
  76.   },
  77.   {
  78.     label:'action',
  79.     prop:'action',
  80.     width:'200px'
  81.   },
  82. ]
  83.  
  84.   let dialogVisible = ref(false)
  85.   let dialogTitle = ref('新增用户')
  86.   let queryForm = reactive({
  87.     query:'',
  88.     pagenum:1,
  89.     pagesize:10
  90.   })
  91.   const total = ref(0)
  92.   let tableData = ref([])
  93.   let dialogTableValue= ref({})
  94.   const getUsersTableData= async ()=>{
  95.     let res = await getUsersList(queryForm)
  96.     tableData.value=res.users
  97.     total.value=res.total
  98.   }
  99.   getUsersTableData()
  100.  const handleSizeChange = (pagesize)=>{
  101.    queryForm.pagesize=pagesize;
  102.      getUsersTableData()
  103.  }
  104.  const handleCurrentChange = (pagenum)=>{
  105.     queryForm.pagenum=pagenum;
  106.      getUsersTableData()
  107.  }
  108.  const changeState= async (row)=>{
  109.    let {id,mg_state} = row
  110.    let res = await changeUserState(id,mg_state)
  111.    console.log(res,'更改状态')
  112.     ElMessage({
  113.     message: '更新成功',
  114.     type: 'success',
  115.   })
  116.  }
  117.  const handleDialogValue = (row)=>{
  118.    if(isNull(row)){
  119.      dialogTitle.value='新增用户'
  120.      dialogTableValue.value={}
  121.    }else{
  122.      dialogTitle.value='编辑用户'
  123.      dialogTableValue.value=JSON.parse(JSON.stringify(row))
  124.    }
  125.    dialogVisible.value=true
  126.  }
  127.  const delUser = (row) =>{
  128.     ElMessageBox.confirm(
  129.     '您确定要删除改数据吗?',
  130.     '删除',
  131.     {
  132.       confirmButtonText: '确定',
  133.       cancelButtonText: '取消',
  134.       type: 'warning',
  135.        draggable: true,
  136.     }
  137.   )
  138.     .then(async () => {
  139.       await deleteUser(row.id)
  140.       getUsersTableData()
  141.       ElMessage({
  142.         type: 'success',
  143.         message: '删除成功！',
  144.       })
  145.     })
  146.     .catch(() => {
  147.       ElMessage({
  148.         type: 'info',
  149.         message: '取消删除！',
  150.       })
  151.     })
  152.  }
  153. </script>
  154.  
  155. <style lang="scss" scoped>
  156. .users{
  157.   width: 100%;
  158.   height: 100%;
  159.   box-sizing: border-box;
  160.   :deep(.el-card__body){
  161.     display: flex;
  162.     flex-direction: column;
  163.     width: 100%;
  164.     height: 100%;
  165.     .top{
  166.     flex-shrink: 0;
  167.     width: 100%;
  168.      height: 60px;
  169.     display: flex;
  170.     align-items: center;
  171.     .search_box{
  172.       width: 300px;
  173.       margin-right: 15px;
  174.     }
  175.   }
  176.   .bottom{
  177.     width: 100%;
  178.     flex:1;
  179.     display: flex;
  180.     flex-direction: column;
  181.     .users_table{
  182.        flex:1;
  183.     }
  184.     .el-pagination{
  185.       justify-content: flex-end;
  186.     }
  187.   }
  188.   }
  189.  
  190. }
  191. </style>

2、新建components/dialog.vue 新增、编辑用户弹框组件

  1. <template>
  2. <el-dialog
  3.     :model-value="dialogVisible"
  4.     :title="dialogTitle"
  5.     width="30%"
  6.     @close="handleClose"
  7.   >
  8.      <el-form ref="formRef" :model="form" label-width="70px" :rules="rules">
  9.     <el-form-item label="用户名" prop="username">
  10.       <el-input v-model="form.username" />
  11.     </el-form-item>
  12.     <el-form-item label="密码" prop="password" v-if="dialogTitle==='新增用户'">
  13.       <el-input type="password" v-model="form.password" />
  14.     </el-form-item>
  15.     <el-form-item label="邮箱" prop="email">
  16.       <el-input  v-model="form.email" />
  17.     </el-form-item>
  18.      <el-form-item label="手机号" prop="mobile">
  19.       <el-input type="number"  v-model="form.mobile" />
  20.     </el-form-item>
  21.      </el-form>
  22.     <template #footer>
  23.       <span class="dialog-footer">
  24.         <el-button @click="handleClose">取消</el-button>
  25.         <el-button type="primary" @click="handleConfirm"
  26.           >保存</el-button
  27.         >
  28.       </span>
  29.     </template>
  30.   </el-dialog>
  31. </template>
  32. <script setup>
  33. import { ref,reactive,defineEmits,defineProps,watch} from  'vue'
  34. import { addUser,editUser } from "@/api/users"
  35. import { ElMessage } from 'element-plus'
  36. const formRef = ref(null)
  37. let form = reactive({
  38.   username:'',
  39.   password:'',
  40.   email:'',
  41.   mobile:''
  42. })
  43. const rules = reactive({
  44.   username:[
  45.     { required: true, message: '请输入用户名', trigger: 'blur' },
  46.   ],
  47.   password:[
  48.     { required: true, message: '请输入密码', trigger: 'blur' },
  49.   ],
  50.   email:[
  51.     { required: true, message: '请输入邮箱', trigger: 'blur' },
  52.   ],
  53.   mobile:[
  54.     { required: true, message: '请输入手机号', trigger: 'blur' },
  55.   ],
  56. })
  57. const props = defineProps({
  58.   dialogTitle:{
  59.     type:String,
  60.     default:'',
  61.     required:true
  62.   },
  63.   dialogTableValue:{
  64.     type:Object,
  65.     default:()=>{}
  66.   }
  67. })
  68.  
  69. const emits= defineEmits(['update:modelValue','initUserList'])
  70. const handleClose =()=>{
  71.   emits('update:modelValue',false)
  72. }
  73. const handleConfirm = ()=>{
  74.   formRef.value.validate(async (valid) => {
  75.     if (valid) {
  76.       props.dialogTitle==='新增用户'?await addUser(form): await editUser(form)
  77.       props.dialogTitle==='新增用户'? ElMessage({
  78.         message: '创建成功',
  79.         type: 'success',
  80.       }):ElMessage({
  81.         message: '更新成功',
  82.         type: 'success',
  83.       })
  84.  
  85.       emits('initUserList')
  86.        handleClose()
  87.     } else {
  88.       console.log('error submit!!')
  89.       return false
  90.     }
  91.   })
  92. }
  93. watch(()=>props.dialogTableValue,()=>{
  94.   console.log('1',props.dialogTableValue);
  95.   form=props.dialogTableValue
  96. },{deep:true,immediate:true})
  97. </script>
  98. <style lang='scss' scoped>
  99. </style>

3、新建全局时间过滤器

1、安装dayjs

cnpm i dayjs --save

2、新建utils/filters.js

  1.  
  2. import dayjs from 'dayjs'
  3.  
  4. const filterTimes = (val,format='YYYY-MM-DD') =>{
  5.   if(!isNull(val)){
  6.     val = parseInt(val)*1000
  7.     return dayjs(val).format(format)
  8.   }else{
  9.     return '--'
  10.   }
  11. }
  12.  
  13. export const isNull = (val)=>{
  14.   if(!val) return true
  15.   if(JSON.stringify(val)==="{}") return true
  16.   if(JSON.stringify(val)==="[]") return true
  17. }
  18.  
  19. export default (app)=>{
  20.   app.config.globalProperties.$filters={
  21.     filterTimes
  22.   }
  23. }

3、main.js传入app

  1. import filters from './utils/filters'
  2. filters(app)

4、使用

  1. <template v-slot="{row}" v-else-if="item.prop=='create_time'">
  2.    {{$filters.filterTimes(row.create_time)}}
  3. </template>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58837
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号