Vue2 公司后台管理系统（仅前端）
Vue2 公司后台管理系统（仅前端）
- 项目源码
- 一、项目功能
- 二、页面展示
- 2.1 视频演示
- 2.2 主要页面
- 三、项目目录
- 四、重要知识点总结
- 4.1 路由的封装
- 4.2 路由拦截
- 4.3 模拟数据 mockjs 的使用
- 五、人员管理的CURD操作（以员工管理为例）
- 5.1 新增员工（concat）
- 5.2 删除员工（filter）
- 5.3 查询员工（filter）
- 5.4 编辑员工（map）
- 六、总结
项目源码
码云地址： https://gitee.com/gpnu_wzx/company_manage
一、项目功能
登录/退出
路由拦截
Element-UI
Tab 选项卡
二级菜单
Echarts图表展示
信息通知的未读已读标记
表格
表单
管理员/员工的基础的CURD操作
二、页面展示
2.1 视频演示
company_manage
2.2 主要页面
登录
首页
通知
个人中心
管理员管理
员工管理
注：我们可以看到员工号为2005的员工年龄只有21但入职时间却为1975年（不符合常理），这是因为使用mockjs模拟数据时间是随机生成的，没有将入职时间与年龄先做一个约束处理导致。
三、项目目录
四、重要知识点总结
4.1 路由的封装
本项目我使用的是3.2.0版本
npm i vue-router@3.2.0
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',redirect: '/login'},{path: '/login',name: 'Login',component: () => import('../views/Login.vue')},{path: '/frame',name: 'Frame',component: () => import('../components/Frame.vue'),redirect: '/home',children: [{path: '/home',name: 'Home',component: () => import('../views/Home.vue')},{path: '/personal',name: 'Personal',component: () => import('../views/Personal.vue')}......更多的页面继续按这么模式配置即可.....]}
]const router = new VueRouter ({mode: 'history',routes
})
封装完成记得要导出路由
export default router
4.2 路由拦截
对未登录的访问者除登录页面外其他页面的拦截
登陆时对象的存储和获取的两种方式如下
window.sessionStorage.setItem('token', JSON.stringify(token))
JSON.parse(window.sessionStorage.getItem('token'))
main.js
router.beforeEach((to, from, next) => {if (to.path === '/login') return next()const tokenStr = JSON.parse(window.sessionStorage.getItem('token'))if (!tokenStr) { alert('请先登录账号再访问')return next('/login')}next()
})
login.vue
login() {this.$axios.post('/login', {params: {loginData: this.loginForm}}).then(res => {console.log(res)const { code, message , token} = res.dataif (code === 200) {window.sessionStorage.setItem('token', JSON.stringify(token))this.$router.push('/home')this.$message({message: message,type: 'success'})} else {alert(message)}})
}
4.3 模拟数据 mockjs 的使用
使用mockjs模拟数据时需要在项目文件夹安装
npm i mockjs
安装完成后新建一个mock文件夹放置我们所有的模拟数据，并在mock文件夹中新建main.js文件将我们下方模拟数据配置接口提供给页面使用
admin.js
// mock数据模拟
import Mock, { Random } from 'mockjs'// 管理员数据
let List = []
for (let i = 0; i < 5; i++) {List.push(Mock.mock({"id": i+1001,"image": Random.image('100x100', '#894FC4', '#FFF', 'png', '@id'),"name": 'admin',"password": 'admin' + (i+1001)}))
}
export default {//获取管理员列表getAdminList: () => {return {code: 200,data: {total: List.length,adminList: List}}}
}
五、人员管理的CURD操作（以员工管理为例）
5.1 新增员工（concat）
//新增员工addEmployees: (options) => {let employeesData = JSON.parse(options.body).params.employeesDatalet id = List.length + 2001employeesData.id = idList = List.concat(employeesData)return {code: 200,message: '添加操作成功'}}
5.2 删除员工（filter）
//删除员工deleteEmployees: (options) => {let id = parseInt(JSON.parse(options.body).params.id)if (!id) {return {code: -200,message: '参数不正确'}} else {List = List.filter(e => e.id !== id)return {code: 200,message: '员工'+id+'删除成功'}}}
5.3 查询员工（filter）
//查询员工searchEmployees: (options) => {let keywords = JSON.parse(options.body).params.keywordslet searchList = []searchList = List.filter((e) => {return e.name.indexOf(keywords) !== -1})let len = searchList.lengthif (len > 0) {return {code: 200,message: '查询成功',data: {total: len,searchList}}} else {return {code: -200,message: '无相关员工,查询失败'}}}
5.4 编辑员工（map）
//更新员工editEmployees: (options) => {let employeesData = JSON.parse(options.body).params.employeesDataconsole.log(employeesData)List = List.map(val => {return val.id === employeesData.id ? employeesData : val ;});return {code: 200,message: '编辑操作成功'}}
六、总结
后台管理系统模板是前端入门级的项目，主要熟悉vue框架和插件的使用。由于本博客还是小白，项目难免会有一些问题的存在，如在项目中发现有问题或者您发现问题并有好的解决方案，还望各位大佬在评论区指正。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！