一个web应用的诞生(12)--再探首页

就要面对本章的一个难点了，说是难点可能仅仅对于我来说，毕竟我是一个js渣，既然首页打算使用动态加载的形式，那么与后台交互的方式就要进行选择，目前比较流行的为RESTful的形式，关于RESTful的文章目前多不胜数，这里也不做太多介绍，在我理解这种方式简单来说就是仅仅把服务端作为一个资源池，来对资源池进行删除(Delete),修改（PUT）,创建（POST）和获取（GET）的操作，所有操作都是在一种无状态的情况下进行的。

一般来说，应用程序的RESTful操作都是设计为一个独立的模块，对于flask来说，即一个独立的蓝本，这里也不能免俗,创建1.0版本的api(api_1_0)

from flask import  Blueprint
api=Blueprint("api",__name__)
from . import posts,errors

这里仅仅是为首页的分页提供内容，并没有打算写一整天RESTful的系统，所以，只有一个posts和一个error的视图模型。

在api中，返回的状态码其实就是http中的状态码，可以说与普通html是一直的，比如常用的几个：

1. 200 执行成功
2. 400 请求错误
3. 401 未授权
4. 403 禁止
5. 404 未发现
6. 500 服务器错

比如在代码中写一个403错误的样例（api_1_0\errors.py）：

from flask import jsonify
def forbidden(message):
    response=jsonify({'error':'forbidden','message':message})
    response.status_code=403
    return response

同时，其他的错误也可以通过读取响应的元数据来决定响应格式，比如（main\errors.py）：

@main.app_errorhandler(404)
def page_not_found(e):
    if (request.accept_mimetypes.accept_json and not request.accept_mimetypes.accept_html):
        response=jsonify({'error':'not found'})
        response.status_code=404
        return response
    return render_template("404.html") ,404

接下来就是获取post的API了，首先我们想一下应用场景，进入应用首页，这时候首页只显示一页的分享内容（html），然后，前端通过js判断，若滚动条托底，则再次动态增加一页的内容（api），以此类推，直到加载完成为止。

根据这个场景，首先修改首页的视图模型，将全部查询改为获取前20项：

@main.route("/",methods=["GET","POST"])
def index():
    ...
    posts=Post.query.order_by(Post.createtime.desc()).limit(20) #首页显示已有博文 按时间排序
    ...

然后修改Post.py,以实现json转换的功能：

def to_json(self):
    json={
        "body":self.body,
        "body_html":self.body_html,
        "id":self.id,
        "createtime":self.createtime,
        "author":User.query.get(self.author_id).to_json()
    }
    return  json;

其中作者项引用的是user的一个json转换方法，内容如下：

def to_json(self):
	json = {
	    "id": self.id,
	    "username": self.username,
	    "nickname": self.nickname,
	    "email": self.email,
	    "birthday": self.birthday,
	    "gender": self.gender,
	    "headimg": self.headimg,
	    "remark":self.remark,
	    "createtime": self.createtime
	};
	return json;

非常傻瓜的一个写法，接着是完善api的功能：

from flask import current_app,jsonify
from ..models.Post import Post
from ..api_1_0 import api
@api.route("/posts/<int:page>")
def posts(page):
    pagination = Post.query.order_by(Post.createtime.desc()).paginate(
        page, per_page=current_app.config["POSTS_PER_PAGE"], error_out=False
    )
    return jsonify(
        {
            "has_next":1 if  pagination.has_next else 0,
            "page":pagination.page,
            "posts":[post.to_json() for post in pagination.items]
        });

只要这几项，基本也就够用了，同土土的方法测试一下，在浏览器中输入http://127.0.0.1:5000/api/v1_0/posts/1，返回内容如下：

{
  "has_next": 1,
  "page": 1,
  "posts": [
    ...
    {
      "author": {
        "birthday": "Fri, 05 Feb 1988 00:00:00 GMT",
        "createtime": "2017-02-24 23:27:54",
        "email": "zhangji@qq.com",
        "gender": 0,
        "headimg": "48da3c86-109f-11e7-8e7a-7824af04112f",
        "id": 1,
        "nickname": "\u5f20\u5409",
        "remark": null,
        "username": "zhangji"
      },
      "body": "Morbi ut odio. Suspendisse potenti. Donec ut dolor.",
      "body_html": "<p>Morbi ut odio. Suspendisse potenti. Donec ut dolor.</p>",
      "createtime": "Thu, 06 Apr 2017 00:00:00 GMT",
      "id": 37
    }
  ]
}

注意日期格式不正确，对to_json进行一下修改：

    def to_json(self):
        json={
            "body":self.body,
            "body_html":self.body_html,
            "id":self.id,
            "createtime":self.createtime.strftime('%Y-%m-%d %H:%M:%S')  ,
            "author_id":self.author_id
        }
        return  json;

User的日期部分与此相同，现在的输出：

   {
	  "has_next": 1,
	  "page": 1,
	  "posts": [
	    ...
	    {
	      "author": {
	        "birthday": "Fri, 05 Feb 1988 00:00:00 GMT",
	        "createtime": "2017-02-24 23:27:54",
	        "email": "zhangji@qq.com",
	        "gender": 0,
	        "headimg": "48da3c86-109f-11e7-8e7a-7824af04112f",
	        "id": 1,
	        "nickname": "\u5f20\u5409",
	        "remark": null,
	        "username": "zhangji"
	      },
	      "body": "Morbi ut odio. Suspendisse potenti. Donec ut dolor.",
	      "body_html": "<p>Morbi ut odio. Suspendisse potenti. Donec ut dolor.</p>",
	      "createtime": "2017-04-06 00:00:00",
	      "id": 37
	    }
	  ]
	}

ok 接下来就是对于我一个js渣来说最难的部分了，前端动态导入post

郑重声明###

以下代码仅仅为了实现功能，对于一个js渣的代码来说，对大家没有任何参考价值,仅供参考，仅供参考，仅供参考，重要的话说三遍！！

<script type="text/javascript">
  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {
        $.getJSON({url:"{{url_for('api.posts')}}",data:{page:$("#page_num").val()-0+1},
            success:function (data,status) {
            $("#page_num").val(data.page);
             $("#has_next").val(data.has_next);
             console.log(data);
            var html="";
            for(var i=0;i<data.posts.length;i++) {
                html+="<div class='bs-callout";
                if(i%2==0){
                   html+=" bs-callout-last ";
                }else
                {
                   html+=" bs-callout-d ";
                }
                html+="'>";
                html+="<div class='row'>";
                html+="<div class='col-sm-2 col-md-2'>";
                html+="<a class='text-left' href='/user/"+data.posts[i].author.username+"'>";
                html+="<img src='http://on4ag3uf5.bkt.clouddn.com/"+data.posts[i].author.headimg+"'>";
                html+="</a>";
                html+="</div>";
                html+="<div class='col-sm-10 col-md-10'>";
                html+="<div>";
                html+="<p>";
                if(data.posts[i].body_html!=""){
                    html+=data.posts[i].body_html;
                }else{
                    html+=data.posts[i].body;
                }
                html+="</p>";
                html+="</div>";
                html+="<div>";
                html+="<a class='text-left' href='/user/"+data.posts[i].author.username+"'>"+data.posts[i].author.nickname+"</a>";
                html+="<span class='text-right'>发表于&nbsp; "+moment( data.posts[i].createtime).fromNow(refresh=true)+"前</span>";
                html+="</div>";
                html+="</div>";
                html+="</div>";
                html+="</div>";
            }
            $("#all").html($("#all").html()+html);
        }});
    }
});

可以看到，很烂的js代码，基本都是HTML拼接，但不管怎么说，功能算是实现了，而且运行起来也算是流畅，当然，如果谁有react或angularjs或vue的解决方案的话，还是不吝赐教。而且不知道你还注意到没有，在日期的</span>前面多了一个的前字，这是由于flask-moment插件的fromNow直接显示n天前，而momentjs则显示的是n天，不知道是哪里的配置有问题，如果哪位大侠能够明白，还望帮忙解惑，先谢谢了。