本文将讲解用户注册功能
工程搭建
用户服务接口层
(1)创建 pinyougou-user-interface(jar)
(2)引入 pojo 依赖
用户服务实现层
(1)创建 pinyougou-user-service(war)
(2)引入 spring dubbox activeMQ 相关依赖,引入依赖( pinyougou-user-interface pinyougou-dao pinyougou-common),运行端口为 9006
(3)添加 web.xml
(4)创建 Spring 配置文件 applicationContext-service.xml 和 applicationContent-tx.xml
<dubbo:protocol name="dubbo" port="20886" />
<dubbo:annotation package="com.pinyougou.user.service.impl" />
<dubbo:application name="pinyougou-user-service"/>
<dubbo:registry address="zookeeper://192.168.25.135:2181"/>
用户中心WEB层
创建 war 工程 pinyougou-user-web 我们将注册功能放入此工程
(1)添加 web.xml
(2)引入依赖 pinyougou-user-interface 、spring 相关依赖(参照其它 web 工程),tomcat 运行端口 9106
(3)添加 spring 配置文件
(4)拷贝静态原型页面 register.html 及相关资源
基本注册功能实现
生成和拷贝代码
后端服务实现层
修改 pinyougou-user-service 的 UserServiceImpl.java
/**
* 增加
*/
@Override
public void add(TbUser user) {
user.setCreated(new Date());//创建日期
user.setUpdated(new Date());//修改日期
String password = DigestUtils.md5Hex(user.getPassword());//对密码加密
user.setPassword(password);
userMapper.insert(user);
}
前端控制层
修改 userController.js
//控制层
app.controller('userController' ,function($scope,$controller ,userService){
//注册
$scope.reg=function(){
if($scope.entity.password!=$scope.password) {
alert("两次输入的密码不一致,请重新输入");
return ;
}
userService.add( $scope.entity ).success(
function(response){
alert(response.message);
}
);
}
});
修改页面
修改页面 register.html ,引入 js
<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/service/userService.js"></script>
<script type="text/javascript" src="js/controller/userController.js"></script>
指令
<body ng-app="pinyougou" ng-controller="userController" >
绑定表单
<form class="sui-form form-horizontal">
<div class="control-group">
<label class="control-label">用户名:</label>
<div class="controls">
<input type="text" placeholder="请输入你的用户名" ng-model="entity.username" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">登录密码:</label>
<div class="controls">
<input type="password" placeholder="设置登录密码" ng-model="entity.password" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">确认密码:</label>
<div class="controls">
<input type="password" placeholder="再次确认密码" ng-model="password" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group"><label class="control-label">手机号:</label>
<div class="controls"><input type="text" placeholder="请输入你的手机号" ng-model="entity.phone" class="input-xfat input-xlarge"></div>
</div>
<div class="control-group"><label for="inputPassword" class="control-label">短信验证码:</label<div class="controls"><input type="text" placeholder="短信验证码" class="input-xfat
input-xlarge"> <a href="#">获取短信验证码</a></div></div><div class="control-group"><label for="inputPassword"class="control-label"> </label>
<div class="controls"><input name="m1" type="checkbox" value="2" checked=""><span>同意协并注册《品优购用户协议》</span></div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls btn-reg">
<a class="sui-btn btn-block btn-xlarge btn-danger" ng-click="reg()target=" _blank ">完成注册</a>
</div>
</div>
</form>
注册判断短信验证码
实现思路
点击页面上的”获取短信验证码”连接,向后端传递手机号。后端随机生成 6 位数字作为短信验证码,将其保存在 redis 中(手机号作为 KEY),并发送到短信网关。
用户注册时,后端根据手机号查询 redis 中的验证码与用户填写的验证码是否相同,如果不同则提示用户不能注册。
生成验证码
(1)修改 pinyougou-user-interface 工程 UserService.java ,增加方法
/**
* 生成短信验证码
* @return
*/
public void createSmsCode(String phone);
(2)修改 pinyougou-user-service 工程的 UserServiceImpl.java
@Autowiredprivate RedisTemplate<String , Object> redisTemplate;
/*** 生成短信验证码*/
public void createSmsCode(String phone){
//生成 6 位随机数String code = (long) (Math.random()*1000000)+"";System.out.println("验证码:"+code);
//存入缓存
redisTemplate.boundHashOps("smscode").put(phone, code);
//发送到 activeMQ ....
}
(3)在 pinyougou-common 添加工具类 PhoneFormatCheckUtils.java,用于验证手机号
(4)修改 pinyougou-user-web 的 UserController.java
/*
** 发送短信验证码
* @param phone
* @return
* */
@RequestMapping("/sendCode")
public Result sendCode(String phone){
//判断手机号格式
if(!PhoneFormatCheckUtils.isPhoneLegal(phone)){
return new Result(false, "手机号格式不正确");
}
try {
userService.createSmsCode(phone);//生成验证码
return new Result(true, "验证码发送成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(true, "验证码发送失败");
}
}
(5)pinyougou-user-web 的 userService.js
//发送验证码
this.sendCode=function(phone){
return $http.get("../user/sendCode.do?phone="+phone);
}
(6)pinyougou-user-web 的 userController.js
//发送验证码
$scope.sendCode=function(){
if($scope.entity.phone==null){
alert("请输入手机号!");return ;
}
userService.sendCode($scope.entity.phone).success(
function(response){
alert(response.message);
}
);
}
(7)修改页面 register.html
<a ng-click="sendCode()" >获取短信验证码</a>
用户注册判断验证码
(1)修改 pinyougou-user-interface 的UserService.java
/**
* 判断短信验证码是否存在
* @param phone
* @return
* */
public boolean checkSmsCode(String phone,String code);
(2)修改 pinyougou-user-service 的UserServiceImpl.java
/**
* 判断验证码是否正确
*/
public boolean checkSmsCode(String phone,String code){
//得到缓存中存储的验证码
String sysCode = (String) redisTemplate.boundHashOps("smscode").get(phone);
if(sysCode==null){
return false;
}
if(!sysCode.equals(code)){
return false;
}
return true;
}
(3)修改 pinyougou-user-web 的UserController.java
/**
* 增加
*
* @param user
* @return
*/
@RequestMapping("/add")
public Result add(@RequestBody TbUser user,String smscode){
boolean checkSmsCode =userService.checkSmsCode(user.getPhone(), smscode);
if(checkSmsCode==false){
return new Result(false, "验证码输入错误!");
}try {
userService.add(user);
return new Result(true, "增加成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "增加失败");
}
}
(4)修改 pinyougou-user-web 的 userService.js
//增加
this.add=function(entity,smscode){
return $http.post('../user/add.do?smscode='+smscode ,entity );
}
(5)修改 pinyougou-portal-web 的UserController.java
//保存
$scope.reg=function(){
userService.add( $scope.entity, $scope.smscode ).success(
function(response){
alert(response.message);
}
);
}
(6)修改页面,绑定变量
<input type="text" placeholder="短信验证码" ng-model="smscode" class="input-xfat input-xlarge">
<a href="#" ng-click="sendCode()">获取短信验证码</a>
短信验证码发送到手机
(1)在 pinyougou-user-service 添加配置文件 applicationContext-activemq.xml
<!-- 真正可以产生 Connection 的 ConnectionFactory,由对应的 JMS 服务厂商提供-->
<bean id="targetConnectionFactory" class="org.apache.activemq.ActiveMQConnectionFactory">
<property name="brokerURL" value="tcp://192.168.25.135:61616"/>
</bean>
<!-- Spring 用于管理真正的 ConnectionFactory 的 ConnectionFactory -->
<bean id="connectionFactory" class="org.springframework.jms.connection.SingleConnectionFactory">
<!-- 目标 ConnectionFactory 对应真实的可以产生 JMS Connection 的 ConnectionFactory -->
<property name="targetConnectionFactory" ref="targetConnectionFactory"/>
</bean>
<!-- Spring 提供的 JMS 工具类,它可以进行消息发送、接收等 -->
<bean id="jmsTemplate"
class="org.springframework.jms.core.JmsTemplate"><!-- 这个 connectionFactory 对应的是我们定义的 Spring 提供的那个 ConnectionFacto对象 -->
<property name="connectionFactory" ref="connectionFactory"/>
</bean><!--这个是点对点消息 -->
<bean id="smsDestination" class="org.apache.activemq.command.ActiveMQQueue">
<constructor-arg value="sms"/>
</bean>
(2)修改 pinyougou-user-service 的UserServiceImpl.java
@Autowiredprivate
JmsTemplate jmsTemplate;
@Autowiredprivate
Destination smsDestination;
@Value("${template_code}")
private String template_code;
@Value("${sign_name}")
private String sign_name;
/*** 生成短信验证码*/
public void createSmsCode(final String phone) {//生成 6 位随机数final String code = (long) (Math.random()*1000000)+"";System.out.println("验证码:"+code);//存入缓存redisTemplate.boundHashOps("smscode").put(phone, code);//发送到 activeMQ
jmsTemplate.send(smsDestination, new MessageCreator() {
@Overridepublic
Message createMessage(Session session) throws JMSException {
MapMessage mapMessage = session.createMapMessage();
mapMessage.setString("mobile", phone);//手机号mapMessage.setString("template_code", "SMS_85735065");//模板编号mapMessage.setString("sign_name", "黑马");//签名Map m=new HashMap<>();m.put("number", code);mapMessage.setString("param", JSON.toJSONString(m));//参数return mapMessage;}});}
}
}
(3)在 pinyougou-common 的 properties 目录下创建配置文件 sms.properties
template_code=SMS_85735065
sign_name=\u9ED1\u9A6C