vue做前端，flask做後臺，使用ajax傳遞json
照樣是個記錄博文，是從九月份開始，幫老師做的一個app,一直到現在....不能直接貼專案的原始碼，我貼出的是用於測試的完整程式碼，有時間會繼續更新...
其實做的是個網頁，通過HBuilder可以轉成app
先說幾個注意點（前提都是基於vue和flask的）：
1. 使用ajax發起post請求，後臺沒反應，前臺不報錯，可能是因為cors,也就是跨域請求問題，原因是AJAX只能同源使用，cors允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求,克服了這個缺點。困擾了一下午，感謝曹老師提醒。
解決程式碼(加在flask)
from flask_cors import CORS
CORS(app, resources=r'/*')
2. json資料問題，我給後臺傳遞起止時間，後臺給我這段時間內的資料，以為json格式是 時間：資料 ，但是後來發現這樣，取資料不容易取，於是改成了 time:時間，num:資料 ，
對應程式碼是：
dict={}
dic={}
dic['res_data']=[]
for i in range(c):
a = a + datetime.timedelta(days = 1)
astr=str(a)
dict['time']=astr
dict['num']=random.randint(1,10)
dic['res_data'].append(dict)
print(dic)
3. v-model 可以簡單理解成雙向資料繫結
<input v-model="beginTime" placeholder="edit me beginTime">
data () {
return {
'id': '100010',
'beginTime': '',
'endTime': '',
'selectContent': ''
}
},
在input輸入後，data裡面的beginTime也就有了值
<currency-input v-model="price"></currentcy-input>
<span>{{price}}</span>也有上面這個用法，輸入後，在後面的span實時顯示
4. import axios from 'axios'與
axios.post(path, dat)
.then(res => {
alert(res.data.res_data[0].num)
})
.catch(error => {
alert(error)
})一起使用
this.$axios.post(path, dat)
.then(res => {
alert(res.data.res_data[0].num)
})
.catch(error => {
alert(error)
})就不需要import
5. vue通過事件繫結，獲取元素的各種屬性，例如id和innetText,
注：'event' 是原生 dom事件
<button @click="get_id" id='is_id'>get_id</button>
get_id (event) {
alert(event.currentTarget.id)
alert(event.currentTarget.innerText)
}
貼出幾張圖，是在傳json陣列時用到的（json和ajax，算是自學了....有錯誤的地方麻煩指出）
原始碼：
提醒：輸入的日期格式是2018-10-10
伺服器端的test.py（import的有點多，我是在之前寫過的flask直接複製了個模板過來，不需要的可以刪掉）
#-*-coding:UTF-8 -*-
import os,sys
import flask
from flask import Flask
import socket
from flask import request
from flask import redirect
from flask import make_response,render_template
app = Flask(__name__)
from flask import Flask, render_template, jsonify
from random import *
from dateutil.parser import parse
import random
import datetime
import json
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
from flask_cors import CORS
CORS(app, resources=r'/*')
@app.route('/test', methods=['POST', 'GET'])
def test():
id=request.json['id']
beg=request.json['beginTime']
end=request.json['endTime']
selectContent=request.json['selectContent']
a = parse(end)
b = parse(beg)
c=(a-b).days
print(c)
dict={}
dic={}
dic['res_data']=[]
for i in range(c):
a = a + datetime.timedelta(days = 1)
astr=str(a)
dict['time']=astr
dict['num']=random.randint(1,10)
dic['res_data'].append(dict)
print(dic)
return json.dumps(dic)
return jsonify("ok")
if __name__ == "__main__":
hostname = socket.gethostname()
ip='0.0.0.0'
app.run( host=ip,port=5000,debug=False )
客戶端的HelloWorld.vue
<template>
<div>
<input v-model="beginTime" placeholder="edit me beginTime">
<input v-model="endTime" placeholder="edit me endTime">
<input v-model="selectContent" placeholder="edit me selectContent">
<button @click="gettest">New random number</button>
<button @click="get_id" id='is_id'>get_id</button>
</div>
</template>
<script>
export default {
data () {
return {
'id': '100010',
'beginTime': '',
'endTime': '',
'selectContent': ''
}
},
methods: {
getHsonLength (json) {
var jsonLength = 0
for (var i in json) {
jsonLength++
var t
t = i
i = t
}
return jsonLength
},
gettest () {
if (this.beginTime === '' || this.endTime === '' || this.selectContent === '') {
alert('請將選項補全')
} else {
const path = 'http://localhost:5000/test'
var dat = {'id': this.id, 'beginTime': this.beginTime, 'endTime': this.endTime, 'selectContent': this.selectContent}
this.$axios.post(path, dat)
.then(res => {
alert(res.data.res_data[0].num)
})
.catch(error => {
alert(error)
})
}
},
get_id (event) {
alert(event.currentTarget.id)
alert(event.currentTarget.innerText)
}
},
created () {
this.getRandom()
}
}
</script>