PC端后台项目的总结

简介: PC端后台项目的总结

1.项目概括


完成的是一个PC端后台管理项目,从页面UI结构搭建到打包上线的全过程。代码风格统一为eslint,对常用api、组件或函数做了封装。主要模块有:登录注册页、主页模块、组织架构、角色管理、员工管理、权限点管理、打包上线。

项目基于elementUI二次开发,使用了很多其提供的组件,如:table组件、翻页组件、Form表单组件、tree树形组件、弹框组件、导入导出组件…

技术栈主要有:vue全家桶:( 模块化vuex + 模块化路由 + 路由守卫+vue-cli脚手架)

其他第三方插件:i18n、svg-icon、an

重要点:基于RBAC权限思想解决权限分配问题、环境变量实现自动切换基地址、Excel导入导出、表单校验、封装全局组件

image.png

2.项目中一些可借鉴的方法


2.1  v-model 语法糖 双向绑定 用在子组件上 实现父改子变,子改父变

相当于父组件做了:value 和 @input 两件事

2.2 多个按钮共用一个弹框组件

好处:可以节省代码,减少工作量

编辑和添加共用一个弹框的操作思路:

2.2 多个按钮共用一个弹框组件

好处:可以节省代码,减少工作量

编辑和添加共用一个弹框的操作思路:

2.3数据回填

通常思路是将发送请求后的数据,重新赋值给data中的数据项(大多数是对象)

this.formdata = res.data (类似于这种)

2.4 缓存问题导致的bug

原因:组件被创建后,在create里面发请求,第二次之后因为已经创建有缓存,导致数据无刷新

解决:所以可以使用v-if或者使用ref操作子组件使他强行调用子组件的ajax刷新页面,或者使用watch监听

2.5 表单验证

上篇文章做了详细的总结。思路是:主要是自定义校验规则,分为三步配置,自己写逻辑将数据处理为后端需要的。

2.6 点击登录退出功能

第一,先要弹出提示框问客户要退出吗?第二步,如果点击确定离开,清除token和用户信息,由于保存在vuex中,所以使用

actions (这里使用actions原因就是点击退出登录清理token是一个异步的,所以要用actions(dispatch))。而actions并没有发请求,只是简单地注册了一下,然后就调用mutations

3-点击退出到登录页-再登录回到之前页面---第一个--登陆成功进入页面:this.$route.query.return_url (return_url随便写,登录到指定页面) ----第二个,退出的时候,回传

2.7 token失效问题

请求拦截器发token,如token失效,则被响应拦截器拦截,应在响应拦截器处理错误逻辑:如果错误是XXX(和后端约定一个状态码,判断是不是token失效),那么就去登录页(注意,这是后台管理,不存在refresh_token )-----注意:先把token干掉,在去登录页,不然会报错(原因是路由守卫,会进行判断,你有没有token,加入你原token还在

2.8 解决登录失败不报错

在响应拦截器中,根据本次请求返回的数据中的success字段值,来决定是否主动抛出错误。

2.9解决获取有效数据代码冗余的问题

在响应拦截器中,在返回有效数据时,直接 return response.data

2.11 环境变量与基地址的配置

01.在vue.config.js配置文件中,有一项是devServer

image.png

02.在 .env.development 文件中

1. # VUE_APP_BASE_API = 'http://localhost:3000/api'  (这句不要了)
2. VUE_APP_BASE_API = '/api'

03.在封装axios的文件中

export function login(formData) {
  return request({
//  url: 'api/sys/login',
+   url: '/sys/login', // 前面的api就省略了
    method: 'POST',
    data: formData
  })
}

总结:改完要重启项目,且这个只能用在开发阶段

相关文章
|
5月前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
57 0
|
5月前
|
XML API 数据格式
微信PC版的API接口
微信PC版的API接口
|
6月前
|
监控 安全 物联网
B/S架构智慧工地源码,两个终端:PC后台管理端、APP移动端
智慧工地系统充分利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术,以PC端,移动端,设备端三位一体的管控方式为企业现场工程管理提供了先进的技术手段。让劳务、设备、物料、安全、环境、能源、资料、计划、质量、视频监控等十大管理环节变得智慧可控。为建设集团、施工企业、政府监管部门等提供一站式工地现场管理信息化解决方案,是一种崭新的工程现场一体化管理模式。
103 0
|
6月前
|
缓存 小程序 安全
微信PC端小程序无法加载数据
某些小程序在PC端小程序打开会出现白屏或无法加载数据的情况,本篇文章整理了几种常见情况的解决方案。
|
Web App开发 JSON 前端开发
PC端 & 移动端开发调试
学习前端难免会频繁的调试和遇到很多的Bug,所以掌握好开发调试就能更快的找到Bug和去Debug,通过开发者工具能够更好的将前端代码写的更好、更美
135 0
|
前端开发 API
前端 -PC 端-支付流程
前端 -PC 端-支付流程
146 0
|
监控 安全 Linux
基于PC的控制技术编程入门
基于PC的控制技术编程入门
|
Web App开发 前端开发 JavaScript
如何判断页面是通过PC端还是移动端访问?
如何判断页面是通过PC端还是移动端访问?
711 0
|
前端开发 JavaScript API
pc端项目 完整的登录功能总结 element二次开发
pc端项目 完整的登录功能总结 element二次开发
pc端项目 完整的登录功能总结 element二次开发
|
前端开发
前端hook项目pc总结笔记-开发中用的截图工具
前端hook项目pc总结笔记-开发中用的截图工具
91 0
前端hook项目pc总结笔记-开发中用的截图工具