Vue利用Postman和Axios获取数据
最近学习了如何利用Postman和Axios来获取数据，信赖大概另有一些和我一样的初学者另有一些疑问，起首，我教各人如何创建和利用，操作方法我放在下面：起首注册一个账号，下载Postman电脑端，如果下载不了的直接用网页也可以。
https://i-blog.csdnimg.cn/direct/aecf02ddcfc641c983de5b0108e777af.pnghttps://i-blog.csdnimg.cn/direct/a473cd6472754a97854a0a562bd1993f.pnghttps://i-blog.csdnimg.cn/direct/f56d3adf1cd9439fae82244d3effbc44.pnghttps://i-blog.csdnimg.cn/direct/21cda10b216b4220bf34acdd41203944.pnghttps://i-blog.csdnimg.cn/direct/48fc96c0ff4d4e1caa1694e03c6586c5.pnghttps://i-blog.csdnimg.cn/direct/163dcdb0167d4c688ae3d8902001a357.pnghttps://i-blog.csdnimg.cn/direct/00e4213dc45147f1a95874d2f3337a87.pnghttps://i-blog.csdnimg.cn/direct/d2a3597d8c2b4752b49ef2247437a05c.pnghttps://i-blog.csdnimg.cn/direct/16fe80906cba4579aec82d134fb8e253.pnghttps://i-blog.csdnimg.cn/direct/674b00ffb1c940beb6a0044936d17a68.pngPS：以上是操作手册，用法我们来举一个例子。
获取某商品的序号、商品名称、单价、数目、照片，这里的话利用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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]