本文共 5281 字，大约阅读时间需要 17 分钟。

Springboot项目使用AJAX实现前端发送数据后台查询数据库并进行判断实现登录功能！

一，功能实现简介 从标题就能知道我们需要实现的是前端页面通过ajax发送数据到后台，然后后台进行逻辑处理并返回验证数据，这时前端判断返回的验证数据，做出相应的动作。

二，实现登录展示，先看效果再看具体代码实现

此时我的数据库UserInfo表中的数据，就只有一个，我们就只用这个测试。 1,用户输入数据与数据库中一致 此时输入用户名：gan 密码：123 登录成功 并返回到index.html 2，用户输入与数据库中不一致 这里用 用户名：gan 密码：12 举例，当然可以随便输入的 此时控制台还会打印提示，因为设置的

三，前端代码

这里分成HTML，js代码，因为我是分开写的，毫无保留的分享，啊哈哈 HTML

			
   				
   				
   				
   
			
    
登录
			
    				
     
					
      					
      				
     
				
     
					
      					
      				
     
				
     			
     				
     				
     没有？注册				
     找回密码			
    		
   
	

//登录function login() {	// alert("hello");	// var username = $("#username").val();	var username =document.getElementById('username').value;	// alert(username.id)	if(null == username || "" == username) {		alert("请输入用户名");		return;	}	// var pwd = $("#password").val();	var password =document.getElementById('password').value;	if(null == password || "" == password) {		alert("请输入密码");		return;	}	//调用登录接口	$.ajax({	url : "http://localhost:8082/userLogin",	type : "POST",	data : {		"username":username,		"password":password	},	dataType : "json",//后台返回来的数据类型	// ContentType: "application/json;charset=UTF-8",	success : function(data) {		//后台返回数据		if (data.status == "ok") {			alert(data.message);			window.location.href = "index.html";		}		else {			alert("用户名或密码错误，请仔细检查~~");    //登录失败		}	},	error:function (errorThrown) {		alert("用户名或密码错误！")	}});}

四，后台代码

pojo实体类

package com.springboot.springboot.pojo;import javax.persistence.*;import java.time.LocalDateTime;/** * @author ganxiang * IDE      IntelliJ IDEA * @project_name and filename Springboot UserInfo * @date 2020/04/08 0008 14:02 */@Entity@Table(name = "UserInfo")public class UserInfo {
       @Column(length = 16)    private  String userName;    @Column(length = 16)    private String password;    @Id    @GeneratedValue    private Integer id;//唯一标识符，自增    @Column(columnDefinition = "timestamp default current_timestamp",insertable = false,updatable = false)    private LocalDateTime insertTime;    @Column(columnDefinition = "timestamp default current_timestamp  on update current_timestamp",insertable = false,updatable = false)    private LocalDateTime updateTime;    public String getUserName() {
           return userName;    }    public String getPassword() {
           return password;    }    public Integer getId() {
           return id;    }    public void setUserName(String userName) {
           this.userName = userName;    }    public void setPassword(String password) {
           this.password = password;    }    public void setId(Integer id) {
           this.id = id;    }}

dao层

package com.springboot.springboot.dao;import com.springboot.springboot.pojo.UserInfo;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.stereotype.Repository;@Repositorypublic interface UserDao extends JpaRepository
   
     {
       //定义通过用户名密码查询数据    public UserInfo findByUserNameAndPassword(String username,String password);}
   

service层

package com.springboot.springboot.service;import com.springboot.springboot.dao.UserDao;import com.springboot.springboot.pojo.UserInfo;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class UserServiceImpl {
       @Autowired    UserDao userDao;    public UserInfo getUser(String name,String pwd){
           return userDao.findByUserNameAndPassword(name,pwd);    }}

controller层

package com.springboot.springboot.controller;import com.springboot.springboot.pojo.UserInfo;import com.springboot.springboot.service.UserServiceImpl;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import java.util.Map;import com.alibaba.fastjson.JSON;/** * @author ganxiang * IDE      IntelliJ IDEA * @project_name and filename Springboot UserController * @date 2020/04/08 0008 14:15 */@Controllerpublic class UserController {
       @Autowired    UserServiceImpl userService;    @RequestMapping("/userLogin")    @ResponseBody    public String userLogin(HttpServletRequest request, HttpSession session, @RequestParam Map
   
     parameter) {
           //1，获取前端发送来的数据        String name = request.getParameter("username");        String pwd = request.getParameter("password");        System.out.println(name + ":" + pwd);        try {
               //2，通过前端参数来查询用户是否存在            UserInfo user = userService.getUser(name, pwd);            System.out.println(user.toString());            //3,用户存在对返回的验证数据处理            if (user != null) {
                   session.setAttribute("userInfo", user);                parameter.put("message", "欢迎登录");                parameter.put("status", "ok");            }        } catch (Exception e) {
               //3,用户不存在对返回的验证数据处理            System.out.println("用户名或密码错误~,请仔细检查哟~~");            parameter.put("message", "用户名或密码错误");            parameter.put("status", "no");        }        //4,将验证数据返回给前端        return JSON.toJSONString(parameter);    }}
   

转载地址：http://feqzi.baihongyu.com/