传智健康3—移动端开发体检预约


阅读数: 次   

我大意了啊，没有闪。我本来以为是真的移动端（Android）开发，结果害tm是网页！！！

imgimgimgimgimg

我算是看出来了，除了ElementUI这个没有新知识点。。。算了当复习😥

体检预约

用户可以通过如下操作流程进行体检预约：

1、在移动端首页点击体检预约，页面跳转到套餐列表页面

2、在套餐列表页面点击要预约的套餐，页面跳转到套餐详情页面

3、在套餐详情页面点击立即预约，页面跳转到预约页面

4、在预约页面录入体检人信息，包括手机号，点击发送验证码

5、在预约页面录入收到的手机短信验证码，点击提交预约，完成体检预约

1.移动端开发

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

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

1、基于手机API开发（原生APP）
2、基于手机浏览器开发（移动web）
3、混合开发（混合APP）

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.2基于手机浏览器开发

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

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

1.3混合开发

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

2.套餐详情页面展示

套餐列表页面很好实现，只需要和数据库实现简单交互就可以了。

点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。
请求路径格式：http://localhost/pages/setmeal_detail.html?id=10

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

2.1简单实现

在一开始时调用钩子函数，查询后台绑定到前端数据

1
2
3
4
5
6
7
8
mounted(){
    axios.post("/setmeal/findById.do?id=" + id).then((response) => {
        if(response.data.flag){
            this.setmeal = response.data.data;
            this.imgUrl = 'http://qjy2m0vhk.hd-bkt.clouddn.com/' + this.setmeal.img;
        }
    });
}

Controller:

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/findById")
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);
    }
}

Service:

1
2
3
public Setmeal findById(int id) {
	return setmealDao.findById(id);
}

2.2难点实现

这里面最困难的就是如何多表查询，我们需要通过套餐id去套餐检查组关系表中查询改套餐对应的检查组，再接着把得到的检查组对应的检查项查出来。

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

SetmealDao.xml文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<resultMap id="baseResultMap" type="com.itheima.pojo.Setmeal">
    <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 id="findByIdResultMap" type="com.itheima.pojo.Setmeal" extends="baseResultMap">
    <!--查询套餐和检查组多对多的关系-->
    <collection property="checkGroups"
                ofType="com.itheima.pojo.CheckGroup"
                column="id"
                select="com.itheima.dao.CheckGroupDao.findCheckGroupById">

    </collection>
</resultMap>
<!--根据id查询对应的套餐数据（包括检查组和检查项）-->
<select id="findById" parameterType="java.lang.Integer" resultMap="findByIdResultMap">
    select * from t_setmeal where id = #{id}
</select>

CheckGroupDao.xml文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<resultMap id="baseResultMap" type="com.itheima.pojo.CheckGroup">
    <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 id="findByIdResultMap" type="com.itheima.pojo.CheckGroup" extends="baseResultMap">
    <collection property="checkItems"
                ofType="com.itheima.pojo.CheckItem"
                column="id"
                select="com.itheima.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文件：

1
2
3
4
5
<!--根据检查组id查询检查项信息-->
<select id="findCheckItemById" resultType="com.itheima.pojo.CheckItem">
    select * from t_checkitem where id in
    (select checkitem_id from t_checkgroup_checkitem where checkgroup_id = #{id})
</select>

3.短信发送

之前品优购系列也提到过短信服务，具体参见链接

3.1短信服务介绍

短信服务（Short Message Service）是阿里云为用户提供的一种通信服务的能力，支持快速发送短信验证码、短信通知等。 三网合一专属通道，与工信部携号转网平台实时互联。电信级运维保障，实时监控自动切换，到达率高达99%。短信服务API提供短信发送、发送状态查询、短信批量发送等能力，在短信服务控制台上添加签名、模板并通过审核之后，可以调用短信服务API完成短信发送等操作。

本项目短信发送我们选择的是阿里云提供的短信服务。

3.2封装工具类

先导入Maven坐标，再编写代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package com.itheima.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;

/**
 * 短信发送工具类
 */
public class SMSUtils {
    public static final String VALIDATE_CODE = "SMS_159620392";//发送短信验证码
    public static final String ORDER_NOTICE = "SMS_159771588";//体检预约成功通知

    /**
	 * 发送短信
	 * @param phoneNumbers
	 * @param param
	 * @throws ClientException
	 */
    public static void sendShortMessage(String templateCode,String phoneNumbers,String param) throws ClientException{
        // 设置超时时间-可自行调整
        System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
        System.setProperty("sun.net.client.defaultReadTimeout", "10000");
        // 初始化ascClient需要的几个参数
        final String product = "Dysmsapi";// 短信API产品名称（短信产品名固定，无需修改）
        final String domain = "dysmsapi.aliyuncs.com";// 短信API产品域名（接口地址固定，无需修改）
        // 替换成你的AK
        final String accessKeyId = "LTAIak3CfAehK7cE";// 你的accessKeyId,参考本文档步骤2
        final String accessKeySecret = "zsykwhTIFa48f8fFdU06GOKjHWHel4";// 你的accessKeySecret，参考本文档步骤2
        // 初始化ascClient,暂时不支持多region（请勿修改）
        IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
        DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
        IAcsClient acsClient = new DefaultAcsClient(profile);
        // 组装请求对象
        SendSmsRequest request = new SendSmsRequest();
        // 使用post提交
        request.setMethod(MethodType.POST);
        // 必填:待发送手机号。支持以逗号分隔的形式进行批量调用，批量上限为1000个手机号码,批量调用相对于单条调用及时性稍有延迟,验证码类型的短信推荐使用单条调用的方式
        request.setPhoneNumbers(phoneNumbers);
        // 必填:短信签名-可在短信控制台中找到
        request.setSignName("传智健康");
        // 必填:短信模板-可在短信控制台中找到
        request.setTemplateCode(templateCode);
        // 可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
        // 友情提示:如果JSON中需要带换行符,请参照标准的JSON协议对换行符的要求,比如短信内容中包含\r\n的情况在JSON中需要表示成\\r\\n,否则会导致JSON在服务端解析失败
        request.setTemplateParam("{\"code\":\""+param+"\"}");
        // 可选-上行短信扩展码(扩展码字段控制在7位或以下，无特殊需求用户请忽略此字段)
        // request.setSmsUpExtendCode("90997");
        // 可选:outId为提供给业务方扩展字段,最终在短信回执消息中将此值带回给调用者
        // request.setOutId("yourOutId");
        // 请求失败这里会抛ClientException异常
        SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
        if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
            // 请求成功
            System.out.println("请求成功");
        }
    }
}

4.预约过程

image-20201122221053798

4.1三十秒倒计时效果

我们发送验证码时先验证发送的手机格式是否正确，如果校验通过，需要显示30秒倒计时效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//发送验证码
sendValidateCode(){
    //获取用户输入的手机号
    var telephone = this.orderInfo.telephone;
    //校验手机号输入是否正确
    if(!checkTelephone(telephone)){
        this.$message.error('请输入正确的手机号');
        //没必要执行下去了
        return false;
    }
    //实现倒计时效果
    validateCodeButton = $("validateCodeButton")[0];
    clock = window.setInterval(doLoop,1000);//一秒执行一次
    //发送ajax请求，在后台给用户发送手机验证码
    axios.post("/validateCode/send4Order.do?telephone="+telephone).then((res)=>{
        if(!response.data.flag){
            //验证码发送失败
            this.$message.error('验证码发送失败，请检查手机号输入是否正确');
        }
    });
}

用到的方法在healthmobile.js定义，页面引用即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * 手机号校验
 1--以1为开头；
 2--第二位可为3,4,5,7,8,中的任意一位；
 3--最后以0-9的9个整数结尾。
 */
function checkTelephone(telephone) {
    var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
    if (!reg.test(telephone)) {
        return false;
    } else {
        return true;
    }
}

var clock = '';//定时器对象，用于页面30秒倒计时效果
var nums = 30;
var validateCodeButton;
//基于定时器实现30秒倒计时效果
function doLoop() {
    validateCodeButton.disabled = true;//将按钮置为不可点击
    nums--;
    if (nums > 0) {
        validateCodeButton.value = nums + '秒后重新获取';
    } else {
        clearInterval(clock); //清除js定时器
        validateCodeButton.disabled = false;
        validateCodeButton.value = '重新获取验证码';
        nums = 30; //重置时间
    }
}

4.2提交预约

先进行身份证号检测，接着发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//提交预约
submitOrder(){
    //身份证验证
    if(!checkIdCard(this.orderInfo.idCard)){
        this.$message.error('身份证号码输入错误，请重新输入');
        return false;
    }
    axios.post("/order/submit.do",this.orderInfo).then((res)=>{
        if(res.data.flag){
            //预约成功，跳转到预约成功页面
            window.location.href = "orderSuccess.html?orderId="+res.data.data;
        }else {
            //预约失败，提示预约失败信息
            this.$message.error(res.data.message);
        }
    });
}

其中checkIdCard方法是在healthmobile.js文件中定义的

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 身份证号码校验
 * 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
 */
function checkIdCard(idCard){
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(reg.test(idCard)){
        return true;
    }else{
        return false;
    }
}

4.3Controller

这里我们需要确认验证码是否正确。

由于验证码具有时效性，我们可以通过redis自带的倒计时完成这个功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RequestMapping("/send4Order")
public Result send4Order(String telephone){
    //生成验证码
    Integer code = ValidateCodeUtils.generateValidateCode(4);
    //发送短信
    try {
        System.out.println("预约验证码为"+code);
        //            SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,code.toString());
    } catch (Exception e) {
        e.printStackTrace();
        return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
    }
    //将生成的验证码缓存到redis,实现后端验证和计时存储功能
    jedisPool.getResource().setex(telephone+ RedisMessageConstant.SENDTYPE_ORDER,
                                  5*60,code.toString());//存5分钟
    return new Result(true, MessageConstant.SEND_VALIDATECODE_SUCCESS);
}

当用户提交预约时，我们把redis中存的验证码提取出来和前端传过来的进行比较，如果校验成功，调用体检预约服务，完成预约的一系列判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@RequestMapping("/submit")
    public Result submit(@RequestBody Map map){
        //从reids读取验证码和前端传过来的比较
        String telephone = (String) map.get("telephone");
        String codeInRedis = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_ORDER);
        String validateCode = (String) map.get("validateCode");
        if(codeInRedis!=null && telephone!=null && codeInRedis.equals(validateCode)){
            //校验成功，调用体检预约服务
            Result result = null;
            try {
                //添加预定来源
                map.put("orderType", Order.ORDERTYPE_WEIXIN);
                result = orderService.order(map);
                if (result.isFlag()){
                    //预约成功，发送短信通知
                    System.out.println("预约成功，发送短信通知");
//                    String orderDate = (String) map.get("orderDate");
//                    try {
//                        SMSUtils.sendShortMessage(SMSUtils.ORDER_NOTICE,telephone,orderDate);
//                    } catch (ClientException e) {
//                        e.printStackTrace();
//                    }
                }
                return result;
            } catch (Exception e) {
                e.printStackTrace();
                return result;
            }
        }else {
            return new Result(false, MessageConstant.VALIDATECODE_ERROR);
        }
    }

4.4服务实现类

体检预约方法处理逻辑比较复杂，需要进行如下业务处理：

1、检查用户所选择的预约日期是否已经提前进行了预约设置，如果没有设置则无法进行预约

2、检查用户所选择的预约日期是否已经约满，如果已经约满则无法预约

3、检查用户是否重复预约（同一个用户在同一天预约了同一个套餐），如果是重复预约则无法完成再次预约

4、检查当前用户是否为会员，如果是会员则直接完成预约，如果不是会员则自动完成注册并进行预约

5、预约成功，更新当日的已预约人数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@Override
public Result order(Map map) throws Exception{
    //        1、检查用户所选择的预约日期是否已经提前进行了预约设置，如果没有设置则无法进行预约
    String orderDate = (String) map.get("orderDate");
    Date order_date = DateUtils.parseString2Date(orderDate);
    OrderSetting orderSetting = orderSettingDao.findByOrderDate(order_date);
    if (orderSetting == null) {
        return new Result(false, MessageConstant.SELECTED_DATE_CANNOT_ORDER);
    }
    //        2、检查用户所选择的预约日期是否已经约满，如果已经约满则无法预约
    int number = orderSetting.getNumber();
    int reservations = orderSetting.getReservations();
    if(reservations>=number){
        return new Result(false,MessageConstant.ORDER_FULL);
    }
    //        3、检查用户是否重复预约（同一个用户在同一天预约了同一个套餐），如果是重复预约则无法完成再次预约
    String telephone = (String) map.get("telephone");//获取用户页面输入的手机号
    Member member = memberDao.findByTelephone(telephone);
    if(member!=null){
        Integer memberId = member.getId();
        String setmealId = (String) map.get("setmealId");//套餐ID
        //根据条件进行查询
        Order order = new Order();
        order.setMemberId(memberId);
        order.setSetmealId(Integer.parseInt(setmealId));
        order.setOrderDate(order_date);
        List<Order> orderList = orderDao.findByCondition(order);
        if(orderList != null && orderList.size()>0){
            //说明用户在重复预约，无法完成再次预约
            return new Result(false,MessageConstant.HAS_ORDERED);
        }
    }else {
        //        4、检查当前用户是否为会员，如果是会员则直接完成预约，如果不是会员则自动完成注册并进行预约
        member = new Member();
        member.setName((String) map.get("name"));
        member.setPhoneNumber(telephone);
        member.setIdCard((String) map.get("idCard"));
        member.setSex((String) map.get("sex"));
        member.setRegTime(new Date());
        memberDao.add(member);//自动完成会员注册
    }
    //        5、预约成功，更新当日的已预约人数
    Order order = new Order();
    order.setMemberId(member.getId());
    order.setOrderDate(order_date);
    order.setOrderType((String) map.get("orderType"));//预约类型
    order.setOrderStatus(Order.ORDERSTATUS_NO);//到诊状态
    order.setSetmealId(Integer.parseInt((String) map.get("setmealId")));//套餐ID
    orderDao.add(order);
    //设置已预约人数+1
    orderSetting.setReservations(orderSetting.getReservations()+1);
    orderSettingDao.editReservationsByOrderDate(orderSetting);

    return new Result(true,MessageConstant.ORDER_SUCCESS,order.getId());
}

结语

我奉劝！黑马的人，取标题的时候，给我耗子尾汁。取标题，要讲标德！不要搞，被窝里斗！！

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家