1、第十二章 应用项目开发实例目录开发环境开发环境 开发开发组件组件贺州旅游新闻系统贺州旅游新闻系统本章小结本章小结一、开发环境开发环境 Chrome浏览器浏览器 HBuilder WAMP1、ChromeChrome浏览器浏览器Chrome是一个由Google公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。Chrome对HTML5、jquery、MUI、PHP有很好的支持。2、HBuilderHBuilderHBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuild
2、er是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，HBuilder对HTML5、jquery、MUI、PHP的代码编写有很好的支持，可及时显示程序开发者编写的基本视图界面。3、WAMPWAMP当前项目开发环境，使用WAMP5 1.7.4版本。WAMP5集成了Apache+PHP+Mysql环境，拥有简单的图形和菜单安装和配置环境的特点。3、WAMPWAMP在网上可以自行下载 WAMP5 的安装包，也可在作者百度云盘上（地址为http:/ wamp5_1.7.4.exe 安装文件。3、WAMPWAMP（2）出现安装界面后，点击 Next 按钮，如图 12-1
3、所示。图12-1 安装界面13、WAMPWAMP（3）选中 I accept the agreement 选项，点击 Next 按钮，图 12-2 所示是指定 WAMP5 程序安装的位置。图12-2安装界面23、WAMPWAMP（4）依次点击 Next 按钮，出现如图 12-3 和图 12-4 所示的界面。图12-3安装界面3图12-4安装界面43、WAMPWAMP（5）点击 Next 按钮，出现如图 12-5 所示的界面。点击 Install 按钮，出现如图 12-6 所示的表示程序开发者开发的代码存放位置的界面。图12-5安装界面5图12-6 安装界面63、WAMPWAMP（6）依次点击“
4、确定”和 Next 按钮，出现图 12-7 和图 12-8 所示的界面，选择默认设置。图12-7安装界面7图12-8安装界面83、WAMPWAMP（7）点击 Next 按钮，出现图 12-9 所示的选择测试网页所使用的浏览器界面，点击“打开”按钮，在图 12-10 所示的界面点击 Finish 按钮，即可启动 WAMP5。图12-9 安装界面9图12-10 安装界面103、WAMPWAMP（8）安装好WAMP后，要检测80端口是否被其它程序占用，以免影响WAMP运行，如图12-12表示为WAMP正常使用80端口。图12-11 80端检测图12-12 80端正常二、开发组件开发组件1.jQuer
5、yjQuery是一个快速、简洁的JavaScript框架，jQuery具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并且可对CSS选择器进行扩展，拥有便捷的插件扩展机制和丰富的插件。2.MUIMUI 是一个轻量级的 HTML、CSS 和 JS 框架，遵循 Google 的 Material Design 设计思路。MUI组件已被封装成HBuilder代码块，只需要简单几个字符，就可以快速生成各个组件对应的HTML代码。MUI要引入的代码会在创建HBuilder工程时自动引入的。三、贺州旅游新闻系统贺州旅游新闻系统【例12.1】在网页后台通过管理员账户可以添加新闻，并查看
6、添加的新闻，并接收手机客户端的用户注册数据，查看新闻，修改密码功能。【说明】后台使用 PHP 结合 jQuery、MUI、JSON 来实现各种功能，前台使用 Android 的相关控件以及 JSON 来实现各种功能。三、贺州旅游新闻系统贺州旅游新闻系统【开发步骤】1后台功能开发。（1）在 MySQL 中创建数据库 hztourdb。（2）在数据库中生成如表 12-1 至表 12-3 所示的 3 张表。三、贺州旅游新闻系统贺州旅游新闻系统（3）在HBuilder中点击“文件”“新建”“移动 App”，创建名为 servicecode 的项目，选择 mui 项目，如图 12-13 所示。最终将编写
7、好的servicecode 的项目放入到WAMP的www directory下。（4）在生成的项目 js 目录下添加 jquery-2.1.1.min.js 文件，并创建如图 12-14 所示的文件和目录。图12-13 创建工程图12-14 后台工程结构三、贺州旅游新闻系统贺州旅游新闻系统（5）导入相关的图片到项目的 image 文件夹下，编写好 db.php 文件内容和 conn.php 文件内容，实现数据库的连接、增、删、查、改操作。（6）最后将编写好的servicecode 的项目放入到WAMP的www directory下。（7）在浏览器下输入：http:/localhost/serv
8、icecode/login.html登录后台，其界面如图 12-15 所示。图12-15后台登录界面三、贺州旅游新闻系统贺州旅游新闻系统（8）文件 home.php 为主页界面，其界面如图 12-16所示。图12-16后台主页界面三、贺州旅游新闻系统贺州旅游新闻系统（9）文件 newslist.php 为新闻列表界面，其界面如图 12-17 所示。图12-17新闻列表界面三、贺州旅游新闻系统贺州旅游新闻系统（10）文件 newsdetail.php 为具体新闻界面，其界面如图 12-18 所示：图12-18具体新闻界面三、贺州旅游新闻系统贺州旅游新闻系统（11）文件 addNews.php 为
9、添加新闻界面，其界面如图 12-19 所示：图12-19添加新闻界面三、贺州旅游新闻系统贺州旅游新闻系统（12）文件 android_login.php 为处理手机端用户登录的后台代码。（13）文件android_register.php为处理手机端用户注册的后台代码。（14）文件 android_newslist.php 为手机端新闻列表的后台代码。（15）文件 android_checkpwd.php 为手机端用户修改个人密码的后台代码。（16）文件 user.android.class.php 为处理手机端用户各种请求的后台功能函数代码。2.手机端功能开发（1）在Eclipse中创建工程
10、名为HZTour的工程，导入相关图片到res下的drawable-hdpi目录下。然后分别创建com.hzu.adapter、com.hzu.fragment、com.hzu.hztour、com.hzu.model、com.hzu.util五个包。其中 src 目录下的文件结构如图 12-20 所示。图12-20 src下文件结构。（2）创建用户登录界面，如图 12-21 所示；创建用户注册界面，如图 12-22 所示。图1-21 用户登录界面图12-22用户注册界面。（3）用户登录成功，进入的主界面如图 12-23 所示。点击新闻菜单显示的界面如图 12-24所示。图 12-23 APP主界面图 12-24 新闻界面。（4）新闻界面中显示的新闻列表，如图 12-25 所示。点击某条新闻后，显示的新闻详情页面如图 12-26 所示。图 12-25 新闻列表 图 12-26 显示新闻详情。（5）用户点击“我的”，显示界面如图 12-27 所示。点击“修改密码”界面如图 12-28 所示。图 12-27“我的”界面图 12-28 修改密码界面三、贺州旅游新闻系统贺州旅游新闻系统整个 HZTour 项目还有一些非关键性代码没有在本书中进行详细介绍，请登录中国水利水电出版社网站（http:/
