一个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是一直的，比如常用的几个：
- 200 执行成功
- 400 请求错误
- 401 未授权
- 403 禁止
- 404 未发现
- 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'>发表于 "+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天，不知道是哪里的配置有问题，如果哪位大侠能够明白，还望帮忙解惑，先谢谢了。
