我们之前是请求服务器数据，然后把服务器数据显示到我们的小程序上，比如列表数据和详情页数据。但是我们如果不会后台开发，没有自己的服务器，怎么定义自己的列表和详情页数据，并且能通过小程序拿到显示到列表页和详情页呢。今天就来教大家摆脱后台，用小程序云开发实现自己的数据后台。并且请求到数据展示到列表页和详情页。
老规矩，先看效果图：
列表详情页.png
本节知识点：
- 1，借助云开发实现自己的小程序数据后台
- 2，请求列表数据并解析展示到列表页
- 3，请求详情页数据并解析到详情页
这里涉及到的基础的知识，大家可以点击阅读原文查看相关的教程。
这里就默认你已经创建好自己的小程序云开发后台。
我们根据小程序云开发入门---云数据库数据源的导入与导出，把下面数据导入到云开发数据库。
{"_id":"XLHdu-SiwXKAQth1","xuexiao":"兰州交通大学","didian":"第七教学楼1101教室","shijian":"2019年4月25日下午3点半","gongsi":"中铁七局安装工程有限公司","danweidizhi":"北京市东城区美术馆后街999号","zhuanye":"土木工程类；建筑类；水电类","daiyu":"薪资3000-6000元，五险一金，年终奖，免费体检，出国旅游","lianxiren":"王先生：15611823566"} {"_id":"XLHdu-SiwXKAQth2","xuexiao":"兰州交通大学","didian":"第七教学楼1801教室","shijian":"2019年4月25日下午3点半","gongsi":"中建七局安装工程有限公司","danweidizhi":"北京市东城区美术馆后街666号","zhuanye":"土木工程类；建筑类；水电类","daiyu":"薪资3000-6000元，五险一金，年终奖，免费体检，出国旅游","lianxiren":"王先生：15611823566"} {"_id":"XLHdu-SiwXKAQthe","xuexiao":"兰州交通大学","didian":"校本部 第五教学楼113教室","shijian":"2019-04-15 14：30-16：00","gongsi":"中国能源建设集团北京电力建设有限公司 ","danweidizhi":"中国能源建设集团北京电力建设有限公司 ","zhuanye":"土木工程类；建筑类；水电类","daiyu":" 一、公司简介 北京电力建设有限公司始建于1964年，现隶属于中国能源建设集团有限公司，由中国葛洲坝集团股份有限公司整体托管，是建筑、安装施工综合性国家一级全民所有制企业，是国内最早通过质量体系、职业健康安全与环境管理体系认证的单位之一，是国家认定的500强建筑企业之一。公司建立了以“重品德、重能力、重业绩、重贡献”为导向的人才成长机制，鼓励立足岗位，充分发挥积极性、主动性和创造性，在岗位上建功、成长，立志打造一支作风正、素质高、能力强、技术精的一流队伍。 公司业务涉足火电、电网、风电、光伏、环保、调试、电力检修、工民建、市政、燃气、煤化工等领域，足迹遍布全国22个省及印度尼西亚。先后80余次荣获包括中国建设工程质量最高奖—“鲁班奖”在内的国家级和省部级以上奖项，拥有实用新型专利4项、行业级工法4项。公司正以管理先进、生机勃勃的现代化新型企业的崭新面貌展现在世人面前。 公司经营项目包括：承包境外电力、房屋建筑、市政公用、钢结构、高耸构筑物、环保工程和境内国际招标工程；施工总承包；专业承包；租赁机械设备；货物进出口、技术进出口、代理进出口等。 公司正在向市场型、管理型、产融结合型的产业结构转型升级 。大平台的企业，高起点的岗位，加速度的晋升通道助力优秀人才放飞梦想。 详细内容请查看北京电力建设有限公司网址（http://www.bpcc.ceec.net.cn）。 二、需求信息 序号 \u0009 需求专业 \u0009 本科 \u0009 硕士 1 \u0009 电气工程及其自动化 \u0009 11 \u0009 2 \u0009 自动化 \u0009 10 \u0009 3 \u0009 土木工程 \u0009 10 \u0009 4 \u0009 道路桥梁与渡河工程 \u0009 4 \u0009 5 \u0009 给排水科学与工程 \u0009 4 \u0009 6 \u0009 测绘工程 \u0009 3 \u0009 7 \u0009 工程管理 \u0009 3 \u0009 8 \u0009 工程造价 \u0009 4 \u0009 9 \u0009 金融学 \u0009 1 \u0009 1 10 \u0009 哲学类 \u0009 1 \u0009 1 11 \u0009 能源与动力工程 \u0009 6 \u0009 12 \u0009 新能源科学与工程 \u0009 6 \u0009 13 \u0009 机械设计制造及其自动化 \u0009 3 \u0009 14 \u0009 审计学 \u0009 2 \u0009 15 \u0009 会计学 \u0009 3 \u0009 16 \u0009 财务管理 \u0009 3 \u0009 17 \u0009 国际经济与贸易 \u0009 3 \u0009 18 \u0009 法学/社会学 \u0009 2 \u0009 1 19 \u0009 人力资源管理 \u0009 2 \u0009 20 \u0009 工商管理 \u0009 2 \u0009 22 \u0009 安全工程 \u0009 2 \u0009 23 \u0009 焊接技术与工程 \u0009 2 \u0009 24 \u0009 金属材料工程 \u0009 4 \u0009 25 \u0009 汉语言文学/历史学 \u0009 3 \u0009 1 26 \u0009 物理学 \u0009\u0009 1 27 \u0009 软件工程/数学与应用数学 \u0009\u0009 1 \u0009 合计 \u0009 94 \u0009 6 三、招聘条件： 1、应聘人员需为国家统招计划内全日制公办院校2019年大学本科应届毕业生（二本及以上） 2、英语取得国家四级及以上合格证书或考试成绩在425分及以上，身体健康，符合国家公务员录用体检标准，能长期在项目施工现场工作（法学,社会学除外）。 四、招聘流程 （一）应聘报名方式一：请将个人简历发送至bjdjrzb@bepc.com.cn的邮箱。邮件主题为：专业 姓名 学历 学校。个人自荐材料（个人简历）的文件名格式：“专业 姓名 学历 学校”。个人自荐材料（即个人简历）需附加盖学校公章的就业推荐表、计算机等级证书、外语等级证书、身份证、获奖证书等扫描件。 应聘报名方式二： （二）资格审查：公司经初审后，将通过手机短信、电话等方式通知初审通过的应聘者参加面试、测试事宜。请确保联系方式填写准确，通信畅通。资格初审未通过的毕业生公司恕不另行通知。 （三）应聘者参加面试时，须携带个人自荐材料（即个人简历），附加盖学校公章的就业推荐表、计算机等级证书、外语等级证书、身份证、获奖证书等的原件和复印件。 五、联系方式 陈老师：（010）58425874/13522903460、 王老师：（010）58425979/18686136372 通讯地址：北京市朝阳区定福庄西里一号 邮政编码：100024 ","lianxiren":"王先生：15611823566"}
上面的数据是我们要导入到云开发数据库的列表数据，就是我们小程序列表页要显示的就是这些数据。所以这里大家一定要认真对待，试想，你数据都没有导入成功，哪来的后面的数据的获取和解析呢。
如果你不会导入数据到云开发数据库，那只能自己在云开发控制台自己一条条的创建了。
image.png
就像这样，点添加记录----> 输入字段 ---->创建数据 ----> 确定保存
数据少了还好，如果数据特别多，你自己就会累到吐。
如果你不会批量导入数据，或者没有数据可以批量导入 就到这个地址https://edu.csdn.net/course/detail/9604
看在线讲解视频学着怎么批量导入。
获取列表数据并解析到列表页
到这一步，就默认你上面的批量导入数据已经成功了。
那么我们就在index.js做数据请求操作。
请求云开发数据库里列表数据的核心代码如下
//从云开发数据库里列表 getList() { let that = this; wx.cloud.callFunction({ // 要调用的云函数名称 name: 'getHome', success: res => { wx.stopPullDownRefresh(); //停止刷新 // console.log(res) if (res.result) { let dataList = res.result.data; console.log({ dataList }) if (dataList === undefined || dataList.length == 0) { wx.showToast({ title: '没有数据', }) } else { that.setData({ //获取数据成功后的数据绑定 isShowArticle: true, dataList: dataList, }); } } else { wx.showToast({ title: '没有数据', }) } }, fail: err => { wx.stopPullDownRefresh(); //停止刷新 wx.showToast({ title: '没有数据', }) } }) },
给大家讲解下，我们这里是借助里云开发提供的云函数功能来获取列表数据。为什么要这么做呢，因为小程序云开发规定，我们拿数据库里的资源，只能拿到自己的保存的数据，批量导入的数据是管理员导入的数据，不算你导入的。 这里问题就来了，我们一个列表数据比如有10条，其中只有5条是我们创建的，那么怎么拿到别人的5条呢。这时候就要借助云函数了。
我们使用云函数拿到所有的列表数据，我们云函数的位置如下
image.png
getHome是我们定义的用来获取数据列表的云函数。
云函数的创建和上传，我视频讲解里有完整的流程，大家如果文章看不懂可以去看视频讲解：https://edu.csdn.net/course/detail/9604
image.png
然后我们再解析数据，并显示到列表页
我们index.wxml代码如下
<!--index.wxml--> <!-- 文章列表 --> <block wx:for="{{dataList}}" wx:key="item"> <view class='item-container' bindtap='goDetail' data-item='{{item}}'> <view class=' item_root '> <text class='item-gongsi'>{{item.gongsi}}</text> </view> <view class='item_root'> <text class='item-desc'>{{item.xuexiao}}</text> <text class='item-desc didian'>{{item.didian}}</text> </view> <view class='item_root'> <text class='item-desc'>{{item.shijian}}</text> </view> </view> </block>
index.js完整代码如下
//index.js const app = getApp() Page({ //页面的初始数据 data: { isShowArticle: false, dataList: null }, onShow: function() { this.getList(); }, //页面相关事件处理函数--监听用户下拉动作 onPullDownRefresh: function() { this.getList(); }, //从云开发数据库里列表 getList() { let that = this; wx.cloud.callFunction({ // 要调用的云函数名称 name: 'getHome', success: res => { wx.stopPullDownRefresh(); //停止刷新 // console.log(res) if (res.result) { let dataList = res.result.data; console.log({ dataList }) if (dataList === undefined || dataList.length == 0) { wx.showToast({ title: '没有数据', }) } else { that.setData({ //获取数据成功后的数据绑定 isShowArticle: true, dataList: dataList, }); } } else { wx.showToast({ title: '没有数据', }) } }, fail: err => { wx.stopPullDownRefresh(); //停止刷新 wx.showToast({ title: '没有数据', }) } }) }, //去详情页 goDetail: function(event) { var item = event.currentTarget.dataset.item; console.log(item); wx.navigateTo({ url: '../askdetail/askdetail?id=' + item._id+"&gongsi="+item.gongsi, }) } })
这样我们就可以轻松的借助云开发实现列表页数据的定义，列表页数据的获取，列表页数据的解析了。
如果文章你感觉不太直观，可以去看视频讲解：https://edu.csdn.net/course/detail/9604
完整的源码在视频讲解里也可以下载
