页面
首页,未作修改,只是数据的获取,未进行数据的模拟,有兴趣的可以自行实现。
分类页,部分修改。
左侧竖向导航未修改。
修改思路:在数据库中模拟左侧导航的数据,数据的可包括导航的名称,id ,种类。点击时,向后台发送当前导航的 _id 和导航的种类,获取对应右侧页面的数据。
__init() {
request.request({
// 621da696a671e0748f481a87 为左侧导航 推荐的 _id
url: `/image?id=` + '621da696a671e0748f481a87' + `&type=` + 'header'
}).then(response => {
this.header = response.data;
}).catch(error => {
console.log(error);
});
request.request({
url: `/image?id=` + '621da696a671e0748f481a87' + `&type=` + 'choice'
}).then(response => {
this.choice = response.data;
}).catch(error => {
console.log(error);
});
request.request({
url: `/image?id=` + '621da696a671e0748f481a87' + `&type=` + 'foot'
}).then(response => {
this.foot = response.data;
}).catch(error => {
console.log(error);
});
}
右侧推荐页做数据的获取。
页面的商品点击全部可以获取到商品的 _id ,上方红框内的商品,写了详情页面。
<view class="img" @click="toDetail(header._id)">
<image :src="header.image_url" mode=""
style="width: calc(100vw - 200rpx);height: 160rpx;"></image>
</view>
toDetail(value) {
uni.navigateTo({
// value 为传递回的商品的 _id
url: "../detail/detail?id=" + value
})
},
数据部分
前端的请求和数据获取与 search 页面相似,这里不再重复。
后端部分有所差别
数据方面
const imageSchema = new Schema(
{
image_id: {
type: Schema.Types.ObjectId
},
image_type: {
type: String
},
image_url: {
type: String
},
title: {
type: String,
default: ''
},
price: {
type: Number,
default: ''
},
text: {
type: String,
default: ''
}
}
)
新的数据类型 ObjectId ,它与 sql 中的表与表之间的外键相似。
查询方法
async function index(date) {
try {
const result = await image.where('image_id').equals(date.image_id).where('image_type').equals(date.image_type);
if (!result) {
return {
errMsg: "query:Error",
flag: false,
}
}
return { errMsg: "query:OK", flag: true, data: result }
} catch (error) {
return {
flag: false,
errMsg: error
}
}
}
这次查询不再是全部查询,而是按需查询,例如查询推荐页面上方的轮播图信息,首先 image_id 必须是推荐分类的 _id ,且 image_type 为 header,必须同时满足这两点才可以。
Bug
推荐页面页面刷新后数据未渲染。
随意点击左侧导航后在返回推荐页后,显示正常。
源码
Github:Github:https://github.com/hrbust1914010305/uni-app-shop
newCategory.zip