Vue+Flask 轻量级前端、后端框架,如何完美同步开发

阅读 4561
收藏 104
2017-05-07
原文链接:www.jianshu.com

导言

  • 我们的Vue2.0应用:简读-微信公众号RSS,即将进入后端开发。
  • Vue+Flask作为轻量级前端、后端框架,非常适合组合起来快速开发。一个是js,一个是Python。

Bonus:
可以完美实现跨域调试,不需要JSONP,也不需要服务器端设置'Access-Control-Allow-Origin'
-> Vue 2.0 起步(4) 轻量级后端Flask用户认证 - 微信公众号RSS

问题

作为一个全(ku)能(bi)的全栈开发人员,前、后端往往是一个人搞定。开发过程中最常见问题是,每次前端修改了html/js,一般先要用webpack编译,再手工复制编译后文件到Flask的工作目录,后端框架才能使用更新后html/js。
那么,对于追求极致效率的人,如何完美实现:前后端共用代码同步更新呢?

解决

注意:以下是以初始化模板为“vue init webpack <ProjectName>”为例

观察Vue开发时,webpack热替换的编译代码中,含有以下文件:

app.js (包含打包后的所有HTML、js、CSS文件)
__webpack_hmr (webpack热替换文件)

那我们把这些文件让 Flask引用一下Vue http://localhost:8080 的这两个文件,不就可以实现同步更新了吗?

如果初始化模板“vue init webpack-simple <ProjectName>”,则替换app.jsdist/build.js

实施

  • 新建两个目录,存放Flask的模板和静态文件:
/static/
/templates/
  • Flask 最简后台服务器程序(10行代码):
# /app.py
#!/usr/bin/env python
# encoding: utf-8
from flask import Flask, render_template, redirect

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/__webpack_hmr')
def npm():
    return redirect('http://localhost:8080/__webpack_hmr')

if __name__ == '__main__':
    app.run(debug=True)
  • 复制Vue项目/index.html,到Flask模板文件夹/templates下面,然后添加引用 app.js:

    如果初始化模板“vue init webpack-simple <ProjectName>”,则替换app.jsdist/build.js

# /templates/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简读 - 公众号RSS</title>
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="http://localhost:8080/app.js"></script>
    <script type="text/javascript" src="http://localhost:8080/1.1.js"></script>
    <script type="text/javascript" src="http://localhost:8080/2.2.js"></script>
  </body>
</html>

大家要问了,/templates/index.html里,不仅有 app.js,还有其它的几行?
是的,等我一一道来:

  • <link>是引用font-awesome图标,如果你没有用到图标CSS,也可以忽略这一行
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    同时,复制/node_modules/font-awesome/整个文件夹,到Flask的静态文件夹/static下面:
    /static/font-awesome/
  • 1.1.js、2.2.js...,这些文件是vue-router里,如果定义了路由懒加载,那除了app.js以外,webpack编译时,会多出这些类似的文件,大家用 npm run build可以看到产生了哪些懒加载js,然后把它们加入到 /templates/index.html里面去:
    <script type="text/javascript" src="http://localhost:8080/1.1.js"></script>
    <script type="text/javascript" src="http://localhost:8080/2.2.js"></script>

同步更新

现在,同时运行前端、后端开发环境:

npm run dev
python app.py

打开两个浏览器:

Vue.js: http://locahost:8080
Flask: http://localhost:5000

Vue、Flask同步更新前

这时,我们更新一下,比如前端框架里,Home.vue代码中标题的名字:

# /src/components/Home.vue
<template>
  <div>
    <div class="jumbotron">
      <h1 class="display-3 text-success">简 读(Changed in Vue</h1>
。。。
      </p>
    </div>
  </div>
</template>

是不是立马看到,前后端两个浏览器窗口,都同时更新显示了?!


同步更新后

OK!下一步,我们就来开发公众号RSS应用的后端程序,敬请期待!

Vue 2.0 起步(1) 脚手架工具 vue-cli + Webstorm 2016 + webpack
Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS
Vue 2.0 起步(3) 数据流vuex和LocalStorage实例 - 微信公众号RSS
Vue 2.0 起步(4)第二版 轻量级后端Flask用户认证 - 微信公众号RSS
...
Vue 2.0 起步(7) 大结局:公众号文章抓取 - 微信公众号RSS

评论