PC端后台项目的总结

曾经终败给现在 2023-10-03 10:13 7阅读 0赞

#### 1.项目概括 ####

--------------------

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

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

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

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

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

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

####  ####

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

--------------------

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

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

--------------------

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

**好处：可以节省代码，减少工作量**

> **编辑和添加共用一个弹框的操作思路：**
> 
> **定义布尔值A变量，默认false代表做添加，当点了编辑后为true。**
> 
> **在弹出框，确定按钮处做判断，如果A变量为true的话就发编辑的请求，反之就是添加请求。**
> 
> **通常点了编辑按钮之后，需要做数据回填，（应该 是将ajax请求的数据给表单）**

--------------------

**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

![20210706233416955.png][]

02.在 `.env.development` 文件中

# VUE_APP_BASE_API = 'http://localhost:3000/api'  (这句不要了)
    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
      })
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210706180910603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[20210706233416955.png]: https://img-blog.csdnimg.cn/20210706233416955.png