Framework7+Vue+Flask开发实战 - PT保种管理系统1 - 概述
Vue+Flask轻量级前端、后端框架，如何完美同步开发
OB保种管理系统使用说明
前端Vue + 后端Flask 同步开发
有了需求分析和整体构思，下面就着手开发了。
dev stack.jpg
首先，先搭好前端Framework7+Vue的框架，参考：Framework7+Vue.js Spotify播放器 - 实例详解（1）
然后，再搭好后端Flask的框架：参考：Vue 2.0 起步(4) 轻量级后端Flask用户认证 - 微信公众号RSS
这时，你的项目目录应该像这样：
project directory.jpg
分享一下我的前、后端同步开发的流程，目的是无缝同步、高效率（苦差事瞬间变轻松~）
- 打开命令行窗口（cmd.exe），运行
phonegap -- --lr，前端热替换窗口打开，地址是 http://localhost:8081 - 再打开一个命令行窗口，运行
python manage.py runserver，用浏览器打开后端Flask的窗口：http://locahost:5000。前一步的8081浏览器窗口不能关，因为需要访问8081端口上的前端代码文件（main.js）。 - 前端修改代码，浏览器http://locahost:5000 热加载（hot reload），立马看到修改效果：比如颜色、布局、按钮、表格、导航、js函数。。。
- 后端修改代码，这不用说了，Flask测试服务器http://locahost:5000，立马会重新加载新的python代码
- 本地数据库，使用python自带的sqlite3。当然，你装个mysql/Postgresql更好，因为各个数据库有些不同，上线后可能会碰到奇怪的报错。使用SQLiteStudio，可以直接查看、修改SQLite数据。数据库结构修改，使用Alembic 无缝migration
- 调试：浏览器F12，查看Network、Console、Vue Devtools
- 编译：运行
phonegap build --release，webpack打包成js、css文件到/www目录 - 唯一要手动修改的地方，且仅在上传到服务器时才需要：/app/templates/index.html，修改引用最新编译的main_<hash>.js、main_<hash>.css
- git 上传到服务器：git add / git commit / git push
- Bingo! 一次迭代更新完成！
一次更新，最快只要几分钟就完成。这就是前、后端同步开发的好处。
(最后两步，你也可以写个小程序，自动完成)
当然，因为我们引入了Framework7+Phonegap，文件结构稍微有些变化。参考：Vue+Flask轻量级前端、后端框架，如何完美同步开发，这是理论基础，我们稍加修改就行：
- \app\templates\index.html 这是热同步关键
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<title>OB管理 v0.6.6</title>
<link rel="shortcut icon" href=/static/favicon.ico>
<link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.colors.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href=/static/main_20171103a.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/static/main_20171106c.js></script>
<script src=http://localhost:8081/main.js></script>
</body>
</html>
我们的主开发界面地址是Flask的：http://localhost:5000
-
head引用favicon、外部css，这不用多讲。 -
main_<hash>.css是自定义的css文件，如果有更新，才需要手动改hash（我用了日期+字母，容易记） -
body引用phonegap前端的http://localhost:8081/main.js，这样前端代码更新，Flask的localhost:5000立马就同步更新。 -
main_<hash>.js是编译后的js文件，如果有更新，每次上传到远程服务器才会去改一下。 - 如果有vue、css更新，则需要用phonegap（webpack）编译，在
c:\git\ourbits\www\目录下会产生 main.js, main.css，手动复制到c:\git\ourbits\app\static\目录，改成跟index.html里，对应的hash值 - 如果只是更新了Flask后台Python代码，则不需要phonegap编译，直接git上传就行（因为js/css没有变化）
最后，webpack的config文件，也要修改一下，不然，默认http://localhost:8081/main.js这个文件是不存在的，Flask就不能访问到最新的前端更新（main.js）。
c:\git\ourbits\webpack.config.js
output: {
pathinfo: false,
devtoolLineToLine: true,
filename: '[name].js', // 这里原来写的是 [hash].[name].js
sourceMapFilename: '[name].js.map',
path: path.join(__dirname, 'www')
},
下一篇，To be continued...
网友评论