前端Vue+Element UI案例:通用后台管理系统-代码总结

Posted karshey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端Vue+Element UI案例:通用后台管理系统-代码总结相关的知识,希望对你有一定的参考价值。

文章目录

前言

本来不打算用博客的方式记录代码的,想用git把它上传到代码仓库。但是由于对git的使用不太熟悉,把写得完善的项目代码初始化掉了!!非常崩溃…后来废了很大力气才把代码找回来。

为了以后把代码搞丢后还能找回来,还是要写个博客来记录一下代码。

项目链接:https://pan.baidu.com/s/1fTh4m_OkqV2PIuWdCgE-QQ
提取码:35sv

项目文件目录

api

mockServe

home.js

// mock数据模拟
import Mock from 'mockjs'
// 导入数据
import videoData from '../../data/mockData/videoData'
import userData from '../../data/mockData/userData'
import tableData from '../../data/mockData/tableData'

// 图表数据
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,
                // 柱状图
                userData,
                // 折线图
                orderData: 
                    date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
                    data: List
                ,
                tableData
            
        
    


permission.js

import Mock from 'mockjs'
export default 
    getMenu: config => 
        const  username, password  = JSON.parse(config.body)
        // 先判断用户是否存在
        // 判断账号和密码是否对应
        if (username === 'admin' && password === 'admin') 
            return 
                code: 20000,
                data: 
                    menu: [
                        
                            path: '/home',
                            name: 'home',
                            label: '首页',
                            icon: 's-home',
                            url: 'Home.vue'
                        ,
                        
                            path: '/mall',
                            name: 'mall',
                            label: '商品管理',
                            icon: 'video-play',
                            url: 'Mall.vue'
                        ,
                        
                            path: '/user',
                            name: 'user',
                            label: '用户管理',
                            icon: 'user',
                            url: 'User.vue'
                        ,
                        
                            label: '其他',
                            icon: 'location',
                            children: [
                                
                                    path: '/page1',
                                    name: 'page1',
                                    label: '页面1',
                                    icon: 'setting',
                                    url: 'PageOne.vue'
                                ,
                                
                                    path: '/page2',
                                    name: 'page2',
                                    label: '页面2',
                                    icon: 'setting',
                                    url: 'PageTwo.vue'
                                
                            ]
                        
                    ],
                    token: Mock.Random.guid(),
                    message: '获取成功'
                
            
         else if (username === 'xiaoxiao' && password === 'xiaoxiao') 
            return 
                code: 20000,
                data: 
                    menu: [
                        
                            path: '/home',
                            name: 'home',
                            label: '首页',
                            icon: 's-home',
                            url: 'Home.vue'
                        ,
                        
                            path: '/video',
                            name: 'video',
                            label: '商品管理',
                            icon: 'video-play',
                            url: 'Mall.vue'
                        
                    ],
                    token: Mock.Random.guid(),
                    message: '获取成功'
                
            
         else 
            return 
                code: -999,
                data: 
                    message: '密码错误'
                
            
        

    

index.js

import http from '../utils/request'

// 请求首页数据,直接把这个对象导出
export const getData = () => 
    // 返回一个promise
    return http.get('/home/getData')


// 下面四个:用户管理-后端-网络请求接口
export const getUser = (params) => 
    return http.get('/user/get/', params)


export const createUser = (data) => 
    return http.post('/user/create', data)


export const deleteUser = (data) => 
    return http.post('/user/del', data)


export const updateUser = (data) => 
    return http.post('/user/update', data)


// 登录权限
export const getMenu = (data) => 
    return http.post('/permission/getMenu',data)


mock.js

import Mock from 'mockjs'
import homeMock from '../api/mockServe/home'
import user from './user'
import permission from './mockServe/permission'

// 定义mock拦截
Mock.mock('/api/home/getData',homeMock)

// 用户管理:增删查改
Mock.mock(/\\/api\\/user\\/get/,user.getUserList)
Mock.mock('/api/user/create','post',user.createUser)
Mock.mock('/api/user/update','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)

// 登录权限
Mock.mock(/api\\/permission\\/getMenu/,'post',permission.getMenu)

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: '编辑成功'
      
    
  

assert

这些图片在链接里:

components

CommonAside.vue

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <!-- 要放到导航栏里面 -->
        <h3> isCollapse ? "后台" : "通用后台管理系统" </h3>
        <!-- 观察数据,我们发现name是唯一标识 -->
        <!-- 查看文档,index是唯一标识 -->
        <el-menu-item @click="clickItem(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
            <!-- 这里是字体图标,用模板字符串拼接,注意要动态绑定 -->
            <i :class="`el-icon-$item.icon`"></i>
            <span slot="title"> item.label </span>
        </el-menu-item>
        <el-submenu v-for="item in hasChildren" :key="item.label" :index=以上是关于前端Vue+Element UI案例:通用后台管理系统-代码总结的主要内容,如果未能解决你的问题,请参考以下文章

前端Vue+Element UI案例:通用后台管理系统-项目总结

前端Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单动态添加路由

前端Vue+Element UI案例:通用后台管理系统-导航栏

前端Vue+Element UI案例:通用后台管理系统-Echarts图表:折线图柱状图饼状图

前端Vue+Element UI案例:通用后台管理系统-登陆页面Login

前端Vue+Element UI案例:通用后台管理系统-Home组件:卡片表格