Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

你好！欢迎阅读我的博文，你可以跳转到我的个人博客网站，会有更好的排版效果和功能。

此外，本篇博文为本人Pushy原创，如需转载请注明出处：https://pushy.site/posts/1519817324

如果你了解前端，肯定对AJAX不陌生，那么通过AJAX技术能够达到更新网页部分内容来达到加载其他信息的效果。通过AJAX我们可以来对文章进行优化，如果我们的博客在首页载入时就加载全部的文章，势必会影响加载速度，所以我们要来异步加载文章的内容，通过分页或者向下加载的方式来加载更多的文章内容。这样大大降低了网页最初加载的速度，并且也能受用户的意愿加载更多的内容。

1. 后端实现：

其实后端实现分页的功能十分的简单，如果使用是mysql，通过原生的SQL语句也可以轻松地实现，page是指查询字符串，为当前请求的页数；l_num为每页限制的文章个数：

SELECT * FROM posts LIMIT ( page -1 ) * l_num,l_num

那么一般后端我们都不使用原生的SQL语句，因为这样处理事务过于繁琐且效率不高。在Flask的ORM框架flask_sqlalchemy中，我们可以使用paginate()方法来实现，这个方法返回值是一个由该模块定义的一个Pagination对象。这个对象包含了很多的属性，如果你采用的是jinja2引擎渲染文章内容的方式，可以参考《Flask Web Development》一书中11.3.3的相关内容。

但是如果你采用的是前端向后端请求AJAX请求的话，那么将不用操作这个对象的其他属性，而是直接通过其items得到当前页面（指查询字符串所对应的当前页面）中的记录，为当前页面所有的文章ORM实例的列表：

@app.route('/posts')
def return_page_posts():
    page = request.args.get('page', 1, type=int) # 得到查询字符串
    pagination = Post.query.order_by(Post.create_time.desc()).paginate(
        page,per_page=6, # per_page定义一页限制的文章个数
        error_out=False
    )
    posts_list = pagination.items
    return jsonify(
        data = [each.return_dict() for each in posts_list]
    )

将得到的posts_list通过列表生成式得到包含当前页面的所有文章内容的字典列表，并且通过jsonify()方法转换为JSON格式。这样前端在调用/post/page=1的API时，后端将会返还第一页的所有文章内容的JSON数据，例如这样：

{
  "data": [
    {
      "content": "content1",
      "post_id": "1",
      "title": "title1"
    },
    {
      "content": "content2",
      "post_id": "2",
      "title": "title2"
    },
    ...
  ]
}

如果你的后端是nodeJS，也有相应的方法来容易地实现：

router.get('/posts', (req, res) => {
    let pageNum = req.query.page
    Post.findAll({ limit: 6,offset:(pageNum-1) * 6}).then(posts => {
        if (posts.length != 0) {
            res.send(posts);
        } else {
            res.json({data:''})
        }
    })
});

2. 前端实现：

Vue中实现分页的功能需要用到状态管理的插件Vuex，因为要记录当前阅读到页数，因为如果没有进行状态管理，当用户点击到其他页面再后退到文章首页时，文档内容又会重新加载为第一页的内容，这样用户体验自然不好。所以需要有一个变量来记录当前阅读当的页数，以及用来存放已经加载的文档数组。

所以实现分页功能的大致思路为：在首次加载文档首页时请求第一页的内容，并将其存放到数组当中，然年通过“查看更多按钮”（或者通过下一页）触发点击事件，来分发action中请求下一页的内容，并且在每次触发点击事件之后，用来记录当前阅读的页数变量自加1，并通过mutation来更新用来存放文章内容的数组：

state:{
    pageNum:1, // 记录当前阅读页数的变量
    postsArray:[], // 存放文章内容的数组
}

然后我们在mutations.js文件中定义增加页数和合并文章数组的mutation：

[types.PAGE_INCREMENT] (state) {
	state.pageNum ++
},
[types.FETCH_INDEX_POST] (state, newPostsObj) {
	// 将已经加载的数组和新的数组合并：
	state.postsArray = state.postsArray.concat(newPostsObj)
}

接着我们来action.js文件中定义一个action，这里包含了主要的异步操作，用来向后端请求文章：

fetchPosts ({ commit }) {
  var nextPageNum = store.state.pageNum
  axios.get('http://api.example/posts/?page=' + nextPageNum).then(response=>{
    if (response.data.data.length == 0){
      commit(types.NO_ANY_POSTS) // 显示没有更多文章
    } else {
        commit('HIDDEN_INDEX_LOADING') // 取消显示loading
        commit(types.FETCH_INDEX_POST,response.data.data)
    	}
    }
  }).catch(error=>{
    commit('HIDDEN_INDEX_LOADING')
  })
}

在后端返回的JSON数组的data字段中不等于0的情况下（可以看到我在等于0的时候定义了一个NO_ANY_POSTS的mutation来触发，用来提示用户没有更多的文章加载了，当然可以是一个弹窗也可以是一个提示行，这样会有更好的用户体验），我们通过commit去触发合并的mutation来合并加载的数组。

到这里主要的业务逻辑基本完成，那么在前端的UI中我们如果实现呢异步加载的功能呢？可以选择分页的界面，由用户点击不同的分页数来请求响应页数的文章内容；也可以通过安放一个“查看更多”的按钮，每次点击后请求下一页的文章内容，这里我主要说下后者，首先我们定义一个"查看更多的按钮"，并绑定一个readMore的点击事件：

<button @click="readMore">READ MORE</button>

然后定义一个readMore方法，并且在触发后去commitmutation的事件，将记录页数的值加1，并且去分发action请求下一页的文章内容：

readMore:function(){
  this.$store.commit('PAGE_INCREMENT')
  this.$store.dispatch('fetchPosts')
}

还有一个问题——总不可能让用户首次进入文章首页时就看到一个查看更多的按钮吧，这肯定不现实。所以在生命周期的created阶段，我们要去请求第一页的文章内容：

created:function() {
  if (this.pageNum == 1) {
    this.$store.dispatch('fetchPosts')
  }

可以看到这里有一个判断条件：当记录页数值为1才会去分发action。这么做的目的呢，是因为如果用户在点击到其他路由后，点击后退键到文章首页时，Vue的生命周期将会重新执行，因此会重复分发action，导致文章数组存在重复的内容。PS.当时在遇到这个问题时满脑子的骚操作，想法是将已有的数组和新加载的数组做比较，判断是否存在重复的内容，看来遇到问题还是需要从简单的入口解决啊。

至此异步加载文章的功能大致完成，如果你对分页的样式比较感兴趣也可以尝试写下，两者的思路都差不多，不过决定你想要那种用户体验。