Sanic官网：https://sanic.readthedocs.io/en/latest/index.html
关键字：异步 Python Web框架 Sanic Vue
Python Web Framework 有很多，大家熟知的有Django, Flask，这些都是基于同步的框架，就是说，同一时间，框架只处理一个http 请求。
现在异步模式用得越来越多的，Python自3.5起，也原生支持async/await关键字了。
所以异步的Python Web框架也要开始学习了，目前相对功能完整的是Sanic，但国内介绍的大多是同步的Flask和Django，异步的很少。
前端框架，国人的Vue.js，简单易用，渐进式开发，是较好的选择。
Sanic + Vue.js，会碰撞出什么样的火花呢？
我们就一步步来撸个Sanic+Vue的基本网站吧！
技术栈：
- Python 3
- Sanic
- Vue 2.0全家桶 (Vue-CLI 3, Vue router, Vuex)
- Yarn
- Pipenv
- ajax (axios)
目标：
- 前端Vue.js 来渲染SPA页面
- 开发阶段：支持Webpack 热替换HMR (hot module replacement)
- yarn+Vue CLI：自动serve、build
- Vue+axios 通过 API接口，与后端交互
- 后端Sanic，异步框架，发送index.html，以及提供API endpoint
- 部署到服务器，这里以Heroku为例
先访问Demo，体验一下最终的结果：
Demo: https://sanic-vue-template.herokuapp.com/#/api
环境
- Python 3
注意：你需要Linux环境的Python 3.5+来运行asyncio/sanic！
Ubuntu 18.04，自带Python3.6
如果你是Win10用户，简单地用WSL环境就行了
参考：Win10内置Ubuntu，完美使用Docker in Windows
Windows10 + WSL 使用Linux图形界面程序
- Python虚拟环境
推荐pipenv，完美支持virtual-env
pip install --user pipenv
mkdir sanic-vue-template
cd sanic-vue-template
创建虚拟环境，完成后命令行前会提示(sanic-vue-template)：
kevinqq@kevin-hotmail:git/sanic-vue-template$ pipenv shell
Loading .env environment variables…
Creating a virtualenv for this project…
...
✔ Successfully created virtual environment!
...
(sanic-vue-template) kevinqq@kevin-hotmail:git/sanic-vue-template$
- Webpack前端工具 - yarn
安装yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
sudo apt install node.js
项目结构
| Location | Content |
|---|---|
/app |
Sanic Application |
/app/api_v1 |
Sanic Rest Api (/api/v1/) |
/app/client.py |
Sanic Client (/) |
/src |
Vue App . |
/src/main.js |
JS Application Entry Point |
/public/index.html |
Html Application Entry Point (/) |
/public/static |
Static Assets |
/dist/ |
Bundled Assets Output (generated by yarn build |
Vue前端
引用模块
创建/package.json：
https://github.com/kevinqqnj/sanic-vue-template/blob/master/package.json
yarn会根据这个文件，来安装模块：yarn install-
Vue.js source文件
创建/src目录
image.png
此目录里文件，大都可以由Vue-CLI来自动生成，你也可以从以下链接复制：
https://github.com/kevinqqnj/sanic-vue-template/tree/master/src
/src/main.js是Vue.js主入口
/src/router.js是Vue-router路由配置
/src/store.js是Vuex状态管理（全局变量）文件
为了跟后端配合，需要设置api接口地址：
# /src/backend.js
let $axios = axios.create({
baseURL: '/api/v1/',
timeout: 8000,
headers: { 'Content-Type': 'application/json' }
})
API地址示例：
GET：/api/v1/resource?id=xxx
export default {
getResource () {
return $axios.get(`resource?id=xxx`)
.then(response => response.data)
},
POST：/api/v1/resource + data
postResource () {
return $axios.post(`resource`, {
id: 'kevinqq',
email: '[email protected]'
})
.then(response => response.data)
},
POST：/api/v1/resource + data + headers: { 'Authorization': 'Correct Token' }
postResourceAuthorized () {
return $axios.post(`resource`, {
id: 'kevinqq',
email: '[email protected]'
}, {
headers: { 'Authorization': 'Correct Token' }
})
.then(response => response.data)
}
}
- 主页
index.html
整个项目，静态HTML只有这一个文件，放到/public
image.png
# /public/index.html
Sanic + Vue.js Template
-
前端编译：
运行yarn build，会生成/dist目录，后端提供静态资源，就指向这个目录。
image.png 开发阶段，API代理
开发阶段，前后端会一直处于调试状态，通过设置API代理，可以方便地同时前、后端开发。
在/vue.config.js文件里设置：
module.exports = {
outputDir: 'dist',
assetsDir: 'static',
devServer: {
proxy: {
'/api*': {
// Forward frontend dev server request for /api to django dev server
target: 'http://localhost:5000/'
}
}
}
}
执行前端开发服务器：yarn serve，会自动打开浏览器localhost:8080。
这样，你只要打开前端调试server（8080端口），API访问就会自动转向后端地址（5000端口），你修改前端、后端文件时就能实时看到更新了！
- yarn serve => localhost:8080 => /api => localhost:5000
真正部署到生产服务器时，用户访问的是后端服务，那时，就是直接访问/dist目录里的静态文件了。
- yarn build => /dist => localhost:5000
Sanic后端：请看第2篇
一步步创建异步Python Web框架+Vue的网站（2）https://www.jianshu.com/p/87cc8d824931
参考：Flask+Vue.js https://github.com/gtalarico/flask-vuejs-template