Vue2哔哩哔哩Allen老师通用后台管理系统

 一、项目效果

二、项目版本，技术栈

node.js 16.16.0

vue-cli 5.0.8

vue-router 3.6.5

技术栈：vue2，vuex，element-ui，ajax，js-cookie，mockjs

三、配置vue-router3

下载vue-router，地址安装 | Vue Router

yarn add [email protected]

 在src的router目录下创建index.js,引入vue-router

 四、下载预处理器stylus，stylus-loader

yarn stylus [email protected]

关闭eslint 

 

 五、设置嵌套路由

 

 

 

六、element-ui按需引入

npm i element-ui -S

 npm install babel-plugin-component -D

注意message消息提示，调用方法和其他组件不同

七、首页布局，main组件引入container

 element-ui网址 Element - The world's most popular Vue UI framework

 选择倒数第二个布局

 

八、侧边栏commonAside菜单 

侧边栏是公共组件，放在components中

 

 调整成我们想要的效果

 去掉白边

 创建menuData数组，判断有无子菜单，遍历侧边栏菜单

 

九、侧边栏路由实现

根据menuData里的path，在路由文件里配置路由

 

头部制作

 

菜单折叠效果 

vue2中，要用vuex的3版本
vue3中，要用vuex的4版本

yarn add [email protected] --save

 

 

 

优化 

 

 

 

home页面

layout布局 

引入box-card 

 头像部分

 

统计购买部分

 

 

订单统计部分

countData

countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],

 

  ajax

yarn add [email protected]

封装ajax

axios中文文档|axios中文网 | axios

 定义一个请求首页数据的接口

 

在页面中可以调用

 yarn add [email protected]

home.js

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    return {
      code: 20000,
      data: {
        // 饼图
        videoData: [
          {
            name: '小米',
            value: 2999
          },
          {
            name: '苹果',
            value: 5999
          },
          {
            name: 'vivo',
            value: 1500
          },
          {
            name: 'oppo',
            value: 1999
          },
          {
            name: '魅族',
            value: 2200
          },
          {
            name: '三星',
            value: 4500
          }
        ],
        // 柱状图
        userData: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          {
            date: '周二',
            new: 10,
            active: 500
          },
          {
            date: '周三',
            new: 12,
            active: 550
          },
          {
            date: '周四',
            new: 60,
            active: 800
          },
          {
            date: '周五',
            new: 65,
            active: 550
          },
          {
            date: '周六',
            new: 53,
            active: 770
          },
          {
            date: '周日',
            new: 33,
            active: 170
          }
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          {
            name: 'vivo',
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000
          },
          {
            name: '苹果',
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000
          },
          {
            name: '小米',
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000
          },
          {
            name: '三星',
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000
          },
          {
            name: '魅族',
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000
          }
        ]
      }
    }
  }
}

 

 

 购买统计数据替换

 

echarts折线图 

yarn add [email protected]

在home页面引入echarts

import * as echarts from 'echarts';

 

柱状图

 饼状图

 

 在tab里的state里定义关于面包屑数据

 在mutation里定义一个方法selectMenu()用来更新面包屑数据

 tabsList渲染面包屑

 

深度选择，原理就是通过找到父元素深度的找到我们需要改变的子元素，然后改变它的样式即可

也就是既不影响到别的地方，又能修改子组件在当前的样式

路由跳转面包屑对应显示高亮

在el-breadcrumb-item 里 定义span标签，添加类名判断，当前路由name等于item的name就添加active类名

 改变未高亮标签的颜色

 

 tag标签

 

 

 

tag的删除功能和改变主题

 

 解决删除后标签无高亮的问题

 

用户管理

dialog和form

 

 

 

 表单验证

 

 表单关闭数据清空

 

 

 

渲染table表格 

新增一个user.js来存放和用户相关的mock模拟的数据

user.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
      .replace(/"/g, '\\"')
      .replace(/&/g, '","')
      .replace(/=/g, '":"') +
    '"}'
  )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
  /**
   * 获取列表
   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
  /**
   * 增加用户
   * @param name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  createUser: config => {
    const { name, addr, age, birth, sex } = JSON.parse(config.body)
    console.log(JSON.parse(config.body))
    List.unshift({
      id: Mock.Random.guid(),
      name: name,
      addr: addr,
      age: age,
      birth: birth,
      sex: sex
    })
    return {
      code: 20000,
      data: {
        message: '添加成功'
      }
    }
  },
  /**
   * 删除用户
   * @param id
   * @return {*}
   */
  deleteUser: config => {
    const { id } = JSON.parse(config.body)
    if (!id) {
      return {
        code: -999,
        message: '参数不正确'
      }
    } else {
      List = List.filter(u => u.id !== id)
      return {
        code: 20000,
        message: '删除成功'
      }
    }
  },
  /**
   * 批量删除
   * @param config
   * @return {{code: number, data: {message: string}}}
   */
  batchremove: config => {
    let { ids } = param2Obj(config.url)
    ids = ids.split(',')
    List = List.filter(u => !ids.includes(u.id))
    return {
      code: 20000,
      data: {
        message: '批量删除成功'
      }
    }
  },
  /**
   * 修改用户
   * @param id, name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  updateUser: config => {
    const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
    const sex_num = parseInt(sex)
    List.some(u => {
      if (u.id === id) {
        u.name = name
        u.addr = addr
        u.age = age
        u.birth = birth
        u.sex = sex_num
        return true
      }
    })
    return {
      code: 20000,
      data: {
        message: '编辑成功'
      }
    }
  }
}

配置请求的接口

 mock中添加模拟的数据接口

slot-scope="scope"作用域插槽，作用：可以在父组件中获取到子组件的数据

 

 

 

 新增和修改

 

 新增按钮和编辑按钮共用一个弹窗， modalType: 0,控制，0 新增，1 编辑

给新增按钮添加一个方法handAdd它的modalType = 0 ， dialogVisible =true展开弹窗

 给编辑按钮添加一个方法handleEdit，它的modalType = 1，dialogVisible =true展开弹窗

 

 

 

 

 

封装getList方法

解决回显性别显示1和0的问题

 查询和删除

 

 删除按钮

 

 分页功能

 

 

 

 

 登录权限

yarn add [email protected]

token信息存入cookie用于不同页面的通信

 

 

 

 

在main.js里添加全局前置导航守卫

 

 

 

 登录接口逻辑实现

引入permission.js

 

 在点击登录按钮的时候，判断这个code来判断账号密码是否正确，正确就跳转至首页，不正确就显示错误信息

 

 

 个人中心退出按钮

 

菜单权限

1、不同账号的菜单权限
动态获取菜单栏路由数据

 

 判断当前数据，cookie中没有就去store中获取

2、通过URL输入地址显示页面

router动态注册路由

 重新登陆一下

 看到这个输出就是成功了

 删除之前写死的路由，并将跟路由改成 /home

 

 解决空白页面的问题

 笔记参考哔哩哔哩Allen前端vue后台管理系统笔记_杨白鹤的博客-CSDN博客哔哩哔哩Allen前端vue后台管理系统笔记https://blog.csdn.net/weixin_59820248/article/details/128590099