Python Flask + Vue web项目

通过pycharm+webstorm创建前后台项目即可。这里主要记录如何将两个合并在一起而不是前后台分离的架构。

image.png

后台就是简单的flask应用。我们新建了一个views.py.内容如下：

from flask import Blueprint, render_template, abort
from jinja2 import TemplateNotFound

# 创建一个蓝图对象 名称 模块名称 模版目录
home_page = Blueprint('home_page', __name__, template_folder='templates')
# 本项目通过Vue编写前端，在此只需要挂载一次 templates目录即可。

"""
视图绑定类：
    Blueprint是flask库中的一个模块
    它是Flask项目的一种组件式开发，可以在一个应用内或跨越 多个项目共用蓝图。
    使用蓝图可以极大地简化大型应用的开发难度，也为Flask扩展 提供了一种在应用中注册服务的集中式机制。 
    模块化管理程序路由是它的特色，它使程序结构清晰、简单易懂。
"""
@home_page.route('/')
def get_home_page():
    try:
        return render_template('index.html')
    except TemplateNotFound:
        abort(404)


在app.py文件中引入视图

from flask import Flask, request, jsonify, json
from .views import home_page

app = Flask(__name__)
# 重点。此时flask就配置好了。需要在web端在修改一个地方即可。
app.register_blueprint(home_page, url_prefix='/')

web端通过webstorm直接创建vue项目。

image.png

需要注意的是：
vue.config.js这个文件需要我们自己创建。在前后台分离的时候在这个文件做如下配置就可跨域访问后台服务啦。

module.exports = {
    devServer: {
        compress: true,
        port: 8080,
        proxy: {
            '^/api': {
                target: 'http://localhost:5000',
                ws: true,
                changeOrigin: true
            },
            '^/fs': {
                target: 'http://localhost:5000'
            }
        }
    },
    pwa: {
        iconPaths: {
            favicon32: 'favicon.ico',
            favicon16: 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon: 'favicon.ico',
            msTileImage: 'favicon.ico'
        },
        manifestOptions: {
            icons: [
                {
                    'src': 'favicon.ico',
                    'sizes': '192x192',
                    'type': 'image/svg',
                },
                {
                    'src': 'favicon.ico',
                    'sizes': '512x512',
                    'type': 'image/svg',
                },
            ],
        }
    }
};
但是我们不是要前后台分离的。所以我们不这样配置。我们应该在这个文件中配置如下信息即可。


const path = require('path');

module.exports = {
    assetsDir: '../static',
    publicPath: '',
    outputDir: path.resolve(__dirname, '../templates'),
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    css: '../static/css'
};

贴张整体图：

image.png

怎么启动服务呢？

在pycharm开发工具中切换到web目录下，编译vue项目

image.png
然后正常启动flask项目即可访问web端：http://localhost:5000/