2020年09月19日Vue.js 3.0 “One Piece” 已正式发布，此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API，并为框架未来的长期迭代奠定了坚实的基础。当前用户量已有百万级，尤其是对新手而言，vue有着类似python的基础数据类型，以数据驱动的前端界面，非常适合熟悉python的人进行开发。我也是主推vue+python的前后端分离式开发模式。
0. 都2020年了，vue和falsk结合难度如何？
如果单纯的从分离开来的角度来讲，如今的vue借助尤雨溪新开发的vite工具，可以完全抛开webpack和vue-cli进行初始化环境,要知道，在vite工具诞生之前，操作vue的门槛，就是先得学习webpack这个打包工具。简而言之，就是必须先得自己柔和一套打包工具才行，虽然这东西属于一次设置，终身受益，但是这个门槛是非常高的，而vite的诞生，可以说革了webpack的命。因此如今的vue使用起来，几乎就是两行代码的事情，其余都是npm install即可，无需再次折腾类似webpack的东西。
flask是python的一种通用的web框架，诞生至今已有10年了，虽然官网界面比较复古极简，但使用者还是不在少数。纯后端的api开发，还可以看向fastapi，都是当今最主流的两个选择。
vue和flask的结合，其实没有任何难度，上手非常容易。
1. 从Flaks角度出发，部署一个结合vue的应用
首先来看下目录：
app.py是运行flask的python文件，books.db是临时创建的一个数据库，index.html就是flask的入口文件也是操作vue的文件。
首先是数据库方面，内容如下：
-- SQLite
CREATE TABLE books (
id int,
title varcha(255),
author varcha(255),
price int
)；
-- 插入数据
INSERT INTO books VALUES ('1','商业周刊','期刊','15');
INSERT INTO books VALUES ('2','新闻周刊','新闻','25');
INSERT INTO books VALUES ('3','有机化学','书籍','46');
INSERT INTO books VALUES ('4','读者文摘','读者','48');
然后是flask入口文件app.py的内容：
import sqlite3
from flask import Flask
from flask import jsonify,render_template
from flask_cors import CORS
app = Flask(__name__)
# CORS(app, supports_credentials=True) #解决跨域问题
cors = CORS(app, resources={r"/api/*": {"origins": "*"}}) #两种模式都行
@app.route('/')
def home():
return render_template('index.html',title='flask & vue')
@app.route('/api/books')
def books():
conn = sqlite3.connect('books.db')
conn.row_factory = sqlite3.Row
cur = conn.cursor()
sql = 'select * from books'
rows = cur.execute(sql).fetchall()
rows = [dict(row) for row in rows]
return jsonify(rows)
if __name__ == "__main__":
app.run(debug=True,port=3000)
最后来看下index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script src="https://gcore.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入axios -->
<script src="https://gcore.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>书籍信息展示</h1>
<table border="1" >
<tr>
<td>#</td>
<td>标题</td>
<td>作者</td>
<td>价格</td>
</tr>
<!-- 定义行 -->
<tr v-for="book in books">
<td>[[book.id]]</td>
<td>[[book.title]]</td>
<td>[[book.author]]</td>
<td>[[book.price]]</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
books:[],
msg: '说你好'
},
delimiters: ["[[","]]"], //用于避免与flask冲突
mounted: function(){
this.fetchData()
},
methods: {
fetchData(){ // axios异步请求数据
axios.get('/api/books').then(res =>{
this.books = res.data
console.log(this.books)
}).catch(err=>{
console.log(err)
})
}
}
})
</script>
</body>
</html>
最终效果：
由于flask采用的是jinja模板，也就是采用{{}}模式与web页面交互，因此会与vue的默认分隔符号相冲突，因此在script里需要修改delimiters: ["[[","]]"]。当然还有其他修改方式，这里推荐的也是相对简单的方法。
2. flask和vue结合的优势
-
- vue有着简洁、易懂的前端界面开发逻辑
-
- flask有着python独特的语义化代码，非常适合处理各种数据
-
- 两种语言都对小白非常友好，python更是当下最广泛的编程语言，用户量庞大
-
- 当前vue在vite的帮助下，可以快速定制开发环境，不论是html模板的
pug语法，还是style的stylus语法，都是简化输入，突出逻辑框架，开发者的精力可以更集中在逻辑设计上。
- 当前vue在vite的帮助下，可以快速定制开发环境，不论是html模板的
-
- 容易上手，带来的自然高效率、易维护、易复制
3. 小结
以flask和vue结合的前后端分离式开发，几乎可以满足绝大多数的应用场景，不管单页应用也好，还是多页，两者结合都是不错的选择。最终打包成Docker也是非常容易实现的，这样一来即可使用容器化的数据库也可以直接使用现成的数据库，就看哪种比较容易维护了。实际上，基于Docker容器化的开发模式下，可以在Windows上避免使用各种Windows客户端，转而直接上手linux内核的mysql、mongodb等等，这样做的好处非常多，比如容器化管理是秒级创建、启动或删除；再比如本地与服务器迁移是无缝实现等等。所以，想happy codeing，Docker基础是必不可少的，在我看来，可以优先于其他语言进行学习。
