当前位置： 首页 > news >正文

第6章：移动端开发：01-移动开发体检预约

news 2026/8/13 20:57:03

第6章 移动端开发-体检预约

1. 移动端开发

1.1 移动端开发方式

随着移动互联网的兴起和手机的普及，目前移动端应用变得愈发重要，成为了各个商家的必争之地。例如，我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等，以前只能通过PC端完成的事情，现在通过手机都能够实现，而且更加方便，而这些都需要移动端开发进行支持，那如何进行移动端开发呢？

移动端开发主要有三种方式：

1、基于手机API开发（原生APP）

2、基于手机浏览器开发（移动web）

3、混合开发（混合APP）

1.1.1 基于手机API开发

手机端使用手机API，例如使用Android、ios 等进行开发，服务端只是一个数据提供者。手机端请求服务端获取数据（json、xml格式）并在界面进行展示。这种方式相当于传统开发中的C/S模式，即需要在手机上安装一个客户端软件。

这种方式需要针对不同的手机系统分别进行开发，目前主要有以下几个平台：

1、苹果ios系统版本，开发语言是Objective-C

2、安卓Android系统版本，开发语言是Java

3、微软Windows phone系统版本，开发语言是C#

4、塞班symbian系统版本，开发语言是C++

此种开发方式举例：手机淘宝、抖音、今日头条、大众点评

1.1.2 基于手机浏览器开发

生存在浏览器中的应用，基本上可以说是触屏版的网页应用。这种开发方式相当于传统开发中的B/S模式，也就是手机上不需要额外安装软件，直接基于手机上的浏览器进行访问。这就需要我们编写的html页面需要根据不同手机的尺寸进行自适应调节，目前比较流行的是html5开发。除了直接通过手机浏览器访问，还可以将页面内嵌到一些应用程序中，例如通过微信公众号访问html5页面。

这种开发方式不需要针对不同的手机系统分别进行开发，只需要开发一个版本，就可以在不同的手机上正常访问。

本项目会通过将我们开发的html5页面内嵌到微信公众号这种方式进行开发。

1.1.3 混合开发

是半原生半Web的混合类App。需要下载安装，看上去类似原生App，访问的内容是Web网页。其实就是把HTML5页面嵌入到一个原生容器里面。

1.2 微信公众号开发

要进行微信公众号开发，首先需要访问微信公众平台，官网：https://mp.weixin.qq.com/

1.2.1 帐号分类

在微信公众平台可以看到，有四种帐号类型：服务号、订阅号、小程序、企业微信（原企业号）。

本项目会选择订阅号这种方式进行公众号开发。

1.2.2 注册帐号

要开发微信公众号，首先需要注册成为会员，然后就可以登录微信公众平台进行自定义菜单的设置。

注册页面：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

选择订阅号进行注册：

输入邮箱、邮箱验证码、密码、确认密码等按照页面流程进行注册

1.2.3 自定义菜单

注册成功后就可以使用注册的邮箱和设置的密码进行登录，登录成功后点击左侧“自定义菜单”进入自定义菜单页面

在自定义菜单页面可以根据需求创建一级菜单和二级菜单，其中一级菜单最多可以创建3个，每个一级菜单下面最多可以创建5个二级菜单。每个菜单由菜单名称和菜单内容组成，其中菜单内容有3中形式：发送消息、跳转网页、跳转小程序。

1.2.4 上线要求

如果是个人用户身份注册的订阅号，则自定义菜单的菜单内容不能进行跳转网页，因为个人用户目前不支持微信认证，而跳转网页需要微信认证之后才有权限。

如果是企业用户，首先需要进行微信认证，通过后就可以进行跳转网页了，跳转网页的地址要求必须有域名并且域名需要备案通过。

2. 需求分析和环境搭建

2.1 需求分析

用户在体检之前需要进行预约，可以通过电话方式进行预约，此时会由体检中心客服人员通过后台系统录入预约信息。用户也可以通过手机端自助预约。本章节开发的功能为用户通过手机自助预约。

预约流程如下：

1、访问移动端首页

2、点击体检预约进入体检套餐列表页面

3、在体检套餐列表页面点击具体套餐进入套餐详情页面

4、在套餐详情页面点击立即预约进入预约页面

5、在预约页面录入体检人相关信息点击提交预约

效果如下图：

2.2 搭建移动端工程

本项目是基于SOA架构进行开发，前面我们已经完成了后台系统的部分功能开发，在后台系统中都是通过Dubbo调用服务层发布的服务进行相关的操作。本章节我们开发移动端工程也是同样的模式，所以我们也需要在移动端工程中通过Dubbo调用服务层发布的服务，如下图：

2.2.1 导入maven坐标

在health_common工程的pom.xml文件中导入阿里短信发送的maven坐标

<!--阿里云短信--> <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>3.3.1</version> </dependency> <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-dysmsapi</artifactId> <version>1.0.0</version> </dependency> <!--腾讯云短信--> <dependency> <groupId>com.tencentcloudapi</groupId> <artifactId>tencentcloud-sdk-java</artifactId> <version>3.1.62</version><!-- 注：这里只是示例版本号，请获取并替换为 最新的版本号 --> </dependency>
2.2.2 导入通用组件

在health_common工程中导入如下通用组件

ValidateCodeUtils工具类：

package com.liusp.utils; import java.util.Random; /** * 随机生成验证码工具类 */ public class ValidateCodeUtils { /** * 随机生成验证码 * @param length 长度为4位或者6位 * @return */ public static Integer generateValidateCode(int length){ Integer code =null; if(length == 4){ code = new Random().nextInt(9999);//生成随机数，最大为9999 if(code < 1000){ code = code + 1000;//保证随机数为4位数字 } }else if(length == 6){ code = new Random().nextInt(999999);//生成随机数，最大为999999 if(code < 100000){ code = code + 100000;//保证随机数为6位数字 } }else{ throw new RuntimeException("只能生成4位或6位数字验证码"); } return code; } /** * 随机生成指定长度字符串验证码 * @param length 长度 * @return */ public static String generateValidateCode4String(int length){ Random rdm = new Random(); String hash1 = Integer.toHexString(rdm.nextInt()); String capstr = hash1.substring(0, length); return capstr; } }

RedisMessageConstant常量类：

package com.liusp.constant; public class RedisMessageConstant { public static final String SENDTYPE_ORDER = "001";//用于缓存体检预约时发送的验证码 public static final String SENDTYPE_LOGIN = "002";//用于缓存手机号快速登录时发送的验证码 public static final String SENDTYPE_GETPWD = "003";//用于缓存找回密码时发送的验证码 }
2.2.3 health_mobile

创建移动端工程health_mobile，打包方式为war，用于存放Controller，在Controller中通过Dubbo可以远程访问服务层相关服务，所以需要依赖health_interface接口工程。

pom.xml：

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <groupId>com.liusp</groupId> <artifactId>health_parent</artifactId> <version>0.0.1-SNAPSHOT</version> <!--<relativePath/> &lt;!&ndash; lookup parent from repository &ndash;&gt;--> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.liusp</groupId> <artifactId>health_mobile</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <name>health_mobile</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <spring-boot.version>2.3.7.RELEASE</spring-boot.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> <!--Dubbo集成SpringBoot依赖--> <dependency> <groupId>com.alibaba.spring.boot</groupId> <artifactId>dubbo-spring-boot-starter</artifactId> <version>2.0.0</version> </dependency> <!--zkclient zookeeper客户端--> <dependency> <groupId>com.101tec</groupId> <artifactId>zkclient</artifactId> <version>0.10</version> </dependency> <dependency> <groupId>com.liusp</groupId> <artifactId>health_interface</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <!-- 引入redis--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!--spring security--> <!--<dependency>--> <!--<groupId>org.springframework.boot</groupId>--> <!--<artifactId>spring-boot-starter-security</artifactId>--> <!--</dependency>--> <!--文件上传--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.72</version> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>${spring-boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <source>1.8</source> <target>1.8</target> <encoding>UTF-8</encoding> </configuration> </plugin> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.3.7.RELEASE</version> <configuration> <mainClass>com.liusp.HealthMobileApplication</mainClass> </configuration> <executions> <execution> <id>repackage</id> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project>

静态资源（CSS、html、img等，详见资料）：

application.yml 配置文件：

server: port: 80 #dubbo dubbo: #设置服务器应用名称 application: name: health_mobile #指定注册中心 registry: address: zookeeper://127.0.0.1:2181 #超时全局设置 10分钟 #check=false 不检查服务提供方，开发阶段建议设置为false #check=true 启动时检查服务提供方，如果服务提供方没有启动则报错 consumer: timeout: 600000 check: false spring: redis: host: 127.0.0.1 #文件上传 servlet: multipart: enabled: true max-file-size: 10MB max-request-size: 100MB #设置日期格式 jackson: date-format: yyyy-MM-dd time-zone: GMT+8

SpringBoot启动类添加Dubbo支持注解：

//添加对Dubbo的支持 @EnableDubbo

3. 套餐列表页面动态展示

移动端首页为/pages/index.html，效果如下：

点击体检预约直接跳转到体检套餐列表页面（/pages/setmeal.html）

3.1 完善页面

3.1.1 展示套餐信息
<ul class="list"> <li class="list-item" v-for="setmeal in setmealList"> <a class="link-page" :href="'setmeal_detail.html?id='+setmeal.id"> <img class="img-object f-left" :src="'http://pqjroc654.bkt.clouddn.com/'+setmeal.img" alt=""> <div class="item-body"> <h4 class="ellipsis item-title">{{setmeal.name}}</h4> <p class="ellipsis-more item-desc">{{setmeal.remark}}</p> <p class="item-keywords"> <span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span> <span>{{setmeal.age}}</span> </p> </div> </a> </li> </ul>
3.1.2 获取套餐列表数据
var vue = new Vue({ el:'#app', data:{ setmealList:[] }, mounted (){ //发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面展示 axios.get("/setmeal/getAllSetmeal.do").then((res) => { if(res.data.flag){ //查询成功，给模型数据赋值 this.setmealList = res.data.data; }else{ //查询失败，弹出提示信息 this.$message.error(res.data.message); } }); } });

3.2 后台代码

3.2.1 Controller

在health_mobile工程中创建SetmealController并提供getSetmeal方法，在此方法中通过Dubbo远程调用套餐服务获取套餐列表数据

package com.liusp.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.liusp.constant.MessageConstant; import com.liusp.entity.Result; import com.liusp.pojo.Setmeal; import com.liusp.service.SetmealService; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/setmeal") public class SetmealController { @Reference//(check = false) private SetmealService setmealService; //获取所有套餐信息 @RequestMapping("/getAllSetmeal.do") public Result getAllSetmeal(){ try{ List<Setmeal> list = setmealService.findAll(); return new Result(true, MessageConstant.GET_SETMEAL_LIST_SUCCESS,list); }catch (Exception e){ e.printStackTrace(); return new Result(false,MessageConstant.GET_SETMEAL_LIST_FAIL); } } }
3.2.2 服务接口

在SetmealService服务接口中扩展findAll方法

public List<Setmeal> findAll();
3.2.3 服务实现类

在SetmealServiceImpl服务实现类中实现findAll方法

public List<Setmeal> findAll() { return setmealDao.findAll(); }

1
2
3

3.2.4 Dao接口

在SetmealDao接口中扩展findAll方法

public List<Setmeal> findAll();
3.2.5 Mapper映射文件

在SetmealDao.xml映射文件中扩展SQL语句

<select id="findAll" resultType="com.liusp.pojo.Setmeal"> select * from t_setmeal </select>

4. 套餐详情页面动态展示

前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。

请求路径格式：http://localhost/pages/setmeal_detail.html?id=10

在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。

4.1 完善页面

4.1.1 获取请求参数中套餐id

在页面中已经引入了healthmobile.js文件，此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

function getUrlParam(paraName) { var url = document.location.toString(); //alert(url); var arrObj = url.split("?"); if (arrObj.length > 1) { var arrPara = arrObj[1].split("&"); var arr; for (var i = 0; i < arrPara.length; i++) { arr = arrPara[i].split("="); if (arr != null && arr[0] == paraName) { return arr[1]; } } return ""; } else { return ""; } }

在setmeal_detail.html中调用上面定义的方法获取套餐id的值

<script> var id = getUrlParam("id"); </script>
4.1.2 获取套餐详细信息
<script> var vue = new Vue({ el:'#app', data:{ imgUrl:null,//套餐对应的图片链接 setmeal:{} }, mounted(){ axios.post("/setmeal/findById.do?id=" + id).then((response) => { if(response.data.flag){ this.setmeal = response.data.data; this.imgUrl = 'http://pqjroc654.bkt.clouddn.com/' + this.setmeal.img; } }); } }); </script>
4.1.3 展示套餐信息
<div class="contentBox"> <div class="card"> <div class="project-img"> <img :src="imgUrl" width="100%" height="100%" /> </div> <div class="project-text"> <h4 class="tit">{{setmeal.name}}</h4> <p class="subtit">{{setmeal.remark}}</p> <p class="keywords"> <span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span> <span>{{setmeal.age}}</span> </p> </div> </div> <div class="table-listbox"> <div class="box-title"> <i class="icon-zhen"><span class="path1"></span><span class="path2"></span></i> <span>套餐详情</span> </div> <div class="box-table"> <div class="table-title"> <div class="tit-item flex2">项目名称</div> <div class="tit-item flex3">项目内容</div> <div class="tit-item flex3">项目解读</div> </div> <div class="table-content"> <ul class="table-list"> <li class="table-item" v-for="checkgroup in setmeal.checkGroups"> <div class="item flex2">{{checkgroup.name}}</div> <div class="item flex3"> <label v-for="checkitem in checkgroup.checkItems"> {{checkitem.name}} </label> </div> <div class="item flex3">{{checkgroup.remark}}</div> </li> </ul> </div> <div class="box-button"> <a @click="toOrderInfo()" class="order-btn">立即预约</a> </div> </div> </div> </div>

4.2 后台代码

4.2.1 Controller

在SetmealController中提供findById方法

//根据id查询套餐信息 @RequestMapping("/findById.do") public Result findById(int id){ try{ Setmeal setmeal = setmealService.findById(id); return new Result(true,MessageConstant.QUERY_SETMEAL_SUCCESS,setmeal); }catch (Exception e){ e.printStackTrace(); return new Result(false,MessageConstant.QUERY_SETMEAL_FAIL); } }
4.2.2 服务接口

在SetmealService服务接口中提供findById方法

public Setmeal findById(int id);
4.2.3 服务实现类

在SetmealServiceImpl服务实现类中实现findById方法

public Setmeal findById(int id) { return setmealDao.findById(id); }
4.2.4 Dao接口

在SetmealDao接口中提供findById方法

public Setmeal findById(int id);

在CheckGroupDao接口中提供findCheckGroupById方法

List<CheckGroup> findCheckGroupById(Integer id);

在CheckItemDao接口中提供findCheckItemById方法

public List<CheckItem> findCheckItemById(Integer id);
4.2.5 Mapper映射文件

此处会使用mybatis提供的关联查询，在根据id查询套餐时，同时将此套餐包含的检查组都查询出来，并且将检查组包含的检查项都查询出来。

SetmealDao.xml文件：

<resultMap type="com.liusp.pojo.Setmeal" id="baseResultMap"> <id column="id" property="id"/> <result column="name" property="name"/> <result column="code" property="code"/> <result column="helpCode" property="helpCode"/> <result column="sex" property="sex"/> <result column="age" property="age"/> <result column="price" property="price"/> <result column="remark" property="remark"/> <result column="attention" property="attention"/> <result column="img" property="img"/> </resultMap> <resultMap type="com.liusp.pojo.Setmeal" id="findByIdResultMap" extends="baseResultMap"> <collection property="checkGroups" javaType="ArrayList" ofType="com.liusp.pojo.CheckGroup" column="id" select="com.liusp.dao.CheckGroupDao.findCheckGroupById"> </collection> </resultMap> <select id="findById" resultMap="findByIdResultMap"> select * from t_setmeal where id=#{id} </select>

CheckGroupDao.xml文件：

<resultMap type="com.liusp.pojo.CheckGroup" id="baseResultMap"> <id column="id" property="id"/> <result column="name" property="name"/> <result column="code" property="code"/> <result column="helpCode" property="helpCode"/> <result column="sex" property="sex"/> <result column="remark" property="remark"/> <result column="attention" property="attention"/> </resultMap> <resultMap type="com.liusp.pojo.CheckGroup" id="findByIdResultMap" extends="baseResultMap"> <collection property="checkItems" javaType="ArrayList" ofType="com.liusp.pojo.CheckItem" column="id" select="com.liusp.dao.CheckItemDao.findCheckItemById"> </collection> </resultMap> <!--根据套餐id查询检查项信息--> <select id="findCheckGroupById" resultMap="findByIdResultMap"> select * from t_checkgroup where id in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id=#{id}) </select>

CheckItemDao.xml文件：

<!--根据检查组id查询检查项信息--> <select id="findCheckItemById" resultType="com.liusp.pojo.CheckItem"> select * from t_checkitem where id in (select checkitem_id from t_checkgroup_checkitem where checkgroup_id=#{id}) </select>
http://www.cnnetsun.cn/news/4007944.html

相关文章：

  • 政务网站建设方案详解：打造透明高效的服务型政府数字名片
  • 自己人网站建设怎么选：从源码解析到落地交付的避坑指南
  • 揭秘郑州网站建设专家背后的真实逻辑与未来趋势
  • 安徽高端网站建设如何实现品牌差异化与流量转化的双重突破
  • 大麦网抢票脚本逆向工程：从零构建自动化购票系统的完整指南
  • 合肥手机网站建设：如何让您的企业在移动端流量红利中精准获客并转化
  • 从零开始掌握网站建设学习资料：普通开发者的逆袭指南与实战心法
  • 深耕移动互联时代，深圳手机网站建设公司如何助力企业实现数字化转型与流量突破
  • 深入解析网站建设合同英文版：从避坑指南到核心条款的全方位实战指南
  • 东莞网站建设多少钱，资深老哥掏心窝子告诉你底价与避坑指南
  • 吉安市网站建设：从本地中小企业的数字化转型看网站优化的未来走向
  • 签证网站建设：中小企业如何用低成本打造高转化率的官方门户指南
  • 揭秘网站建设推广人员如何在互联网红海中杀出一条血路并实现价值最大化
  • 上海嘉定网站建设:从0到1的实战避坑指南，老板必看的企业数字化转型之路
  • 上海html5网站建设如何实现企业品牌价值的最大化提升
  • 探索KiCad Footprint Libraries：官方5.0版本库的终极概览与核心功能解析
  • 打开网站说建设中是什么问题及常见故障排查与修复指南
  • 深耕区域数字化：南湖网站建设公司如何为本地企业打造高转化率专属网站平台
  • 深度揭秘：中国小康建设网是骗子网站吗？带你拨开迷雾看真相，普通百姓该如何避坑防骗
  • 如何判断深度学习模型的任务类型（AI4问）
  • 揭秘电子商务网站建设侧重点：避开流量陷阱与转化雷区，打造高利润店铺全指南
  • 网站建设客户确认单的重要性与作用，为什么你必须仔细审核每一个细节再签字
  • 2024年网站 建设 流行 数据库选型指南：从底层架构到高性能实践的终极解析
  • 深度揭秘天津市建设行业联合会网站：探索天津建筑行业资源整合与数字化转型的新高地
  • 深度解析：长沙大型网站建设公司如何选择靠谱团队打造企业数字化核心竞争力
  • 为什么选择贵阳网站建设搜王道下拉服务？揭秘本地企业数字化突围实战指南
  • 菏泽网站建设菏泽众皓，从入门到精通：揭秘本地企业为何选择我们打造专属数字化品牌
  • 学习网站建设论文：从零基础到独立建站的全方位指南与实战经验分享
  • 大钟寺网站建设企业专属解决方案与本地化推广实战指南
  • 2024年企业数字化转型必读：深度解读互联网网站建设咨询的核心价值与避坑指南