微信小程序开发实战教程课件

第8章使用PHP+MySQL设计API微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标理解数据库、表等概念理解PHP如何访问MySQL数据库理解在微信小程序中如何请求后台数据1238.1安装及配置XAMPP【演练】XAMPP下载和安装如图所示，在搜索引擎上搜索XAMPP官网，下载所需版本。8.1安装及配置XAMPP等待下载结束，运行下载好的安装程序。弹出“Setup”对话框，单击“Next”按钮，如图所示。8.1安装及配置XAMPP如图所示，选择组件，保持默认选择，单击“Next”按钮。8.1安装及配置XAMPP如图所示，选择安装文件夹，这里使用默认路径“C:\xampp”，单击“Next”按钮。8.1安装及配置XAMPP如图所示，进入BitnamiforXAMPP界面，保持默认选择，单击“Next”按钮。8.1安装及配置XAMPP如图所示，进入ReadytoInstall界面，单击“Next”按钮。8.1安装及配置XAMPP如图所示，显示安装中，需等待一段时间。8.1安装及配置XAMPP如图所示，安装完成，单击“Finish”按钮。8.1安装及配置XAMPP系统将自动运行。以后可运行“C:\xampp\xampp-control.exe”来启动XAMPP，如图所示。8.1安装及配置XAMPP选择语言，保持默认选择，单击“Save”按钮。如图所示，单击“Start”按钮，启动Apache服务。8.1安装及配置XAMPPApache服务默认端口号为80，如果不能正常启动，则需更改端口号，如图所示，单击“Config”按钮，选择“Apache(httpd.conf)”选项，修改Apache(httpd.conf)。8.1安装及配置XAMPP如图所示，这里将Apache服务的端口号修改为“81”。8.1安装及配置XAMPP如图所示，重新启动Apache服务，注意图中鼠标指针所在的位置，其显示端口号为“81”。8.1安装及配置XAMPP如图所示，单击“Start”按钮，启动MySQL服务。8.1安装及配置XAMPPMySQL服务默认端口号为3306，如果无法正常启动，则需要更改端口号，如图所示，单击“Config”按钮，选择“my.ini”选项，修改my.ini。8.1安装及配置XAMPP如图所示，这里MySQL服务的端口号保持“3306”不变，如果出现冲突，则可尝试使用端口号“3307”“3308”等。8.1安装及配置XAMPP修改XAMPP运行环境，如图所示，单击“Config”按钮。8.1安装及配置XAMPP打开“ConfigurationofControlPanel”窗口，如图所示，单击“ServiceandPortSettings”按钮。8.1安装及配置XAMPP选中“Apache”标签页，如图所示，将“Apache2.4”的“MainPort”设置为“81”（默认为80，如果没有修改端口号，则无须修改），单击“Save”按钮。8.1安装及配置XAMPP选中“MySQL”标签页，如图所示，将“MySQL”的“MainPort”设置为“3306”（默认为3306，如果没有修改端口号，则无须修改），单击“Save”按钮。8.1安装及配置XAMPP如图所示，单击“Save”按钮，保存设置。8.1安装及配置XAMPP如图所示，单击Apache的“Admin”按钮，测试Apache服务。8.1安装及配置XAMPP如图所示，系统将启动默认浏览器，进入Apache主页，即进入“http://localhost:81/dashboard/”页面。如果端口号为80，则进入“http://localhost/dashboard/”页面。8.1安装及配置XAMPP如图所示，单击MySQL的“Admin”按钮，测试MySQL服务。8.1安装及配置XAMPP如图所示，系统将启动phpMyAdmin，进入“http://localhost:81/phpmyadmin/”页面。如果端口号修改为80，则进入“http://localhost/phpmyadmin/”页面。8.2创建选课数据库【演练】运行数据库脚本，创建选课数据库如图所示，单击工具栏中的“SQL”按钮，将配套资源文件夹中的“xk.sql”文件的内容粘贴到SQL窗口中，并单击“执行”按钮，执行SQL语句。8.2创建选课数据库如图所示，单击鼠标指针所指示的图标，刷新导航面板，可以看到界面左侧多了一个数据库“xk”。这里主要用到课程信息表course、学生信息表student、学生选课表stucou（某学号报名选修了某门课程，WillOrder为报名的志愿号），读者可先浏览一下各个表中的数据以有所印象。8.3部署PHP设计的后台API【演练】部署PHP+MySQL设计的后台API将配套资源文件夹中的“xk”文件夹复制到站点根目录C:\xampp\htdocs下，如图所示，该文件夹下有多个PHP文件。8.3部署PHP设计的后台API在浏览器地址栏中输入“http://localhost:81/xk/a.php”，测试PHP环境，如图所示。8.3部署PHP设计的后台API<?phpecho"hello...";?>a.php的代码如下。8.3部署PHP设计的后台API在浏览器地址栏中输入“http://localhost:81/xk/b.php”，测试PHP+MySQL环境，如图所示。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root",'','xk');//设置编码，防止中文乱码mysqli_query($conn,"setnamesutf8");$query='SELECT*FROMcourse';$result=mysqli_query($conn,$query);echo'<tableborder="1"><tr><td>课程代码</td><td>课程名称</td><td>类别</td><td>学分</td></tr>';while($row=mysqli_fetch_assoc($result)){b.php的代码如下。8.3部署PHP设计的后台APIecho"<tr><td>{$row['CouNo']}</td>"."<td>{$row['CouName']}</td>"."<td>{$row['Kind']}</td>"."<td>{$row['Credit']}</td>"."</tr>";}echo'</table>';mysqli_close($conn);?>8.3部署PHP设计的后台API在浏览器地址栏中输入“http://localhost:81/xk/c.php”，使course的内容以JSON格式输出，如图所示。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root","","xk");mysqli_set_charset($conn,'utf8');$query="SELECT*FROMcourse";$result=mysqli_query($conn,$query);$datas=mysqli_fetch_all($result,MYSQLI_ASSOC);echojson_encode($datas,JSON_UNESCAPED_UNICODE);?>c.php的代码如下。8.3部署PHP设计的后台API在浏览器地址栏中输入“http://localhost:81/xk/d.php?CouNo=001”，查看报名选修某门课程的学生信息，如图所示。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root","","xk");mysqli_set_charset($conn,'utf8');$CouNo=mysqli_real_escape_string($conn,$_GET['CouNo']);$query="SELECTStuCou.*,StuNameFROMStuCou,StudentWHEREStuCou.StuNo=Student.StuNoANDCouNo='$CouNo'";$result=mysqli_query($conn,$query);$datas=mysqli_fetch_all($result,MYSQLI_ASSOC);echojson_encode($datas,JSON_UNESCAPED_UNICODE);?>

d.php的代码如下。8.3部署PHP设计的后台API在浏览器地址栏中输入“http://localhost:81/xk/e.php?StuNo=00000001”，查询某StuNo（学号）的学生报名选修的所有课程，如图所示。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root","","xk");mysqli_set_charset($conn,'utf8');$StuNo=mysqli_real_escape_string($conn,$_GET['StuNo']);$query="SELECTStuCou.CouNo,CouName,WillOrderFROMStuCou,CourseWHEREStuCou.CouNo=Course.CouNoANDStuNo='$StuNo'ORDERBYWillOrder";$result=mysqli_query($conn,$query);$datas=mysqli_fetch_all($result,MYSQLI_ASSOC);echojson_encode($datas,JSON_UNESCAPED_UNICODE);?>

e.php的代码如下。8.3部署PHP设计的后台API自行下载Postman并安装。Postman启动后会提示注册，可跳过此步骤，不影响使用。Postman是一款非常流行的API调试软件。该软件提供了功能强大的WebAPI和HTTP请求调试功能，它能够发送任何类型的HTTP请求（GET、POST、PUT、DELETE等），并且能附带任何数量的参数和Headers。POST请求不能像GET请求那样直接使用浏览器进行测试，自己编写代码进行测试又会花费时间，所以这里使用Postman测试API。8.3部署PHP设计的后台API如图所示，测试登录接口，选择“POST”选项，在地址栏中输入“http://localhost:81/xk/f.php”，选中“Body”标签页，再选中“x-www-form-urlencoded”，输入图所示的Key和Value。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root","","xk");mysqli_set_charset($conn,'utf8');$StuNo=mysqli_real_escape_string($conn,$_POST['StuNo']);$Pwd=mysqli_real_escape_string($conn,$_POST['Pwd']);$query="SELECT*FROMStudentWHEREStuNo='$StuNo'ANDPwd='$Pwd'";$result=mysqli_query($conn,$query);$datas=mysqli_fetch_all($result,MYSQLI_ASSOC);echojson_encode($datas,JSON_UNESCAPED_UNICODE);?>f.php的代码如下。8.3部署PHP设计的后台API如图所示，测试选课报名数据，选择“POST”选项，在地址栏中输入“http://localhost:81/xk/g.php”，选中“Body”标签页，再选中“x-www-form-urlencoded”，输入如下的Key和Value。8.3部署PHP设计的后台API<?phpheader("Content-Type:text/html;charset=utf8");$conn=mysqli_connect("localhost:3306","root","","xk");mysqli_set_charset($conn,'utf8');$StuNo=mysqli_real_escape_string($conn,$_POST['StuNo']);$CouNo=mysqli_real_escape_string($conn,$_POST['CouNo']);$sql="INSERTINTOStuCou(StuNo,CouNo)VALUES('$StuNo','$CouNo')";if($conn->query($sql)===TRUE){g.php的代码如下。8.3部署PHP设计的后台API$ret=["status"=>"成功"];echojson_encode($ret,JSON_UNESCAPED_UNICODE);}else{$ret=["status"=>"失败"];echojson_encode($ret,JSON_UNESCAPED_UNICODE);}$conn->close();?>8.3部署PHP设计的后台API通过以上接口的测试，读者应该大概熟悉了本书的选课数据库示例。8.4基于PHP开发选课小程序【演练】开发选课小程序为项目准备好一个空的文件夹，如这里在桌面上新建了一个文件夹“xk”。运行微信开发者工具，如图所示，新建项目，在“目录”下拉列表中选择“xk”选项，单击“测试号”链接，单击“新建”按钮。8.4基于PHP开发选课小程序此项目底部导航包括两个标签页——“课程信息”“我的”，下面先准备好这两个页面。右键单击“pages”文件夹，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“course”，按Enter键完成。右键单击“course”文件夹，在弹出的快捷菜单中选择“新建Page”选项，输入页面名称“course”，按Enter键，自动生成4个文件。类似的，新建“我的”的目录和页面。右键单击“pages”文件夹，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“my”，按Enter键完成。右键单击“my”文件夹，在弹出的快捷菜单中选择“新建Page”选项，输入页面名称“my”，按Enter键，自动生成4个文件。8.4基于PHP开发选课小程序修改app.json文件，其内容如图所示。8.4基于PHP开发选课小程序右键单击“index”文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。右键单击“logs”文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。保存并运行文件，运行结果如图所示。在底部导航中选中“课程信息”和“我的”标签页，可在这两个页面之间进行切换。8.4基于PHP开发选课小程序修改app.js文件，添加图中阴影部分所示的代码。这里声明了一个全局变量apiurl供wx.request使用，其中，具体端口号需要根据自己的环境进行配置。8.4基于PHP开发选课小程序修改并保存course.js文件，其内容如图所示。8.4基于PHP开发选课小程序单击“详情”按钮，选中“本地设置”标签页，选中“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框，如图所示。8.4基于PHP开发选课小程序<view><blockwx:for="{{course}}"wx:key="index"><navigatorurl="../studentByCouNo/studentByCouNo?CouNo={{item.CouNo}}"><view>{{item.CouNo}}{{item.CouName}}</view></navigator></block></view>修改并保存course.wxml文件，代码如下。8.4基于PHP开发选课小程序保存并运行文件，运行后显示的课程信息如图所示。右键单击“pages”文件夹，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“studentByCouNo”，按Enter键。8.4基于PHP开发选课小程序右键单击“studentByCouNo”文件夹，在弹出的快捷菜单中选择“新建Page”选项，输入文件夹名称“studentByCouNo”，自动生成4个文件。修改并保存studentByCouNo.js文件，其内容如图所示。8.4基于