uniapp mock 和 axios 配合產(chǎn)生模擬數(shù)據(jù)
- 準(zhǔn)備工作
官網(wǎng)Mock.js (mockjs.com)
在項(xiàng)目的根目錄下，進(jìn)入命令終端安裝， 不建議全局安裝
# 安裝
npm install mockjs
# axios
npm install axios --save
在根目錄下創(chuàng)建src/mock.js文件
新建mock.js文件
- 示例
get請求:
下面是pages/index/index.vue發(fā)起get請求
# 導(dǎo)入axios
import axios from 'axios'
# 請求方法，http://localhost:3000/getDataHome對應(yīng)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文件的內(nèi)容, 注意有參數(shù)和無參數(shù)的請求是不一樣的
Mock.mock('http://localhost:3000/getDataHome', 'get', getDataHome())
Mock.mock('http://localhost:3000/categoryList', 'get', getCategoryList())
Mock.mock(/\/api\/get\/appslist/, 'get', (options) => {
// 獲取傳遞的參數(shù)pageindex
const pageindex = getQuery(options.url, 'pageindex')
// 獲取傳遞的參數(shù)pagesize
const pagesize = getQuery(options.url, 'pagesize')
// 內(nèi)容
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
// 根據(jù)url獲取query參數(shù)
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: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}]
} else if (param.page == 2) {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}]
} else if (param.page == 3) {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}]
} else {
list = [{
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '123',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品1',
app_desc: '應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)算方式'
}, {
app_id: '1233333',
app_image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
app_name: '商品222221',
app_desc: '222222222222222222222222222應(yīng)用的結(jié)婚掃的話劃分等級劃分是和結(jié)2算方式'
}]
}
let current_page = param.page
return {
code: 200,
msg: 'success',
data: {
data: list, // 列表數(shù)據(jù)
current_page: current_page, // 當(dāng)前頁碼
last_page: 3, // 最大頁碼
per_page: 15, // 每頁記錄數(shù)
total: 45, // 總記錄數(shù)
}
}
}
Mock.mock('http://localhost:3000/getDataHome', 'get', getDataHome())
Mock.mock('http://localhost:3000/categoryList', 'get', getCategoryList())
Mock.mock(/\/api\/get\/appslist/, 'get', (options) => {
// 獲取傳遞的參數(shù)pageindex
const pageindex = getQuery(options.url, 'pageindex')
// 獲取傳遞的參數(shù)pagesize
const pagesize = getQuery(options.url, 'pagesize')
// 內(nèi)容
console.log('====>', pageindex, pagesize)
return getCategoryApps({
page: pageindex
})
})
