发表于： 2020-07-21 22:50:20
1 1168
今天完成的事：
AJAX 是一种用于创建快速动态网页的技术。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
关于部分参数的解释：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
贴上用Ajax实现异步获取验证码的代码
<br>
请输入收到的验证码:<br>
<input type="text" name="sms" id="yzm" placeholder="请输入4位验证码" maxlength="4">
<input type="button" name="" id="verCodeBtn" value="获取验证码" onclick="settime(this);"/>
${YzmError}
<br>
<br>
<input type="submit" value="注册">
${error}${msg}
//获取验证码
$(function(){
$("#verCodeBtn").click(function() {
$.ajax({
url: "${pageContext.request.contextPath}/send1",
data: {"phone":$("#email2").val()},
type: "post",
success: function(data) {
if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
alert("验证码发送失败")
} else {
alert("验证码发送成功，请耐心等待")
}
},
参考SendCloud官方文档写了一个发送邮件的工具类，因为已经注册好了就用这个了，之前师兄用的JavaMail也能实现，就不贴上了
public class MailUtil {
@Autowired
RedisTemplate redisTemplate;
public boolean send(String address) throws Throwable {
MailAddressReceiver receiver = new MailAddressReceiver();
receiver.addTo(address);
MailBody body = new MailBody();
// 设置 From
body.setFrom("danjiayitask7@jnshu.com");
// 设置 FromName
body.setFromName("task7mail");
// 设置 ReplyTo
body.setReplyTo("danjiayitask7@jnshu.com");
// 设置标题
body.setSubject("验证码");
// //生成随机验证码
String code = UUID.randomUUID().toString().substring(0, 4);
TextContent content = new TextContent();
content.setContent_type(TextContent.ScContentType.html);
content.setText("<html><p>您的验证码为："+ code +"。请不要泄露出去</p></html>");
redisTemplate.opsForValue().set(address,code,5000, TimeUnit.SECONDS);//5分钟过期
SendCloudMail mail = new SendCloudMail();
mail.setTo(receiver);
mail.setBody(body);
mail.setContent(content);
SendCloud sc = SendCloudBuilder.build();
ResponseData res = sc.sendMail(mail);
System.out.println(res.getResult());
System.out.println(res.getStatusCode());
System.out.println(res.getMessage());
System.out.println(res.getInfo());
return res.getResult();
}
Controller层调用工具类发送短信
//转向邮箱注册页面
@RequestMapping("/tomailregister")
public String toregister2() {
return "mailregister";
}
@RequestMapping(value = "/send2", method = RequestMethod.POST)
public String code(@RequestParam(value = "address", required = false) String address){
logger.info("a");
try {
boolean isSend = mailUtil.send(address);
} catch (Throwable throwable) {
throwable.printStackTrace();
}
logger.info("aa");
return null;
}
贴上注册代码，这里我用了之前任务六里面的页面，加了加密
//注册
@RequestMapping("/mailregister")
public String register2(@RequestParam("name") String name,
@RequestParam("password") String password,Model model,
//@RequestParam("phone") String phone,
@RequestParam("address") String address,
@RequestParam("sms") String sms) {
String code = redisTemplate.opsForValue().get(address);
if (sms.equals(code)){
if (password != null && password != ""){
//获取指定长度的盐值
String salt = StringUtil.getRandomString(10);
String saltpassword = salt + password;
//创建对象
User user = new User();
//设置名字
user.setName(name);
logger.info("===注册设置的名字为："+name);
//设置盐值
user.setSalt(salt);
logger.info("======注册设置的盐值为："+salt);
//MD5加密加盐
String md5Digest = MD5Util.GetMD5Code(saltpassword);
//设置密码
user.setPassword(md5Digest);
logger.info("注册记录的密码为："+md5Digest);
//user.setPhone(phone);
user.setMail(address);
logger.info(address);
userService.register(user);
//登录
logger.info("=======注册成功===返回登录页面===");
return "login";
}else {
model.addAttribute("error","密码不能为空");
return "mailregister";
}
}else {
model.addAttribute("error","验证码错误");
return "mailregister";
}
}
短信验证用的阿里云的
这里我参考的网上博客的写法
server层写了一个接口
public interface SendSms {
public boolean send(String phoneNum, String templateCode, Map<String, Object> code);
}
然后写了一个发送短信的实现类，其实也可以像上面一样整合到一个工具类里面，这里就不改了
@Service
public class SendSmsImpl implements SendSms {
// @Autowired
// private RedisTemplate<String,String> redisTemplate;
@Override
public boolean send(String phoneNum, String templateCode, Map<String, Object> code) {
//连接阿里云 LTAI4GCZATVrQw4yHpUaZuBP
DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "LTAI4G7F1aoDRve8P9nGMapQ", "dsHYtvo0ZGp9e9bSH8eqWPszavj2J1");
//DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, secret);
IAcsClient client = new DefaultAcsClient(profile);
//构建请求
CommonRequest request = new CommonRequest();
request.setSysMethod(MethodType.POST);
request.setSysDomain("dysmsapi.aliyuncs.com");//不要动
request.setSysVersion("2017-05-25");//不要动
request.setSysAction("SendSms");
//自定义参数（手机号，验证码，签名，模板）
request.putQueryParameter("PhoneNumbers", phoneNum);
request.putQueryParameter("SignName", "ABC商城");
request.putQueryParameter("TemplateCode", templateCode);
//request.putQueryParameter("RegionId", "cn-hangzhou");
//构建一个短信验证码
// HashMap<String,Object> map = new HashMap<>();
// map.put("code",2233);
request.putQueryParameter("TemplateParam", JSONObject.toJSONString(code));
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
//成功返回
return response.getHttpResponse().isSuccess();
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
//失败返回
return false;
}
Controller层掉用server层实现类发送短信
//手机注册
@RequestMapping("/register")
public String register(@RequestParam("name") String name,
@RequestParam("password") String password,Model model,
@RequestParam("phone") String phone,
//@RequestParam("mail") String mail,
@RequestParam("sms") String sms) {
String code = redisTemplate.opsForValue().get(phone);
logger.info(code);
if (sms.equals(code)){
if (password != null && password != ""){
//获取指定长度的盐值
String salt = StringUtil.getRandomString(10);
String saltpassword = salt + password;
//创建对象
User user = new User();
//设置名字
user.setName(name);
logger.info("===注册设置的名字为："+name);
//设置盐值
user.setSalt(salt);
logger.info("======注册设置的盐值为："+salt);
//MD5加密加盐
String md5Digest = MD5Util.GetMD5Code(saltpassword);
//设置密码
user.setPassword(md5Digest);
logger.info("注册记录的密码为："+md5Digest);
user.setPhone(phone);
logger.info(phone);
userService.register(user);
//user.setMail(to);
//登录
logger.info("=======注册成功===返回登录页面===");
return "login";
}else {
model.addAttribute("error","密码不能为空");
return "register";
}
}else {
model.addAttribute("error","验证码错误");
return "register";
}
}
关于图片上传，这里用的阿里云的对象存储OSS
参考官方文档
写了一个测试类
@Test
public void upload() throws FileNotFoundException {
// <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
String file = "D:\\IDEA_Projects\\JAVA\\xzy-task7\\src\\main\\webapp\\WEB-INF\\image\\boy2.jpg";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
InputStream inputStream = new FileInputStream(file);
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentType("image/jpg");
// 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
ossClient.putObject(bucketName,"a.jpg",inputStream,objectMetadata);
// 关闭OSSClient。
ossClient.shutdown();
}
运行成功
查看控制台文件管理检查是否成功
点击详情查看图片
但是这里只能写绝对路径，还没弄好。。。
返回列表
评论