前端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图表：折线图柱状图饼状图