使用Flask-Restplus和Swagger UI最小化实现增删改查

继文章 https://codinglonglong.github.io/posts/pei-zhi-flask-restplushe-swagger-uishi-xian-apice-shi-wen-dang-zi-dong-hua/ 之后,我们参考文档实现了一个最小化增删改查的案例。

#-*-coding:utf-8-*-
from flask import Flask
from flask.ext.restplus import Api, Resource, fields

app = Flask(__name__)
api = Api(app, version='1.0', title='TodoMVC API',
        description='A simple TodoMVC API',
        )

ns = api.namespace('todos', description='TODO operations')

todo = api.model('Todo', {
    'id': fields.Integer(readOnly=True, description='The task unique identifier'),
    'task': fields.String(required=True, description='The task details')
})


class TodoDAO(object):

    def __init__(self):
        self.counter = 0
        self.todos = []

    def get(self, id):
        for todo in self.todos:
            if todo['id'] == id:
                return todo
        api.abort(404, "Todo {} doesn't exist".format(id))

    def create(self, data):
        todo = data
        todo['id'] = self.counter = self.counter + 1
        self.todos.append(todo)
        return todo

    def update(self, id, data):
        todo = self.get(id)
        todo.update(data)
        return todo

    def delete(self, id):
        todo = self.get(id)
        self.todos.remove(todo)


DAO = TodoDAO()
DAO.create({'task': 'Build an API'})
DAO.create({'task': '你好'})


@ns.route('/')
class TodoList(Resource):
    '''Shows a list of all todos, and lets you POST to add new tasks'''

    def get(self):
        '''List all tasks'''
        return DAO.todos

    @ns.expect(todo)
    def post(self):
        '''Create a new task'''
        return DAO.create(api.payload), 201


@ns.route('/<int:id>')
@ns.response(404, 'Todo not found')
@ns.param('id', '任务标识')
class Todo(Resource):
    '''Show a single todo item and lets you delete them'''

    def get(self, id):
        '''Fetch a given resource'''
        return DAO.get(id)

    def delete(self, id):
        '''Delete a task given its identifier'''
        DAO.delete(id)
        return '', 204

    @ns.expect(todo)
    def put(self, id):
        '''Update a task given its identifier'''
        return DAO.update(id, api.payload)


if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=8080)

运行结果:

https://github.com/longlongpicture/myblogpicture/raw/master/flaskswageruifull.PNG

在这个例子中,我们实现了五种最基本的API:

  1. 查询全部todo
  2. 添加todo
  3. 查询某一个todo
  4. 删除某一个todo
  5. 更新某一个todo

而更复杂的项目都是基于这五种API展开的,从这里我们也可以看出RESTful Web Services的技术美感, simple is better

配置Flask-Restplus和Swagger UI实现API测试文档自动化

继文章 https://codinglonglong.github.io/posts/dockerpei-zhi-kai-fa-jing-xiang/ 之后,我们继续实验。

1、Docker中安装Flask-Restplus。

pip install flask-restplus

2、主系统编写测试程序main.py。

from flask import Flask
from flask_restplus import Api, Resource, fields

app = Flask(__name__)
api = Api(app, version='1.0', title='Sample API',
    description='A sample API',
)

@api.route('/my-resource/<id>')
@api.doc(params={'id': 'An ID'})
class MyResource(Resource):
    def get(self, id):
        return {}

    @api.response(403, 'Not Authorized')
    def post(self, id):
        api.abort(403)


if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=8080)

3、Docker中运行程序。

cd /usr/development/
python main.py

4、主系统查看测试结果。

https://github.com/longlongpicture/myblogpicture/raw/master/flaskswaggerui.PNG

可以看到通过Swagger UI,我们能够很方便地在浏览器上测试API的可用性。

Docker配置开发镜像

在主系统上开发,在Docker中部署,在主系统上测试……不需要一手一台电脑,也不需要担心虚拟机占用资源太高,而且不管主系统是Linux、Windows还是MacOS,开发都是一样的……感觉很不错……

  1. 新建容器。

    docker run --name mypc -i -t -p 8080:8080 -v ~/share/:/usr/development/ ubuntu:14.04 /bin/bash
    
  2. Docker中修改Ubuntu软件源。

    vi /etc/apt/sources.list
    :%s/archive.ubuntu/cn.archive.ubuntu/g
    :wq
    
  3. Docker中更新软件源。

    apt update
    
  4. Docker中安装Python和Flask。

    apt install python
    apt install python-pip
    apt install python-dev
    pip install flask
    
  5. 在主系统目录 ~/share/ 下编写测试网站main.py。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    from flask import Flask
    app = Flask(__name__)
    
    @app.route('/')
    def hello_world():
        return 'Hello World!'
    
    if __name__ == '__main__':
        app.run(host="0.0.0.0", port="8080")
    
  6. Docker中运行网站。

    cd /usr/development/
    python main.py
    
  7. 主系统上查看效果。

https://github.com/longlongpicture/myblogpicture/raw/master/flaskhelloworld.PNG

注意

  1. docker run --name mypc -i -t -p 8080:8080 -v ~/share/:/usr/development/ ubuntu:14.04 /bin/bash 中的 /usr/development/ 不可以是系统已有目录,否则会有权限问题,影响后续的安装。
  2. 如果不喜欢使用vim,第二步中可以先安装emacs,再修改/etc/apt/sources.list。

Docker常用命令

  1. 创建容器。

    docker run --name mypc -it ubuntu:16.04 /bin/bash
    

经过实验,目前只有这样创建的容器可以在后边正常start。

  1. 查看已有容器及其状态。

    docker ps -a
    
  2. 启动已有容器。

    docker start mypc
    
  3. 登陆正在运行的容器。

    docker exec -it mypc /bin/bash
    
  4. 关闭正在运行的容器。

    docker stop mypc
    
  5. 删除容器。

    docker rm mypc
    

注意 :重启电脑之前,记得先把VirtualBox里边的虚拟机正常关机,否则等重启回来,容器可能就找不到了。

Windows配置Docker

因为新笔记本的无线网卡和声卡比较新,目前的Linux发行版都无法很好地支持,所以只好先用Windows来进行开发了……

第一步,在Windows上部署Linux开发环境,首先考虑到的是用Docker。

  1. 安装docker-toolbox。访问下载安装: https://www.docker.com/products/docker-toolbox

  2. 在开始菜单双击运行Docker Quickstart Terminal,等待……………………直到出现

    1
    2
    3
    4
    5
    6
    7
    docker is configured to use the default machine with IP 192.168.99.100
    For help getting started, check out the docs at https://docs.docker.com
    
    Start interactive shell
    
    long@DESKTOP-N79DL8P MINGW64 ~
    $
    
  3. 运行 docker pull ubuntu:16.04

  4. 运行 docker run -it --rm ubuntu:16.04 bash ,进入ubuntu的交互环境。

vuejs学习(8)

本文要学习的是列表渲染 v-for ,看测试代码 TodoItem.vue

<template>
<div id="todoitem">
    <ul>
        <li v-for="item in items1">{{item}}</li>
    </ul>
    <table border="1">
        <tr>
            <td>项1</td>
            <td>项2</td>
            <td>索引</td>
        </tr>
        <tr v-for="item, index in items2">
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
            <td>{{index}}</td>
        </tr>
    </table>
    <ul>
        <li v-for="value, key, index in items3">{{index}}==>{{key}}==>{{value}}</li>
    </ul>
    <ul>
        <li v-for="item in 3">{{item}}</li>
    </ul>
    <ul>
        <template v-for="item in items5" v-if="male">
            <li>{{item}}</li>
        </template>
        <template v-for="item in items6" v-if="!male">
            <li>{{item}}</li>
        </template>
    </ul>
</div>
</template>

<script>
export default {
    data: function () {
        return {
            items1: [5, 6, 7],
            items2: [[1, 2], [3, 4], [5, 6]],
            items3: {
                'name': 'Tom',
                'age': 20,
                'gender': 'male'
            },
            male: true,
            items5: ["Boy1", "Boy2", "Boy3"],
            items6: ["Girl1", "Girl2", "Girl3"],
        }
    },
}
</script>

<style scoped>
</style>

运行结果:

https://github.com/longlongpicture/myblogpicture/raw/master/vueforrender.PNG

在上述的代码中,我们需要学到以下几个问题:

  1. vuejs的v-for和Python的for循环有很多相似的地方,比如元素迭代,比如整数迭代。
  2. vuejs的迭代可以包含索引,如果是列表,用“item, index in items”;如果是对象,用“value, key, index in items”。
  3. v-for迭代的目标也可以是函数的可迭代返回值,比如返回列表。

后面的文章我们将学习更复杂的列表渲染。