主要是简单的先自己准备需要的组件,后面直接整合在web项目里面
原始登陆和注册界面
登陆界面
![v2-a13f0627d91c04de365472a1ef4ba23c_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/815a81e4dbe1fc7d4e26a431fb355102.png)
注册界面
![v2-ada43e0c696f70ff3b4ec0a28ed78bd2_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/cbc7e91c33febfb1016ca93bd9d83b00.png)
准备初步优化一下界面
登陆界面
![v2-e07cde42b5361e4df138e187d2cd9046_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/be062650e69d90d0ad83f3ab41e13efb.jpeg)
注册界面
![v2-bec2f3213ba9314f25416298106cc6bc_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/527ebc484a28582fb3f6ddb27dcf5a91.jpeg)
简单的代码
登陆代码UI代码
<div class="page-container" style="margin: 100px auto 0px;">
<h1>登陆|Login</h1>
<#-- <h1>本项目请使用Tomcat,请勿使用Jetty</h1>-->
<form id="_form" action="" method="post">
<input type="text" name="account" class="username" placeholder="账号|Account" style="margin-top: 25px;">
<input type="password" name="password" class="password" placeholder="密码|Password" style="margin-top: 25px;">
<div style="text-align: left; margin-left: 10px;">
<label><input type="checkbox" checked="checked" id="rememberMe"style="width: 10px; height: 10px;">记住我</label>
<#--<p><b style='color:red;'>如果重启Tomcat,还是登录状态,是因为这里勾选了“记住我”。</b></p>-->
</div>
<button type="button" id="login">登录</button>
<button type="button" id="register" class="register">Register</button>
<div class="error"><span>+</span></div>
</form>
</div>
注册的UI代码
<div class="page-container" style="margin: 100px auto 0px;">
<h1>注册|Register</h1>
<form id="_form" action="" method="post">
<input type="text" name="nickname" id="nickname" class="username" placeholder="用户名|Nickname" style="margin-top: 9px;">
<input type="text" name="email" id="email" placeholder="邮箱|Email" style="margin-top: 9px;">
<div style="text-align: left; margin-left: 10px;" id="emailcode">
<input id="code_email" name="code_email"class="inputCode_email" placeholder="请先获取验证码" style="margin-top: 9px;width: 110px; margin-left: -8px; margin-right: 8px;">
<input class="btn_email" type="button" value="获取验证码" style="margin-top: 9px;width: 146px; height: 44px; margin-left: 0px; margin-right: 0px;">
</div>
<input type="password" name="pswd" id="password" class="password" placeholder="密码|Password" style="margin-top: 9px;">
<input type="password" id="re_password" placeholder="确认密码|Repeat the password" style="margin-top: 9px;">
<div style="text-align: left; margin-left: 10px;" id="vcode">
<input type="text" name="vcode" placeholder="验证码" style="margin-top: 9px;width: 110px; margin-left: -8px; margin-right: 8px;">
<img src="${basePath}/open/getGifCode.shtml" style="margin-top: 9px;"/>
</div>
<button type="button" class="register">Register</button>
<button type="button" id="login" >Login</button>
<div class="error"><span>+</span></div>
</form>
</div>
接下来准备email模块的添加
添加对应的依赖 对应的API我一起全部导入
<!--邮件sendcloud的API调用-->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<!--短信-->
<dependency>
<groupId>CCP</groupId>
<artifactId>CCP_REST_SMS_SDK_JAVA_v2.6.3r</artifactId>
<version>2.06</version>
</dependency>
<!--阿里云OSS管理依赖-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>2.8.3</version>
</dependency>
<!--七牛云文件上传依赖-->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.3.1</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.6.2</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.4</version>
<scope>compile</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.oro/com.springsource.org.apache.oro -->
<dependency>
<groupId>org.apache.oro</groupId>
<artifactId>com.springsource.org.apache.oro</artifactId>
<version>2.0.8</version>
</dependency>
<dependency>
<groupId>oro</groupId>
<artifactId>oro</artifactId>
<version>2.0.8</version>
</dependency>
email接口代码
public class SendMail {
//邮件使用的是这个模板(触发失效的这个)
public static boolean send_template(String email, String emailcode) throws Throwable {
final String url = "xxxxxx";
final String apiUser = "xxxxxx";
final String apiKey = "xxxxxx";
final String rcpt_to = email;
String subject = "Email验证码";
String html = "\""+email+"你好,邮箱的验证码是 "+ emailcode +" 五分钟后失效,请及时认证!!!";
HttpPost httpPost = new HttpPost(url);
HttpClient httpClient = new DefaultHttpClient();
List<NameValuePair> params = new ArrayList<NameValuePair>();
params.add(new BasicNameValuePair("apiUser", apiUser));
params.add(new BasicNameValuePair("apiKey", xxx));
params.add(new BasicNameValuePair("to", xxx));
params.add(new BasicNameValuePair("from", "xxxxx"));
params.add(new BasicNameValuePair("fromName", "xxxxx"));
params.add(new BasicNameValuePair("subject", xxxxt));
params.add(new BasicNameValuePair("html", xxxxx));
httpPost.setEntity(new UrlEncodedFormEntity(params, "UTF-8"));
HttpResponse response = httpClient.execute(httpPost);
// 处理响应
if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
// 正常返回, 解析返回数据
System.out.println(EntityUtils.toString(response.getEntity()));
httpPost.releaseConnection();
return true;
} else {
System.err.println("error");
return false;
}
}
}
控制层的代码
//获取email验证码
@RequestMapping(value = "subEmail",method=RequestMethod.POST)
@ResponseBody
public Boolean email(String email,HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse)throws Exception{
System.out.println(email);
String salt_email = CharacterUtils.getRandomString2(8);//随机数
if(!"".equals(email)&&checkEmail(email)){
String emailcode="";
int emailcode1= (int) (Math.random()*9000+1000);
emailcode= String.format("%s%s", emailcode, emailcode1);
System.out.println(emailcode);
boolean flag= false; //返回给注册页面的flag
try {
flag = SendMail.send_template(email,emailcode);
} catch (Throwable throwable) {
throwable.printStackTrace();
}
//emailcode加密
String emailcodeing = DesUtil.encrypt(emailcode, CHARSET, salt_email);
HttpSession session=httpServletRequest.getSession();//将verify添加到session里面
session.setAttribute("emailcodeing",emailcodeing);
session.setAttribute("salt_email",salt_email);
System.out.println("good");
return flag; //return 返回的是一个jsp页面
}else{
System.out.println("bad");
return false;
}
}
开始出现一个问题一直不能解决那个ajax异步传输问题
尝试了接近几个小时 不断的看shiro的博客
最后终于解决了
在ajax访问的时候的URL不是和springmvc的不一样,那个只是简单地restful风格接口访问
$(function(){
$(".btn_email").click(function(){
var _inpdisabled = $(".inputCode_email");
var url = '${basePath}/u/subEmail.shtml';
/*得到href的值*/
$.ajax({
url: url, /*url也可以是json之类的文件等等*/
type: 'POST', /*DELETE、POST */
data:'email=' + $("#email").val(),
success: function (result) {
//判断result结果
if (result) {
console.log(result);
/* 放开Code 输入框 */
_inpdisabled.attr("disabled",false);
_inpdisabled.val("请输入邮箱验证码");
settime();
} else {
alert("email发送失败!,请检查email!!!")
}
}
});
});
终于不会出现访问异常
var url = '${basePath}/u/subEmail.shtml';
主要是shiro的访问的区域的限制,自己要区分好
![v2-660814e68c83dcc1e5658f692f6177de_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/0f5a8a03d472c444a6a3ccf8eecaa4eb.png)
手机也收到对应的验证码
接下来修改SQL插入语句,还有数据表的结构
最后邮件验证码整合到注册页面(短信验证码准备放在资料修改那个地方)
今天完成的事情:将前端页面UI修稿设计一下,还有把email验证码添加到,注册页面里面,并且对验证码生成进行加密传输,在session生成,一次核查完毕后直接失效,结束会话,释放session
今天遇到的困难:shiro的ajax异步传输数据,的方式和普通的springmvc的摸索不一样,这个URL主要问题,提交方式也不一样,有微小的差别
明天的计划:继续学习shiro还有继续完善毕业设计其他的详细的细节需求分析(继续详细的理解shiro的一些功能,尤其的前期的配置,怎么分配权限的)