1、安装 mockjs
、axios(一般默认自带,没有就安装下)
$ npm install mockjs
# axios 一般默认自带
$ npm install axios
2、启动项目
# 根据项目环境运行对应的启动命令
$ npm run dev
$ npm run serve
3、创建 mockjs
文件
1)在 src
目录下手动创建 /src/mock/index.js
文件夹与文件
2)在 main.js
文件中引入创建的 mock
文件
// 导入 mock 数据
import '../mock/index.js'
// 或者这样导入(二选一即可)
require('../mock/index.js')
3)/mock/index.js
文件中模拟常用请求方式,并返回数据
// 导入 mockjs ($ npm install mockjs)
import Mock from 'mockjs'
// 不限制请求方式
Mock.mock('/api/login', (req) => {
// 输出请求参数
console.log(req)
// 返回数据
return {
// 输出数据(随机生成姓名)
'name': '@name',
// 还可以自定义其他数据
}
})
// 限制 post
Mock.mock('/api/post', 'post', (req) => {
// 输出请求参数
console.log(req)
// 返回数据
return {
// 输出数据(随机生成姓名)
'name': '@name',
// 还可以自定义其他数据
}
})
// 限制 get
Mock.mock('/api/get', 'get', (req) => {
// 输出请求参数
console.log(req)
// 返回数据
return {
// 输出数据
'age|10-20': 10
// 还可以自定义其他数据
}
})
// 返回数据方式,所有请求方式都支持
Mock.mock('/api/login2', {
"code": 200,
"data": {},
"msg": "请求成功"
})
Mock.mock('/api/login1', require('./test.json'))
Mock.mock('/api/login3', (req) => {
return require('./test.json')
})
4)也可以通过 ./test.json
这种方式返回模拟数据,了解即可,根据情况使用
4、使用 mockjs
模拟的接口与数据
1)公共请求文件 request.js
封装案例,封装起来方便后续换线上接口
// 经过自定义处理后的 axios
// import { axios } from '@/api/axios'
// 直接使用 axios
import axios from 'axios'
// post
export function login_post (parameter) {
return axios.post('/api/login', parameter)
}
// get
export function login_get (parameter) {
return axios.get('/api/login', parameter)
}
// post
export function login_post_1 (parameter) {
return axios({
url: '/api/login1',
method: 'post',
data: parameter
})
}
// get
export function login_get_1 (parameter) {
return axios({
url: '/api/login',
method: 'get',
// 在使用 mockjs 时, get 请求不能使用 params 进行传参,会报 404
// params: parameter
// 要么不传,要么先使用 post 的 data 方式先传着用
data: parameter
})
}
2).vue
页面中使用案例
<script>
// 从封装的 request.js 文件中导出使用
import {
login_post,
login_post_1,
login_get,
login_get_1
} from '@/api/request'
// 直接使用 axios
import axios from 'axios'
export default {
mounted () {
// 参数
const params = {
id: 110
}
// post
login_post(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// post
login_post_1(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// get
login_get(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// get
login_get_1(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 直接使用
axios.post('/api/post', params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 直接使用
axios.get('/api/get', params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
</script>
到这里 mockjs
基本也算会用了!!!!