前端系统（AngularJS ）、用户注册 短信平台、Redis 、MQ
一.前端AngularJS
1)ng-app 在任何元素上使用，代表 angular 应用作用域
ng-controller 指定控制器
ng-model 指定模型
ng-bind 或者 {{属性名}} 进行属性取值用于显示
2) 什么是双向数据绑定？
更新模型，视图会自动更新， 更新视图，模型会自动更新
3)前端代码
<!DOCTYPE html>
<html>
<head>
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>我的xx-注册</title>
<link rel="stylesheet" type="text/css" href="css/styleloginsign.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/self/effect.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--head-->
<div class="loginnav">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/icon/logo.png"></a>
<span class="logintitle">用户注册</span>
</div>
</div>
</nav>
</div>
<div class="container">
<!--mainsignup-->
<section class="mainsign">
<div class="headnav">
</div>
<div class="signup" ng-app="signupApp" ng-controller="signupCtrl">
<div class="col-md-9 signupbox">
<form id="customerForm" action="customer_regist.action" method="post" class="form col-md-6">
<div class=" form-group">
<label for="inputaccount" class="col-sm-3 control-label"><b>*</b>手机号</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="telephone" ng-model="telephone" id="inputaccount" placeholder="请输入手机号">
</div>
</div>
<div class="form-group">
<label for="inputaccount" class="col-sm-3 control-label"><b>*</b>验证码</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputaccount" placeholder="请输入验证码" name="checkcode">
</div>
<div class="col-sm-3 song">
<!-- 发送验证码按钮 -->
<a class="btn btn-default"
ng-click="getCheckCode(telephone)"
ng-bind="btnMsg">
</a>
</div>
</div>
<div class="form-group">
<label for="inputaccount" class="col-sm-3 control-label"><b>*</b>密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputaccount" placeholder="6-16位数字或英文字母" name="password">
<p class="text-right grey">安全强度：*****</p>
</div>
</div>
<div class="form-group">
<label for="inputaccount" class="col-sm-3 control-label"><b>*</b>确认密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputaccount" placeholder="6-16位数字或英文字母">
</div>
</div>
<div class="form-group">
<label for="inputaccount" class="col-sm-3 control-label"><b>*</b>绑定邮箱</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputemail" placeholder="请输入需要绑定的邮箱" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8 song">
<div class="checkbox">
<label>
<input type="checkbox"> 查看并同意<a href="#"> 《速运快递服务协议》</a>
</label>
</div>
</div>
</div>
<div class="form-group signbtn">
<div class="col-sm-offset-3 col-sm-8 song">
<a class="btn btn-danger" href="javascript:$('#customerForm').submit();">注册</a>
</div>
</div>
</form>
</div>
<div class="col-md-3 introbox">
<div class="signintro">
<h5 class="redtext">注册成为速运会员，您可以享受更多的服务！</h5>
<ul>
<li class="list-group">积分奖励，电子运单专享特权</li>
<li class="list-group">快速理赔，保价优惠</li>
<li class="list-group">大陆偏远地区附加费减免</li>
<li class="list-group">快件路由订阅，快件信息管理，批量下单</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!--foot-->
<footer>
<section class="copyright size12">
<div class="container">
<p class="text-center">地址：xxxxxxxx 邮编：1xxxxx 电话：400-618-xxxx 传真：010-8xxxxx </p>
<p class="text-center">京ICP备08xxxxxxx号京公网安备2xxxxxxx</p>
</div>
</section>
</footer>
<script type="text/javascript">
// 模块定义
var signupApp = angular.module("signupApp", []);
// 控制器定义
signupApp.controller("signupCtrl", ["$scope","$http",function($scope,$http) {
$scope.btnMsg = "发送验证码";
var active = true;
var second = 60; // 倒计时60秒
var secondInterval;
$scope.getCheckCode = function(telephone) {
if(active == false) {
return;
}
// 1 发送一个HTTP请求，通知服务器 发送短信给目标用户
var regex = /^1(3|5|7|8)\d{9}$/;
if(regex.test(telephone)) {
// 校验通过
$http({
method: 'GET',
url: 'customer_sendSms.action',
params : {
telephone : telephone
}
}).error(function(data, status, headers, config) {
// 当响应以错误状态返回时调用
alert("发送短信出错，请联系管理员");
});
} else {
// 校验失败
alert("手机号非法，请重新输入 ");
return;
}
// 2 显示倒计时按钮，60秒后，允许重新发送
active = false;
secondInterval = setInterval(function() {
if(second < 0) {
// 倒计时结束，允许重新发送
$scope.btnMsg = "重发验证码";
// 强制更新视图
$scope.$digest();
active = true;
second = 60;
// 关闭定时器
clearInterval(secondInterval);
secondInterval = undefined;
} else {
// 继续计时
$scope.btnMsg = second + "秒后重发";
// 强制更新视图
$scope.$digest();
second--;
}
}, 1000);
}
}]);
</script>
</body>
</html>
二.用户注册,发送短信验证码,邮件激活码保存到redis,使用ActiveMQ
import static org.hamcrest.CoreMatchers.nullValue;
import java.io.IOException;
import java.util.Random;
import java.util.concurrent.TimeUnit;
import javax.annotation.Resource;
import javax.jms.JMSException;
import javax.jms.MapMessage;
import javax.jms.Message;
import javax.jms.Session;
import javax.print.DocFlavor.STRING;
import javax.servlet.Servlet;
import javax.ws.rs.core.MediaType;
import org.apache.commons.lang3.RandomStringUtils;
import org.apache.cxf.jaxrs.client.WebClient;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.jms.core.JmsTemplate;
import org.springframework.jms.core.MessageCreator;
import org.springframework.stereotype.Controller;
import cn.bos.utils.MailUtils;
import cn.crm.domain.Customer;
@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class CustomerAction extends BaseAction<Customer> {
@Resource(name = "jmsQueueTemplate")
private JmsTemplate jmsTemplate;
@Action(value = "customer_sendSms")
public String sendSms() {
// 手机保存在Customer对象
// 生成4位数的短信验证码
String randomCode = RandomStringUtils.randomNumeric(4);
// 将短信验证码保存到session
ServletActionContext.getRequest().getSession()
.setAttribute(model.getTelephone(), randomCode);
System.out.println("生成手机验证码为:" + randomCode);
// 编辑短信内容
final String msg = "尊敬的用户您好,本次获取的验证码为:" + randomCode + ",服务电话:99999";
// 调用MQ服务,发送一条信息
jmsTemplate.send("bos_sms", new MessageCreator() {
@Override
public Message createMessage(Session session) throws JMSException {
MapMessage mapMessage = session.createMapMessage();
mapMessage.setString("telephone", model.getTelephone());
mapMessage.setString("msg", msg);
return mapMessage;
}
});
return NONE;
}
// 属性驱动
private String checkCode;
public void setCheckCode(String checkCode) {
this.checkCode = checkCode;
}
@Autowired
private RedisTemplate<String, String> redisTemplate;
@Action(value = "customer_regist", results = {
@Result(name = "success", type = "redirect", location = "signup-success.html"),
@Result(name = "input", type = "redirect", location = "signup.html") })
public String regist() {
// 先校验短信验证码,如果不通过,返回注册页面
// 从session获取之前生成的验证码
String checkcodeSession = (String) ServletActionContext.getRequest()
.getSession().getAttribute(model.getTelephone());
if (checkcodeSession == null || !checkcodeSession.equals(checkCode)) {
System.out.println("短信验证码错误");
return INPUT;
}
// 调用webService连接CRM 保存客户的信息
WebClient
.create("http://localhost:9002/crm_management/services"
+ "/customerService/customer")
.type(MediaType.APPLICATION_JSON).post(model);
System.out.println("客户注册成功");
// 发送一封激活邮件
// 生成激活码
String activecode = RandomStringUtils.randomNumeric(32);
redisTemplate.opsForValue().set(model.getTelephone(), activecode, 24,
TimeUnit.HOURS);
// 调用MailUtils发送激活邮件
String content = "尊敬的客户您好，请于24小时内，进行邮箱账户的绑定，点击下面地址完成绑定:<br/><a href='"
+ MailUtils.activeUrl + "?telephone=" + model.getTelephone()
+ "&activecode=" + activecode + "'>xx快递邮箱绑定地址</a>";
MailUtils.sendMail("速运快递激活邮件", content, model.getEmail());
return SUCCESS;
}
// 属性驱动
private String activecode;
public void setActivecode(String activecode) {
this.activecode = activecode;
}
@Action("customer_activeMail")
public String activeMail() throws Exception {
ServletActionContext.getResponse()
.setContentType("text/html;charset-utf-8");
// 判断激活码是否有效
String activecodeRedis = redisTemplate.opsForValue()
.get(model.getTelephone());
if (activecodeRedis == null
|| !activecodeRedis.equals(activecodeRedis)) {
// 激活码无效
ServletActionContext.getResponse().getWriter()
.println("激活码无效,请登录系统,重新绑定邮箱");
} else {
// 激活码有效
// 防止重复绑定
// 调用CRM webService查询客户信息,判断是否已经绑定激活码
Customer customer = WebClient
.create("http://localhost:9002/crm_management/services"
+ "/customerService/customer/telephone/"
+ model.getTelephone())
.accept(MediaType.APPLICATION_JSON).get(Customer.class);
if (customer.getType() == null || customer.getType() != 1) {
// 没有绑定,进行绑定
WebClient.create("http://localhost:9002/crm_management/services"
+ "/customerService/customer/updatetype/"
+ model.getTelephone()).get();
ServletActionContext.getResponse().getWriter()
.println("邮箱绑定成功！");
} else {
// 已经绑定过
ServletActionContext.getResponse().getWriter()
.println("邮箱已经绑定过，无需重复绑定");
}
// 删除redis的激活码
redisTemplate.delete(model.getTelephone());
}
return NONE;
}
}
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
