前端VUE模拟调用后台接口数据

---

前言

学习并练习前端调用后台返回的接口数据，通过postman模拟返回后台接口

---

一、安装axios

先安装：

npm install axios

然后：

npm install --save axios vue-axios

配置模板：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

完整的main.js示例代码

import Vue from 'vue'
import App from './App'
import router from './router'

// axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>',
  mounted() {
    
    },
})

二、调用后台接口

完整的utils.js示例代码

import axios from "axios";

function getUserData(){
    
    
    return axios({
    
    
        method: "GET",
        url: "https://7fad1d1d-ea69-435b-8058-f5004ce6a434.mock.pstmn.io/loginG",
    });
}
export default {
    
    
    getUserData,
}

三、主页面

完整的Home.vue示例代码

<template>
  <div>
    <h2>主页</h2>
    <button @click="getData()">请求数据</button>
    <hr>
    <br>
    <ul>
      <li v-for="(item,i) in list" :key="i">
        {
    
    {
    
    item.username+":"+item.password}}
      </li>
    </ul>
  </div>
</template>

<script>
import $axios from "../../utils/utils"
export default {
    
    
  name: "Home",
  data() {
    
    
    return {
    
    
      list:'',
    }
  },
  methods: {
    
    
    getData(){
    
    
      $axios.getUserData().then(res => {
    
    
        console.log(res,"这里！！");
        console.log(res.data);
        this.list = res.data;
      })
    }
  },
}
</script>

---

四、模拟后台接口

第一种方法

大佬直接写一个接口返回，萌新的我瑟瑟发抖。

第二种方法

我通过在网上查找学习，一些网站可以模拟返回后台接口，如 https://www.easy-mock.com/
但是我的提示不是私密链接，由于我太笨了，在网上查了半天修改配置也没成功，具体好不好使不知道了。。。

第三种方法

用 postman 模拟后台接口，是真的方便，具体操作链接在下方。

五、出现的问题

中途一直报这个错误，找了好一会儿原因
原因：utils.js中的

import axios from "axios";

写成了

import Axios from "axios";

总结

对于刚接触前端不久，记录自己的学习内容，方便以后回顾。虽然内容简单，但是从模拟接口到调用成功还是花了不少的时间去学习和实践。
参考链接
安装axios：
https://www.cnblogs.com/hasubasora/p/7118846.html
postman模拟后台接口：
https://blog.csdn.net/weixin_43142423/article/details/104682000