Framework7+Vue+Flask开发实战 - PT保种管理系统2 - 前后端同步

2019年6月9日 281次阅读 来源: 非梦nj

Framework7+Vue+Flask开发实战 – PT保种管理系统1 – 概述
Vue+Flask轻量级前端、后端框架，如何完美同步开发
OB保种管理系统使用说明

前端Vue + 后端Flask 同步开发

有了需求分析和整体构思，下面就着手开发了。

《Framework7+Vue+Flask开发实战 - PT保种管理系统2 - 前后端同步》 dev stack.jpg

首先，先搭好前端Framework7+Vue的框架，参考：Framework7+Vue.js Spotify播放器 – 实例详解（1）
然后，再搭好后端Flask的框架：参考：Vue 2.0 起步(4) 轻量级后端Flask用户认证 – 微信公众号RSS
这时，你的项目目录应该像这样：

《Framework7+Vue+Flask开发实战 - PT保种管理系统2 - 前后端同步》 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…

    原文作者：非梦nj
    原文地址: https://www.jianshu.com/p/2979d1591dca
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞