20210723-Python-flask-Vue实现从前端请求到列表展示

brief：

1. 新建flask项目
2. 新建html页面page_03并编写请求页面
3. app.py实现page_03路由
4. app.py实现表单提交接口路由和处理请求并返回数据
5. page_03，js+vue+axios实现http请求数据响应处理
6. page_03，列表显示获取到的活动数据

1、新建flask项目
1.1、flask环境搭建
命令行窗口执行

pip install flask

或，pycharm设置弹框，点击 项目解释器 （project interpreter），添加flask

1.2、新建html页面page_03并编写请求页面
搭建好环境后，专业版pycharm点击左上角新建项目，在新建弹框，选择flask项目，选择编译器和环境后，点击 创建。

如果pycharm是edu版本，可以参照官网指导，新建 app.py文件、templates文件夹

2、新建html页面page_03
templates文件夹下新建html文件，命名page_01
代码示例：

<div id = "app1">
  <div>
<!--      监听鼠标点击事件，切换按钮状态，从而控制不同的请求类型-->
    <button @click="btn" >{{btnText[btnType]}}</button>
<!--      如果请求类型=0，则=通过订单查询-->
    <label v-if="btnType == 0">
<!--        通过v-model将输入数据绑定到vue实例-->
      <input autocomplete="off"  type="text" placeholder="请输入订单" v-model="orderNum">
    </label>
<!--      如果请求类型=1，则=通过特征查询-->
    <label v-else="btnType == 1">
      <input autocomplete="off" type="text" placeholder="请输入金额" v-model="price">
      <input autocomplete="off" type="text" placeholder="请输入渠道" v-model="channelId">
    </label>
<!--      监听鼠标点击事件，点击时发出并处理请求-->
    <button @click="request">查询</button>
  </div>
</div>

3、app.py实现page_03路由

from flask import Flask, render_template, request, flash, redirect, make_response
from flask_cors import CORS

# 新建flask对象
app = Flask(__name__)
// 解决跨越调用阻塞问题
CORS(app, resources=r'/*')


# app对象的route方法提供路由支持。'/'为访问路径
@app.route('/page_03')
def function_03(**args):
    return render_template('page_03.html')


if __name__ == '__main__':
    # 调试模式，启动后每次改动会自动重启
    app.debug = True
    app.run()
    # 调试模式，启动后每次改动会自动重启
    app.run(debug=True)

4、app.py实现表单提交接口路由和处理请求并返回数据

@app.route('/submit2', methods=['GET', 'POST'])
def submit2():
    if request.method == 'POST':
        # 获取前端请求传参
        request_data = request.data
        # 获取前端请求头并校验
        request_header = request.headers
        # 校验请求头内容
        # 处理略
        # 处理请求并得到响应数据
        # 处理略
        data = [
            {
                'id': 22,
                'title': '活动1标题'
            },
            {
                'id': 33,
                'title': '活动2标题'
            }
        ]
        response_Data = {
            'code': '0000',
            'data': data
        }
    else:
        response_Data = {
            'code': '500',
            'massage': '传参有误'
        }
    # 将响应结果返回
    return response_Data

5、page_03，js+vue+axios实现http请求数据响应处理
5.1、安装axios
命令行窗口执行

pip install axios

5.2、编写http请求代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  // 解决调试模式下无法使用vue语法
  Vue.config.productionTip = false;
<!--  新建vue实例并绑定到app1-->
  const app = new Vue({
    el: '#app1',
    data:{
      btnType: 1,
      btnText:['通过订单查询', '通过特征查询'],
      orderNum: 0,
      price: 0,
      channelId: 0,
      activityData:null,
      err: null,
      errCode: null
    },
    methods:{
<!--    监听切换类型按钮并切换状态的具体处理函数-->
      btn: function(event){
        app.btnType = 1 - app.btnType
        console.log('btn type',app.btnType)
      },
<!--  监听查询按钮发送请求并处理结果的处理函数    -->
      request:function (event) {
        console.log('orderNum',app.orderNum)
<!--        构建请求参数-->
        var param = {
          'orderNum':app.orderNum,
          'price': app.price,
          'channelId': app.channelId,
          'type':app.btnType
        }
        console.log(param)
<!--        发送请求并判断-->
        axios.post('http://localhost:5000/submit2',param)
          .then(function (response) {
            console.log(response.data)
<!--            判断响应结果并获取对应数据-->
            if(response.data.code == '0000'){
              app.activityData = response.data.data
              console.log('response data',app.activityData)
            }
            else{
              app.errCode = response.data.code
              app.err = response.data.massage
              console.log(app.err)
            }
          })
          .catch(function (error) {
            // alert('请求出错！')
            err = error
          })
      }
    }
  })

</script>

6、page_03，列表显示获取到的活动数据
在

 <div>
<!--      如果获取到活动数据，则进行展示-->
    <div v-if="activityData">
      <table>
        <thead>
        <th>id</th>
        <th>title</th>
        </thead>
        <tbody>
<!--        循环获取活动数据并展示-->
        <tr v-for="item in activityData">
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
        </tr>
        </tbody>
      </table>
    </div>
<!--      如果请求失败，展示失败原因-->
    <div v-else-if="err">
      <span>{{err}}</span>
    </div>
<!--      如果未请求或者请求活动为空，提示无活动-->
    <div v-else="not activityData">无活动</div>
  </div>

请求结果展示：