uni-app 小项目开发 仿小米商城 后端提供数据2

页面

首页，未作修改，只是数据的获取，未进行数据的模拟，有兴趣的可以自行实现。
分类页，部分修改。
左侧竖向导航未修改。
修改思路：在数据库中模拟左侧导航的数据，数据的可包括导航的名称，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