前端文章汇总
后端接口部分
1、业务层处理数据的核心代码
image.png
2、工具类代码
image.png
3、测试接口
image.png
前端数据渲染---前置操作
1、配置商品系统菜单和分类管理
image.png
image.png
2、创建商品文件夹，和分类vue组件
image.png
3、element树形结构支撑
image.png
image.png
4、编写请求接口
image.png
5、修改全局请求地址(测试环境和开发环境)
image.png
6、集成人人fast 到系统中（引入依赖）和Gson 包
image.png
7、集成人人fast 到系统中（配置nacos）
image.png
8、注解启动nacos注册
image.png
9、编写gatrway 路由匹配
image.png
10、解决跨域问题（CORS），在网关编写配置类
image.png
11、注释掉renren-fast 配置的跨域（防止冲突）
image.png
12、给商品模块配置网关路由
image.png
13、网关路由顺序调整（防止高优先级吞噬低）
image.png
前端数据渲染（实际操作）
1、请求数据接口函数重写
image.png
2、参数说明（返回的数据）
image.png
3、测试显示
image.png
前端数据节点渲染（增删改）
1、页面控件渲染
1、参考文档element（版本2.12.0）
image.png
2、复制原始的标签和方法
image.png
image.png
3、判断何时显示删除和添加节点（最下级可删除）
image.png
image.png
4、加上节点可选和唯一标识key（详情看文档）
image.png
image.png
2、编写前后端逻辑删除（字段 show_status）
1、引入mybatis针对逻辑删除的依赖(官网地址：https://baomidou.com/guide/logic-delete.html)
image.png
image.png
image.png
2、调整日志级别（用于调试）
image.png
3、POST测试
image.png
image.png
image.png
4、贴上post和get代码片段（详情看下面）
5、前端接口：删除并且刷新
image.png
6、点击删除前弹出窗口提示是否删除
参考文档：
image.png
image.png
复制实现：
image.png
7、删除刷新后保留当前展开状态
文档：
image.png
image.png
实现：
image.png
3、编写前后端添加功能 和修改功能
1、添加 的对话框
image.png
2、设计分析
1、采用添加和修改发送请求数据接口合并，判断标准当前是否有值（有则修改，无则添加）
2、修改和添加是同一个对话框，但是打开对话框的方法是两个
3、在更新数据的时候，回显得重新查询一次得到最新
4、注意：点击更新的时候数据回显到会话框，再点击添加之前要清空回显的数据
3、前端代码
image.png
image.png
image.png
image.png
image.png
4、拖拽功能实现
需求：
1、分类同级只能拖到前后，无法拖到里面
2、低一级的可以拖到高一级内
image.png
5、批量拖拽功能
6、批量删除实现
XXX：异常收集
1、renren-fast 验证码转到网关一直 503（原因，网关没有配置nacos）
问题截图：
image.png
解决方案：gatrway依赖环境，配置yml
image.png
image.png
XXX：学习功能扩展
1、注释TODO（备忘录）：更容易找到还没实现的代码
image.png
2、贴上post和get代码片段
"http-get请求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'get',",
"params: this.\\$http.adornParams({})",
"}).then(({data}) => {",
"})"
],
"description": "httpGET请求"
},
"http-post请求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"url:this.\\$http.adornUrl(''),",
"method: 'post',",
"data: this.\\$http.adornData(data, false)",
"}).then(({ data }) => { });"
],
"description": " httpPOST请求"
}
XXX：开源项目BUG收集（这款比较火且成熟的项目，也是有bug的）
1、账号登录的时候，没有清楚两边空白（空格或者制表符）
image.png
