• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

浅谈如何用使用flask和vue,快速开发常用应用

开发工具 佰阅 3年前 (2020-09-24) 4507次浏览 0个评论

2020年09月19日Vue.js 3.0 “One Piece” 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期迭代奠定了坚实的基础。当前用户量已有百万级,尤其是对新手而言,vue有着类似python的基础数据类型,以数据驱动的前端界面,非常适合熟悉python的人进行开发。我也是主推vue+python的前后端分离式开发模式。

0. 都2020年了,vue和falsk结合难度如何?

如果单纯的从分离开来的角度来讲,如今的vue借助尤雨溪新开发的vite工具,可以完全抛开webpackvue-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结合的优势

    1. vue有着简洁、易懂的前端界面开发逻辑
    1. flask有着python独特的语义化代码,非常适合处理各种数据
    1. 两种语言都对小白非常友好,python更是当下最广泛的编程语言,用户量庞大
    1. 当前vue在vite的帮助下,可以快速定制开发环境,不论是html模板的pug语法,还是style的stylus语法,都是简化输入,突出逻辑框架,开发者的精力可以更集中在逻辑设计上。
    1. 容易上手,带来的自然高效率、易维护、易复制

3. 小结

以flask和vue结合的前后端分离式开发,几乎可以满足绝大多数的应用场景,不管单页应用也好,还是多页,两者结合都是不错的选择。最终打包成Docker也是非常容易实现的,这样一来即可使用容器化的数据库也可以直接使用现成的数据库,就看哪种比较容易维护了。实际上,基于Docker容器化的开发模式下,可以在Windows上避免使用各种Windows客户端,转而直接上手linux内核的mysqlmongodb等等,这样做的好处非常多,比如容器化管理是秒级创建、启动或删除;再比如本地与服务器迁移是无缝实现等等。所以,想happy codeing,Docker基础是必不可少的,在我看来,可以优先于其他语言进行学习。


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:浅谈如何用使用flask和vue,快速开发常用应用
喜欢 (3)

您必须 登录 才能发表评论!