从头完成一个restful API 服务（二）

01.完善设计

在上次的设计当中，我定义了三张表，AdminUser，用来作为调用API鉴权用户，User，用来作为存储普通用户使用，Picture，用来作为存储用户上传的图片。但是当时只是实现了AdminUser的相关功能，而User和Picture还没有真正的关联起来，这次就把它们完善起来

02.测试server

为了方便测试，我这里写了一个简单的测试web server，用来在网页上向API服务器发请求。代码很简单，还是用flask来启动server，返回一个页面。

@app.route('/jsupload', methods=['POST', 'GET'])
def jsupload():
    return render_template('js_upload.html')

而返回的这个页面也很简单，包含一个form，用来提交数据的。

<form id= "uploadForm">
   <p >指定用户名： <input type="text" name="filename" value= "" id="UID"/></p>
   <p >上传文件： <input type="file" name="file" id="PID"/></p>
   <input type="button" value="上传" onclick="upload()" />
</form>

这样一个简单的测试server就好了。

03.前端代码

前端代码使用Ajax来提交数据和回显数据
代码都是比较基础的，定位元素，调用函数，说下这里的url，那个就是我在本地启动的API server的地址喽。同时这里还在监听服务器的返回，获取到返回的p_url，来显示图片。

4. 后端代码

首先判断下前端传的是否是图片文件，如果不是直接返回错误

if 'PID' not in request.files:
    return jsonify({'code': -1, 'filename': '', 'msg': 'please select one picture to upload'})

然后在本地创建目录用于保存图片，并且着手处理User和Picture的关系

如果不存在目录则创建，并且保存图片。如果用户存在于数据库中，那么picture_count加1，同时更新Picture表，关联picture_id为user_id。

如果用户不存在，那么先插入用户，提交，然后再更新Picture表

最后API返回p_url用于前端web展示

return jsonify({"p_url": 'http://127.0.0.1:9980/static/%s/' % user + new_filename})

6. 任重道远

这次的完善就到这里了，不过程序还是有很多问题的，比如我现在就知道如果在web端不填写名字或者不选择图片，都会产生一些问题；同时还可以增加一些接口，比如获取用户所有图片等待，这些都留到后面再说吧

还有个严峻的问题，就是每次本地调测好之后，都要手动同步代码到远程服务器，非常之麻烦，虽然目前项目很小，但是CI还是很有必要的，后面就来聊聊怎么结合GitHub做持续集成吧

获取源码看这里：

https://github.com/zhouwei713/mini_api