第8章 移动端开发-体检预约1. 体检预约流程用户可以通过如下操作流程进行体检预约在移动端首页点击体检预约页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐页面跳转到套餐详情页面在套餐详情页面点击立即预约页面跳转到预约页面在预约页面录入体检人信息包括手机号点击发送验证码在预约页面录入收到的手机短信验证码点击提交预约完成体检预约2. 体检预约2.1 页面调整在预约页面/pages/orderInfo.html进行调整2.1.1 展示预约的套餐信息第一步从请求路径中获取当前套餐的idscript var id getUrlParam(id);//套餐id /script2.1.2 手机号校验第一步在页面导入的healthmobile.js文件中已经定义了校验手机号的方法/** * 手机号校验 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; } }2.1.3 30秒倒计时效果前面在sendValidateCode方法中进行了手机号校验如果校验通过需要显示30秒倒计时效果//发送验证码 sendValidateCode(){ //获取用户输入的手机号 var telephone this.orderInfo.telephone; //校验手机号输入是否正确 if (!checkTelephone(telephone)) { this.$message.error(请输入正确的手机号); return false; } validateCodeButton $(#validateCodeButton)[0]; clock window.setInterval(doLoop, 1000); //一秒执行一次 }2.1.4 发送ajax请求在按钮上显示30秒倒计时效果的同时需要发送ajax请求在后台给用户发送手机验证码//发送验证码 sendValidateCode(){ //获取用户输入的手机号 var telephone this.orderInfo.telephone; //校验手机号输入是否正确 if (!checkTelephone(telephone)) { this.$message.error(请输入正确的手机号); return false; } validateCodeButton $(#validateCodeButton)[0]; clock window.setInterval(doLoop, 1000); //一秒执行一次 axios.post(/validateCode/send4Order.do?telephone telephone).then((response) { if(!response.data.flag){ //验证码发送失败 this.$message.error(验证码发送失败请检查手机号输入是否正确); } }); }2.1.5 日历展示页面中使用DatePicker控件来展示日历。根据需求最多可以提前一个月进行体检预约所以日历控件只展示未来一个月的日期div classdate label体检日期/label i classicon-date classpicktime/i input v-modelorderInfo.orderDate typetext classpicktime readonly /div2.1.6 提交预约请求为提交预约按钮绑定事件div classbox-button button clicksubmitOrder() typebutton classbtn order-btn提交预约/button /div2.2 后台代码2.2.1 Controller在health_mobile工程中创建OrderController并提供submitOrder方法package com.liusp.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.aliyuncs.exceptions.ClientException; import com.liusp.constant.MessageConstant; import com.liusp.constant.RedisMessageConstant; import com.liusp.entity.Result; import com.liusp.pojo.Order; import com.liusp.service.OrderService; import com.liusp.utils.SMSUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.StringRedisTemplate; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Map; /** * 体检预约 */ RestController RequestMapping(/order) public class OrderController { Reference private OrderService orderService; Autowired StringRedisTemplate redisTemplate; //操作k-v都是字符串的 /** * 体检预约 * param map * return */ RequestMapping(/submit.do) public Result submitOrder(RequestBody Map map){ String telephone (String) map.get(telephone); //从Redis中获取缓存的验证码key为手机号RedisConstant.SENDTYPE_ORDER String codeInRedis redisTemplate.opsForValue().get( telephone RedisMessageConstant.SENDTYPE_ORDER); String validateCode (String) map.get(validateCode); //校验手机验证码 if(codeInRedis null || !codeInRedis.equals(validateCode)){ return new Result(false, MessageConstant.VALIDATECODE_ERROR); } Result result null; //调用体检预约服务 try{ map.put(orderType, Order.ORDERTYPE_WEIXIN); result orderService.order(map); }catch (Exception e){ e.printStackTrace(); //预约失败 return result; } if(result.isFlag()){ //预约成功发送短信通知 String orderDate (String) map.get(orderDate); try { SMSUtils.sendShortMessage(SMSUtils.ORDER_NOTICE,telephone,orderDate); } catch (ClientException e) { e.printStackTrace(); } } return result; } }2.2.2 服务接口在health_interface工程中创建体检预约服务接口OrderService并提供预约方法package com.liusp.service; import com.liusp.entity.Result; import java.util.Map; /** * 体检预约服务接口 */ public interface OrderService { //体检预约 public Result order(Map map) throws Exception; }2.2.3 服务实现类在health_service_provider工程中创建体检预约服务实现类OrderServiceImpl并实现体检预约方法。体检预约方法处理逻辑比较复杂需要进行如下业务处理1、检查用户所选择的预约日期是否已经提前进行了预约设置如果没有设置则无法进行预约2、检查用户所选择的预约日期是否已经约满如果已经约满则无法预约3、检查用户是否重复预约同一个用户在同一天预约了同一个套餐如果是重复预约则无法完成再次预约4、检查当前用户是否为会员如果是会员则直接完成预约如果不是会员则自动完成注册并进行预约5、预约成功更新当日的已预约人数实现代码如下导入工具类DateUtils和MD5Utils工具类导入到health_common项目中package com.liusp.service.impl; import com.alibaba.dubbo.config.annotation.Service; import com.liusp.constant.MessageConstant; import com.liusp.dao.MemberDao; import com.liusp.dao.OrderDao; import com.liusp.dao.OrderSettingDao; import com.liusp.entity.Result; import com.liusp.pojo.Member; import com.liusp.pojo.Order; import com.liusp.pojo.OrderSetting; import com.liusp.service.OrderService; import com.liusp.utils.DateUtils; import org.apache.poi.ss.usermodel.DateUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; /** * 体检预约服务 */ Service(interfaceClass OrderService.class) Transactional public class OrderServiceImpl implements OrderService{ Autowired private OrderSettingDao orderSettingDao; Autowired private MemberDao memberDao; Autowired private OrderDao orderDao; //体检预约 public Result order(Map map) throws Exception { //检查当前日期是否进行了预约设置 String orderDate (String) map.get(orderDate); Date date DateUtils.parseString2Date(orderDate); OrderSetting orderSetting orderSettingDao.findByOrderDate(date); if(orderSetting null){ return new Result(false, MessageConstant.SELECTED_DATE_CANNOT_ORDER); } //检查预约日期是否预约已满 int number orderSetting.getNumber();//可预约人数 int reservations orderSetting.getReservations();//已预约人数 if(reservations number){ //预约已满不能预约 return new Result(false,MessageConstant.ORDER_FULL); } //检查当前用户是否为会员根据手机号判断 String telephone (String) map.get(telephone); Member member memberDao.findByTelephone(telephone); //防止重复预约 if(member ! null){ Integer memberId member.getId(); int setmealId Integer.parseInt((String) map.get(setmealId)); Order order new Order(memberId,date,null,null,setmealId); ListOrder list orderDao.findByCondition(order); if(list ! null list.size() 0){ //已经完成了预约不能重复预约 return new Result(false,MessageConstant.HAS_ORDERED); } } //可以预约设置预约人数加一 orderSetting.setReservations(orderSetting.getReservations()1); orderSettingDao.editReservationsByOrderDate(orderSetting); if(member null){ //当前用户不是会员需要添加到会员表 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); } //保存预约信息到预约表 Order order new Order(member.getId(), date, (String)map.get(orderType), Order.ORDERSTATUS_NO, Integer.parseInt((String) map.get(setmealId))); orderDao.add(order); return new Result(true,MessageConstant.ORDER_SUCCESS,order.getId()); } }2.2.4 Dao接口package com.liusp.dao; import com.liusp.pojo.OrderSetting; import java.util.Date; import java.util.List; import java.util.Map; public interface OrderSettingDao { public void add(OrderSetting orderSetting); //更新可预约人数 public void editNumberByOrderDate(OrderSetting orderSetting); public long findCountByOrderDate(Date orderDate); //根据日期范围查询预约设置信息 public ListOrderSetting getOrderSettingByMonth(Map date); //更新已预约人数 public void editReservationsByOrderDate(OrderSetting orderSetting); //根据预约日期查询预约设置信息 public OrderSetting findByOrderDate(Date orderDate); }2.2.5 Mapper映射文件OrderSettingDao.xml!--根据日期查询预约设置信息-- select idfindByOrderDate parameterTypedate resultTypecom.liusp.pojo.OrderSetting select * from t_ordersetting where orderDate #{orderDate} /select !--更新已预约人数-- update ideditReservationsByOrderDate parameterTypecom.liusp.pojo.OrderSetting update t_ordersetting set reservations #{reservations} where orderDate #{orderDate} /update3. 预约成功页面展示前面已经完成了体检预约预约成功后页面会跳转到成功提示页面orderSuccess.html并展示预约的相关信息体检人、体检套餐、体检时间等。3.1 页面调整提供orderSuccess.html页面展示预约成功后相关信息div classinfo-title span classname体检预约成功/span /div div classnotice-item div classitem-title预约信息/div div classitem-content p体检人{{orderInfo.member}}/p p体检套餐{{orderInfo.setmeal}}/p p体检日期{{orderInfo.orderDate}}/p p预约类型{{orderInfo.orderType}}/p /div /div3.2 后台代码3.2.1 Controller在OrderController中提供findById方法根据预约id查询预约相关信息/** * 根据id查询预约信息包括套餐信息和会员信息 * param id * return */ RequestMapping(/findById.do) public Result findById(Integer id){ try{ Map map orderService.findById(id); //查询预约信息成功 return new Result(true,MessageConstant.QUERY_ORDER_SUCCESS,map); }catch (Exception e){ e.printStackTrace(); //查询预约信息失败 return new Result(false,MessageConstant.QUERY_ORDER_FAIL); } }3.2.2 服务接口在OrderService服务接口中扩展findById方法//根据id查询预约信息包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception;3.2.3 服务实现类在OrderServiceImpl服务实现类中实现findById方法//根据id查询预约信息包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception { Map map orderDao.findById4Detail(id); if(map ! null){ //处理日期格式 Date orderDate (Date) map.get(orderDate); map.put(orderDate,DateUtils.parseDate2String(orderDate)); } return map; }3.2.4 Dao接口在OrderDao接口中扩展findById4Detail方法public Map findById4Detail(Integer id);3.2.5 Mapper映射文件在OrderDao.xml映射文件中提供SQL语句!--根据预约id查询预约信息包括体检人信息、套餐信息-- select idfindById4Detail parameterTypeint resultTypemap select m.name member ,s.name setmeal,o.orderDate orderDate,o.orderType orderType from t_order o, t_member m, t_setmeal s where o.member_idm.id and o.setmeal_ids.id and o.id#{id} /select mySQL 8.0以后的版本需要修改sql语句 !--根据预约id查询预约信息包括体检人信息、套餐信息-- select idfindById4Detail parameterTypeint resultTypemap SELECT m.name AS member ,s.name AS setmeal ,o.orderDate AS orderDate,o.orderType AS orderType FROM t_order o, t_member m, t_setmeal s WHERE o.member_idm.id AND o.setmeal_ids.id AND o.id#{id} /select 第8章：移动端开发-体检预约
第8章 移动端开发-体检预约1. 体检预约流程用户可以通过如下操作流程进行体检预约在移动端首页点击体检预约页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐页面跳转到套餐详情页面在套餐详情页面点击立即预约页面跳转到预约页面在预约页面录入体检人信息包括手机号点击发送验证码在预约页面录入收到的手机短信验证码点击提交预约完成体检预约2. 体检预约2.1 页面调整在预约页面/pages/orderInfo.html进行调整2.1.1 展示预约的套餐信息第一步从请求路径中获取当前套餐的idscript var id getUrlParam(id);//套餐id /script2.1.2 手机号校验第一步在页面导入的healthmobile.js文件中已经定义了校验手机号的方法/** * 手机号校验 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; } }2.1.3 30秒倒计时效果前面在sendValidateCode方法中进行了手机号校验如果校验通过需要显示30秒倒计时效果//发送验证码 sendValidateCode(){ //获取用户输入的手机号 var telephone this.orderInfo.telephone; //校验手机号输入是否正确 if (!checkTelephone(telephone)) { this.$message.error(请输入正确的手机号); return false; } validateCodeButton $(#validateCodeButton)[0]; clock window.setInterval(doLoop, 1000); //一秒执行一次 }2.1.4 发送ajax请求在按钮上显示30秒倒计时效果的同时需要发送ajax请求在后台给用户发送手机验证码//发送验证码 sendValidateCode(){ //获取用户输入的手机号 var telephone this.orderInfo.telephone; //校验手机号输入是否正确 if (!checkTelephone(telephone)) { this.$message.error(请输入正确的手机号); return false; } validateCodeButton $(#validateCodeButton)[0]; clock window.setInterval(doLoop, 1000); //一秒执行一次 axios.post(/validateCode/send4Order.do?telephone telephone).then((response) { if(!response.data.flag){ //验证码发送失败 this.$message.error(验证码发送失败请检查手机号输入是否正确); } }); }2.1.5 日历展示页面中使用DatePicker控件来展示日历。根据需求最多可以提前一个月进行体检预约所以日历控件只展示未来一个月的日期div classdate label体检日期/label i classicon-date classpicktime/i input v-modelorderInfo.orderDate typetext classpicktime readonly /div2.1.6 提交预约请求为提交预约按钮绑定事件div classbox-button button clicksubmitOrder() typebutton classbtn order-btn提交预约/button /div2.2 后台代码2.2.1 Controller在health_mobile工程中创建OrderController并提供submitOrder方法package com.liusp.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.aliyuncs.exceptions.ClientException; import com.liusp.constant.MessageConstant; import com.liusp.constant.RedisMessageConstant; import com.liusp.entity.Result; import com.liusp.pojo.Order; import com.liusp.service.OrderService; import com.liusp.utils.SMSUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.StringRedisTemplate; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Map; /** * 体检预约 */ RestController RequestMapping(/order) public class OrderController { Reference private OrderService orderService; Autowired StringRedisTemplate redisTemplate; //操作k-v都是字符串的 /** * 体检预约 * param map * return */ RequestMapping(/submit.do) public Result submitOrder(RequestBody Map map){ String telephone (String) map.get(telephone); //从Redis中获取缓存的验证码key为手机号RedisConstant.SENDTYPE_ORDER String codeInRedis redisTemplate.opsForValue().get( telephone RedisMessageConstant.SENDTYPE_ORDER); String validateCode (String) map.get(validateCode); //校验手机验证码 if(codeInRedis null || !codeInRedis.equals(validateCode)){ return new Result(false, MessageConstant.VALIDATECODE_ERROR); } Result result null; //调用体检预约服务 try{ map.put(orderType, Order.ORDERTYPE_WEIXIN); result orderService.order(map); }catch (Exception e){ e.printStackTrace(); //预约失败 return result; } if(result.isFlag()){ //预约成功发送短信通知 String orderDate (String) map.get(orderDate); try { SMSUtils.sendShortMessage(SMSUtils.ORDER_NOTICE,telephone,orderDate); } catch (ClientException e) { e.printStackTrace(); } } return result; } }2.2.2 服务接口在health_interface工程中创建体检预约服务接口OrderService并提供预约方法package com.liusp.service; import com.liusp.entity.Result; import java.util.Map; /** * 体检预约服务接口 */ public interface OrderService { //体检预约 public Result order(Map map) throws Exception; }2.2.3 服务实现类在health_service_provider工程中创建体检预约服务实现类OrderServiceImpl并实现体检预约方法。体检预约方法处理逻辑比较复杂需要进行如下业务处理1、检查用户所选择的预约日期是否已经提前进行了预约设置如果没有设置则无法进行预约2、检查用户所选择的预约日期是否已经约满如果已经约满则无法预约3、检查用户是否重复预约同一个用户在同一天预约了同一个套餐如果是重复预约则无法完成再次预约4、检查当前用户是否为会员如果是会员则直接完成预约如果不是会员则自动完成注册并进行预约5、预约成功更新当日的已预约人数实现代码如下导入工具类DateUtils和MD5Utils工具类导入到health_common项目中package com.liusp.service.impl; import com.alibaba.dubbo.config.annotation.Service; import com.liusp.constant.MessageConstant; import com.liusp.dao.MemberDao; import com.liusp.dao.OrderDao; import com.liusp.dao.OrderSettingDao; import com.liusp.entity.Result; import com.liusp.pojo.Member; import com.liusp.pojo.Order; import com.liusp.pojo.OrderSetting; import com.liusp.service.OrderService; import com.liusp.utils.DateUtils; import org.apache.poi.ss.usermodel.DateUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; /** * 体检预约服务 */ Service(interfaceClass OrderService.class) Transactional public class OrderServiceImpl implements OrderService{ Autowired private OrderSettingDao orderSettingDao; Autowired private MemberDao memberDao; Autowired private OrderDao orderDao; //体检预约 public Result order(Map map) throws Exception { //检查当前日期是否进行了预约设置 String orderDate (String) map.get(orderDate); Date date DateUtils.parseString2Date(orderDate); OrderSetting orderSetting orderSettingDao.findByOrderDate(date); if(orderSetting null){ return new Result(false, MessageConstant.SELECTED_DATE_CANNOT_ORDER); } //检查预约日期是否预约已满 int number orderSetting.getNumber();//可预约人数 int reservations orderSetting.getReservations();//已预约人数 if(reservations number){ //预约已满不能预约 return new Result(false,MessageConstant.ORDER_FULL); } //检查当前用户是否为会员根据手机号判断 String telephone (String) map.get(telephone); Member member memberDao.findByTelephone(telephone); //防止重复预约 if(member ! null){ Integer memberId member.getId(); int setmealId Integer.parseInt((String) map.get(setmealId)); Order order new Order(memberId,date,null,null,setmealId); ListOrder list orderDao.findByCondition(order); if(list ! null list.size() 0){ //已经完成了预约不能重复预约 return new Result(false,MessageConstant.HAS_ORDERED); } } //可以预约设置预约人数加一 orderSetting.setReservations(orderSetting.getReservations()1); orderSettingDao.editReservationsByOrderDate(orderSetting); if(member null){ //当前用户不是会员需要添加到会员表 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); } //保存预约信息到预约表 Order order new Order(member.getId(), date, (String)map.get(orderType), Order.ORDERSTATUS_NO, Integer.parseInt((String) map.get(setmealId))); orderDao.add(order); return new Result(true,MessageConstant.ORDER_SUCCESS,order.getId()); } }2.2.4 Dao接口package com.liusp.dao; import com.liusp.pojo.OrderSetting; import java.util.Date; import java.util.List; import java.util.Map; public interface OrderSettingDao { public void add(OrderSetting orderSetting); //更新可预约人数 public void editNumberByOrderDate(OrderSetting orderSetting); public long findCountByOrderDate(Date orderDate); //根据日期范围查询预约设置信息 public ListOrderSetting getOrderSettingByMonth(Map date); //更新已预约人数 public void editReservationsByOrderDate(OrderSetting orderSetting); //根据预约日期查询预约设置信息 public OrderSetting findByOrderDate(Date orderDate); }2.2.5 Mapper映射文件OrderSettingDao.xml!--根据日期查询预约设置信息-- select idfindByOrderDate parameterTypedate resultTypecom.liusp.pojo.OrderSetting select * from t_ordersetting where orderDate #{orderDate} /select !--更新已预约人数-- update ideditReservationsByOrderDate parameterTypecom.liusp.pojo.OrderSetting update t_ordersetting set reservations #{reservations} where orderDate #{orderDate} /update3. 预约成功页面展示前面已经完成了体检预约预约成功后页面会跳转到成功提示页面orderSuccess.html并展示预约的相关信息体检人、体检套餐、体检时间等。3.1 页面调整提供orderSuccess.html页面展示预约成功后相关信息div classinfo-title span classname体检预约成功/span /div div classnotice-item div classitem-title预约信息/div div classitem-content p体检人{{orderInfo.member}}/p p体检套餐{{orderInfo.setmeal}}/p p体检日期{{orderInfo.orderDate}}/p p预约类型{{orderInfo.orderType}}/p /div /div3.2 后台代码3.2.1 Controller在OrderController中提供findById方法根据预约id查询预约相关信息/** * 根据id查询预约信息包括套餐信息和会员信息 * param id * return */ RequestMapping(/findById.do) public Result findById(Integer id){ try{ Map map orderService.findById(id); //查询预约信息成功 return new Result(true,MessageConstant.QUERY_ORDER_SUCCESS,map); }catch (Exception e){ e.printStackTrace(); //查询预约信息失败 return new Result(false,MessageConstant.QUERY_ORDER_FAIL); } }3.2.2 服务接口在OrderService服务接口中扩展findById方法//根据id查询预约信息包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception;3.2.3 服务实现类在OrderServiceImpl服务实现类中实现findById方法//根据id查询预约信息包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception { Map map orderDao.findById4Detail(id); if(map ! null){ //处理日期格式 Date orderDate (Date) map.get(orderDate); map.put(orderDate,DateUtils.parseDate2String(orderDate)); } return map; }3.2.4 Dao接口在OrderDao接口中扩展findById4Detail方法public Map findById4Detail(Integer id);3.2.5 Mapper映射文件在OrderDao.xml映射文件中提供SQL语句!--根据预约id查询预约信息包括体检人信息、套餐信息-- select idfindById4Detail parameterTypeint resultTypemap select m.name member ,s.name setmeal,o.orderDate orderDate,o.orderType orderType from t_order o, t_member m, t_setmeal s where o.member_idm.id and o.setmeal_ids.id and o.id#{id} /select mySQL 8.0以后的版本需要修改sql语句 !--根据预约id查询预约信息包括体检人信息、套餐信息-- select idfindById4Detail parameterTypeint resultTypemap SELECT m.name AS member ,s.name AS setmeal ,o.orderDate AS orderDate,o.orderType AS orderType FROM t_order o, t_member m, t_setmeal s WHERE o.member_idm.id AND o.setmeal_ids.id AND o.id#{id} /select