一步步创建异步Python Web框架+Vue的网站（1）

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的基本网站吧！

image.png

技术栈：

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: 'aaa@bbb.com'
    })
      .then(response => response.data)
  },

POST：/api/v1/resource + data + headers: { 'Authorization': 'Correct Token' }

  postResourceAuthorized () {
    return $axios.post(`resource`, {
      id: 'kevinqq',
      email: 'aaa@bbb.com'
    }, {
      headers: { 'Authorization': 'Correct Token' }
    })
      .then(response => response.data)
  }
}

主页index.html
整个项目，静态HTML只有这一个文件，放到/public

image.png

# /public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>Sanic + Vue.js Template</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

前端编译：
运行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