第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

15、axios的使用與數(shù)據(jù)的mock①

標(biāo)簽：
Vue.js

一、axios官方文档基本阅读

我们先从官方实例上上看看axios的用法：

上面的记个大概就好，我们动手实践一波。

二、新建mock.json

1、我们先在static文件夹下新建一个mock文件，里面放上我们首页所需要的数据
（1）先是轮播图的数据，我们把首页中的轮播图链接复制过来：

webp

mock数据

（2）然后是分类的icon图片和推荐模块相关数据

webp

mock数据

三、axios的安装和数据mock的一些配置

1、然后我们动手先安装一波axios和express，为什么要用到express，因为我们数据的mock中需要用到express框架实现，后面我们在详细讲解expres。

（1）安装express、axios

$ npm install express  --save
$ npm install axios  --save

webp

install express and axios

（2）在webpack.dev.conf.js的头部中引入

// mock数据const express = require('express')const app = express()var appData = require('../static/mock/mock.json')var router = express.Router()// 通过路由请求本地数据app.use('/api', router)

webp

config配置

（3）devServer中添加before方法

// 添加before方法before(app) {
    app.get('/api/appData', (req, res) => {
        res.json({
            errno: 0,
            data: appData
        })
    })
}

webp

before()

四、使用axios获取mock数据

1、我们进入hom.vue页面先引入axios；

2、然后我们在methods中写个函数：用axios获取首页数据并打印，然后当vue生命周期为mounted阶段时调用它：

webp

使用axios获取数据

3、最后我们进入浏览器中看看数据是不是打印出来了

webp

浏览器console

ok，我们mock的数据都拿到了。到了这一步，接下来就简单了，无非是把值传给组件，然后将数据渲染到页面上，这个我们下篇讲。



作者：Ewall_
链接：https://www.jianshu.com/p/9b804ad87056


點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò)，就分享一下吧！

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消