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