发表于： 2018-01-02 21:30:24
2 461
今天完成的事情：
大体做完了任务七，完成了一整个流程。
注册的时候，选择头像，输入密码，电话号码，点击发送验证码按钮，然后在页面输入验证码，邮箱地址，提交注册。验证码的有效时间设置为120s。
在点击验证码的时候，这里做了一个异步请求。然后点击提交注册按钮时，会在后台检测用户输入名称是否为空，密码是否为空，提交的名称在数据库是否已经存在。然后提交的验证码是否正确。通过之后，然后才会把注册成功，然后把用户的信息存入数据库中。
这就是一整个的相对完整注册的流程。
下面是一些代码和效果的展示：
//这个是前端的页面展示，以及ajxs的异步请求，这个来源于对前端师兄的请教。
<form action="${pageContext.request.contextPath}/newUser" method="post" enctype="multipart/form-data">
<td>头像<input type=file name="file" id="file" onchange="javascript:setImagePreview();"></td>
<td>昵称<input type="text" name="name"></td>
<td>密码<input type="text" name="password"></td>
<td>验证码<input type="text" name="webCode"></td>
<input type="submit" value="提交注册">
</form>
<td>电话号码<input type="text" id="phone" name="phoneNumber"></td>
<td>邮箱<input type="text" id="Email" name="Email"></td>
<button onclick="gets()" type="submit" >发送验证码</button>
</body>
</html>
<script type="text/javascript">
function setImagePreview() {
var docObj = document.getElementById("file");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '400px';
imgObjPreview.style.height = '400px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "400px";
localImagId.style.height = "400px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
// /*js 实现*/
function gets() {
var phone = document.getElementById("phone").value;
var Email = document.getElementById("Email").value; //获取输入框值
var xxx;
xxx = new XMLHttpRequest(); //声明XMLHttpRequest实例对象xxx
var text = "phoneNumber=" + phone +"&Email=" +Email;
xxx.open("Post","/code",true); //生成请求
xxx.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xxx.send(text); //发送请求以及输入的数据
xxx.onreadystatechange = function(){
if (xxx.readyState==4 && xxx.status == 200) { //如果服务器响应成功就执行下面函数
var texts = JSON.parse(xxx.responseText); //根据不同的返回值显示不同的文字
if (texts.message === "success") {
window.location.href = "welcome.html";
}
else {
if (texts.message === "密码错误") {
document.getElementById("message").innerHTML = "密码错误";
}
else {
document.getElementById("message").innerHTML = "账号不存在";
}
}
}
}
}</script>
//下面是注册的一个流程：
@RequestMapping(value = "/newUser", method = RequestMethod.POST)
public String forRegister(MultipartFile file, String name, String password,String webCode){
logger.info("传入的姓名是："+name);
logger.info("传入的密码为："+password);
String fileName = file.getOriginalFilename();
logger.info("传入文件的名称是："+fileName);
String bucketName = "test-for-java-jnshu";
String code = jedis.get("code");
//这里用当前系统的毫秒值加上传入文件的后缀(例如jpg,gif)，然后添加到ObjectKey,作为传入文件的命名，这样自动匹配格式。
String Objectkey =String.valueOf(System.currentTimeMillis())+"."+fileName.substring(fileName.lastIndexOf(".")+1);
//endpoint 来自于官方文档。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
//这里是文件在OSS的路径，存入数据库中。
String picturePath ="http://" +bucketName+"."+endpoint.substring(7)+"/"+Objectkey;
System.out.println("picturePath"+picturePath);
List<User> list = userService.nameList();
//前台表单如果不输入数据，直接提交，值是""，而不是NULL.
if(name==null||name.trim().equals("")){
logger.info("姓名不能为空");
return null;
}else if(password==null||password.trim().equals("") ) {
logger.info("密码不能为空");
return null;
}else if(webCode.equals(jedis.get("code"))){//验证用户输入的验证码和接受的验证码是否一样
for(User user:list) {if(user.getName().equals(name)){
logger.info("数据库已存在姓名为---->"+name);return null;
}
}
try{
Calendar c = Calendar.getInstance();
Long create_at =c.getTimeInMillis();
password = MD5UtilAndSalt.getMD5(password);
logger.info("加密后的密码为："+password);
InputStream input = file.getInputStream();
TestOSS.setPic(input,bucketName,Objectkey,endpoint);//调用第三方API把图片上传至服务器OSS
userService.addUser(name, password,create_at,picturePath);
return "web";
}catch (Exception e){
e.printStackTrace();
}
return null;
}
return null;
}
//发送验证码 这里设置了6位的随机验证码
@RequestMapping(value = "code",method = RequestMethod.POST)
public String sendCode(String phoneNumber,String Eamil) {
Random r = new Random();
String code = String.valueOf(r.nextInt(999999));
try {
SendMes.sendSms(code, phoneNumber);
jedis.setex("code",120,code);//这里key为code 有效时间为120S
}catch (Exception e){
e.printStackTrace();
}
return "register";
}贴一下页面：
虽然很丑，不过功能还都有了。
该有的还都有了，目前还差一个数据的传输吧，从阿里传输到七牛。
明天计划的事情：
把数据传输做了。
遇到的问题：
主要是那个异步请求，因为我这边用form表单提交，每提交一次就会刷新一次表单，很不适用。
收获：
以上。
返回列表
评论