【Flask】项目部署到Flask服务器

前言

最近刚学习FLask服务器，是一个Python的服务器框架，适用于中小型的项目，而上一期的Django服务器适用于部署大型项目

前端

创建前端的过程和上一篇博客一样，这次的项目名称为demo。

界面演示

后端

创建文件夹DemoServer

使用pycharm等工具打开该文件夹，并编写main.py

from flask import Flask
import json

# 实例化Flask对象
app = Flask(__name__)

@app.route("/test", methods=['post'])
def test():
    """
    测试接口
    :return:result
    """
    return json.dumps({
        'result':'ok'
    }, ensure_ascii=False)

if __name__ == '__main__':
    # host可以设置为0.0.0.0，可以在局域网中访问
    app.run(host='127.0.0.1', port=1234)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行可以看到服务器正常启动

测试test接口，正常返回数据，服务器创建完成

服务器部署

前端配置

在打包之前需提前设置打包的参数，在前端项目的src同级目录下创建文件vue.config.js

module.exports = {
    outputDir: './static',   // build输出目录
    indexPath: './templates/index.html',   // 打包后index的位置
    assetsDir: 'static/', // 静态资源目录（js, css, img）
    lintOnSave: false, // 是否开启eslint
}
1
2
3
4
5
6

打包后的dist文件夹的内容

将dist文件夹内的所有内容复制到DemoServer文件夹中

后端配置

定义Flask的静态文件目录，在这一段加上static_folder='./static'，表示将静态文件夹指向'./static'，即刚刚复制到DemoServer文件夹的static前端的css、js、img等静态资源。

# 实例化Flask对象
app = Flask(__name__, static_folder='./static')
1
2

添加main.py文件中的路由配置，并导入render_template方法

from flask import Flask, render_template

@app.route('/', defaults={'path':''})
@app.route('/<path:path>')
def catch_all(path):
    return render_template("index.html")
1
2
3
4
5
6

在浏览器访问http:127.0.0.1:1234，可以看到部署到Flask的网页

至此，部署完成。

【注】

如果host设置为0.0.0.0，使用局域网，可以使用http://IP地址:1234/访问部署在flask的网页。