最近学习了如何利用Postman和Axios来获取数据,信赖大概另有一些和我一样的初学者另有一些疑问,起首,我教各人如何创建和利用,操作方法我放在下面:
起首注册一个账号,下载Postman电脑端,如果下载不了的直接用网页也可以。
PS:以上是操作手册,用法我们来举一个例子。
获取某商品的序号、商品名称、单价、数目、照片,这里的话利用Postman和Axios来调用数据,而不是直接把所有数据写在我们定义的数组里。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mock和axios的利用</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<template id="root">
<div>
<table>
<tr>
<td>序号</td>
<td>商品名称</td>
<td>单价</td>
<td>数目</td>
<td>图片</td>
</tr>
<tr v-for="g in goodlist">
<td>{{g.id}}</td>
<td>{{g.goodname}}</td>
<td>{{g.price}}</td>
<td>{{g.count}}</td>
<td>
<img :src="g.goodimg" alt="">
</td>
</tr>
</table>
</div>
</template>
<script>
const app = Vue.createApp({
template: "#root",
data() {
return {
goodlist:[]
}
},
methods: {
},
async mounted() {
// 为给定 ID 的orders 创建请求,这里需要根据现实需要更改orders名称
const result=await axios.get('https://039cec12-73f8-4d3d-9561-0964d72b5cce.mock.pstmn.io/orders')
this.goodlist=result.data
}
})
app.mount('#app')
</script>
</body>
</html>
注意我们在Postman内里写的内容!所有内容都应该加上"",否则会报错。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |