1、mock创建接口
1、分类的接口/article/api/category/label/list
{
"code": 20000,
"message": "查询成功",
"data|7": [{ // 7个分类
"id|+1": 1, // 分类id, 初始值1开始,每条+1
"name|+1": ['Java', '前端', '云计算', '运维', '测试', 'UI设计', '人工智能'], // 分类名称
"labelList|6": [{ // 分类下的有6个标签
"id|+1": 10, // 标签id
"name": '@word' //标签名
}]
}]
}
2、轮播图的mock接口
/article/api/advert/show/{position}
{
"code": 20000,
"message": "查询成功",
"data|3": [{ // 产生8条数据
"id|+1": 10, //初始值10开始,每条+1,
"title": "@ctitle", // 随机一个标题
// 图片,按顺序取一个元素(权重一样)
"imageUrl|+1": ['/static/images/banner2.jpg', '/static/images/banner1.jpg',
'/static/images/banner3.jpg'
],
"background|+1": ['#006C00', '#45328c', '#0072B7'], //背景色
"advertUrl": "/pages/course/course-details?id=10", // 点击跳转链接
}]
}
3、热门推荐,免费精选的接口
/course/api/course/search
{
"code": 20000,
"message": "查询成功",
"data": {
"total": "@integer(30, 50)", // 总记录数
"records|10": [{ //每次产生10条
"id|+1": 10, //初始值10开始,每条+1
"userId": "@integer(10, 30)",
"nickName|1": ["@cname", '梦老师'],
"userImage": "@image",
"title": "@csentence", // 标题
"totalTime": "@time", //总时长
"studyTotal": "@integer(100, 700)", // 在学人数
"commTotal": "@integer(100, 600)", // 好评数 // 主图
"mainImage|1": ['/static/images/banner2.jpg', '/static/images/banner1.jpg', '/static/images/banner3.jpg', 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'],
"isFree|1": [0, 1], //是否免费:0收费,1免费
"priceOriginal|501-800.2": 1, //原价, 501到800之间随机数,小数点2位
"priceDiscount|60-500.2": 1 //优惠价
}]
}
}
2、创建集体请求的接口方法
request.js对接口统一管理
1、引入util.js这个js,主要使用它一个消息提示的方法
2、使用Promise 对接口统一管理,返回两个参数(resolve, reject),成功返回resolve(),失败返回 reject()中间封装内容
3、采用uni.request({})来请求,官网request的解释
4、h5端是存在跨域问题的,小程序和App没有跨域问题,所以需要在配置h5的跨域,在manifest.json中配置跨域
"h5": {
"devServer": { //开发环境
"proxy": {
"/api": {
"target":"http://mengxuegu.com:7300/mock/605becd70d58b864da03d91c/xiaochengxu",
"pathRewrite":{
"^/api": "" //将请求的地址替换
}
}
}
}
}
request.js配置如下
import {
msg
} from './util.js'
// #ifndef H5
let BASE_URL = 'http://mengxuegu.com:7300/mock/605becd70d58b864da03d91c/xiaochengxu'
// #endif
// 因为H5存在跨域问题,所以需要代理转发,代理转发在 manifest.json中配置
// #ifdef H5
let BASE_URL = '/api'
// #endif
const request = (options = {}) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
data: options.data || {},
timeout: 800, // 8秒超时时间,单位 ms
success: (res) => { // 注意箭头函数
const code = res.data.code
console.log(options.url, "响应数据", res.data)
resolve(res.data)
},
fail: (err) => {
// console.log('err', err)
msg('请求接口失败');
reject(err)
}
})
})
}
//导出方法
export default request
3、拿取到数据并赋值给组件
1、添加api文件course.js
…query,表示希望把传入参数合并,{free:0,current:XX,size:XX},组合成一个对象
//引入传输对象
import request from '@/common/js/request.js'
export default {
// 查询指定位置的广告
// 如果position没有传值,默认是一
getAdvertList(position = 1) {
return request({
url: `/article/api/advert/show/${position}`
})
},
getCategoryList() {
return request({
url: '/article/api/category/label/list'
})
},
// 查询的条件,query条件对象,current当前页面,size每页多少行
// current=1,size=10表示,如果没有传入参数,就表示
// ...query,表示希望把传入参数合并,{free:0,current:XX,size:XX},组合成一个对象
getList(query, current = 1, size = 10) {
return request({
url: '/course/api/course/search',
method: "post",
data: {
...query,
current,
size,
}
})
}
}
2、index中引入api文件,并赋值
// 导入课程API接口
import courseAPI from '@/api/course.js'
在method中创建接收方法,并赋值给data中的静态变量
data() {
return {
bannerList: [],
categoryList: [],
hotCourseList: [], //热门列表数据
freeCourselist: [], //免费精选
newCourselist: [], //近期上新
payCourselist: [], //付费课程
}
},
// 查询分数数据
async loadCateData() {
const res = await courseAPI.getCategoryList()
console.log(res)
this.categoryList = res.data
},
在onload里面调用这个方法,使得页面加载的时候就触发
async onLoad() {
console.log("页面调用")
// #ifdef APP-PLUS
this.placeHolderdata()
// #endif
// const option = {
// url: '/article/api/category/label/list',
// method: 'GET'
// }
// const res = await requestJS(option)
// console.log("+++",res)
this.loadBannerData()
this.loadCateData()
// 查询热门列表数据
this.loadHotCourseList()
// 免费精选
this.loadFreeCourseList()
// 近期上新
this.loadNewCourseList()
// 收费课程
this.loadPayCourseList()
},
3、父组件向子组件赋值
子组件绑定的数组
父组件赋值方法
前面冒号,对应的是子组件绑定的数组,后面引号里面是父组件传递的值
<categroy-box :categoryList="categoryList"></categroy-box>