Vue利用Postman和Axios获取数据

打印 上一主题 下一主题

主题 1745|帖子 1745|积分 5235

最近学习了如何利用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企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

兜兜零元

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表