原生Ajax+springBoot實現用戶登錄

本文轉載自查看原文 2019-06-09 10:16 1691 spring/ Java

思路：用戶輸入登錄信息——信息傳到后台——數據庫查詢——比較查詢結果——返回登錄信息（成功/失敗）

html頁面代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>login</title>
 6     <script type="text/javascript" src="http://localhost:8080/ajax.js"></script>
 7 </head>
 8 <body>
 9 <form>
10     <span>用戶ID：</span><input style="margin:2px;" id="id" name="id"><br>
11     <span>密碼：</span><input type="password" style="margin:2px;" id="password" name="password"><br>
12     <button style="margin:2px;" type="button" onclick="sumbit_name_sex()">登錄</button>&nbsp;
13     <button style="margin:2px;" type="reset">取消</button><br>
14 </form>
15 </body>
16 </html>

外部ajax.js代碼：

 1 function sumbit_name_sex() {
 2     var id=document.getElementById("id").value;
 3     var password=document.getElementById("password").value;
 4     var user={
 5         id:id,
 6         password:password,
 7     }
 8     //步驟一:創建異步對象s
 9     var ajax = new XMLHttpRequest();
10     //步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
11     ajax.open("post", "http://localhost:8080/login",true);
12     ajax.setRequestHeader("Content-type","application/json; charset=utf-8");
13     //步驟三:發送請求
14     ajax.send(JSON.stringify(user));
15     //步驟四:注冊事件 onreadystatechange 狀態改變就會調用
16     ajax.onreadystatechange = function () {
17         if (ajax.readyState == 4 && ajax.status == 200) {
18             //步驟五 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的
19             console.log(ajax.responseText);//輸入相應的內容
20             if(ajax.responseText.length>=3){
21                 alert("登錄成功");
22             }else{
23                 alert("登錄失敗");
24             }
25             //window.location.href="";
26         }else{
27 
28         }
29     }
30 }

后台controller層的代碼：

 1 package com.jhc.taskmanage.controller;
 2 
 3 import com.alibaba.fastjson.JSONObject;
 4 import com.jhc.taskmanage.model.User;
 5 import com.jhc.taskmanage.service.UserService;
 6 import org.springframework.beans.factory.annotation.Autowired;
 7 import org.springframework.stereotype.Controller;
 8 import org.springframework.web.bind.annotation.RequestMapping;
 9 import org.springframework.web.bind.annotation.RestController;
10 
11 import javax.servlet.http.HttpServletRequest;
12 import java.io.InputStreamReader;
13 import java.util.List;
14 
15 @Controller
16 @RestController
17 public class UserController {
18 
19     @Autowired
20     private UserService userService;
21 
22     @RequestMapping("/login")
23     public List<User> login(HttpServletRequest request){
24         InputStreamReader inputStreamReader= null;
25         String json="";
26         try{
27             inputStreamReader=new InputStreamReader(request.getInputStream(),"utf-8");
28             char[] buff=new char[1024];
29             int length=0;
30             while((length=inputStreamReader.read(buff))!=-1){
31                 String json_temp=new String(buff,0,length);
32                 json+=json_temp;
33             }
34         }catch (Exception ex){
35 
36         }
37         JSONObject jsonObject=JSONObject.parseObject(json);
38         String id=(String)jsonObject.get("id");
39         String password=(String)jsonObject.get("password");
40         return userService.login(id,password);
41     }
42 
43 }

service層:

 1 package com.jhc.taskmanage.service;
 2 
 3 
 4 import com.jhc.taskmanage.model.User;
 5 
 6 import java.util.List;
 7 
 8 public interface UserService {
 9 
10     List<User> login(String id,String password);
11 }

 1 package com.jhc.taskmanage.service.impl;
 2 
 3 import com.jhc.taskmanage.dao.UserDao;
 4 import com.jhc.taskmanage.model.User;
 5 import com.jhc.taskmanage.service.UserService;
 6 import org.springframework.beans.factory.annotation.Autowired;
 7 import org.springframework.stereotype.Service;
 8 
 9 import java.util.List;
10 
11 @Service
12 public class UserServiceImpl implements UserService {
13 
14     @Autowired
15     private UserDao userDao;
16 
17 
18     @Override
19     public List<User> login(String id,String password){
20         return userDao.login(id,password);
21     }
22 }

dao層：

 1 package com.jhc.taskmanage.dao;
 2 
 3 
 4 import com.jhc.taskmanage.model.User;
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.stereotype.Repository;
 7 
 8 
 9 import java.util.List;
10 
11 
12 @Repository
13 public interface UserDao {
14 
15     List<User> login(String id,String password);
16 }

 1 package com.jhc.taskmanage.dao.impl;
 2 
 3 import com.jhc.taskmanage.dao.UserDao;
 4 import com.jhc.taskmanage.model.User;
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.jdbc.core.JdbcTemplate;
 7 import org.springframework.stereotype.Repository;
 8 
 9 import java.util.ArrayList;
10 import java.util.List;
11 import java.util.Map;
12 
13 @Repository
14 public class UserDaoImpl implements UserDao {
15 
16     @Autowired
17     private JdbcTemplate jdbcTemplate;
18 
19     @Override
20     public List<User> login(String id,String password){
21         String sql="select id, name, sex, age from user where id='"+id+"' and password='"+password+"';";
22         List<Map<String,Object>> list=jdbcTemplate.queryForList(sql);
23         List<User> userArrayList=new ArrayList<>();
24         for(Map<String,Object> map:list){
25             User user=new User();
26             user.setId(map.get("id").toString());
27             user.setName(map.get("name").toString());
28             user.setSex(map.get("sex").toString());
29             user.setAge(Integer.valueOf(map.get("age").toString()));
30             user.setPassword("***********************");
31             userArrayList.add(user);
32         }
33         return userArrayList;
34     }
35 
36 }

model層：

 1 package com.jhc.taskmanage.model;
 2 
 3 import org.springframework.stereotype.Component;
 4 
 5 @Component
 6 public class User {
 7     private String id;
 8     private String name;
 9     private String sex;
10     private int age;
11     private String password;
12 
13     public User(){
14 
15     }
16 
17     public String getId() {
18         return id;
19     }
20 
21     public void setId(String id) {
22         this.id = id;
23     }
24 
25     public String getName() {
26         return name;
27     }
28 
29     public void setName(String name) {
30         this.name = name;
31     }
32 
33     public String getSex() {
34         return sex;
35     }
36 
37     public void setSex(String sex) {
38         this.sex = sex;
39     }
40 
41     public int getAge() {
42         return age;
43     }
44 
45     public void setAge(int age) {
46         this.age = age;
47     }
48 
49     public String getPassword() {
50         return password;
51     }
52 
53     public void setPassword(String password) {
54         this.password = password;
55     }
56 }

spring boot啟動類：

 1 package com.jhc.taskmanage;
 2 
 3 import org.springframework.boot.SpringApplication;
 4 import org.springframework.boot.autoconfigure.SpringBootApplication;
 5 
 6 @SpringBootApplication
 7 public class TaskmanageApplication {
 8 
 9     public static void main(String[] args) {
10         SpringApplication.run(TaskmanageApplication.class, args);
11     }
12 
13 }

配置文件application.properties:

 1 server.port=8080
 2 server.servlet.context-path=/
 3 #spring.mvc.static-path-pattern=/
 4 spring.resources.static-locations=classpath:/resources/,classpath:/static/,classpath:/js,classpath:/css,classpath:/image
 5 spring.mvc.view.prefix=/WEB-INF/jsp/
 6 spring.mvc.view.suffix=.jsp
 7 spring.datasource.url=jdbc:mysql://localhost:3306/myproject?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
 8 spring.datasource.username=root
 9 spring.datasource.password=mysql
10 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
11 
12 #spring.datasource.max-idle=10
13 #spring.datasource.max-wait=10000
14 #spring.datasource.min-idle=5
15 #spring.datasource.initial-size=5
16 
17 #server.session.timeout=10
18 server.tomcat.uri-encoding=UTF-8

運行截圖：

歡迎糾錯，不喜勿噴

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Django 【第十七篇】Ajax實現用戶登錄 SpringBoot中用SpringSecurity實現用戶登錄並返回其擁有哪些角色 django實現用戶登錄 python實現用戶登錄 ajax+springboot傳遞多層Map ajax實現用戶注冊 python實現用戶登錄界面 Django實現用戶登錄注冊 JSP實現用戶登錄樣例使用jsp實現用戶登錄請求