美年_移动端开发旅游预约_短信验证码_预约成功页面展示

本文档介绍了移动端旅游预约系统中短信验证码的发送与验证,以及预约成功页面的展示。首先,通过阿里云购买的短信API,使用Java进行测试并封装成工具类。接着,详细讲解了旅游预约的前端和后端实现,包括手机号校验、倒计时、日历插件、提交预约请求等。最后,阐述了预约成功页面的展示逻辑,涉及会员信息、旅游套餐、日期等信息的查询和展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

短信发送【山东鼎信】【扩展】

2.8.1 阿里云,云市场,购买短信API

通过阿里云购买第三方短信发送,免费的即可(5次)

通过Java代码测试

1 SmsTest

参考:https://market.aliyun.com/products/56928004/cmapi023305.html?spm=5176.2020520132.101.3.4b697218KUgzH1#sku=yuncode1730500007 
package com.atguigu;
 
import java.util.HashMap;
import java.util.Map;
import org.apache.http.HttpResponse;
public class SmsTest {
   
   public static void main(String[] args) {
   
      String host = "http://dingxin.market.alicloudapi.com";
      String path = "/dx/sendSms";
      String method = "POST";
      String appcode = "62c2ebd07c7c4a95b270feff6c896c6c";
      Map<String, String> headers = new HashMap<String, String>();
      // 最后在header中的格式(中间是英文空格)为Authorization:APPCODE 83359fd73fe94948385f570e3c139105
      headers.put("Authorization", "APPCODE " + appcode);
      Map<String, String> querys = new HashMap<String, String>();
      querys.put("mobile", "18610025821");
      querys.put("param", "code:9966");
      querys.put("tpl_id", "TP1711063");
      Map<String, String> bodys = new HashMap<String, String>();
      try {
   
            /**
             * 重要提示如下: HttpUtils请从https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/src/main/java/com/aliyun/api/gateway/demo/util/HttpUtils.java
             * 下载依赖:  https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/pom.xml
             */
            HttpResponse response = HttpUtils.doPost(host, path, method, headers, querys, bodys);
            System.out.println(response.toString());
            // 获取response的body
            // System.out.println(EntityUtils.toString(response.getEntity()));
            //{
   "return_code":"00000","order_id":"ALY1549881237643456814"}
      } catch (Exception e) {
   
            e.printStackTrace();
      }
   }
}
将测试类,封装成工具类SMSUtils.java,放在 meinian_common中。 

2 HttpUtils.java 工具类

参考:https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/src/main/java/com/aliyun/api/gateway/demo/util/HttpUtils.java

3 common项目中配置pom.xml

参考:https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/pom.xml
在 meinian_common 中导入坐标

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.15</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.2.1</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.2.1</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-util</artifactId>
<version>9.3.7.v20160115</version>
</dependency>

2.8.2.4 封装成工具类,存放到meinian_common项目中

大致流程

在这里插入图片描述

第三章. 旅游预约

实现旅游预约
需求:

在这里插入图片描述

  1. 在套餐详情页面(setmeal_detail.html)点击立即预约,页面跳转到预约页面(orderInfo.html)
  2. 在预约页面(orderInfo.html)录入旅游人信息,包括手机号,点击发送验证码
  3. 在预约页面录入收到的手机短信验证码,点击提交预约,完成预约

【路径】

前台代码编写
在/pages/orderInfo.html

完成需求:
1.展示预约套餐信息
2.手机号校验
3.30秒倒计时效果
4.发送ajax请求,完成【发送验证码】功能
5.日期中使用日历插件
6.【提交预约】请求
后台代码编写
1.类OrderController.java
2.类OrderService.java
3.类OrderServiceImpl.java
4.类OrderDao.java
 OrderSettingDao.java
 MemberDao.java
5.配置文件OrderDao.xml
 OrderSettingDao.xml
 MemberDao.xml

完成需求:

后台代码1:短信验证码
1. 填写 手机号码, 点击发送验证码 请求服务器(携带手机号码)
2. 在后台
  - 获得手机号码
  - 生成验证码
  - 使用阿里云服务发送验证码
  - 把生成验证码存到redis里面(存5分钟)



提交预约
后台代码2
1:Controller

点击提交预约, 把用户信息 提交到服务器
在Controller里面
      - 获得用户信息
      - 校验验证码(redis里面存的和用户输入的比较)
      - 调用业务, 进行预约, 响应

2:Service
    
1. 判断当前的日期是否可以预约(根据orderDate查询t_ordersetting, 能查询出来可以预约;查询不出来,不能预约)
2. 判断当前日期是否预约已满(判断reservations(已经预约人数)是否等于number(最多预约人数))
3. 判断是否是会员(根据手机号码查询t_member)
    - 如果是会员(能够查询出来), 防止重复预约(根据member_id,orderDate,setmeal_id查询t_order)
    - 如果不是会员(不能够查询出来) ,自动注册为会员(直接向t_member插入一条记录)
4.进行预约
      - 向t_order表插入一条记录
      - t_ordersetting表里面预约的人数reservations+1

导入数据库

DROP TABLE IF EXISTS `t_member`;
CREATE TABLE `t_member` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `fileNumber` varchar(32) DEFAULT NULL,
 `name` varchar(32) DEFAULT NULL,
 `sex` varchar(8) DEFAULT NULL,
 `idCard` varchar(18) DEFAULT NULL,
 `phoneNumber` varchar(11) DEFAULT NULL,
 `regTime` date DEFAULT NULL,
 `password` varchar(32) DEFAULT NULL,
 `email` varchar(32) DEFAULT NULL,
 `birthday` date DEFAULT NULL,
 `remark` varchar(128) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=93 DEFAULT CHARSET=utf8;


-- ----------------------------
-- Records of t_member
-- ----------------------------
INSERT INTO `t_member` VALUES ('82', null, '小明', '1', '123456789000999999', '18544279942', '2020-02-08', null, null, null, null);
INSERT INTO `t_member` VALUES ('83', null, '美丽', '1', '132333333333333', '13412345678', '2020-02-11', null, null, null, null);
INSERT INTO `t_member` VALUES ('84', null, '小星星', null, null, '18343569942', '2020-02-13', null, null, null, null);
INSERT INTO `t_member` VALUES ('85', null, '小强', null, null, 18344249942, '2020-02-06', null, null, null, null);
INSERT INTO `t_member` VALUES ('86', null, '红康', null, null, 18544579942, '2020-02-04', null, null, null, null);
INSERT INTO `t_member` VALUES ('87', null, '大海', null, null, 18544274442, '2020-02-06', null, null, null, null);
INSERT INTO `t_member` VALUES ('88', null, '小婷', null, null, 18544269942, '2020-02-10', null, null, null, null);
INSERT INTO `t_member` VALUES ('89', null, '晓晓', null, null, 18544339942, '2020-02-01', null, null, null, null);
INSERT INTO `t_member` VALUES ('90', null, '纯生', null, null, 18544669942, '2020-02-02', null, null, null, null);
INSERT INTO `t_member` VALUES ('91', null, '闰土', null, null, 18544779942, '2020-02-01', null, null, null, null);
INSERT INTO `t_member` VALUES ('92', null, '波波', '2', '234234145432121345', '18019286521', '2020-02-19', null, null, null, null);


DROP TABLE IF EXISTS `t_order`;
CREATE TABLE `t_order` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `member_id` int(11) DEFAULT NULL COMMENT '员会id',
 `orderDate` date DEFAULT NULL COMMENT '约预日期',
 `orderType` varchar(8) DEFAULT NULL COMMENT '约预类型 电话预约/微信预约',
 `orderStatus` varchar(8) DEFAULT NULL COMMENT '预约状态(是否旅游)',
 `setmeal_id` int(11) DEFAULT NULL COMMENT '餐套id',
 PRIMARY KEY (`id`),
 KEY `key_member_id` (`member_id`),
 KEY `key_setmeal_id` (`setmeal_id`),
 CONSTRAINT `key_member_id` FOREIGN KEY (`member_id`) REFERENCES `t_member` (`id`),
 CONSTRAINT `key_setmeal_id` FOREIGN KEY (`setmeal_id`) REFERENCES `t_setmeal` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8;


-- ----------------------------
-- Records of t_order
-- ----------------------------
INSERT INTO `t_order` VALUES (1, 84, '2020-02-01', '微信预约', '已出游', 3);
INSERT INTO `t_order` VALUES (2, 84, '2020-02-17', '微信预约', '未出游', 3);
INSERT INTO `t_order` VALUES (3, 84, '2020-02-01', '微信预约', '未出游', 3);
INSERT INTO `t_order` VALUES (4, 84, '2020-02-17', '微信预约', '已出游', 4);
INSERT INTO `t_order` VALUES (5, 84, '2020-02-09', '微信预约', '未出游', 4);
INSERT INTO `t_order` VALUES (
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月常新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值