Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API

  • 原创
  • Madman
  • /
  • 2018-11-01 20:32
  • /
  • 0
  • 124 次阅读

flask vuejs 全栈开发-min.png

Synopsis: 本文是Flask+Vue.js全栈开发的第一篇,主要是以比较优化的结构搭建Flask应用,并提供一个测试的API,客户端访问 /ping 后会返回 Pong! 响应,用于下一篇前端Vue.js测试与后端的连通性

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.1 ,欢迎star

1. 代码管理

1.1 安装 git

使用 Win10 系统开发,先安装 Git for Windows请移步

1.2 创建 Github 仓库

登录你的 Github 账户,创建个人项目,我的命名为 flask-vuejs-madblog。在你的 Github 账户中添加该电脑的 SSH keys,请移步

1.3 git clone

克隆到本地,打开 Git Bash

$ cd /d/python-code/
$ git clone git@github.com:wangy8961/flask-vuejs-madblog.git

1.4 init commit

添加 MIT License,然后第一次提交:

$ cd flask-vuejs-madblog/
$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        LICENSE

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "init"
$ git push

1.5 分支管理

创建 dev 开发分支:

$ git checkout -b dev
$ git branch
* dev
  master

2. 配置 Flask

安装 Python 3,请前往 官方网站 下载 Windows 对应版本

请确保有 Flask 基础,阅读官方文档

打开 cmd ,切换到项目目录,创建 back-end 目录,这是我们的后端API应用所在位置:

Microsoft Windows [版本 10.0.14393]
(c) 2016 Microsoft Corporation。保留所有权利。

C:\Users\wangy>D:

D:\>cd python-code\flask-vuejs-madblog

D:\python-code\flask-vuejs-madblog>mkdir back-end

D:\python-code\flask-vuejs-madblog>cd back-end

D:\python-code\flask-vuejs-madblog\back-end>python -m venv venv

D:\python-code\flask-vuejs-madblog\back-end>venv\Scripts\activate
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip install flask
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip freeze > requirements.txt

使用 Visual Studio Code 打开项目,提供 .gitignore 文件:

.idea/
__pycache__/
venv/
.env
app.db
madblog.log*

2.1 应用工厂

创建 app 目录,然后新建 app/__init__.py,将使用应用工厂函数来创建 Flask 应用:

from flask import Flask
from config import Config


def create_app(config_class=Config):
    app = Flask(__name__)
    app.config.from_object(config_class)

    # 注册 blueprint
    from app.api import bp as api_bp
    app.register_blueprint(api_bp, url_prefix='/api')

    return app

2.2 API蓝图

创建 app/api 目录,然后新建 api/__init__.py,定义蓝图:

from flask import Blueprint

bp = Blueprint('api', __name__)

# 写在最后是为了防止循环导入,ping.py文件也会导入 bp
from app.api import ping

定义我们第一个路由函数,当客户端访问 /ping 时返回包含 Pong!JSON 数据,创建 api/ping.py

from flask import jsonify
from app.api import bp


@bp.route('/ping', methods=['GET'])
def ping():
    '''前端Vue.js用来测试与后端Flask API的连通性'''
    return jsonify('Pong!')

2.3 应用启动文件

创建 back-end/madblog.py

from app import create_app

app = create_app()

2.4 配置文件

创建 back-end/config.py

import os
from dotenv import load_dotenv

basedir = os.path.abspath(os.path.dirname(__file__))
load_dotenv(os.path.join(basedir, '.env'))


class Config(object):
    pass

我们的 Flask 应用会使用很多系统环境变量,准备写在 back-end/.env 中,Python 可以使用 python-dotenv 这个包来读取环境变量信息,所以我们先安装这个包:

(venv) D:\python-code\flask-vuejs-madblog\back-end>pip install python-dotenv
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip freeze > requirements.txt

创建 back-end/.env

FLASK_APP=madblog.py
FLASK_DEBUG=1

最终项目结构如下:

2.5 启动应用

(venv) D:\python-code\flask-vuejs-madblog\back-end>flask run
 * Serving Flask app "madblog.py" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 255-823-695
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

打开浏览器,访问 http://127.0.0.1:5000/api/ping

说明我们定义的 Ping-Pong 测试路由正常

3. 提交代码

$ git add .
$ git commit -m "1. 后端Flask RESTful API提供测试接口 Ping-Pong!"
$ git checkout master
$ git merge dev
$ git branch -d dev
$ git branch

将本地 master 分支代码上传到 Github 代码仓库中的 master 分支:

$ git push
或者:
$ git push -u origin master

打上标签 tag并上传:

$ git tag v0.1
$ git tag
v0.1
$ git show v0.1

1. 同步单个标签
$ git push origin v0.1

2. 同步所有标签
$ git push --tags
或者:
$ git push origin --tags

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.1 ,欢迎star

分类: Vue.js
标签: API RESTful vuejs flask
未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API

分享

作者

作者头像

Madman

如果博文内容有误或其它任何问题,欢迎留言评论,我会尽快回复; 或者通过QQ、微信等联系我

0 条评论

暂时还没有评论.

发表评论前请先登录