vue $1-2——Post方式请求数据接口

vue $1-2——Post方式请求数据接口

• 第一步：实现静态页面

  这个就不上图了，根据自己的需求来写div+css

• 第二步：查看接口Postman测试接口
  后端会给你一个接口文档，拿到你需要的接口地址，在Postman里面测试，方式选择post方式，接口复制进去，点击Send。如果有请求到数据就是可以用的接口，再继续往下写，如果测试没有数据，和后端沟通接口问题。
  

• 第三步：Post方式请求接口

<template>
  <div class="humiture">
    <ul class="ul">
    //
      <li class="li1" v-for="(hum,index) in humiTure.Table_Info" v-bind:key="index">
        <h2 class="com-title">{{hum.METER_NAME}}h2>
        <span class="con-time">{{hum.Report_Date}}span>
        <div class="con1">div>
        <div class="digital">
          <div class="con-data">
            <div class="con-data-num">{{hum.Value_WD | numFilter}}div>
            <div class="con-data-type">温度(℃)div>
          div>
          <div class="con-data">
            <div class="con-data-num">{{hum.Value_SD | numFilter}}div>
            <div class="con-data-type">湿度(%RH)div>
          div>
        div>
      li>
    ul>
  div>
template>
<script>
import axios from 'axios'; //先npm i axios 安装axios ，再引入使用
export default {
  data() {
    return {
      humiTure: [], //定义axios接口的数据
    };
  },
  methods: {
    initData() {  //封装axios请求，以便后期调用
      axios({
        url:"填写接口地址",
        method: 'post'
      })
        .then(res => {
          this.humiTure = JSON.parse(res.request.response);
        })
        .catch(error => {
          console.log(error);
        });
    },
  filters: {  //过滤器，
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    }
  },
  //载入后
  mounted() {
    this.refresh_data = setInterval(this.initData, 30000); //更新数据组件挂载完毕执行定时器
  },
  //创建后
  created() {
    this.initData(); //请求数据axios先执行一次，再更新
  },
//销毁后
  destroyed() {
    window.clearInterval(this.refresh_data); //更新数据的组件销毁的时候停止定时器
  }
};
script>

<style lang='scss' scoped>
@import '../../assets/css/min';   //引入重置样式
@import '../../assets/css/humitrue/humitrue.scss';  //引入humitrue的css样式
style>