日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

SpringBoot学习-用户注册登录

發布時間:2023/12/20 javascript 19 豆豆
生活随笔 收集整理的這篇文章主要介紹了 SpringBoot学习-用户注册登录 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.idea創建maven項目,下面步驟按自己實際情況填寫創建。

2.環境

spring、mvc等配置不需要自己寫,只需配置一下數據庫即可。另外,與主應用程序上下文不同的外部配置,我在根目錄創建application.properties來配置,mybatis逆向生成需要配置。

(1)首先,搞一下pom.xml。(里面有些是用不到的,不過全copy了,后面業務會用的)

[Maven庫依賴查詢](https://mvnrepository.com/),例如 <artifactId>junit</artifactId>,將junit輸入查詢,即可得到各個版本的。
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.smxy.study</groupId><artifactId>shoping</artifactId><version>1.0-SNAPSHOT</version><name>shoping</name><!-- FIXME change it to the project's website --><url>http://www.example.com</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.7</maven.compiler.source><maven.compiler.target>1.7</maven.compiler.target></properties><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.5.RELEASE</version></parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope></dependency><!-- 數據庫依賴,數據庫mySql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.35</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.0.17</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.3.1</version></dependency><!-- 輔助校驗 --><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.7</version></dependency><!-- 校驗 --><dependency><groupId>org.hibernate</groupId><artifactId>hibernate-validator</artifactId><version>6.0.13.Final</version></dependency><!--時間--><dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId><version>2.9.1</version></dependency></dependencies><build><pluginManagement><plugins><plugin><artifactId>maven-deploy-plugin</artifactId><version>2.8.2</version></plugin><!--mybatis逆向生成--><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.5</version><dependencies><dependency><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-core</artifactId><version>1.3.2</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.35</version></dependency></dependencies><executions><execution><id>mybatis_generator</id><phase>package</phase><goals><goal>generate</goal></goals></execution></executions><configuration><!--允許覆蓋生成的文件--><verbose>false</verbose><overwrite>true</overwrite><configurationFile>src/main/resources/mybatis-generator.xml</configurationFile></configuration></plugin></plugins></pluginManagement><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><source>8</source><target>8</target></configuration></plugin></plugins></build> </project>

(2)jar包架好之后,可以測試一下,打開App.java

//1.讓Springboot掃描配置文件 /*** 如果沒有包,就用這個注解,因為我現在是要弄一個項目,這些包都創建好了*@EnableAutoConfiguration將該類做成支持配置可以自動加載 并*/ //@EnableAutoConfiguration @SpringBootApplication(scanBasePackages = {"com.smxy.study"}) @MapperScan("com.smxy.study.dao") @RestController public class App {public static void main( String[] args ){SpringApplication.run(App.class,args);//啟動web容器System.out.println( "啟動SpringBoot項目" );} }

(3)application.properties的上下文全局配置

# 設置自己的服務訪問端口 server.port=8090 mybatis.mapperLocations=classpath:mapping/*.xml # 數據庫相關配置 spring.datasource.name=shoping spring.datasource.url=jdbc:mysql://127.0.0.1:3306/miaosha spring.datasource.username=root spring.datasource.password=123456#配置數據源,這里是有druid數據源 spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.driverClassName=com.mysql.jdbc.Driver

(4)mybatis的逆向生成,可以查看Mybatis官方文檔。

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfigurationPUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"><generatorConfiguration><context id="DB2Tables" targetRuntime="MyBatis3"><!-- 設置不會生成注釋的自動生成 --><commentGenerator><property name="suppressAllComments" value="true"/></commentGenerator><!-- 配置數據庫連接信息 --><jdbcConnection driverClass="com.mysql.jdbc.Driver"connectionURL="jdbc:mysql://localhost:3306/miaosha"userId="root"password="123456"></jdbcConnection><javaTypeResolver><property name="forceBigDecimals" value="false"/></javaTypeResolver><!-- 指定JavaBean生成的位置(pojo) --><javaModelGenerator targetPackage="com.smxy.study.pojo"targetProject=".\src\main\java"><property name="enableSubPackages" value="true"/><property name="trimStrings" value="true"/></javaModelGenerator><!-- 指定Sql映射文件生成的位置 --><sqlMapGenerator targetPackage="mapping" targetProject=".\src\main\resources"><property name="enableSubPackages" value="true"/></sqlMapGenerator><!-- 指定Dao接口生成的位置 --><javaClientGenerator type="XMLMAPPER"targetPackage="com.smxy.study.dao" targetProject=".\src\main\java"><property name="enableSubPackages" value="true"/></javaClientGenerator><!-- table指定每個表生成策略 --><!--enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"--><table tableName="promo" domainObjectName="Promo" enableCountByExample="false"enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false"selectByExampleQueryId="false"></table></context> </generatorConfiguration>

逆向文件配置好之后,運行即可生成相關代碼

3.用戶模型

習慣性創建用戶時,會將password一起整到一張表,這樣,前端請求就可以看到這類敏感數據,雖然加密,但是還是給用戶一種不好的體驗。所以,從現在學習更好的模型規劃。
(1)自動生成的User和Password類不動
(2)Service層操作模型類

UserModel .java
package com.smxy.study.service.model;import javax.validation.constraints.Max; import javax.validation.constraints.Min; import javax.validation.constraints.NotBlank; import javax.validation.constraints.NotNull;public class UserModel {private Integer id;@NotBlank(message = "用戶名不能為空")private String name;@NotNull(message = "性別不能不填")private Byte gender;@NotNull(message = "年齡不能不填")@Min(value = 0,message = "年齡必須大于0")@Max(value = 150,message = "年齡必須小于150")private Integer age;@NotBlank(message = "手機號不能為空")private String telphone;private String regisaterMode;private String thirdPartyId;@NotBlank(message = "密碼不能為空")private String encrptPassword;< 對應的get/set > }

(3)可以給前端展示的模型

UserVO.java
package com.smxy.study.controller.viewobject;public class UserVO {private Integer id;private String name;private Byte gender;private Integer age;private String telphone;< 對應的get/set > }
4.業務實現

來寫Service層。

UserService.java
package com.smxy.study.service;import com.smxy.study.error.BusinessException; import com.smxy.study.service.model.UserModel; import org.xml.sax.SAXException;import java.io.IOException;public interface UserService {public UserModel getUserById(Integer id);/*** 用戶注冊服務* @param userModel* @throws BusinessException*/void register(UserModel userModel) throws BusinessException, IOException, SAXException;/*** 校驗登錄用戶的信息* @param telpnone,用戶的手機號* @param passd,用戶加密后的密碼*/UserModel validateLogin(String telpnone,String passd) throws BusinessException; }
UserServiceImpl.java
package com.smxy.study.service.impl;import ch.qos.logback.core.net.SyslogOutputStream; import com.smxy.study.Validator.ValidationResult; import com.smxy.study.Validator.ValidatorImpl; import com.smxy.study.dao.UserMapper; import com.smxy.study.dao.UserPasswordMapper; import com.smxy.study.error.BusinessException; import com.smxy.study.error.EmBusinessError; import com.smxy.study.pojo.User; import com.smxy.study.pojo.UserPassword; import com.smxy.study.service.UserService; import com.smxy.study.service.model.UserModel; import org.apache.commons.lang3.StringUtils; import org.springframework.beans.BeanUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import org.xml.sax.SAXException;import java.io.IOException;@Service public class UserServiceImpl implements UserService {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserPasswordMapper userPasswordMapper;@Autowiredprivate ValidatorImpl validator;@Overridepublic UserModel getUserById(Integer id) {User userDo = userMapper.selectByPrimaryKey(id);UserPassword userPassword = userPasswordMapper.selectByUserId(id);UserModel userModel = convertFromDataObject(userDo,userPassword);return userModel;}@Override@Transactionalpublic void register(UserModel userModel) throws BusinessException, IOException, SAXException {if(userModel == null) {throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR, "用戶為空");}//開始校驗 // if(StringUtils.isEmpty(userModel.getName()) // || userModel.getGender() == null // || userModel.getAge() == null // || StringUtils.isEmpty(userModel.getTelphone())){ // throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR,"傳入參數不合法"); // }ValidationResult result = validator.validate(userModel);if(result.isHasErrors()){throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR,result.getErrMsg());}//增加事務,避免出現類似userMapper成功,userPasswordMapper失敗案例User userDO = convertFromDataObject(userModel);userMapper.insertSelective(userDO);userModel.setId(userDO.getId());//將自增生成的id給userModel,再傳給UserPasswordUserPassword userPass = convertPassFromDataObject(userModel);userPasswordMapper.insertSelective(userPass);return;}@Overridepublic UserModel validateLogin(String telpnone, String passd) throws BusinessException {//通過手機號獲取用戶信息User userDO = userMapper.selectByTelphone(telpnone);if(userDO == null){throw new BusinessException(EmBusinessError.USER_LOGIN_FAIL);}UserPassword userPassword = userPasswordMapper.selectByUserId(userDO.getId());UserModel userModel = convertFromDataObject(userDO,userPassword);//比對用戶加密過的密碼if(!StringUtils.equals(passd,userModel.getEncrptPassword())){throw new BusinessException(EmBusinessError.USER_LOGIN_FAIL);}return userModel;}/*** user、UserPassword轉換-》UserModel* @param user* @param userPassword* @return*/private UserModel convertFromDataObject(User user,UserPassword userPassword){if(user==null)return null;UserModel userModel = new UserModel();BeanUtils.copyProperties(user,userModel);if(userPassword==null)userModel.setEncrptPassword(null);userModel.setEncrptPassword(userPassword.getEncrptPassword());return userModel;}/*** UserModel轉換-》User* @param userModel* @return*/private User convertFromDataObject(UserModel userModel){if(userModel == null)return null;User user = new User();BeanUtils.copyProperties(userModel,user);return user;}/*** UserModel轉換-》UserPassword* @param userModel* @return*/private UserPassword convertPassFromDataObject(UserModel userModel){if(userModel == null)return null;UserPassword userPassword = new UserPassword();userPassword.setEncrptPassword(userModel.getEncrptPassword());userPassword.setUserId(userModel.getId());return userPassword;} }
5.控制層接口
UserController.java
package com.smxy.study.controller;import com.alibaba.druid.util.StringUtils; import com.smxy.study.controller.viewobject.UserVO; import com.smxy.study.error.BusinessException; import com.smxy.study.error.EmBusinessError; import com.smxy.study.response.CommentReturnType; import com.smxy.study.service.impl.UserServiceImpl; import com.smxy.study.service.model.UserModel; import org.springframework.beans.BeanUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.xml.sax.SAXException; import sun.misc.BASE64Encoder;import javax.servlet.http.HttpServletRequest; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.Random;@Controller @RequestMapping("/user") @CrossOrigin(allowCredentials = "true", allowedHeaders = "*") public class UserController extends BaseController {@Autowiredprivate UserServiceImpl userService;@Autowiredprivate HttpServletRequest httpServletRequest;//單例模式@RequestMapping("/get")@ResponseBodypublic CommentReturnType getUser(@RequestParam(name = "id") Integer id) throws BusinessException {UserModel userModel = userService.getUserById(id);//如果用戶不存在,實現自定義異常類if (userModel == null) {throw new BusinessException(EmBusinessError.USER_NOT_EXIT);}UserVO userVO = convertFormModel(userModel);return CommentReturnType.create(userVO);}/*** 要保護用戶信息,轉成可供view使用的model** @param userModel* @return*/private UserVO convertFormModel(UserModel userModel) {if (userModel == null)return null;UserVO userVO = new UserVO();BeanUtils.copyProperties(userModel, userVO);return userVO;}//用戶獲取opt短信接口@RequestMapping(value = "/getopt", method = RequestMethod.POST, consumes = {CONTENT_TYPE_FORMED})@ResponseBodypublic CommentReturnType getOpt(@RequestParam(name = "telphone") String telphone) {//1.按照一定規則生成opt---------隨機數Random random = new Random();int randomInt = random.nextInt(99999);randomInt += 10000;String optCode = String.valueOf(randomInt);//2、將opt驗證碼與用戶的手機關聯---------Redis(更好),httpSessionhttpServletRequest.getSession().setAttribute(telphone, optCode);//3.將opt驗證碼通過短信通道發送給用戶(省略)System.out.println("telephon=" + telphone + ",optcode=" + optCode);return CommentReturnType.create(null);}//用戶注冊@RequestMapping(value = "/register", method = RequestMethod.POST, consumes = {CONTENT_TYPE_FORMED})@ResponseBodypublic CommentReturnType register(@RequestParam(name = "telphone") String telphone,@RequestParam(name = "otpCode") String otpCode,@RequestParam(name = "name") String name,@RequestParam(name = "gender") Integer gender,@RequestParam(name = "age") Integer age,@RequestParam(name = "encrptPassword") String encrptPassword) throws BusinessException, IOException, NoSuchAlgorithmException, SAXException {//1.驗證手機號和otp驗證碼String inSessionOtpCode = (String) this.httpServletRequest.getSession().getAttribute(telphone);//String inSessionTelphone = (String) this.httpServletRequest.getSession().getAttribute(otpCode);if (!StringUtils.equals(inSessionOtpCode, otpCode)) {throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR, "短信驗證碼不符合");}//2.用戶注冊流程UserModel userModel = new UserModel();userModel.setName(name);userModel.setGender(new Byte(String.valueOf(gender.intValue())));userModel.setAge(age);userModel.setTelphone(telphone);userModel.setRegisaterMode("byphone");userModel.setEncrptPassword(EncodeByMD5(encrptPassword));userService.register(userModel);return CommentReturnType.create(userModel);}//用戶登錄@RequestMapping(value = "/login", method = RequestMethod.POST, consumes = {CONTENT_TYPE_FORMED})@ResponseBodypublic CommentReturnType login(@RequestParam(name="telphone")String telphone,@RequestParam(name="encrptPassword")String encrptPassword) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {//入參校驗if(StringUtils.isEmpty(telphone) || StringUtils.isEmpty(encrptPassword)){throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR,"手機號和密碼不能為空");}//用戶登錄服務,校驗用戶登錄是否合法String passwd = EncodeByMD5(encrptPassword);UserModel userModel =userService.validateLogin(telphone,passwd);//將登錄憑證加入到用戶登錄成功的Session類this.httpServletRequest.getSession().setAttribute("LOGIN",true);this.httpServletRequest.getSession().setAttribute("LOGIN_USER",userModel);return CommentReturnType.create(userModel);}//MD5加密public String EncodeByMD5(String password) throws NoSuchAlgorithmException, UnsupportedEncodingException {MessageDigest md5 = MessageDigest.getInstance("MD5");BASE64Encoder base64Encoder = new BASE64Encoder();String newPasswd = base64Encoder.encode(md5.digest(password.getBytes("utf-8")));return newPasswd;} }
6.頁面實現
login.html
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><script src="metronic_v4.7.5/_start/plugins/jquery-1.11.0.min.js" type="text/javascript"></script><link href="metronic_v4.7.5/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link/><link href="metronic_v4.7.5/theme/assets/global/css/components.css" rel="stylesheet" type="text/css"><link/><link href="metronic_v4.7.5/theme/assets/pages/css/login.css" rel="stylesheet" type="text/css"><link/></head><body class=" login"><div class="content"><form class="login-form" action="index.html" method="post"><h3 class="form-title"> 用戶登錄 </h3><div class="form-group"><label class="#control-label">手機號:</label><div><input class="form-control" type="text" placeholder="手機號" name="telphone" id="telphone"></div></div><div class="form-group"><label class="#control-label">密碼:</label><div><input class="form-control" type="password" name="encrptPassword" id="encrptPassword"></div></div><div class="form-actions"><button class="btn blue" id="login" type="submit">登錄</button><button class="btn green" id="register" type="submit" onclick=javascript:goRegister()>注冊</button></div></form></div></body><script>//注冊事件//$("#register").on("click",function(){// window.location.href = "getopt.html";//});//onclick="window.location.href='getopt.html'"function goRegister(){window.location.href="getopt.html";}jQuery(document).ready(function(){//登錄請求$("#login").on("click",function(){var telphone = $("#telphone").val();var password = $("#encrptPassword").val();if(telphone == null || telphone == ""){alert("手機號不能為空");return false;}if(password == null || password == ""){alert("密碼不能為空");return false;}$.ajax({type:"POST",contentType:"application/x-www-form-urlencoded",url:"http://127.0.0.1:8090/user/login",data:{"telphone": telphone,"encrptPassword": password,},xhrFields: {withCredentials: true},success:function(data){if(data.status == "fail"){alert("登錄失敗,原因:"+data.data.errMsg); }else{alert("用戶登錄成功");window.location.href = "listitem.html";}},error:function(data){alert("請求失敗:"+data.responseText);}});return false;});});</script> </html>
register.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="F:/IdeaProjects/html/metronic_v4.7.5/_start/plugins/jquery-1.11.0.min.js" type="text/javascript"></script><link href="F:/IdeaProjects/html/metronic_v4.7.5/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link/><link href="F:/IdeaProjects/html/metronic_v4.7.5/theme/assets/global/css/components.css" rel="stylesheet" type="text/css"><link/><link href="F:/IdeaProjects/html/metronic_v4.7.5/theme/assets/pages/css/login-4.css" rel="stylesheet" type="text/css"><link/></head><body class="login"><div class="content"><h3 class="form-title"> 用戶注冊 </h3><div class="form-group"><label class="#control-label">手機號:</label><div><input class="form-control" type="text" placeholder="手機號" name="telphone" id="telphone"></div></div><div class="form-group"><label class="#control-label">驗證碼:</label><div><input class="form-control" type="text" placeholder="驗證碼" name="otpCode" id="otpCode"></div></div><div class="form-group"><label class="#control-label">用戶名:</label><div><input class="form-control" type="text" placeholder="用戶名" name="name" id="name"></div></div><div class="form-group"><label class="#control-label">性別:</label><div><input class="form-control" type="text" placeholder="性別" name="gender" id="gender"></div></div><div class="form-group"><label class="#control-label">年齡:</label><div><input class="form-control" type="text" placeholder="年齡" name="age" id="age"></div></div><div class="form-group"><label class="#control-label">密碼:</label><div><input class="form-control" type="password" name="encrptPassword" id="encrptPassword"></div></div><div class="form-actions"><button class="btn blue" id="register" type="submit">提交注冊</button><button class="btn green" id="login" type="submit">已有賬號</button></div></div></body><script>jQuery(document).ready(function(){$("#login").on("click",function(){window.location.href = "file:///F:/IdeaProjects/html/login.html";});//注冊請求$("#register").on("click",function(){var telphone = $("#telphone").val();var name = $("#name").val();var gender = $("#gender").val();var age = $("#age").val();var password = $("#encrptPassword").val();var otpCode = $("#otpCode").val();if(telphone == null || telphone == ""){alert("手機號不能為空");return false;}if(name == null || name == ""){alert("用戶名不能為空");return false;}if(password == null || password == ""){alert("密碼不能為空");return false;}if(age == null || age == ""){alert("年齡不能為空");return false;}if(gender == null || gender == ""){alert("性別不能為空");return false;}if(otpCode == null || otpCode == ""){alert("otp不能為空");return false;}$.ajax({type:"POST",contentType:"application/x-www-form-urlencoded",url:"http://127.0.0.1:8090/user/register",data:{"telphone": telphone,"otpCode": otpCode,"name": name,"gender": gender,"age": age,"encrptPassword": password,},xhrFields: {withCredentials: true},success:function(data){if(data.status == "fail"){alert("注冊失敗,原因:"+data.data.errMsg); }else{alert("用戶注冊成功");}},error:function(data){alert("請求失敗:"+data.responseText);}});return false;});});</script> </html>
index.html(模仿手機驗證碼注冊)
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><script src="metronic_v4.7.5/_start/plugins/jquery-1.11.0.min.js" type="text/javascript"></script><link href="metronic_v4.7.5/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link/><link href="metronic_v4.7.5/theme/assets/global/css/components.css" rel="stylesheet" type="text/css"><link/><link href="metronic_v4.7.5/theme/assets/pages/css/login.css" rel="stylesheet" type="text/css"><link/></head><body class="login"><div class="content"><h3 class="form-title"> 獲取otp信息 </h3><div class="form-group"><label class="#control-label">手機號:</label><div><input class="form-control" type="text" placeholder="手機號" name="telphone" id="telphone"></div></div><div class="form-actions"><button class="btn blue" id="getotp" type="submit">獲取otp短信</button></div></div></body><script>jQuery(document).ready(function(){//綁定opt的綁定事件$("#getotp").on("click",function(){var telphone = $("#telphone").val();console.log(telphone);if(telphone == null || telphone == ""){alert("手機號不能為空");return false;}$.ajax({type:"POST",contentType:"application/x-www-form-urlencoded",url:"http://127.0.0.1:8090/user/getopt",data:{"telphone":telphone,},xhrFields: {withCredentials: true},success:function(data){if(data.status == "success"){alert("opt已經發送到手機上");window.location.href = "file:///F:/IdeaProjects/html/register.html";//window.event.returnValue = false;//return false; }else{alert(data.data.errMsg);}},error:function(data){alert(data.responseText);}});return false;});});</script> </html>

=================================================================================================================================================
因為該項目是前后端分離,在Controller層要加一些注解,在html的ajax請求也要加一些請求格式。[結合上面代碼]

其中還有Exception自定義類、自定義返回類、Validator校驗等沒有貼出來,完整項目看這里

Controlerajax
@CrossOrigin(allowCredentials = “true”, allowedHeaders = “*”)xhrFields: {withCredentials: true},
consumes = {CONTENT_TYPE_FORMED}contentType:“application/x-www-form-urlencoded”

界面展示

idea控制臺

輸入otp,以及其他相關信息

總結

以上是生活随笔為你收集整理的SpringBoot学习-用户注册登录的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。