做网站的安全证书,榕江网站建设,固安网站建设,化妆品企业网站源码导言我们的Vue2.0应用#xff1a;简读-微信公众号RSS#xff0c;即将进入后端开发。VueFlask作为轻量级前端、后端框架#xff0c;非常适合组合起来快速开发。一个是js#xff0c;一个是Python。Bonus:可以完美实现跨域调试#xff0c;不需要JSONP#xff0c;也不需要服务…导言我们的Vue2.0应用简读-微信公众号RSS即将进入后端开发。VueFlask作为轻量级前端、后端框架非常适合组合起来快速开发。一个是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, redirectapp 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(debugTrue)复制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:5000Vue、Flask同步更新前这时我们更新一下比如前端框架里Home.vue代码中标题的名字# /src/components/Home.vue简 读(Changed in Vue。。。 是不是立马看到前后端两个浏览器窗口都同时更新显示了同步更新后调试完毕后编译成生产环境vue2Flask网站轻松部署到免费主机Herokunpm run build复制/dist/目录下文件到/app/templates, /app/static下OK下一步我们就来开发公众号RSS应用的后端程序敬请期待作者非梦nj链接https://www.jianshu.com/p/3f6964028ec3
