在工作中，我使用Vue.js有一年多了，因为Vue.js文档完善，上手简单，打包方便等诸多优势，所以是目前很流行的前端框架，本项目也选择Vue.js作为前端框架。对于后端，本项目选择的是比较好上手、轻量级的python后台框架：Flask。

我前前后后花了大概两周的时间，踩了很多坑，参考了很多博客，最终使用Flask + Vue.js + Vuetify-UI 实现了一个比较新颖的喵星君大大四柱八字排盘系统.，这篇文章接下来会将开发的步骤和代码一一展示出来，供大家参考，希望大家能少踩点坑。

一、使用Vue-cli搭建前端框架

1、安装vue-cli

如果之前安装过了vue，可以输入vue --version 来查看当前的vue版本是否是3.x以上的版本，如果返回的版本是旧版本 (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。

查看vue-cli版本的命令行

如果提示你vue命令无法识别，那么首先全局安装vue-cli，使用如下命令行：

全局安装vue-cli命令行

安装了最新版本的vue-cli之后，推荐使用vue ui命令以图形化界面创建和管理项目，输入vue ui会弹出一个Vue项目管理器界面。

输入vue ui命令，打开项目管理界面

2、创建Vue项目

创建Vue项目界面

本项目在创建过程勾选了手动配置项目,勾选项如图所示，创建过程只需要根据图形化界面的引导完成创建。

勾选Babel，Router, Vuex, Linter配置项

选择hash路由

在项目的详情页，就可以运行编译和热更新、启动以及打包你的前端代码了。

项目管理详情页

3、或者直接下载模板，快速启动项目

如果想利用现成的Vuetify UI组件模板快速建立Vue工程，也可以跳过上述步骤，直接下载Vuetify模块.

下载模板后，打开工程，输入命令：npm install，接着输入npm run dev，启动前端工程。

二、在Vue工程中增加页面及路由

找到router.js文件，在该文件增加两个前端页面的路由，


import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

  // mode: 'history',

  // base: process.env.BASE_URL,

  routes: [

    {

      path: '/',

      component: () => import('@/views/dashboard/Index')

    },

    {

          name: 'Result',

          path: 'paipanResult',

          component: () => import('@/views/dashboard/paipanResult'),

    }

  ],

})

在对应路径下增加两个新页面，其中默认首页为表单页，另一个为排盘结果展示页。由于采用前后端分离的开发方式，前端在制作页面时，如果后端接口还没能提供出来，可以先用一些初始化数据来代替。

三、创建Flask工程

新建一个文件名为index.py的python文件，与vue-project工程并列放置。

新建Flask文件存放路径

在index.py文件导入Flask相关包, 代码如图。


from flask import Flask, jsonify, request

from flask_cors import CORS

from pyfiles.flask_paipan import * # 从pyfiles文件夹导入已写好的python库

from ppbazi import pp

app = Flask(__name__)    #  通过Flask方法注册app，以后所有的route都是app开头

app.config.from_object(__name__)

CORS(app, resources={r'/*': {'origins': '*'}})  #  跨域访问时使用，不跨域可将本行代码去掉

app.register_blueprint(pp,url_prefix='/paipan')

@app.route('/api/submit', methods=['GET', 'POST']) # 提供接口，获取前端页面的提交的表单参数，通过调用其他文件写好的PaiPan函数，获得排盘结果，并以Json格式返回给前端页面

def submit():   

    response_object = {'status': 'success'}

    if request.method == 'POST':

        post_data = request.get_json()

        year = post_data.get('year')

        month = post_data.get('month')

        day = post_data.get('day')

        hour = post_data.get('hour')

        minute = post_data.get('minute')

        sex = post_data.get('sex')

        city = post_data.get('city')

        birth = [year, month, day, hour, minute]



        exe = PaiPan(year, month, day, hour, minute, city, sex)



        truetime = exe.Sun_Time()

        bazi = exe.Paipan()

        qiyun = exe.Qi_yun()

        canggan = exe.CangGan()

        tengods = exe.Tengod()

        cg_tengods = exe.CangGan_TenGods()

        wangshuai = exe.WangS()



        context = {

            "sexArray": sex,

            "cityArray": city,

            "birthDay": birth,

            ...

        }

        response_object['context'] = context

    else:

        response_object['message'] = 'method is error'

    return jsonify(response_object)

if __name__ == '__main__':

    app.run()

四、Blueprint（蓝图）路径的配置

在相同路径下，新建ppbazi.py的蓝图文件，配置蓝图指向，代码如下。


from flask import Blueprint,render_template,abort  #  render_template 指向的是templates文件夹

from jinja2 import TemplateNotFound

pp = Blueprint("paipan",__name__,url_prefix="/paipan", template_folder='templates')

@pp.route('/')

def get_sample():

    try:

        return render_template('index.html')

    except TemplateNotFound:

        abort(404)

五、Vue工程调用API接口

在表单提交页面引入axios 库，并输入命令行：npm install axios --save 进行安装。

接着编写submit方法，在点击<提交>按钮时，触发该方法，submit方法主要是通过axios调用上述步骤四完成的API接口，传入用户填写的表单数据，获取排盘结果的数据返回。


<script>

import axios from 'axios'


        submit(){

        const url = ‘http://localhost:5000/api/submit'

        axios.post(url, {

          year: yymmddList[0],

          month: yymmddList[1],

          day: yymmddList[2],

          hour: hhmmssList[0],

          minute: hhmmssList[1],

          sex: this.sex,

          city: this.city,

        })

        .then((response) => {

          console.log('responseData', response)

          this.$router.push({ name: 'Result' })

        })

        }

</script>

六、打包前端工程，并放入指定路径

在vue.config.js加入这几句导出路径代码


const path = require('path');

module.exports = {

  ...

  assetsDir: process.env.NODE_ENV === 'production'? '../static' : 'static',

  publicPath: process.env.NODE_ENV === 'production'? './' : '/',

  outputDir: path.resolve(__dirname, '../templates')

}

接着输入命令行npm run build 对前端程序进行打包，最后的打包结果如图所示。