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

最新推荐文章于 2023-05-03 11:42:36 发布

原创最新推荐文章于 2023-05-03 11:42:36 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Post #请求数据接口

本文详细介绍了如何在Vue.js中使用Post方式请求数据接口，包括静态页面构建、接口测试、axios库的安装与使用，以及如何解析响应数据并展示在前端页面上。同时，文章还分享了定时更新数据的方法。

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>