第 3-6 课：云开发之首页数据实现

开篇
- 【系】微信小程序云开发实战坚果商城-开篇
基础篇
- 【系】微信小程序云开发实战坚果商城-弹性盒子
- 【系】微信小程序云开发实战坚果商城-ES6 简单入门
- 【系】微信小程序云开发实战坚果商城-官方案例先运行
前端篇
- 【系】微信小程序云开发实战坚果商城-商城项目搭建
- 【系】微信小程序云开发实战坚果商城-所有目录…

1 集合处理

在实际的开发中，大家尽量不要吧所有的数据返回给前台，很多时候我们需要几个字段返回了几十个这样是非常不友好的，还有我们什么都返回别人很容易就知道我们的后台实现，避免不必要的破坏。
在官方文档中过滤字段采用 filed 方法，如下：

Collection.field / Query.field / Document.field
指定返回结果中记录需返回的字段
方法签名如下：
function field(definition: object): Collection | Query | Document
方法接受一个必填字段用于指定需返回的字段
示例代码
返回 description, done 和 progress 三个字段：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {try {return await db.collection('todos').field({description: true,done: true,progress: true}).get()} catch(e) {console.error(e)}
}

设置字段为 true 则是返回字段，需要注意的是自增 id ，如果不需要返回需要 _id : false，默认会返回，需要手动处理。

首页包括涉及到三个集合处理轮播、主题、商品信息。
在 index 云函数新建夹 fields ,处理集合返回前台的字段。
在 fields 文件夹新建 bannerField.js

// banner 指定返回结果中记录需返回的字段
module.exports = {BANNERFIELD: {name: true,description: true,image: true,product_id:true}
}

在 fields 文件夹新建 themeField.js

// theme 指定返回结果中记录需返回的字段 _id需要特殊处理
module.exports = {THEMEFIELD: {theme_icon: true,theme_name: true,theme_type: true,_id: false }
}

在 fields 文件夹新建 productField.js

// product 指定返回结果中记录需返回的字段
module.exports = {PRODUCTFIELD: {product_name: true,product_img: true,product_price: true,product_sell_price: true,product_stock: true,product_description:true}
}

2 业务层实现

在 index 云函数新建夹 service ,存放业务逻辑相关代码
在 service 文件夹新建 bannerService.js

// 导入数据库操作公共方法
const model = require('../models/BaseModel.js')
// 全局集合名称
const { BANNER } = require('../config/tableConfig.js')
// 返回字段处理
const { BANNERFIELD } = require('../fields/bannerField.js')
/*** 获取首页轮播* @return */
const getBanner = ()=>{// 查询需要前天显示的轮播let options = {show : true}// 传递参数   对应的BaseModel的方法名称return model.query(BANNER, BANNERFIELD, options )
}
// 导出
module.exports = {getBanner
}

在 vscode 大家鼠标执行相应的方法上面，会提示参数位置，在实际的开发大家可以使用 vscode + 微信开发者工具一起开发，这样更能提高效率。
在 service 文件夹新建 themeService.js

// 引入BaseModel 集合名  字段过滤
const model = require('../models/BaseModel.js')
const { THEME } = require('../config/tableConfig.js')
const { THEMEFIELD } = require('../fields/themeField.js')/*** 获取主题列表* @return */
const getTheme = () => {return model.query( THEME, THEMEFIELD )
}module.exports = {getTheme
}

只有导出的代码，我们导入才不会报错，这里实现是使用的 ES6 相关特性，大家如果不是特别理解，在回顾之前的再回头巩固下。
在 service 文件夹新建 productService.js

const model = require('../models/BaseModel.js')
const { PRODUCT  } = require('../config/tableConfig.js')
const { PRODUCTFIELD } = require('../fields/productField.js')/*** 获取商品* @param options 条件* @param page    * @param size* @return */
const getProduct = (options , page = 0, size = 10 , order = {} ) => {// 查询条件options.product_status = 1// 排序条件 根据需要调正优化order.name = 'creat_time'order.orderBy= 'asc'return model.query(PRODUCT, PRODUCTFIELD, options, page,size,order)
}module.exports = {getProduct
}

对于操作的可能相对其他调用的会更多，所以这里在业务层也增加不少的条件，方便灵活调用，方法复用。

3 入口文件实现

在前面我们已经编写入口文件的基本实现，现在我们继续编写，引入业务层文件

// 返回工具类
const returnUtil = require('utils/ReturnUtil.js')
// 轮播业务层
const banner = require('service/bannerService.js')
// 主题业务层
const theme  = require('service/themeService.js')
// 商品信息业务层
const product = require('service/productService.js')

编写首页交互代码

/***************************    首页   *****************************************/// 获取轮播app.router('getBanner', async (ctx, next) => {// banner.getBanner() 取出数据，然后对数据进行重新拼装ctx.data = await _bannerItem(banner.getBanner())ctx.body = await returnUtil.success(ctx)await next();})// 获取主题app.router('getTheme',async (ctx,next) => {ctx.data = await _themeItem(theme.getTheme())ctx.body = await returnUtil.success(ctx)await next()})// 获取最新前5商品app.router('getProductNew',async (ctx,next) => {// product.getProduct({},0,4)  {}：没有条件直接控{}，0，4 分页查询 ctx.data = await _productItem(product.getProduct({},0,4))ctx.body = await returnUtil.success(ctx)await next()})// 轮播图片地址拼接function _bannerItem(data){return new Promise((resolve,reject) => {data.then(res=>{res.data.forEach(data => {data.image = 'cloud://release-prod.7265-release-prod'+data.image})resolve(res)})}) }
// 主题图片地址拼接function _themeItem(data){return new Promise((resolve,reject) => {data.then(res=>{res.data.forEach(data => {data.theme_icon = 'cloud://release-prod.7265-release-prod'+data.theme_icon})resolve(res)})}) }// 多个商品图片地址拼接function _productItem(data){return new Promise((resolve,reject) => {data.then(res=>{res.data.forEach(data => {data.product_img = 'cloud://release-prod.7265-release-prod'+data.product_img})resolve(res)})}) }

在数据库中图片并没有存取访问的地址，因此在我们取出数据之后需要手动拼接，每一个方法前缀为_，表示只在当前类和当前js调用。returnUtil.success() 对数据做统一的返回格式处理。

如果前面编写完成了，大家对编写每一个路由进行查询，查看是否有遗漏的地方。
部署不成功、图片无法显示、数据库无法获取，快速部署坚果商城，欢迎微信搜索「山间木匠」，后台回复关键字「坚果商城」获取最新PDF

源码地址

在搭建项目前，根据自己需要下载本系列文章的源代码

本项目源码地址：https://gitee.com/mtcarpenter/nux-shop

【系】微信小程序云开发实战坚果商城-云开发之首页数据实现相关推荐

【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
第 3-8 课:云开发之商品信息和主题商品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES ...
【系】微信小程序云开发实战坚果商城-云开发之订单品数据实现
第 3-9 课:云开发之订单品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【微信小程序】无法解析京东商城商品详情富文本数据
小程序的rich-text富文本标签不支持link标签,这就导致我们从京东商城拿到的商品详情富文本无法解析. rich-text组件用法小程序商城对接京东商城商品,拿到的京东商品详情的富文本数据格式 ...
视频教程-微信小程序电商实战-PHP
微信小程序电商实战多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程序员学院AP ...
java计算机毕业设计基于安卓Android/微信小程序的电脑组装机配置商城APP
项目介绍网络的广泛应用给生活带来了十分的便利.所以把组装机配置商城管理与现在网络相结合,利用java技术建设组装机配置商城app,实现组装机配置的信息化.则对于进一步提高组装机配置商城管理发展,丰富 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
【系】微信小程序云开发实战坚果商城-商城项目搭建
第 2-1 课:商城项目搭建目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...

【系】微信小程序云开发实战坚果商城-云开发之首页数据实现