在工作中晰房，我使用Vue.js有一年多了，因為Vue.js文檔完善射沟，上手簡單嫉你，打包方便等諸多優(yōu)勢，所以是目前很流行的前端框架躏惋，本項目也選擇Vue.js作為前端框架幽污。對于后端，本項目選擇的是比較好上手簿姨、輕量級的python后臺框架：Flask距误。

我前前后后花了大概兩周的時間，踩了很多坑扁位，參考了很多博客准潭，最終使用Flask + Vue.js + Vuetify-UI 實現(xiàn)了一個比較新穎的喵星君大大四柱八字排盤系統(tǒng).，這篇文章接下來會將開發(fā)的步驟和代碼一一展示出來域仇，供大家參考刑然，希望大家能少踩點坑。

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

1泼掠、安裝vue-cli

如果之前安裝過了vue怔软，可以輸入vue --version 來查看當(dāng)前的vue版本是否是3.x以上的版本，如果返回的版本是舊版本 (1.x 或 2.x)择镇，你需要先通過 npm uninstall vue-cli -g 卸載它挡逼。

查看vue-cli版本的命令行

如果提示你vue命令無法識別，那么首先全局安裝vue-cli腻豌，使用如下命令行：

全局安裝vue-cli命令行

安裝了最新版本的vue-cli之后家坎，推薦使用vue ui命令以圖形化界面創(chuàng)建和管理項目，輸入vue ui會彈出一個Vue項目管理器界面吝梅。

輸入vue ui命令虱疏，打開項目管理界面

2、創(chuàng)建Vue項目

創(chuàng)建Vue項目界面

本項目在創(chuàng)建過程勾選了手動配置項目,勾選項如圖所示苏携，創(chuàng)建過程只需要根據(jù)圖形化界面的引導(dǎo)完成創(chuàng)建订框。

勾選Babel，Router, Vuex, Linter配置項

選擇hash路由

在項目的詳情頁兜叨，就可以運行編譯和熱更新穿扳、啟動以及打包你的前端代碼了。

項目管理詳情頁

3国旷、或者直接下載模板矛物，快速啟動項目

如果想利用現(xiàn)成的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'),

    }

  ],

})

在對應(yīng)路徑下增加兩個新頁面筛欢，其中默認首頁為表單頁浸锨，另一個為排盤結(jié)果展示頁。由于采用前后端分離的開發(fā)方式版姑，前端在制作頁面時柱搜，如果后端接口還沒能提供出來，可以先用一些初始化數(shù)據(jù)來代替剥险。

三聪蘸、創(chuàng)建Flask工程

新建一個文件名為index.py的python文件，與vue-project工程并列放置。

新建Flask文件存放路徑

在index.py文件導(dǎo)入Flask相關(guān)包, 代碼如圖健爬。


from flask import Flask, jsonify, request

from flask_cors import CORS

from pyfiles.flask_paipan import * # 從pyfiles文件夾導(dǎo)入已寫好的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']) # 提供接口浑劳，獲取前端頁面的提交的表單參數(shù)阱持，通過調(diào)用其他文件寫好的PaiPan函數(shù)夭拌，獲得排盤結(jié)果魔熏，并以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工程調(diào)用API接口

在表單提交頁面引入axios 庫，并輸入命令行：npm install axios --save 進行安裝骡和。

接著編寫submit方法相赁，在點擊<提交>按鈕時，觸發(fā)該方法慰于，submit方法主要是通過axios調(diào)用上述步驟四完成的API接口钮科，傳入用戶填寫的表單數(shù)據(jù)，獲取排盤結(jié)果的數(shù)據(jù)返回婆赠。


<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加入這幾句導(dǎo)出路徑代碼


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 對前端程序進行打包休里，最后的打包結(jié)果如圖所示蛆挫。