《第8单元 微信小程序与数据库系统交互.pptx》由会员分享，可在线阅读，更多相关《第8单元 微信小程序与数据库系统交互.pptx（84页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教学资源可联系作者：实现技能目标实现技能目标：认识数据库JSON数据格式mysql数据库安装使用认识thinkphp框架读取数据微信小程序与后台系统进行交互微信小程序读取mysql数据库中的数据 随着智能手机、平板电脑普及，以及微信广泛应用，微信小程序应用也越来越火热，很多之前PC端应用，现在都可以在微信或者微信小程序里面完成，近几年微信小程序应用需求是爆发式增长，绝大部分微信小程序应用都涉及到数据库操作，本单元主要学习微信小程序如何与后台数据系统交互，掌握在微信小程序里面对数据库进行数据查询、修改等操作。 本单元通过多个学习任务，从微信程序与后台系统交互的角度，将介绍mysql数据库，Thi
2、nkphp5.0程序框架，微信小程序请求处理等，以达到掌握小程序应用系统开发的相关技能。使用mysql数据库管理工具navicat，或者phpstudy的phpMyAdmin，实现连接到数据库服务器，创建数据库，导入数据表与查看数据记录等操作，如图8-1-1所示。图8-1-1步骤1、下载phpstudy工具，搭建PHP与mysql服务器。在网上搜索找到phpstudy安装程序，按照安装向导完成安装，并启动phpstudy服务，如图8-1-2所示。图8-1-2步骤2、在网上下载、安装Navicat for MySQL工具。在网上搜索找到Navicat for MySQL安装程序，按照安装向导完成
3、安装，并打开Navicat工具，如图8-1-3所示。图8-1-3步骤3、打开mysql数据库管理工具navicat，链接到数据库服务器。在Navicat工具栏点击“连接”图标，在弹出“新建连接”对话框中输入mysql数据库服务器的主机名、端口号、用户名、密码，如图8-1-4所示。图8-1-4 步骤4、当Navicat建立与mysql数据库服务器连接之后，可以看到在mysql服务器上已有的数据库，如图8-1-5所示。图8-1-5步骤5、选中连接“localhost_3306”，单击鼠标右键，选择右键菜单“新建数据库”，并在弹出对话框输入“数据库名”为“foodsData”创建数据库，如图8-1-
4、6所示。图8-1-6步骤6、右击新建的数据库“foodsData”，单击鼠标右键，在弹出右键菜单选择“运行SQL文件”如图8-1-7所示。图8-1-7步骤7、在弹出对话框中选择需要导入数据文件foodsdata.sql，接着点击“开始”按钮，将教材提供的素材文件“foodsdata.sql”导入到数据库中，如图8-1-8所示。图8-1-8步骤8、查看数据库foodsData中的数据表。选中数据库foodsData，单击鼠标右键，在右键菜单中选择“刷新”，即可看到数据库foodsData中刚导入了哪些数据表，如图8-1-9所示。图8-1-9步骤9、查看数据记录。在Navicat显示数据表列表窗口
5、中，选中数据表foods单击鼠标右键，选择“打开表”即可打开查看数据表foods的数据记录，如图8-1-10所示。图8-1-101、认识数据库。数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。电脑中的数据库与现实生活中工厂仓库、学校图书库、超市仓库的作用有些相似，数据库是方便对数据、对信息存取、管理。2、常见关系数据库。关系型数据库有mysql 、SQL Server、Oracle、Sybase、DB2等。关系型数据库是目前最受欢迎的数据库管理系统，技术比较成熟。MySQL是目前最受欢迎开源的SQL数据库管理系统，与其
6、他的大型数据库Oracle、DB2、SQL Server等相比，MySQL虽然有它的不足之处，但丝毫也没有减少它受欢迎的程度。对于个人或中小型企业来说，MySQL的功能已经够用了， MySQL又是开源软件，因此没有必要花大精力和大价钱去使用大型付费数据库管理系统了。1、使用Navicat连接mysql数据库服务器，新建数据库bookdata，并将数据库文件bookdata.sql导入到数据库中，将数据导入到数据库中后接着查看数据表tushu，如图8-1-11所示。图8-1-11 2、使用Navicat连接mysql数据库服务器，新建数据库schooldata，并将数据库文件schooldata
7、.sql导入到数据库中，将数据导入到数据库中后接着查看数据表news，如图8-1-12所示。图8-1-123、使用Navicat连接mysql数据库服务器，将数据库schooldata中的数据表news导出为文本格式的文件，如图8-1-13所示。图8-1-13 小明同学在学习后台系统开发过程中了解到使用ThinkPHP框架进行开发系统，可以大大提高开发效率，也提高系统安全性、健壮性，下面将学习如何下载ThinkPHP框架，以及如何设置、使用好ThinkPHP框架进行开发后台系统，ThinkPHP5.0框架主要文件如图8-2-1所示。图8-2-1步骤1、登录thinkphp官方网站下载TP5.0
8、框架。打开浏览器，输入地址http:/ 点击下载按钮，要求输入thinkphp网站账号，如果没账号，点击注册，注册一个新的thinkphp网站账号即可；在注册好用户账号之后，输入新注册的用户名、密码，如图8-2-3所示。图8-2-3步骤3、输入正确的网站用户名、密码之后，即可下载thinkphp5.0框架，如图8-2-4所示。图8-2-4步骤4、找到刚下载好的thinkPHP5.0框架压缩文件，并查看框架压缩文件，如图8-2-5所示。图8-2-5步骤5、把框架压缩文件解压缩，接着把解压后的thinkphp_5.0.24_with_extend文件夹，复制，接着粘贴、放置到phpstudy的站点
9、运行根目录下，如图8-2-6所示。图8-2-6步骤6、接着将图8-2-6显示的文件夹名字“thinkphp_5.0.24_with_extend”（框架文件夹），重命名为foods，如图8-2-7所示。图8-2-7步骤7、打开phpstudy，启动Apache服务，以便测试thinkphp框架初始运行情况，如图8-2-8所示。图8-2-8步骤8、运行thinkPHP框架。打开浏览器，在地址栏输入访问thinkPHP5.0框架入口的地址，接着按【Enter】键即可访问，本地访问地址为http:/localhost/foods/public/index.php，如图8-2-9所示。图8-2-9步骤
10、9、修改thinkphp首页内容，使用Dreamweaver或者其他php代码编辑工具打开文件applicationindexcontroller index.php，如图8-2-10所示。图8-2-10步骤10、修改函数index()的内容。让访问index()函数，即可返回字符串“This is thinkphp”，如图8-2-11所示。图8-2-11步骤11、再次访问thinkphp首页。在浏览器地址栏输入地址http:/localhost/foods/public/index.php，发送访问请求之后，即可看到页面显示的内容发生了变化，如图8-2-12所示。图8-2-12步骤12、对访
11、问路径理解，如图8-2-13所示。图8-2-131、认识ThinkPHP框架。 ThinkPHP 是一个免费开源的，简单的、面向对象的、快速轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。 ThinkPHP自身包含了底层架构、兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、表单处理等常用的组件，并且对于跨版本、跨平台和跨数据库移植都比较方便。并且每个组件都是精心设计和完善的，应用开发过程仅仅需要关注您的业务逻辑。 使用ThinkPHP框架进行开发，将大大提高后台系统开发效率，程序编写者只要关
12、注业务逻辑即可，很多底层技术ThinkPHP框架已经帮开发者铺垫好，直接使用即可。2、thinkphp框架的使用文档以及开发手册，可以登录thinkphp官网，访问教程栏目，地址是https:/ thinkphp框架文件目录见开发文档，如图8-2-14所示。图8-2-144、thinkphp入口文件是publicindex.php，具体说明查看开发文档，如图8-2-15所示。图8-2-151、thinkphp框架使用练习一。（1）在indexcontrollerindex.php控制器中，添加函数jisuan()，如图8-2-16所示。图1-2-7图8-2-16（2）程序代码如下：public
13、 function jisuan() return 10+20;（3）在浏览器上输入访问info的正确地址，查看执行显示情况。在浏览器输入地址http:/localhost/foods/public/index.php/index/index/info，如图8-2-19所示。图8-2-172、thinkphp框架使用练习二。（1）在indexcontrollerindex.php控制器中，添加函数info()，如图8-2-18所示。图8-2-18图8-2-18（2）其中info（）程序代码如下：public function info() echo 学号:20200301; echo ; ec
14、ho 姓名:张小明; echo ; echo QQ:617282847;（3）在浏览器上输入访问info的正确地址，查看执行显示情况。在浏览器输入地址http:/localhost/foods/public/index.php/index/index/info，如图8-2-19所示。图8-2-19 小明同学经过对thinkphp深入学习，了解到通过thinkphp框架进行程序开发，效率大大提高。下面使用thinkphp框架读取mysql数据库中的数据，转成JSON格式的数据，以便后面提供给微信小程序使用。本任务使用ThinkPHP5.0框架读取数据库数据，如图8-3-1所示。图8-3-11、在
15、框架配置文件中，修改框架关于对数据库访问的配置。使用Dreamweaver打开foodsapplicationdatabase.php，修改框架对于数据库访问的参数值。在应用程序的数据库访问配置文件中修改配置项，打开框架数据库配置文件applicationdatabase.php，设置数据库相关参数，包括数据库存放的主机地址hostname、数据库名字database、数据库访问的用户名username、数据库访问的密码password等，如图8-3-2所示。图8-3-22.配置应用程序的框架配置文件applicationconfig.php。设置app_debug为true，开启程序调试模式
16、，以便详细地显示程序的报错信息，如图8-3-3所示。图8-3-33.配置好框架的数据库访问信息之后，下面使用thinkphp来读取mysql数据库中的数据，使用Dreamweaver或者其他php代码编辑工具打开文件applicationindexcontroller index.php，采用继承方法调用thinkphp中定义好的Db类，在控制器前面加上一行引用代码 “use thinkDb; ”，如图8-3-4所示。图8-3-54.参照thinkphp5.0开发手册，然后使用很简短的几行语句即可实现从数据表把数据读取出来，如图8-3-5所示。图8-3-5程序代码如下：public funct
17、ion mess()$rs=Db:query(select * from foods);echo dump($rs); 5.打开浏览器显示从数据库中读取数据的结果，在浏览器中输入访问mess函数的地址，数据库中数据表foods的记录即可显示出来，如图8-3-6所示。图8-3-66.接下来继续在控制器index.php文件中，编写readmess函数，将读取出来的数据转换成json格式，以便能提供json数据给后面章节中的小程序使用。首先参照步骤5方法，根据开发手册编写读取数据库语句，把数据读取出来保存在数据集变量$rs中，接着通过调用函数json_encode()把读取出来数据集$rs转换成j
18、son格式，如图8-3-7所示。图8-3-77.打开浏览器显示读取数据表的结果。在浏览器中输入访问readmess函数的地址，实现把数据库中数据表foods的记录以JSON格式显示出来，如图8-3-8所示。图8-3-81、认识JSON格式数据。 JSON(是JavaScript Object Notation缩写) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
19、。 JSON对象是一个无序的“名称/值对”集合。一个对象以左括号开始，右括号结束。每个“名称”后跟一个:冒号；“名称/值 对”之间使用,逗号分隔。2、thinkphp框架中，如何访问数据库，设置数据库访问配置参数，可以登录thinkphp官网，访问教程栏目，地址是https:/ 小明同学掌握了如何使用thinkphp框架快速开发后台系统，现在接着学习如何在微信小程序中发送请求，与后台系统进行交互。本任务学习在小程序中读取mysql数据库中的数据并在小程序页面上显示出来，如图8-4-1所示。 图8-4-1【任务素材】数据库文件、thinkphp5.0框架【任务实现】 1、新建一个微信小程序项目，
20、命名为foods，设置保存路径、AppID等，如图8-4-2所示。图8-4-22. 打开新建的微信小程序项目，如图8-4-3所示。图8-4-33查看app.json配置示例，示例中查看关于tabBar的设置，选中且复制示例中tabBar设置代码，如图8-4-4所示图8-4-4代码如下： tabBar: list: pagePath: pages/index/index, text: 首页 , pagePath: pages/logs/logs, text: 日志 4.将官方开发文档中关于tabBar配置示例的代码复制、粘贴到本项目app.json文件中，保存项目后，在小程序底部即可查看到tab
21、Bar导航栏菜单，如图8-4-5所示。图8-4-55.打开页面index.js，清空此文件附带的代码，如图8-4-6所示。图8-4-66.在index.js文件中，使用page方法初始化页面，如图 8-4-7所示图8-4-77 7. .在onload方法中，编写代码，当此页面加载时小程序发送wx.request请求，将从指定URL地址的后台系统中读取json格式数据，如图8-4-8所示。图8-4-8主要代码如下：var that = this; /读取数据库 wx.request( url: http:/localhost/foods/public/index.php/index/index/
22、readmess, method: GET, success(res) console.log(res.data), that.setData( list: res.data, ); );8.打开index.wxml页面，清空此页面之前的内容，编写程序代码,以呈现index.js页面装载的list数据集，如图8-4-9所示。图8-4-9代码如下： item.ID、item.Name、item.Writer9.保存项目。1、微信小程序请求API接口函数wx.request，它能发起 HTTPS 网络请求，通过它开发人员实现让微信小程序与后台系统进行交互，比如此任务中wx.request访问后台P
23、HP程序以读取mysql数据库中的数据，使用前请先阅读微信小程序开发手册。2、有关参数（1）URL为后台服务器的访问地址，一般可以分成两部分。a、https:/域名ID请求的域名 。b、index.php请求的功能接口。（2）通过请求的域名进入服务器中，请求的功能接口进行数据传输。(3)、data为传递的参数。 例如将上示例代码的data传入数据接口中，请求的功能接口应该这样写： $name = $_GETa; $password = $_GETb;(4)、success为接口调用成功的回调函数。a、res中传递回来的是index.php传递的参数b、调用特定参数的方式为：res.data.n
24、ame(5)、fail和complete分别为接口调用失败的回调函数和接口调用结束的回调函数（调用成功、失败都会执行）。3、本案例与任务7.3相似，请留意分析两个案例的异同点。【拓展训练】1、在微信小程序中读取mysql数据库中的shop_mess的数据，并在小程序页面中呈现出来，如图8-4-10所示。图8-4-102、在微信小程序中读取mysql数据库中数据表user的数据，并在小程序页面中呈现出来，如图8-4-11所示。图8-4-11 通过本单元学习，主要学习了如何实现让微信小程序与后台系统进行交互，通过wx.request发送访问后台系统的请求。也掌握了微信小程序读取mysql数据库中数据的实现过程。 谢谢大家谢谢大家