python + vue + ajax + mongodb 实现页面手动单击加载更多

时隔N月，更新的我的内容，原因很简单，内部需要一个简单的web，能实现信息记录与分享，在前端页面这块，确实吃力的要紧，足足花了2天的时间，来实现这个功能。这段辛苦旅程，打算记录下来，分享给需要的同学。
废话不多说，先上源码，源码地址：https://github.com/1417766861/flask_vue

实现效果如下：

如果想更美观一点，可以自行去下载。

首先是Flask Server，没有使用更高级的插件进行查询数据库，直接通过Pymongo读取。读取后渲染页面，期间也考虑过有分页，奈何项目上线着急，直接用最熟的方式；

from flask import Flask,render_template,request,jsonify
from config import Article,session
from pymongo import MongoClient
db =MongoClient('mongodb://xxxxx:27017')['xxx']

#导入

app = Flask(__name__)


@app.route('/',methods=['GET','POST'])
def index():
    if request.method =='GET':
        return render_template('index.html')
    else:
        
        
        index = int(request.form.get('count'))
        
        posts_obj = db.xxx.find().sort([("published",-1)]).limit(10).skip(index)
        # 获取十篇帖子
#        posts_obj =session.query(Article).slice(index, index + 10)
        print(posts_obj)

        posts = []
        for post in posts_obj:
            print(post)
            posts.append({'content':post['content'],'date':post['date'],'name':post['name'],'image_url':post['image_url']})
            # 将帖子返回到前端
        return jsonify({'code':200,'data':posts})



if __name__ == '__main__':
    app.run(debug = True)

渲染后Index.html 代码如下：
需要的代码也直接修改，字段自定义配置即可。

{#    引入bootstrap样式#}
    
        

{#    加载动画按钮的那个文件#}
    

    



    

        

            

                
[[post.content]]

                    [[post.date]]
					 [[post.name]]
					  [[post.image_url]]
					 
                
            
        
           
		   点击加载更多
		   加载
    
	

Vue文件：特别感谢这位大哥，如此耐心，写的备注非常清晰，简单修改后直接使用；

var more_posts = [];
// 获取新的帖子函数
function loadmore(index) {
    $("#loadmore").css('display','none');//加载更多时，加载更多按钮隐藏
    $("#loading").css('display','block');//加载更多时，加载动画按钮出现
    $.ajax({
        'type':'post',
        'url': '/',
         async: false,
        'data': {
            'count': index,
        },
        'success': function (data) {
            if (data['code'] == 200) {
                // 获取到新的帖子后，返回保存到more_posts
                more_posts = data['data'];
            }
        }
    });
}

$(function () {
    // 第一次进入，执行，获取前10篇帖子
    var index = 0;//帖子起始值为0
    var posts;
    $.ajax({
        'type':'post',
        'url': '/',
        'data': {
            'count': index,
        },
        'success': function (data) {
            if (data['code'] == 200) {
                posts = data['data'];//获取到成功返回的帖子
                // 创建vue实例
                new Vue({
                    el: '#demo',
                    delimiters: ['[[', ']]'],//防止jinji2跟vue都是{{  }},我vue使用[[ ]]
                    data: {
                        main: posts //第一次获取到的十条帖子
                    },
                    methods: {
                        loadMore: function () { //加载更多执行的函数
                            index = index + 10;//增加十篇帖子
                            loadmore(index);
                                $("#loadmore").css('display','block');//loadmore（）函数结束  加载更多按钮显示
                                $("#loading").css('display','none');//loadmore（）函数结束  加载动画按钮消失
                                for (var i = 0; i < more_posts.length; i++) {
                                    var b = {
                                        'content': more_posts[i].content,
                                        'date': more_posts[i].date,
										'name': more_posts[i].name,
										'image_url': more_posts[i].image_url,
                                    };
                                    this. main.push(b);//将新的数据  推入main中
                                }
                        }
                    }
                })
            }
        }
    })
    // 向节点内插入新生成的数据
})

其实，这个项目默认是支持Mysql的，只不过我用的是Mongodb，略加修改，实现分页的方式，其实有很多种，这仅仅是其中的一种，而且相对很简单。