搭建Flask+Vue及配置Vue 基礎路由

最近一直在看關於Python的東西,准備多學習點東西.以前的項目是用Vue+Java寫的,所以試着在升級下系統的前提下.能不能使用Python+Vue做一遍.

選擇Flask的原因是不想隨大流,並且比較輕量級,后面深度的配置會隨着學習的不斷深入,也隨時寫進入博客

第一步:安裝Vue項目,這個請查看之前的帖子https://www.cnblogs.com/0909/p/9853618.html

第二步:配置路由,並且改變起始頁面,首先需要在 src/components/xx.vue 如圖所示,其中flaskTovue.vue是測試python與vue的連接是否成功的

第三步:配置路由 src/router/index.js

第四部:配置App.vue 修改成如圖的樣子:

第五步:npm run dev ,如圖所示.可以試着在 "#/"后面輸入About等看看頁面是切換成功.

第六步:Python 和 Vue 通過Flask 連接起來,我是參考了例子:https://www.jianshu.com/p/ead7317d01ec

Python 代碼如下(通過Pycharm 配置Flask 自行百度.因為比較容易)

代碼如下:

##測試成功
from flask import Flask
from flask import jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/getMsg',methods=['GET','POST'])
def home():
    response = {
        ##這里面填寫和后台交互的代碼
        'msg': 'Hello, Python !'
    }
    return jsonify(response)

##啟動運行
if __name__ == '__main__':
    app.run()

第七步:flaskTovue.vue的設置

代碼如下:

<template>
  <div>
    <span>{{ serverResponse }} </span>
    <button @click="getData">GET DATA</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "my-first-vue",
  data: function() {
    return {
      serverResponse: "resp"
    };
  },
  methods: {
    getData() {
      var that = this;
      // 對應 Python 提供的接口，這里的地址填寫下面服務器運行的地址，本地則為127.0.0.1，外網則為 your_ip_address
      const path = "http://127.0.0.1:5000/getMsg";
      axios
        .get(path)
        .then(function(response) {
          // 這里服務器返回的 response 為一個 json object，可通過如下方法需要轉成 json 字符串
          // 可以直接通過 response.data 取key-value
          // 坑一：這里不能直接使用 this 指針，不然找不到對象
          var msg = response.data.msg;
          // 坑二：這里直接按類型解析，若再通過 JSON.stringify(msg) 轉，會得到帶雙引號的字串
          that.serverResponse = msg;

          alert(
            "Success " + response.status + ", " + response.data + ", " + msg
          );
        })
        .catch(function(error) {
          alert("Error " + error);
        });
    }
  }
};
</script>

成功之后測試結果為: