「掘金日新计划 · 4 月更文挑战」一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，
个人信条
学习编程：最好的办法：启动它、学习它、使用它，重复一边又一遍 ，一遍又一遍。
本文核心：vue的业务处理思想，前台数据渲染与后台的增删改查操作
一.功能开发思路
1.分析需求
一般从原型图分析我们需要做什么，实现功能需要用到什么方法，怎么样便于开发与后期的可维护性等等都是我们需要考虑的一些问题。
2.分析接口
分析我们需要的接口数据需要提供什么，以及我们通过接口文档接下来我们发送数据得到的结果是什么。
3.工作流程
-
我们需要在工作用中常用的git仓库熟练使用 创建分支、切换分支
-
切换分支就是为了我们模块化的处理自己负责的部分，不会失误将他人写的代码给破坏以及防止把他人将自己的模块给破坏了。最重要的是当出现问题了不会影响主分支上面的代码。
-
创建页面配置路由 分支创建好了，我们就需要开始对于我们的页面根据原型图进行一个开发设计喽！大佬。
-
绘制页面内容（自己绘制还是使用UI库)。
-
根据ul设计提供的原型图进行等比例还原。与ul对接样式，与后端对接数据接口文档
4.实现功能
①前台：渲染数据、提交数据
②后台：增删改查
5.测试数据
减轻代码BUG率，自测完成之后就将数据提交给测试工程师
6.合并分支、处理分支
测试通过之后，合并分支到主分支，当前模块就工作完成啦！！！
二、前台模块
1.渲染数据流程
关于接口的封装 这个我不过多赘述了 就平常的axios的请求方式 axios的一次封装 axios的二次封装 如有不明白可以看一篇axios的文章学习。
- 分析接口：拿到接口文档先分析接口，根据模块来封装我们请求方法。比如有的用户相关的接口我们可以新建一个user模块来存储我们与用户相关的模块。当我们是商品相关的接口我就可以新建一个goods的模块来专门存放我们相关商品接口的模块。
作用很简单：便于我们管理接口，提高代码的可读性。
-
data里面定义存储数据的变量
确保我们获取的数据通过data渲染到页面当中，用于后面的数据绑定。 -
methods里面定义获取数据的方法
这个我们要会vue的生命周期钩子，不会的暂时先去学习，如需要的话到时候我会出一篇vue的生命周期。
- 导入封装好的请求方法
- 调用请求方法，发数据，交数据
- 梳理代码的正确与错误处理
4.生命周期created判断是否需要调用
如果页面上需要一打开就需要接口提供的信息，我们常把请求放入生命周期函数created钩子函数中，当页面一加载的时候就会执行我们写在methods中的请求。
5.渲染界面
将通过接口获取到数据绑定到 data中即可
2.提交数据流程
1.分析接口
2.data中定义 进行数据绑定
3.提交按钮事件绑定
4.导入封装好的请求方法
5.加工处理数据（比如：效验合法性与 去除文字空的左右格等等）
6.发送请求，提交数据
7.请求成功与请求错误的处理
三. 后台模块
1.列表渲染流程
1.分析接口，封装请求方法
2.调用接口绑定生成列表、绘制可视化
列表功能：后台很多增删改查操作，重点在于对数据的处理。需要细看分页组件的使用（总数变量、页码变量、每页码变量、每页数更换事件、每页更换事件等）
后台组件:Element
可视化：Apache ECharts 相当于这样 这个是我写的EChart的一个地图案例
2添加流程.
1.分析接口 封装接口
2.绘制 如：弹窗（定义一个布尔值：绑定事件变为true）
3.绘制表单 ①变淡绘制（数据获取和绑定） ②表单效验（model、rules、ref、prop、v-model）
4.提交事件
①确定按钮绑定提交事件
②methods处理
- 主动校验表单数据
- 收集数据发送请求
- 成功提示，失败处理
- 列表更新
- 表单重置，关闭弹窗
5.取消事件 ①取消按钮绑定取消事件 ②methods定义取消事件函数（重置表单数据，关闭弹窗）
3.删除流程
1.分析接口封装接口
2.删除按钮绑定事件
3.定义删除事件函数（弹出确认框，发送删除请求（是否携带id?）列表更新）
编辑流程
1.分析接口封装接口
2.绘制
3.数据回显 ①共用添加弹窗执行不同的逻辑。编辑则回显数据，添加则不用回显
