前言
学习并练习前端调用后台返回的接口数据,通过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