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基础是必不可少的,在我看来,可以优先于其他语言进行学习。