15、axios的使用与数据的mock1
具体的代码请移步github GitHub:https://github.com/Ewall1106/mall(请选择分支15)
一、axios官方文档基本阅读
我们先从官方实例上上看看axios
的用法:https://github.com/axios/axios
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Want to use async/await? Add the `async` keyword to your outer function/method.async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
上面的记个大概就好,我们动手实践一波。
二、新建mock.json
1、我们先在static文件夹下新建一个mock文件,里面放上我们首页所需要的数据 (1)先是轮播图的数据,我们把首页中的轮播图链接复制过来:
mock数据
(2)然后是分类的icon图片和推荐模块相关数据
mock数据
三、axios的安装和数据mock的一些配置
1、然后我们动手先安装一波axios
和express
,为什么要用到express,因为我们数据的mock中需要用到express框架实现,后面我们在详细讲解expres。
(1)安装express、axios
$ npm install express --save
$ npm install axios --save
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)
config配置
(3)devServer中添加before
方法
// 添加before方法
before(app) {
app.get('/api/appData', (req, res) => {
res.json({
errno: 0,
data: appData
})
})
}
before()
四、使用axios获取mock数据
1、我们进入hom.vue页面先引入axios;
2、然后我们在methods
中写个函数:用axios
获取首页数据并打印,然后当vue生命周期为mounted
阶段时调用它:
使用axios获取数据
3、最后我们进入浏览器中看看数据是不是打印出来了
浏览器console
ok,我们mock的数据都拿到了。到了这一步,接下来就简单了,无非是把值传给组件,然后将数据渲染到页面上,这个我们下篇讲。
参考学习 https://github.com/axios/axios https://github.com/Ewall1106/mall https://www.jianshu.com/p/986821d35988 https://www.jianshu.com/p/4f92c4461e3d https://www.jianshu.com/p/004b73f3f589
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Android实现dialog的3D翻转示例
- Android ImageView 固定宽高比例的实现方法
- Android 实现IOS选择拍照相册底部弹出的实例
- ubuntu 20.04上搭建LNMP环境的方法步骤
- Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)
- Android设计模式之Builder模式详解
- 详解Android获取系统内核版本的方法与实现代码
- Android 修改viewpage滑动速度的实现代码
- 在Ubuntu20.04中安装ROS Noetic的方法
- Android设计模式之单例模式详解
- Android获取手机联系人的方法
- 学习使用Material Design控件(一)
- Android仿微信Viewpager-Fragment惰性加载(lazy-loading)
- Android嵌套滑动冲突的解决方法
- Android应用图标上的小红点Badge实践代码