模块七 用户端-用户登录
《Java EE企业级应用开发项目教程（SSM）》
知识目标/Target
了解第三方短信服务的设置与使用，能够说出短信服务的设置步骤
技能目标/Target
掌握短信验证码的实现方式，能够使用短信验证码实现手机快速登录的功能
章节概述/ Summary
传智健康用户端的适用人群是体检用户，其目的是方便体检用户预约体检。体体检用户
既可以使用计算机访问用户端，也可以使用手机端访问用户端，但是无论选择哪种方式
访问，预约体检之前都需要先登录。接下来，本模块将针对用户端的用户登录进行详细
讲解。
目录/Contents
01 手机快速登录
手机快速登录7-1
任务描述
大多数系统都需要登录以后才能使用，登录方式有用户名密码登录、邮箱密码登录、手
机快速登录等。其中，手机快速登录的方式不需要用户记忆密码，只需要通过输入手机
号获取验证码就可以完成登录，与其他登录方式相比，手机快速登录可以避免账号或密
码泄露的风险。传智健康的用户端选择使用手机快速登录的方式实现用户登录。
任务描述
在用户登录页面中，在手机号
输入框中填写手机号，单击“获取验证码
”按钮后，验证码会以短信的形式发送到
对应的手机号，将收到的验证码填写到
验证码输入框中，单击“登录”按钮即可
实现用户登录。
在用户登录页面，按键盘【F12】进
入开发者工具模式，单击“，”按钮，
切换到手机浏览器模式。
任务描述
在页面中，通过“Dimensions:Responsi
ve”下拉列表框可以选择使用不同的手机
型号进行测试。
在之后的开发测试中，可以使用浏览器
模拟手机端页面。
手机快速登录可以分解为 2 个功能，分别是获取验证码、完成用户
登录。接下来对这2 个功能的实现思路进行分析。
任务分析
任务分析
为 页面的“获取验证码”按钮绑定单
击事件，在单击事件触发后提交获取验证码的
请求。
（1）提交获取验证码的请求
由控制器类 ValidateCodeController 的 send4Login
( )方法接收页面提交的请
求，在方法中调用短信服务发送短信验证码。
（2）接收和处理发送验证码请求
获取验证码
任务分析
获取验证码的实现过程
任务分析
为 页面的“登录”
绑定单击事件，并在单击事件
触发后提交用户登录请求。
（3）保存用户登录数据
在MemberServiceImpl类重写
MemberService接口的
findByTelephone()和add()方法。
（2）接收和处理用户登录请求
用户登录时，首先会查询该用户是
不是会员，如果不是，校验登录信
息后将这个用户自动新增为会员；
如果是，则校验用户登录信息。
（4）显示用户登录结果
如果登录成功，跳转到用户端首页
；如果登录失败，在
页面中提示登录失败信息。
（1）提交用户登录的请求
任务分析
完成用户登录的实现过程
知识进阶
短信服务是为用户提供的一种通信服务，支持快速发送短信验证码、短信通知等。 目前，市面上有很
多第三方提供的短信服务，需要注意的是这些短信服务都是收费的服务。
阿里云的云通信和云市场中都提供了短信服务，其中，云通信在配置短信签名时需要提供企业资质或
有效域名，并不适合个人开发测试使用；云市场中的其他第三方平台提供的短信服务不需要提供企业
资质或有效域名，部分第三方平台还提供免费试用的短信服务，可以允许个人使用。为了便于读者进
行测试，本书选择阿里云云市场中其他第三方平台提供的短信服务实现发送短信服务。
短信服务接口
知识进阶
（1）注册阿里云账号
知识进阶
（1）注册阿里云账号
知识进阶
使用注册账号登录，登录成功后，
单击阿里云首页菜单栏中的“云市场
”，进入阿里云的云市场页面。
（2）购买短信服务
知识进阶
在阿里云的云市场页面的搜索栏中
输入短信验证码，单击“搜索云市场
”按钮，搜索短训验证码服务。
（2）购买短信服务
知识进阶
以列表第 1 个为例讲解短信服务的
使用，单击列表第 1 个短信服务的
超链接进入短信接口购买页面。
短信接口提供了可以免费试用的套
餐。
（2）购买短信服务
知识进阶
（2）购买短信服务
知识进阶
发送短信时需要进行身份认证，只
有认证通过才能发送短信。在短信
服务接口页面中滑动页面到最上端，
选择“买家中心”→“进入管理控制台”
查看已购买的短信服务的 AppCode。
（3）获取AppCode
知识进阶
对短信接口的测试用例进行改造，封装成工具类SMSUtils，用于发送短信。在
health_common子模块下的包下创建SMSUtils类，在类中定义sendShortMessage
()方法，用于执行短信发送。
用于发送短信验证码的工具类SMSUtils，不
能直接调用，读者需要按照自己购买短信包
的使用文档进行修改，需要修改的部分包含
host、appCode、sign和skin。
（4）封装工具类SMSUtils
知识进阶
发送短信的工具类封装完成后，进行发送短信验证码的测试。在SMSUtils 类中定义 main
( )方法，在该方法中调用 sendShortMessage( )方法。
public static void main(String[] args) {
sendShortMessage("151****1927","123456");
} 验证码手机号
（5）测试发送短信
知识进阶
（5）测试发送短信
知识进阶
在实际项目开发中验证码不会是固定的，一般会通过 Random( )方法随机生成 4 位或者 6 位数字作为验
证码发送给用户。将生成随机数的执行过程封装成工具类ValidateCodeUtils，用于生成随机数验证码。
public class ValidateCodeUtils {
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;
}
}
（5）测试发送短信
任务实现
在
页面中定义 sendValidateCode
(
)方法，用于发送短
信验证码。
<script src="../plugins/vue/"></script>
<script src="../plugins/"></script>
......
sendValidateCode() {
var telephone = ;//获取用户输入的手机号
if (!checkTelephone(telephone)) {
this.$("手机号输入错误，请检查后重新输入！");//输入不正确，弹出提示
return false;
}
validateCodeButton = $("#validateCodeButton")[0];//锁定按钮
clock = (doLoop, 1000);//60S倒计时效果
("/validatecode/ + telephone).then((res) => {
if (!) {
this.$();//发送失败，弹出提示
}
});
}
定义手机号校验方法，导入
js文件即可调用其中的方法。
1.获取验证码 （1）提交获取验证码的请求
任务实现
为“获取验证码”绑定单击事件，并设置在触发单击事件时调用 sendValidateCode( )方法。
<input id="validateCodeButton" type="button" style="font-size:12px"
@click="sendValidateCode()" value="获取验证码">
1.获取验证码 （1）提交获取验证码的请求
任务实现
在进行获取验证码的后端代码开发之前，将开发过程中会使用的公共资源导入到health_common
子模块。
• RedisMessageConstant类：将验证码保存在 Redis 中，用于在页面中输入验证码时进行比对，
即输入的验证码与发送到手机上的验证码是否一致。
• MD5Utils类，用于进行密码加密。
在health_mobile子模块的src/main/resources目录下导入配置文件，具体如下。
• ：配置Redis与Jedis连接池。
• ：配置Fastjson转换器、Dubbo、包扫描、文件的引用等。
1.获取验证码 （2）导入公共资源
任务实现
在 health_mobile 模块的 包下创建控制器类 ValidateCodeController，在类
中定义send4Login( )方法，用于接收和处理发送短信验证码的请求。
@RestController @RequestMapping("/validatecode")
public class ValidateCodeController {
@Autowired private JedisPool jedisPool;
@RequestMapping("/send4Login")
public Result send4Login(String telephone){
String code = (6).toString();//获取6位数验证码
try{
(telephone,code);//发送短信
().setex(telephone +
_LOGIN,300,code);//验证码保存到redis
return new Result(true, _VALIDATECODE_SUCCESS);//成功
}catch (Exception e){
......省略 失败的返回信息
}}}
1.获取验证码 （3）实现发送验证码控制器
任务实现
依次启动 ZooKeeper
服务、Redis
服务、health_service_provider
和 health_mobile。
访问用户登录页面，输入手机号，
单击“获取验证码”按钮。
1.获取验证码 （4）测试获取验证码
倒计时内按钮失效
任务实现
1.获取验证码 （4）测试获取验证码
任务实现
在 页面中定义 login( )方法，
用于用户登录。
......
login() {
var telephone = ;//获取用户输入的手机号
if (!checkTelephone(telephone)) {
this.$("手机号输入错误，请检查后重新输入！");//输入不正确，弹出提示
return false;
}
("/member/", ).then((res)=>{
if () {
= "";//登录成功，跳转到用户端首页
} else {
this.$();//登录失败，弹出提示
}
});
}
2.完成用户登录 （1）提交用户登录的请求
任务实现
为“登录”绑定单击事件，并设置在触发单击事件时调用 login( )方法。
<div class="btn yes-btn"><a @click="login()" href="#">登录</a></div>
2.完成用户登录 （1）提交用户登录的请求
任务实现
在health_common子模块的包下创建Member类，
在类中声明会员的属性，定义各个属性的getter/setter方法。
2.完成用户登录 （2）创建会员类
任务实现
在 health_mobile 模块的 包下创建控制器类 MemberController，在
类中定义 login( )方法，用于接收和处理用户登录的请求。
（1）校验用户输入的短信验证码是否正确，如果验证码错误则登录失败；
（2）如果验证码正确，判断当前用户是否为会员，如果不是会员则自动完成新增会员；
（3）向客户端写入Cookie，内容为用户手机号；
（4）将会员信息保存到Redis，使用手机号作为key。
2.完成用户登录 （3）实现会员登录控制器
任务实现
在health_interface子模块的包下创建接口MemberService，在接口中定义findByTelephone
( )方法，用于根据手机号查找会员；定义 add( )方法，用于新增会员。
public interface MemberService {
public Member findByTelephone(String telephone);//根据手机号查询会员
public void add(Member member);//新增会员
}
2.完成用户登录 （4）创建会员登录服务
任务实现
在 health_service_provider 子模块的 包下创建 MemberService 接口的实现类
MemberServiceImpl，重写 MemberService 接口的 findByTelephone( )方法，用于根据手机号查找会员。
@Service(interfaceClass = )
@Transactional
public class MemberServiceImpl implements MemberService {
@Autowired
private MemberDao memberDao;
//根据手机号查询会员信息
public Member findByTelephone(String telephone) {
return (telephone);
}
}
2.完成用户登录 （5）实现会员登录服务
任务实现
在health_service_provider子模块的MemberServiceImpl类中，重写MemberService接口的add()方法，用于
新增会员。
//新增会员
public void add(Member member) {
//如果用户设置了密码，需要对密码进行md5加密
String password = ();
if(password != null){
password = (password);
(password);
}
(member);
}
2.完成用户登录 （5）实现会员登录服务
任务实现
在health_service_provider子模块的包下创建持久层接口MemberDao，用于处理与会员相
关的数据库操作。
public interface MemberDao {
public Member findByTelephone(String telephone);//根据手机号查询会员信息
public void add(Member member);//新增会员
}
2.完成用户登录 （6）实现持久层会员登录
任务实现
创建映射文件，在文件中使用
<insert>元素映射新增语句新增会员；使用<select>元
素映射查询语句，根据手机号查询会员信息。
......
<mapper namespace="">
<insert id="add" parameterType="">
<selectKey resultType="" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID()
</selectKey>
INSERT INTO t_member(fileNumber,name,sex,idCard,phoneNumber,
regTime,password,email,birthday,remark)
VALUES (#{fileNumber},#{name},#{sex},#{idCard},#{phoneNumber},
#{regTime},#{password},#{email},#{birthday},#{remark})
</insert>
<select id="findByTelephone" parameterType="string" resultType="">
SELECT * FROM t_member WHERE phoneNumber = #{phoneNumber}
</select>
</mapper>
执行会员新增操作
执行根据手机号
查找会员信息
2.完成用户登录 （6）实现持久层会员登录
任务实现
启动Zookeeper、
health_service_provider和
health_mobile，访问页面，
将手机收到的验证码填写到验证码
输入框中。
2.完成用户登录 （7）测试手机快速登录
任务实现
登录成功后，跳转到传智健
康用户端首页。
2.完成用户登录 （7）测试手机快速登录
模块小结
本模块主要针对用户端的用户登录进行讲解。首先讲解了短信服务接口的设置与使用；然
后讲解了手机快速登录功能。希望通过本模块的学习，可以了解短信服务接口的设置与使
用，并能掌握用户手机快速登录的操作。
模 块 小 结
