导言我们的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 ”为例
观察Vue开发时,webpack热替换的编译代码中,含有以下文件:app.js (包含打包后的所有HTML、js、CSS文件)
__webpack_hmr (webpack热替换文件)
那我们把这些文件让 Flask引用一下Vue http://localhost:8080 的这两个文件,不就可以实现同步更新了吗?如果初始化模板“vue init webpack-simple ”,则替换app.js为dist/build.js
实施新建两个目录,存放Flask的模板和静态文件:/static//templates/Flask 最简后台服务器程序(10行代码):# /app.py#!/usr/bin/env python# encoding: utf-8from 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 ”,则替换app.js为dist/build.js# /templates/index.htmlhtml>
简读 - 公众号RSS大家要问了,/templates/index.html里,不仅有 app.js,还有其它的几行?
是的,等我一一道来:是引用font-awesome图标,如果你没有用到图标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里面去:
同步更新
现在,同时运行前端、后端开发环境:npm run devpython app.py
打开两个浏览器:Vue.js: http://locahost:8080Flask: http://localhost:5000
Vue、Flask同步更新前
这时,我们更新一下,比如前端框架里,Home.vue代码中标题的名字:# /src/components/Home.vue
简 读(Changed in Vue
。。。是不是立马看到,前后端两个浏览器窗口,都同时更新显示了?!
同步更新后调试完毕后,编译成生产环境:
vue2+Flask网站,轻松部署到免费主机Heroku
npm run build
复制/dist/目录下文件,到/app/templates, /app/static下
OK!下一步,我们就来开发公众号RSS应用的后端程序,敬请期待!
作者:非梦nj
链接:https://www.jianshu.com/p/3f6964028ec3