PC端后台项目的总结
1.项目概括
完成的是一个PC端后台管理项目,从页面UI结构搭建到打包上线的全过程。代码风格统一为eslint,对常用api、组件或函数做了封装。主要模块有:登录注册页、主页模块、组织架构、角色管理、员工管理、权限点管理、打包上线。
项目基于elementUI二次开发,使用了很多其提供的组件,如:table组件、翻页组件、Form表单组件、tree树形组件、弹框组件、导入导出组件…
技术栈主要有:vue全家桶:( 模块化vuex + 模块化路由 + 路由守卫+vue-cli脚手架)
其他第三方插件:i18n、svg-icon、an
重要点:基于RBAC权限思想解决权限分配问题、环境变量实现自动切换基地址、Excel导入导出、表单校验、封装全局组件
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
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})
}
总结:改完要重启项目,且这个只能用在开发阶段
PC端后台项目的总结相关推荐
- 云巡店php源码,云巡店™〡PC端后台管理员设置 讲解视频(下)
原标题:云巡店™〡PC端后台管理员设置 讲解视频(下) ①无纸化云操作,大幅提升巡店效率 ②支持上传视频图片,精准锁定问题 ③工作在线完成,问题整改持续追踪 ④自动生成数据分析,降低人力成本 检查表管 ...
- pc端vue项目打开pdf文件;网页查看pdf文件;浏览器直接打开pdf文件
//要求url是可以直接在地址栏打开的pdf地址//url = 'https://push-repair.zuihuibao.cn/ACHC00DE0421FP00359D.pdf?e=1629447 ...
- 构建项目//pc端、移动端H5
文章目录 移动端 pc端 构建项目 我的步骤 示例一:vue init webpack 文件名 示例二:vue create 文件名 vue.config.js 配置 ui框架包 安装异步编程框架ax ...
- vue 移动端PC端选用的ui框架
1.pc端的项目,最好的选择是ElementUI.(pc端) 一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.Element是饿了么前端开源维护的Vue UI组件库,更新频率 ...
- html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
- PC端页面适应不同的分辨率的方法
上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在 ...
- html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾 我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
- thinkcmf5.1项目实现pc端和wap手机端自动切换
用thinkcmf5.1写项目的时候如何实现PC端和手机端自动切换? 1.首先找到data/config/template.php文件 复制 'cmf_admin_default_theme' ...
最新文章
- matlab设计长度为50的滤波器,实验5 基于Matlab的数字滤波器设计
- Flink 实时计算 - 维表 Join 解读
- Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果
- 【Python CheckiO 题解】Time Converter (12h to 24h)
- java 防止表单重复提交
- 三星s7不能运行java_在调试模式下启动时Android应用程序崩溃
- 冒泡排序的双重循环理解
- php 静态成员(static)抽象类(abstract)和接口(interface)
- 黑马Java学科资料
- 【逼你学习】让自制力提升300%的时间管理方法、学习方法分享
- HotFix方案原理
- web服务器、应用服务器和常见的服务器概念
- banner 图片自动轮播
- Ambari集群里操作时典型权限问题put: `/home/bigdata/1.txt‘: No such file or directory的解决方案(图文详解)
- JavaScript 实现 标签页 切换效果
- FBX SDK快速简笔(基本)
- css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
- 为什么我的CDMA手机获取不了CellID?
- 英语不好学计算机专业可以吗,英语不好学什么专业好,计算机专业好毕业吗
- 笔记:以太网帧格式及其type取值说明
热门文章
- 如何将网址链接生成在微信可跳转的网址二维码
- 学习笔记(1):机器学习数学基础之凸优化视频教学-(1.2)机器学习中的优化问题及实例...
- 开源WebGIS开发——栅格图层
- Webots舵轮使用纯追踪算法
- 404 not found是什么意思
- 「 C++ TwinCAT3 」倍福 “多轴开放体系软件结构设计”讲解
- Android接入TapTap踩坑
- 三次方在python中如何表示_python中计算三次方怎么表示
- 雪莹软件将word转图片产生空白区域的问题解决方法
- 模块参考资料-硬件资料-Air720UG/UH-功耗指标