后台管理系统

小阳生煎

已于 2023-12-16 16:31:47 修改

阅读量2.1k

点赞数

分类专栏： # Element 文章标签： vue.js javascript

于 2021-10-22 09:52:30 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/120899913

版权

项目参考

//大裤衩
高配参考  vben-admin
低配参考

高配参考
 低配参考
这边运行不成功根据提示安装需要安装的然后就成功了
请前往
本人亲自验证

若依后台

这个是使用mock数据的后台的码云地址

这个是mock+后台的参考

https://gitee.com/full-stack-5755/vue-admin-block?_from=gitee_search

//vue3的项目
账号密码
账户密码 coderwhy  123456
https://gitee.com/wang_jianhua_1230/vite2-vue3-ts-element-plus.git

花裤衩的框架梯子
https://gitee.com/panjiachen/vue-admin-template?_from=gitee_search

1环境的配置

区分开发、测试、生产环境
package.json中添加一个test打包命令

  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test"
  },

1 在根目录下创建一个.env.development 是开发环境

VUE_APP_URL = 'https://www.easy-mock.com/mock/5d6cbe39fb84500aa8f810fe/vuetest'
VUE_APP_xxx = '可以自己定义你需要的变量，但是要以VUE_APP_开头'

2 创建.env.test 为测试环境同上
3 创建.env.production 为生产环境同上

开发：npm run serve
测试：npm run test
生产：npm run build

2封装使用axios

https://blog.csdn.net/m0_53912016/article/details/116524039

使用ele

在main.js全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

动态实现侧边栏面包屑(常规)

router -index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home,
    //这个是router
    children:[
      {
   
        path: '/index',
        name: 'index',
        meta: {
    title: '首页' },
        component: () => import('../components/home/index.vue')
      },
      // 权限配置
      {
   
      path: '/jurisdiction',
      name: 'jurisdiction',
      redirect: '/page',
      meta: {
    title: '权限配置' },
      component: () => import('@/components/home/leftSide/jurisdiction/index.vue'),
      children:[
        {
   
          path: '/page',
          name: 'page',
          meta: {
    title: '页面' },//这个是展示面包屑的
          component: () => import('../components/home/leftSide/jurisdiction/page.vue')
        },
        {
   
          path: '/instruct',
          name: 'instruct',
          meta: {
    title: '指令' },
          component: () => import('../components/home/leftSide/jurisdiction/instruct.vue')
        },
        {
   
          path: '/role',
          name: 'role',
          meta: {
    title: '角色' },
          component: () => import('../components/home/leftSide/jurisdiction/role.vue')
        },
      ]
     },
    ]
  },
 
  {
    path: '/login', name: 'login', component: () => import('@/views/login.vue') },
  {
   
    path: '/notFind',
    name: 'notFind',
    component: () => import('../views/err/notFide.vue')
  },
]

const router = new VueRouter({
   
  routes
})

export default router

header.vue

!<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{
   {
   item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      breadList: []
    };
  },
  watch: {
   
    $route(val) {
   
      this.getBreadcrumb(val);
    }
  },
  methods: {
   
    getBreadcrumb(val) {
   
      if (val.matched) {
   
        let matched = val.matched.filter(item => item.meta && item.meta.title);
        this.breadList = matched;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

参考

动态实现面包屑(可删/背景)

//使用饿了的tag标签 根据选项添加
//如上所示 把上方的标签变成你需要的标签 然后渲染

在这里插入图片描述

    其次 如果使用tag来定义 
    需要你在侧边栏2级去掉对应的meta 只保留子的部分
    要不然点击一个 父的部分与子的部分都出现

侧边栏生成

强制刷新input的数值
  this.$forceUpdate()

多级导航菜单递归动态加载

这个是我自己写的可以直通这个
// json数据参考

      menuData: [
        {
   
          id: 1,
          path: "/a",
          name: "AdminIndex",
          nameZh: "首页",
          iconCls: "el-icon-s-home",
          component: "AdminIndex",
          parentId: 0,
          children: null
        },
        {
   
          id: 2,
          path: "/admin",
          name: "User",
          nameZh: "用户管理",
          iconCls: "el-icon-user",
          component: "AdminIndex",
          parentId: 0,
          children: [
            {
   
              id: 6,
              path: "/admin/user/profile",
              name: "Profile",
              nameZh: "用户信息",
              iconCls: null,
              component: "user/UserProfile",
              parentId: 2,
              children: null
            },
            {
   
              id: 7,