安擎云（公司产品 web 端）

猿急送>北京前端兼职程序员>！>

案例列表

基本信息

案例ID：231440

技术顾问：！ - 4年经验 - 山东微图信息科技有限公司

联系沟通

微信扫码，建群沟通

项目名称：安擎云（公司产品 web 端）

所属行业：人工智能 - 其他

->查看更多案例

案例介绍

目描述：后台管理系统是方便管理后台的系统，主要有登录主页法律法规教育培训机构与职责风险与隐患智能巡检危化品管理安全设备设施承包商管理应急管理事故管理职业健康管理等模块
项目主要技术栈：Vue.js + vue-router + vue-cli + axios + ElementUi +
负责模块：登录模块首页模块教育培训智能巡检事故管理
工作描述：
1. 使用 element-ui 中的表单组件完成登录的结构和样式通过 form 的表单验证功能，
2.在登录页面设置了路由拦截，用 vue-router 导航守卫功能，将代码封装到路由的 js 文件中，实现效果，保
存服务器保存的 token，登录成功，通过 this.$router.push()跳转到首页用了 axios 实现了与后台数据交互
3.个人设置使用this.$router.push()实现跳转到个人设置页面
4.退出登陆首先要先清除token’然后在进行跳转页面
5.设置布局，头部侧边栏和内容的页面侧边栏为每个内容页面的路由，在home组件中设置一个router- view在内容的页面渲染各个路由的视图
6.使用 axios 请求数据实现用户列表的渲染，传入后台接口提供的参数，然后指定字段名称，实现渲染，使用
7.分页功能的渲染，按钮绑定@cuttent-change，当页码发生改变时，默认传入当前新的页码，重新请求数据
8.使用 axios 请求数据实现列表的渲染
9.使用了 echarts 绘制了用户的图表
代码优化：每个页面中都有相同的面包屑导航组件，避免代码重复，使用父传子，封装面包屑导航组件，通过 props 传值，是每个组件的的代码减少
遇到问题：在设置分页时，点击某一页并使用其他功能时刷新造成无法正常更新，最后将每次刷新后，重新回到第一页就可以。