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

最新推荐文章于 2023-09-20 17:45:56 发布

爱吃虾的鱼

最新推荐文章于 2023-09-20 17:45:56 发布

阅读量2.4k

点赞数 4

分类专栏： Java 文章标签：数据库 ajax java web

本文链接：https://blog.csdn.net/qq_45058254/article/details/105407479

版权

Java 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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

一，回顾
1，如何快速搭建一个Springboot Web项目：请点击这里
2，如何通过ajax发送数据实现后台数据库查询数据，并进行登录功能：请点击这里

二，功能实现简介

从标题就能知道，我们需要实现的是前端页面通过ajax发送数据到后台，然后后台进行数据库查询并进行逻辑判断用户是否存在，如果存在则不能进行注册并返回数据，不存在进行注册并返回数据，最后返回验证数据给前端，这时前端收到判断返回的验证数据，做出相应的动作（页面的跳转）。

三，实现注册展示，先看效果再看具体代码实现

1，此时我们的数据库User_Info表中数据为这样的，如下图
在这里插入图片描述
2，验证表中存在数据不能进行注册，此时输入用户名：gan 密码：123，不能注册

同时控制台打印

3，验证表中不存在数据不能进行注册，这里以输入用户名：jack 密码：123456 为例，注册成功

控制台打印信息
在这里插入图片描述
此时再来刷新我们的数据库中表的数据，看数据已经注册到我们的表中了

四，看我们的实现代码，分前端代码和后端代码
1，前端代码
HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/style.css">
		<title>注册</title>
		<script src="js/register.js"></script>
		<script src="http://code.jquery.com/jquery-latest.js"></script><!--支持ajax的文件库-->
	</head>
	<body class="registerbody">
		<div class="box1">
			<h3>注册</h3>
			<from action="submit">
<!--				<div >请输入账号：<input type="text" id="account" /></div>-->
				<div>请输入账号：<input type="text"  id="username" /></div>
				<br>
				<div >请输入密码：<input type="password" id="password" /></div>
				<br>
				<div>请确定密码：<input type="password"  id="pwd" /></div>
				<br>
<!--				<div>请输入姓名：<input type="text"  id="username" /></div>-->
<!--				<br>-->
<!--				<div>请输入手机：<input type="text" id="phone" /></div>-->
<!--				<br>-->
				<input type="button" onclick="register()" value="注册" />
				<!-- <div><input type="button" οnclick="register()"  value="注册"/></div >-->
			
		</div>
	</body>
</html>

js代码

function register() {
	/
	var username =document.getElementById('username').value;
	if(null == username || "" == username) {
		alert("请输入用户名");
		return;
	}
	var password =document.getElementById('password').value;
	if(null == password || "" == password) {
		alert("请输入密码");
		return;
	}
	var pwd =document.getElementById('pwd').value;
	if(null == pwd || "" == pwd) {
		alert("请确定密码");
		return;
	}
	$.ajax({
		url : "/userRegister",
		type : "POST",
		data :{
			"username":username,
			"password": password,
			"pwd":pwd},
		dataType : "json",
		success : function(data) {
			//后台返回数据
			if (data.status == "ok") {
				alert(data.message);   //注册成功
				window.location.href = "login.html";
			}else {
				alert("注册失败");   
			}

		},
		error:function (res) {
			alert("请求错误！",console.res)
		}

	});
}

2,后台代码

pojo实体类和上篇一样的，不展示了，上篇链接在这里：看这篇的pojo实体类

dao层

package com.springboot.springboot.dao;

import com.springboot.springboot.pojo.UserInfo;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;

@Repository
public interface UserDao extends JpaRepository<UserInfo, Integer> {
    //定义通过用户名密码查询数据
    public UserInfo findByUserNameAndPassword(String username,String password);
    //定义通过用户查询
    public List<UserInfo> findByUserName(String username);

}

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;
import java.util.List;

@Service
public class UserServiceImpl {
    @Autowired
    UserDao userDao;
    //实现通过用户名密码查询数据
    public UserInfo getUser(String name,String pwd){
        return userDao.findByUserNameAndPassword(name,pwd);
    }
    //实现通过用户名查询
    public List<UserInfo> getUserName(String name){
        return userDao.findByUserName(name);
    }

}

最后看我们的controller层

这里我简单的介绍具体控制层的逻辑
1，获取用户发送来的数据
2，通过用户名查询数据库中表是否存在该用户名，这里用户名在表中是唯一的，存在则不能注册，不存在则可以注册。在通过用户名查询用户的时候，我用列表返回，通过返回列表的是否为空，从而判断该用户是否在表中，这里进行数据库交互的返回值非常重要，写数据访问时一定要向好返回值的类型。当然，我这里用的是列表返回可能效率不是那么的好，还有许多返回方法的。
3，通过列表判断用户是否有注册的行为，并将返回数据以josn格式返回。
4，前端做出判断，返回信息给用户。
5，over

package com.springboot.springboot.controller;

import com.springboot.springboot.dao.UserDao;
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.List;
import java.util.Map;
import com.alibaba.fastjson.JSON;
import sun.plugin2.message.JavaReplyMessage;

/**
 * @author ganxiang
 * IDE      IntelliJ IDEA
 * @project_name and filename Springboot UserController
 * @date 2020/04/08 0008 14:15
 */

@Controller
public class UserController {
    @Autowired
    UserDao userDao;
    @RequestMapping("/userRegister")
    @ResponseBody
    public  String userRegister(HttpServletRequest request, Map<String, String> parameter,HttpSession session){
        String name = request.getParameter("username");
        String password = request.getParameter("password");
        String pwd =request.getParameter("pwd");
        System.out.println(name+":"+password+":"+pwd+password.equals(pwd));
        UserInfo user =new UserInfo();
        List<UserInfo> list = userService.getUserName(name);
        System.out.println("查询的用户名为"+user.toString());
        if (list.size()==0){
            user.setUserName(name);
            user.setPassword(password);
            if (password.equals(pwd)) {
                session.setAttribute("userInfo", user);
                userDao.save(user);
                parameter.put("message", "注册成功");
                parameter.put("status", "ok");
                System.out.println("用户不存在，用户注册成功");
                return JSON.toJSONString(parameter);
            } else {
                parameter.put("message", "注册失败，用户输入密码与确定密码不同");
                parameter.put("status", "no");
                System.out.println("用户输入密码与确定密码不同，请重新输入");
                return JSON.toJSONString(parameter);
            }
        }
        else {
            parameter.put("message", "注册失败，用户存在");
            parameter.put("status", "no");
            System.out.println("用户存在");
            return JSON.toJSONString(parameter);
        }
    }

}

如果觉得有帮助的，点个赞再走呗🤞🤞🤞

爱吃虾的鱼

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
11
评论
Springboot WEB项目使用AJAX前端发送数据后台查询数据库并进行判断实现注册并登录功能！

从标题就能知道，我们需要实现的是前端页面通过ajax发送数据到后台，然后后台进行数据库查询并进行逻辑判断用户是否存在，如果存在则不能进行注册并返回数据，不存在进行注册并返回数据，最后返回验证数据给前端，这时前端收到判断返回的验证数据，做出相应的动作（页面的跳转）
复制链接

扫一扫