vue2使用vue常见的业务流程与实现思路

Posted 2023-04-07 初映CY的前说

 🥳博       主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：vue的业务处理思路。前台数据渲染与后台的增删改查操作

【前言】当大家会点开这一篇文章，大家可能会对vue全家桶与vue基础知识有了一个整体的认识。比如我要实现一个数据共享，(假设我用的vuex)我们会先去写下一个模块来存放数据，随后在页面中将我们需要处理的数据通过actions或者直接mutations传过去修改state中数据即可。从功能细分来看，这个很完美完成了我们功能点所需要实现的功能。从业务上来看，我们为什么需要将这个数据存储进我们的vuex呢？就不能通过其他功能来实现吗？比如我是不是也可以通过父子之间的传值来实现功能数据共享。对吧，实现的方式不只是一种，具体那种更加适合？我的回答是没有最强的实现方式，只有更贴切我们业务实现的方法。

目录

一、功能开发思路

二、前台模块

                2.1渲染数据流程

                2.2提交数据流程

三、后台模块

                3.1列表渲染流程

                3.2添加流程

                3.3删除流程

                3.4编辑流程

---

一、功能开发思路

1.分析需求

        从原型图分析我们需要做什么，实现功能需要用到什么方法，怎样做便于开发与后期的可维护性等等等都是我们需要考虑的一些问题。

2.分析接口

        分析我们需要的接口数据需要提供什么，以及我们通过接口文档写下来我们发送数据得到的结果是什么。

3.实现功能

1.创建分支、切换分支

       切换分支就是为了我们模块化的处理自己负责的部分，不会失误将他人写的代码给破坏以及放置他人将自己的模块破坏。最重要的是当出现问题了不会影响主分支上面的代码。

2.创建页面配置路由

       分支创建好了，我们就需要开始对于我们的页面根据原型图进行一个开发设计喽！

3.绘制页面内容（自己绘制，使用UI库）

          根据UI设计师提供的原型图进行等比例的还原。与UI对接样式，与后端对接数据接口文档。

4.实现功能

                ①前台：渲染数据、提交数据

                ②后台：增删改查

5.测试数据

                减轻代码BUG率，自测完成之后就将数据提交给测试

6.合并分支、处理分支

                测试通过之后，合并分支到主分支，当前模块就处理完成啦！！！

---

二、前台模块

2.1渲染数据流程

关于接口的封装，请移步：【vue2小知识】实现axios的二次封装_初映CY的前说的博客-CSDN博客

1.分析接口

        拿到接口文档先分析接口，根据模块来封装我们请求方法。比如有的是用户相关的接口我们可以新建一个user模块来存储我们与用户相关的模块。当我是商品相关的接口我就可以新建一个goods的模块来专门存放我们关于商品接口相关的模块。

        作用很简单：便于我们管理接口，提高代码的可阅读性。

2.data里面定义存储数据的变量

        确保我们获取的数据通过data渲染到页面当中。用于后面的数据绑定。

3.methods里定义获取数据的方法

 生命周期钩子的用法请移步：

【vue2】vue生命周期的理解_初映CY的前说的博客-CSDN博客

1.导入封装好的请求方法

2.调用请求方法,发数据,交数据

3.处理正确与错误处理

4.生命周期created判断是否需要调用

        如果页面上需要一打开就需要接口提供的信息，我们常把请求放入生命周期函数created()钩子中，当页面一加载的时候就会执行我们写在methods中的请求。

5.渲染界面

将通过接口获取到的数据绑定到data中即可

2.2提交数据流程

        1.分析接口

        2.data中定义表单变量，进行数据绑定

        3.提交按钮绑定事件

        4.导入封装好的请求方法

        5.加工处理数据（比如校验合法性与去除文字空左右格等等）

        6.发送请求，提交数据

        7.请求成功与请求错误的处理

三、后台模块

3.1列表渲染流程

        1.分析接口，封装请求方法

        2.调用接口绑定生成列表、绘制可视化

【列表功能】后台多增删改查操作，重点在于对于数据的处理。需要细看分页组件的使用(总数变量、页码变量、每页数更换事件、每页更换事件等)

官方指南：分页组件 | Element

【可视化设计】可视化可写也可不写，写了数据就会”动起来“，不再是仅form表单而已。

官网指南：Apache ECharts

3.2添加流程

        1.分析接口封装接口

        2.绘制弹框（定义一个布尔变量；绑定事件变为true）

        3.绘制表单

                ①表单绘制（数据获取和绑定）

                ②表单校验（model、rules、ref、prop、v-model）

        4.提交事件

                ①确定按钮绑定提交事件

                ②methods处理

                        a.主动校验表单数据

                        b.收集数据发送请求

                        c.成功提示。失败处理

                        d.列表更新

                        e.表单重置,关闭弹窗

        5.取消事件

                ①取消按钮绑定取消事件

                ②methods定义取消事件函数(重置表单数据,关闭弹窗)

3.3删除流程

        1.分析接口封装接口

        2.删除按钮绑定事件

        3.定义删除事件函数（弹出确认框,发送删除请求(是否携带id?),列表更新 ）

3.4编辑流程

        1.分析接口封装接口

        2.绘制弹窗与表单

        3.数据回显

                ①共用添加弹窗执行不同的逻辑。编辑则回显数据，添加则不用回显

---

——期待大家的关注与支持! 你的肯定是我更新的最大动力——

[DIV/CSS] Vue.js 开发实践：实现精巧的无限加载与分页功能

本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。

需求分析

当一个页面中信息量过大时（例如一个新闻列表中有200条新闻需要展示），就会产生问题，例如：

数据量过大，影响加载速度

用户体验差，很难定位到之前自己看过的某篇文章

扩展性差，如果200条变为2000条或者更多

所以常见的解决思路就是至底时加载数据或者分页展示。无限加载的实现过程类似于：

ajax类方法获取数据

数据存入本地数组

数组中的每条数据对应插入一个HTML模板片段中

将HTML片段append到节点中

前端分页的实现过程类似于：

ajax类方法获取数据

数据替换本地数组

数组中的每条数据对应插入一个HTML模板片段中

清空节点后将HTML片段append到节点中

往往修改或者维护代码时，我们会发现渲染HTML和插入部分是比较烦人的。因为我们需要将HTML拼接成字符串，在对应的位置插入数据，往往就是一段非常长的字符串，之后想要加个class都费劲。es6的模板字符串让这个情况有所好转，但是依然有瑕疵（例如实际编写时无法html代码高亮）。

同时我们还需要写不少for或者forEach去循环数组，再命令式的append，如果这段代码片段有一些复杂的交互，可能还需要通过事件代理绑定一堆方法。

如果在完成这类业务时，你也遇到过上述的问题，那么你就会发现Vue真是太coooooool了，let‘s vue!

新建一个Vue.js项目

强烈推荐使用vue-cli来新建一个项目。

一开始你可能会认为用node.js和npm安装一大堆库，生成了一些你不太了解的目录和配置文件，一写代码还会跳出一堆eslint的提示。但是这绝对物有所值，因为这样的一个模板可以帮你更好的理解Vue.js组织文件的思路，并且当你适应之后，你会发现这些条条框框极大地加快了你的开发效率。

在这次的教程中，我们新建了一个名叫loadmore的项目，具体的新建项目流程可以参照官网教程的安装一节。

布局页面结构

为了配合教程的逐步深入，我先从完成加载更多功能入手。为了和之后的分页保持一致，我的页面准备由两部分组成，一是信息列表，二是底部的一个加载更多的按钮，我将他们都放在App.vue这个根组件中。

1. <template>
2. <div id="app">
3. <list></list>
4. <a class="button" @click="next" >GO NEXT</a>
5. </div>
6. </template>
7. http://www.ynmxzx.com/rzjw/20160622/3739.html
8. <script>
9. import List from ‘./components/List‘
10. http://www.ynmxzx.com/rzjw/20160622/3740.html
11. export default {
12. components: {
13. List
14. },
15. data () {
16. return {
17. ...
18. }
19. },
20. methods: {
21. next () {
22. ...
23. }
24. }
25. }
26. </script>
27. http://www.ynmxzx.com/rzjw/20160622/3741.html
28. <style scoped>
29. .button {
30. display: block;
31. width: 100%;
32. background: #212121;
33. color: #fff;
34. font-weight: bold;
35. text-align: center;
36. padding: 1em;
37. cursor: pointer;
38. text-decoration: none;
39. }
40. .button span {
41. margin-left: 2em;
42. font-size: .5rem;
43. color: #d6d6d6;
44. }http://www.ynmxzx.com/rzjw/20160622/3742.html
45. </style>

复制代码

在这个过程中，我们根据Vue的设计思想有了如下思路：

在信息列表中，我们会完成我们上文中提到的几个步骤，而这些步骤都只和信息列表本身有关，与Next按钮间唯一的联系就是Next点击后需要触发信息列表去获取，而这可以通过props传递。所以我们把列表及其自身业务逻辑、样式都放在List.vue这个组件中。

我们为按钮定义了一些基本的样式，但是我们用的css选择器就是一个.button类名，可能会和别的组件中的.button样式冲突，所以我们加入了一个scoped属性，让App.vue中的style样式只作用于这个组件内部。
注意：scoped并不会影响css的作用优先级，使用scoped不代表不会被外部样式表覆盖。

我们想引入一些基础样式，比如reset.css。如果在项目中使用了sass之类的语言，那么可以将对应的外部sass文件放在assets文件夹中，通过import引入。普通的css可以直接写在一个不加scoped属性的组件中，但是如果你确定这个样式表不会被频繁改动，那么也可以作为第三方静态资源引入index.html中。例如这个例子中，我在index.html中加入了：

1. <link rel="stylesheet" href="./static/reset.css">

复制代码

效果：

完成List.vue

目前我们主要的业务逻辑都是围绕信息列表展开的，也就是我们创建的List.vue。

首先，我们需要获取目标数据，我选用了cnodejs.org社区的API作为例子进行编写。如果你也想用一个封装好的ajax库的话，应该这么做：

引入第三方JS库

将目标JS库文件放在static文件夹中，例如我选择的是reqwest.js，然后在index.html先引入。

1. <script src="./static/reqwest.min.js"></script>

复制代码http://www.ynmxzx.com/rzjw/20160622/3743.html

然后在build配置文件夹中，修改webpack.base.conf.js，export externals属性：

1. externals: {
2. ‘reqwest‘: ‘reqwest‘
3. }http://www.ynmxzx.com/rzjw/20160622/3744.html

复制代码

这样我们在我们的项目中，就可以随时加载第三方库了。

1. import reqwest from ‘reqwest‘

复制代码

写个API接口

在这个例子中，我们只需要调用文章列表这一个接口，但是实际项目中，可能你需要调用很多接口，而这些接口又会在多个组件中被用到。那么调用接口的逻辑四散在各个组件中肯定是不好的，想象一下对方的url发生了变化，你就得在无数个组件中一个个检查是否要修改。

所以我在src文件夹中新建了一个api文件夹，用于存放各类API接口。当前例子中，要获取的是新闻列表，所以新建一个news.js文件：

1. import reqwest from ‘reqwest‘
2. http://www.ynmxzx.com/xbzx/20160622/3745.html
3. const domain = ‘https://cnodejs.org/api/v1/topics‘
5. export default {
6. getList (data, callback) {
7. reqwest({
8. url: domain,
9. data: data
10. })
11. .then(val => callback(null, val))
12. .catch(e => callback(e))
13. }http://www.ynmxzx.com/xbzx/20160622/3746.html
14. }

复制代码

这样我们就拥有了一个获取新闻列表的API：getList。

编写组件

我们用一个

作为新闻列表，内部的每一个
1. 就是一条新闻，其中包括标题、时间和作者3个信息。

   在data中，我们用一个名为list的数组来储存新闻列表的数据，一开始当然是空的。我们再在data中设置一个名为limit的值，用来控制每页加载多少条数据，作为参数传给getList这个API。

   因此我们的template部分是这样的（加入了一些style美化样式）：

   1. <template>
   2. <ol>
   3. <li v-for="news of list">
   4. <p class="title">{{ news.title }}</p>
   5. <p class="date">{{ news.create_at }}</p>
   6. <p class="author">By: {{ news.author.loginname }}</p>
   7. </li>
   8. </ol>
   9. </template>
   10. http://www.ynmxzx.com/xbzx/20160622/3747.html
   11. <style scoped>
   12. ol {
   13. margin-left: 2rem;
   14. list-style: outside decimal;
   15. }
   16. li {
   17. line-height: 1.5;
   18. padding: 1rem;
   19. border-bottom: 1px solid #b6b6b6;
   20. }
   21. .title {
   22. font-weight: bold;
   23. font-size: 1.3rem;
   24. }
   25. .date {
   26. font-size: .8rem;
   27. color: #d6d6d6;
   28. }http://www.ynmxzx.com/xbzx/20160622/3748.html
   29. </style>

   复制代码

   之后我们显然需要使用getList来获取数据，不过先想想我们会在哪几个地方使用呢？首先，我们需要在组件开始渲染时自动获取一次列表，填充基础内容。其次，我们在每次点击APP.vue中的Next按钮时也需要获取新的列表。

   所以我们在methods中定义一个get方法，成功获取到数据后，就把获取的数组拼接到当前list数组后，从而实现了加载更多。

   沿着这个思路，再想想get方法需要的参数，一个是包含了page和limit两个属性的对象，另一个是回调函数。回调函数我们已经说过，只需要拼接数组即可，因此只剩下最后一个page参数还没设置。

   在初始化的时候，page的值应该为1，默认是第一页内容。之后page的值只由Next按钮改变，所以我们让page通过props获取App.vue中传来的page值。

   最后则是补充get方法触发的条件。一是在组件的生命周期函数created中调用this.get()获取初始内容，另一是在page值变化时对应获取，所以我们watch了page属性，当其变化时，调用this.get()。

   最后List.vue的script长这样：

   1. <script>
   2. import news from ‘../api/news‘
   4. export default {
   5. data () {
   6. return {
   7. list: [],
   8. limit: 10
   9. }
   10. },
   11. props: {
   12. page: {
   13. type: Number,
   14. default: 1
   15. }
   16. },
   17. created () {
   18. this.get()
   19. },
   20. watch: {
   21. page (val) {
   22. this.get()
   23. }www.ynmxzx.com
   24. },
   25. methods: {
   26. get () {
   27. news.getList({
   28. page: this.page,
   29. limit: this.limit
   30. }, (err, list) => {
   31. if (err) {
   32. console.log(err)
   33. } else {
   34. list.data.forEach((data) => {
   35. const d = new Date(data.create_at)
   36. data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
   37. })
   38. this.list = this.list.concat(list.data)
   39. }
   40. })
   41. }
   42. }
   43. }
   44. </script>

   复制代码

   同时我们将App.vue中的修改为：

   1. <list :page="page"></list>

   复制代码

   再为page在App.vue中添加一个初始值以及对应的方法next：

   1. data () {
   2. return {
   3. page: 1
   4. }
   5. },
   6. methods: {
   7. next () {
   8. this.page++
   9. }
   10. }

   复制代码

   这样我们就已经完成了加载更多的功能。

   

   改写为分页

   因为之前我们的思路非常清晰，代码结构也很明了，所以改写起来会非常简单，只需要将List.vue中拼接数组改为赋值数组就可以了：

   1. // 常规loadmore
   2. // this.list = this.list.concat(list.data)
   3. // 分页
   4. this.list = list.data

   复制代码

   就这么简单的一行就完成了功能的改变，这就是Vue.js中核心的数据驱动视图的威力。当然，接下来我们还要做点更cooooool的。

   添加功能

   因为分页替换了原来的数组，所以仅仅一个Next按钮不够用了，我们还需要一个Previous按钮返回上一页。同样的，也给Previous按钮绑定一个previous方法，除了用this.page--改变page的值以外，还需要对this.page === 1的边界条件进行一个判断。

   同时为了方便知道我们当前的页数，在按钮中，加入{{ page }}显示页数。

   1. <a class="button" @click="next" >GO NEXT<span>CURRENT:{{page}}</span></a>

   复制代码
   transition动画

   编写和完善功能的过程中，已经充分体现了Vue.js清晰和便利的一面，接下来继续看看其它好用的功能，首先就是transition动画。

   为了展示transition的威力，首先我找到了一个模仿的对象：lavalamp.js（Demo地址）。

   在Demo中可以看到页面以一种非常优雅的动画过渡完成了切换内容的