Vue中异步加载文章功能

Posted pushy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中异步加载文章功能相关的知识,希望对你有一定的参考价值。

如果你了解前端,肯定对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=1API时,后端将会返还第一页的所有文章内容的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_POSTSmutation来触发,用来提示用户没有更多的文章加载了,当然可以是一个弹窗也可以是一个提示行,这样会有更好的用户体验),我们通过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.当时在遇到这个问题时满脑子的骚操作,想法是将已有的数组和新加载的数组做比较,判断是否存在重复的内容,看来遇到问题还是需要从简单的入口解决啊。

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

以上是关于Vue中异步加载文章功能的主要内容,如果未能解决你的问题,请参考以下文章

vue异步组件

vue 异步组件 (按需加载)

在 firebase 和 vue 中处理异步数据加载的最佳方法

vue2异步组件

Vue进阶-异步动态加载组件

vue 路由懒加载