初識登錄
登錄的應用場景
登錄比較常見，大多數網站都有登錄的操作。然后登錄本身也從簡單到復雜有着漫長的發展歷史。本文記錄博主對登錄的應用場景的剖析，深究不在於學習如何實現，主要關注其編碼思想，過程中用到的技術，以及改進的可能。
搭建環境
本文使用SSM框架構建登錄的場景，網頁不采用jsp技術，而是用thymeleaf來構建模板。
-
簡單的網頁login.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>登錄</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- jquery --> <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script> <!-- jquery-validator --> <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script> <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script> </head> <body> <form name="loginForm" id="loginForm" method="post" style="width:30%; margin:0 auto;"> <h2 style="text-align:center; margin-bottom: 20px">用戶登錄</h2> <div> <div> <label>請輸入手機號碼</label> <div > <input id="mobile" name = "mobile" type="text" placeholder="手機號碼"/> </div> </div> </div> <div> <div> <label>請輸入密碼</label> <div> <input id="password" name="password" type="password" placeholder="密碼"/> </div> </div> </div> <div style="margin-top:40px;"> <div > <button type="submit" onclick="login()">登錄</button> </div> </div> </form> </body> <script> //此處增加驗證代碼 // function login(){ // $("#loginForm").validate({ // // submitHandler:function(form){ // doLogin(); // } // }); // } function login(){ $.ajax({ url: "/login/do_login", type: "POST", data:{ mobile:$("#mobile").val(), password: $("#password").val() }, success:function(data){ alert(data) //邏輯判斷代碼，暫時不寫 } }); } </script> </html>
網頁做了個及其簡陋的頁面，但對於登錄的邏輯判斷已然足夠。在springboot環境下，該html頁面一定要放在resource目錄下的templates子目錄下，才會被視圖解析器拿到。
-
搭建依賴包環境-pom文件
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.8.RELEASE</version> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--<dependency>--> <!--<groupId>org.mybatis.spring.boot</groupId>--> <!--<artifactId>mybatis-spring-boot-starter</artifactId>--> <!--<version>1.3.1</version>--> <!--</dependency>--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <!--<dependency>--> <!--<groupId>com.alibaba</groupId>--> <!--<artifactId>druid</artifactId>--> <!--<version>1.0.5</version>--> <!--</dependency>--> <!--<dependency>--> <!--<groupId>redis.clients</groupId>--> <!--<artifactId>jedis</artifactId>--> <!--</dependency>--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.38</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.6</version> </dependency> <!-- 參數校驗工具 --> <!--<dependency>--> <!--<groupId>org.springframework.boot</groupId>--> <!--<artifactId>spring-boot-starter-validation</artifactId>--> <!--</dependency>--> <!--<dependency>--> <!--<groupId>org.springframework.boot</groupId>--> <!--<artifactId>spring-boot-starter-amqp</artifactId>--> <!--</dependency>--> </dependencies>
這里主要導入spring相關的包，spring-boot-starter-web以及spring-boot-starter-thymeleaf，因為springboot可以一鍵搭建環境，此處暫時不做配置，如需配置，只需要在resource下創建application.yml文件即可。
-
創建實體類domain
對於登錄功能而言，需要的一定是一個用戶的實體類，因為我們網頁只有手機號和密碼兩個屬性，因此用戶實體類也只有這兩個屬性
public class Person { // @NotNull private String mobile; private String password; @Override public String toString() { return "Person{" + "mobile='" + mobile + '\'' + ", password='" + password + '\'' + '}'; } public String getMobile() { return mobile; } public void setMobile(String mobile) { this.mobile = mobile; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; }
}
實體類的屬性上可以添加驗證標簽，但現在先跳過。
-
創建springboot的啟動類
@SpringBootApplication public class MyApplication { public static void main(String[] args) { SpringApplication.run(MyApplication.class); } }
該類要放在所有類的父包之上，保證能掃描到所有的類。
-
創建LoginController類
@Controller
@RequestMapping("/login")
public class LoginController {
@RequestMapping("/to_login")
public String tologin(){
return "login";
}
@RequestMapping("/do_login")
@ResponseBody
public String dologin(HttpServletResponse response, Person person){
System.out.println(person);
return person.toString();
}
}
-
測試
做到這里，已經完成了SSM環境的搭建，啟動MyApplication類的main方法，springboot會自動的加載各種資源，並開啟tomcat。
打開瀏覽器，輸入網址：http://localhost:8080/login/to_login 即可跳轉到login.html頁面上
輸入手機號碼和密碼點擊登錄，實現登錄請求。
以上就是環境搭建的全過程
搭建完環境以后，會發現此刻點登陸按鈕，會在頁面彈出用戶的信息。基本的功能已經實現，假設現在已經做好了數據庫查詢的功能，則需要對controller類做進一步的改進，來實現真正的登陸操作
此時，需要對controller類中的response返回對象做一些要求，最好是帶有一定的規則約束，比如{code:xx,msg:xx,date:xx}這種類型。
-
創建Result<>類，泛型類
public class Result<T> { private Integer code; private String Msg; private T date; @Override public String toString() { return "Result{" + "code=" + code + ", Msg='" + Msg + '\'' + ", date=" + date + '}'; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } public String getMsg() { return Msg; } public void setMsg(String msg) { Msg = msg; } public T getDate() { return date; } public void setDate(T date) { this.date = date; } }
上述結果類的定義比較簡單，可以在后面逐漸完善
-
建立Service類，來提供登陸驗證的方法
因為之前沒有建立與數據庫的連接，因此，這里先模擬數據庫的連接。
@Service public class UserService { //1.登錄 public Result<Boolean> login(Person person){ Result<Boolean> re=new Result<Boolean>(); Person persondb=personByMobile(person.getMobile()); if(persondb==null){ re.setCode(0); re.setMsg("查無此人"); re.setDate(false); }else if(!persondb.getPassword().equals(person.getPassword())){ re.setCode(01); re.setMsg("密碼錯誤"); re.setDate(false); }else{ re.setCode(1); re.setMsg("登錄成功"); re.setDate(true); } return re; } //2.根據用戶手機查詢用戶 public Person personByMobile(String mobile){ Person person=new Person(); person.setMobile("123"); person.setPassword("123"); if(mobile.equals(person.getMobile())){ return person; }else { return null; } } }
以上代碼，仍然是一個比較簡單，只用來實現功能的代碼，后期需要不斷修改。
-
修改LoginController類如下：
@Controller @RequestMapping("/login") public class LoginController { @Autowired UserService userService; @RequestMapping("/to_login") public String tologin(){ return "login"; } @RequestMapping("/do_login") @ResponseBody public Result<Boolean> dologin(HttpServletResponse response, Person person){ System.out.println(person); Result<Boolean> result = userService.login(person); return result; } }
此時返回的數據data就是Result<Boolean>類型的數據格式。啟動項目，在瀏覽器中按F12對response回來的數據進行查看，但此時頁面已經刷新，無法看到，可以通過修改ajax的success處代碼，將code，msg。data都打印出來觀看。
以上，登錄的驗證功能用提升了一下。