程序基础实战 11

app.json/app.jscourse课程信息studentByCouNologin登录my我的api/auth/login第9章开发选课系统微信小程序课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》学习目标第9章开发选课系统微信小程序通过开发选课系统微信小程序，读者可以理解从前端到后台的整个开发流程。该选课小程序以业务逻辑为主，没有样式修饰，重点说明前后台联动、业务逻辑方面的内容。1理解如何在微信小程序中调用后台API。2熟悉如何登录微信小程序以及如何通过Token获取用户信息。3理解哪些页面不需要Token认证、哪些页面需要Token认证。【注意】在开始本章练习之前，请确保第8章的xknodeapi处于运行状态。29.1

搭建选课小程序基本架构第9章开发选课系统微信小程序【演练9.1】开发选课小程序step1。1准备一个空的文件夹，可以在桌面上新建一个文件夹xk。2运行微信开发者工具，新建项目，在“目录”下拉列表中选择xk项目，单击“测试号”按钮，再单击“新建”按钮，如图9-1所示。图9-1

新建项目39.1

搭建选课小程序基本架构（续）第9章开发选课系统微信小程序【演练9.1】开发选课小程序step1。此项目底部导航包括两个标签页——“课程信息”“我的”，下面先准备好这两个页面。3修改app.json文件，其内容如图9-2所示。4右击index文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。图9-2

app.json文件的内容49.1

搭建选课小程序基本架构（续）第9章开发选课系统微信小程序【演练9.1】开发选课小程序step1。5右击logs文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。6保存并运行文件，运行结果如图9-3所示。在底部导航中选择“课程信息”和“我的”标签页，可在这两个页面之间进行切换。图9-3

运行结果59.2

实现课程信息展示页面第9章开发选课系统微信小程序【演练9.2】开发选课小程序step2。1修改app.js文件，添加图9-4所示的代码。这里声明了一个apiurl字段。其中，具体端口需要根据实际的环境进行配置。图9-4

修改app.js文件69.2

实现课程信息展示页面（续）第9章开发选课系统微信小程序【演练9.2】开发选课小程序step2。2修改并保存course.js文件，其内容如图9-5所示。图9-5

course.js文件的内容79.2

实现课程信息展示页面（续）第9章开发选课系统微信小程序【演练9.2】开发选课小程序step2。3单击“详情”按钮，选中“本地设置”标签页，勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框，如图9-6所示。4修改并保存course.wxml文件，代码如下。图9-6

本地设置89.2

实现课程信息展示页面（续）第9章开发选课系统微信小程序（4）course.wxml文件的内容如下：遍历course数组，每一项生成一个navigator，单击后携带课程号跳转到选课学生信息展示页面。<view><blockwx:for="{{course}}"wx:key="index"><navigatorurl="../studentByCouNo/studentByCouNo?CouNo={{item.CouNo}}"><view>{{item.CouNo}}{{item.CouName}}</view></navigator></block></view>99.2

实现课程信息展示页面（续）第9章开发选课系统微信小程序【演练9.2】开发选课小程序step2。5保存并运行文件，运行后显示的课程信息如图9-7所示。图9-7

课程信息109.3

实现课程选课学生信息展示页面第9章开发选课系统微信小程序【演练9.3】开发选课小程序step3。1修改并保存studentByCouNo.js文件，其内容如图9-8所示。图9-8

studentByCouNo.js文件的内容119.3

实现课程选课学生信息展示页面（续）第9章开发选课系统微信小程序【演练9.3】开发选课小程序step3。2修改并保存studentByCouNo.wxml文件，代码如下。3保存并运行文件，当选中某门课程后，将显示报名该课程的学生，如图9-9所示。<viewwx:for="{{student}}"wx:key="index">{{item.StuNo}}--{{item.StuName}}</view>129.3

实现课程选课学生信息展示页面（续）第9章开发选课系统微信小程序【演练9.3】开发选课小程序step3。（3）运行结果：当选中某门课程后，将显示报名该课程的学生，如图9-9所示。图9-9

报名某课程的学生139.4

实现登录、选课页面第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。1修改并保存login.js文件，代码如下。Page({data:{StuNo:"00000001",Pwd:"11111111"},goHome:function(){wx.switchTab({url:'../course/course',})},formSubmit:function(){var_self=this;wx.request({url:getApp().globalData.apiurl+'api/auth/login',method:"POST",data:{StuNo:_self.data.StuNo,Pwd:_self.data.Pwd},header:{'content-type':'application/x-www-form-urlencoded'},success:function(res){if(res.data.message==='登录成功'){wx.setStorageSync("token",'Bearer'+res.data.token);wx.switchTab({url:'../my/my',})}else{wx.showToast({title:'登录失败',duration:2000})}}})}})149.4

实现登录、选课页面（续）第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。2修改并保存login.wxml文件，代码如下。<formbindsubmit="formSubmit"><view><view>学号</view><inputname="StuNo"placeholder="请输入学号"model:value="{{StuNo}}"/></view><view><view>密码</view><inputname="Pwd"placeholder="请输入密码"model:value="{{Pwd}}"/></view><view><buttonformType="submit">登录</button><buttonbindtap="goHome">返回</button></view></form>159.4

实现登录、选课页面（续）第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。3修改并保存my.js文件，代码如下（第1／2段）。Page({data:{CouNo:"",Course:[]},loadStudent:function(){var_self=this;wx.request({url:getApp().globalData.apiurl+'api/stucou',method:'GET',header:{'Authorization':

wx.getStorageSync('token'),//从本地存储获取Token'Content-Type':'application/json'},success:function(res){_self.setData({Course:res.data});},fail(err){console.error(err);}})},logout:function(){wx.clearStorageSync();wx.switchTab({url:'../course/course',})},169.4

实现登录、选课页面（续）第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。（3）my.js文件（续）。第2／2段：insertStuCou:function(){var_self=this;wx.request({url:getApp().globalData.apiurl+'api/stucou',method:'POST',data:{CouNo:_self.data.CouNo},header:{'Authorization':

wx.getStorageSync('token'),//从本地存储获取Token'Content-Type':'application/json'},success:function(res){wx.showToast({title:"成功",duration:2000,success:(res)=>{_self.setData({CouNo:''});_self.loadStudent()}});}})},onShow:function(){this.setData({Course:[]});if(wx.getStorageSync('token')){this.loadStudent();}else{wx.navigateTo({url:'../login/login',})}}})179.4

实现登录、选课页面（续）第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。4修改并保存my.wxml文件，代码如下。<view><viewwx:for="{{Course}}"wx:key="CouNo">{{item.CouNo}}--{{item.CouName}}</view></view><view><buttonbindtap="logout">退出</button></view><view><inputname="CouNo"placeholder="请输入报名课程号"model:value="{{CouNo}}"/><buttonbindtap="insertStuCou">报名该课程</button></view>189.4

实现登录、选课页面（续）第9章开发选课系统微信小程序【演练9.4】开发选课小程序step4。5保存并运行文件，在底部导航中选中“我的”标签页，由于用户未登录，因此将跳转到登录页面，如图9-10所示。为测试方便（避免每次测试时都输入学号和密码），学号和密码已默认以明文