uniapp mock 和 axios 配合产生模拟数据
在项目的根目录下，进入命令终端安装， 不建议全局安装
# 安装
npm install mockjs
# axios
npm install axios --save
在根目录下创建src/mock.js文件
新建mock.js文件
- 示例
get请求:
下面是pages/index/index.vue发起get请求
# 导入axios
import axios from 'axios'
# 请求方法，http://localhost:3000/getDataHome对应mock.js的方法
async getDataHomeMoni(callback) {
callback && callback()
let getImg = await axios.get('http://localhost:3000/getDataHome')
const {
data,
code,
msg
} = getImg.data
console.log('data =', data)
}
# 有参请求
async getAppsList(pageNo = 1) {
const app = this
const categoryId = app.getCategoryId()
try {
let getImg = await axios.get('/api/get/appslist', {
params: {
categoryId: categoryId,
pageindex: pageNo,
pagesize: 15
}
})
const {
data,
code,
msg
} = getImg.data
console.log('data2 =', data)
} catch (e) {
//TODO handle the exception
console.log(e)
}
},
mock.js文件的内容, 注意有参数和无参数的请求是不一样的
Mock.mock('http://localhost:3000/getDataHome', 'get', getDataHome())
Mock.mock('http://localhost:3000/categoryList', 'get', getCategoryList())
Mock.mock(/\/api\/get\/appslist/, 'get', (options) => {
// 获取传递的参数pageindex
const pageindex = getQuery(options.url, 'pageindex')
// 获取传递的参数pagesize
const pagesize = getQuery(options.url, 'pagesize')
// 内容
console.log('====>', pageindex, pagesize)
return getCategoryApps({
page: pageindex
})
})
mock.js
import Mock from "mockjs";
import list from "../uni_modules/uview-ui/libs/config/props/list";
const Random = Mock.Random
// 根据url获取query参数
const getQuery = (url, name) => {
// console.log(url); // /api/get/news?pageindex=1&pagesize=10
const index = url.indexOf('?')
// console.log(index); //13
if (index !== -1) {
const queryStrArr = url.substr(index + 1).split('&')
// console.log(queryStrArr); //['pageindex=1', 'pagesize=10']
//0: "pageindex=1"
//1: "pagesize=10"
for (var i = 0; i < queryStrArr.length; i++) {
const itemArr = queryStrArr[i].split('=')
// console.log(itemArr) //['pageindex', '1'] //['pagesize', '10']
//0: "pageindex" //0: "pagesize"
//1: "1" //1: "10"
if (itemArr[0] === name) {
return itemArr[1]
}
}
}
return null
}
const getDataHome = (param) => {
return {
code: 200,
msg: 'success',
data: {
'keyword': 'AI帮你吵架...', // 中文名称
'noticeText': '通知...通知...通知...通知...通知...通知...通知...通知...',
'swiperImgs': [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png'
],
'new_list': [{
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服sfsfsfsfsfsfsfs舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}],
'hot_list': [{
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服sfsfsfsfsfsfsfs舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phofsfsfsfsfsfsto',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phosfsfsto',
desc: '锁舒服sfsfsfsfsfsf舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phofsfsfto',
desc: '锁舒sfsfsf服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, ],
'tj_list': [{
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服sfsfsfsfsfsfsfs舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phofsfsfsfsfsfsto',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phosfsfsto',
desc: '锁舒服sfsfsfsfsfsf舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'photo',
desc: '锁舒服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, {
name: 'phofsfsfto',
desc: '锁舒sfsfsf服舒服',
img: 'https://cdn.uviewui.com/uview/album/1.jpg'
}, ]
}
}
}
const getCategoryList = (param) => {
return {
code: 200,
msg: 'success',
data: [{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
}, {
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
}, {
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
}, {
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
}, {
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '222',
name: '子分类1',
},
{
category_id: '4444',
name: '子分类14444',
},
]
}
}
const getCategoryApps = (param) => {
let list = []
if (param.page == 1) {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}]
} else if (param.page == 2) {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}]
} else if (param.page == 3) {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}]
} else {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '应用的结婚扫的话划分等级划分是和结算方式'
}, {
app_id: '1233333',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品222221',
app_desc: '222222222222222222222222222应用的结婚扫的话划分等级划分是和结2算方式'
}]
}
let current_page = param.page
return {
code: 200,
msg: 'success',
data: {
data: list, // 列表数据
current_page: current_page, // 当前页码
last_page: 3, // 最大页码
per_page: 15, // 每页记录数
total: 45, // 总记录数
}
}
}
Mock.mock('http://localhost:3000/getDataHome', 'get', getDataHome())
Mock.mock('http://localhost:3000/categoryList', 'get', getCategoryList())
Mock.mock(/\/api\/get\/appslist/, 'get', (options) => {
// 获取传递的参数pageindex
const pageindex = getQuery(options.url, 'pageindex')
// 获取传递的参数pagesize
const pagesize = getQuery(options.url, 'pagesize')
// 内容
console.log('====>', pageindex, pagesize)
return getCategoryApps({
page: pageindex
})
})
