最近一直在看關於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>
成功之后測試結果為: