| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> PC端后台项目的总结 -> 正文阅读 |
|
[JavaScript知识库]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 多个按钮共用一个弹框组件 好处:可以节省代码,减少工作量
2.3数据回填 通常思路是将发送请求后的数据,重新赋值给data中的数据项(大多数是对象)
2.4 缓存问题导致的bug 原因:组件被创建后,在create里面发请求,第二次之后因为已经创建有缓存,导致数据无刷新 解决:所以可以使用v-if或者使用ref操作子组件使他强行调用子组件的ajax刷新页面,或者使用watch监听 2.5 表单验证 上篇文章做了详细的总结。思路是:主要是自定义校验规则,分为三步配置,自己写逻辑将数据处理为后端需要的。 2.6?点击登录退出功能 第一,先要弹出提示框问客户要退出吗?第二步,如果点击确定离开,清除token和用户信息,由于保存在vuex中,所以使用 2.7?token失效问题 请求拦截器发token,如token失效,则被响应拦截器拦截,应在响应拦截器处理错误逻辑:如果错误是XXX(和后端约定一个状态码,判断是不是token失效),那么就去登录页(注意,这是后台管理,不存在refresh_token )-----注意:先把token干掉,在去登录页,不然会报错(原因是路由守卫,会进行判断,你有没有token,加入你原token还在 ?2.8 解决登录失败不报错 在响应拦截器中,根据本次请求返回的数据中的success字段值,来决定是否主动抛出错误。 2.9解决获取有效数据代码冗余的问题 在响应拦截器中,在返回有效数据时,直接?return response.data 2.11 环境变量与基地址的配置01.在 02.在?
03.在封装axios的文件中
总结:改完要重启项目,且这个只能用在开发阶段? |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 | -2025/2/5 20:02:03- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |