照样是个记录博文，是从九月份开始，帮老师做的一个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>