一、前言

本系列文章是构建一个登陆系统，主要使用SpringBoot框架和前端的ajax请求。在文章中，会分享完成的顺序以及代码。本文章不会提供Maven的搭建教程，以及各种依赖项的配置，会提供相关的参考文章。本文会将从前端和后端两个部分分别讲解。

二、准备

实例开发的环境：

1.idea2022.3.1专业版

2.jdk17

3.maven3

4.mysql8.0

在开始实例之前，需要有以下准备：

1.项目的创建：

https://blog.csdn.net/weixin_51309915/article/details/123349773

需要注意的是，最好是配置自己的镜像仓库，不然下载依赖的时候会很慢。如何配置就不细说了，上链接。

https://www.cnblogs.com/Eastry/p/12795238.html

三、前端的实现

由于时间的关系，没有实现注册的相关操作。首先是前端界面的实现，大家也可以找自己喜欢的界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>

这段代码主要呈现css样式。

<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">Login</div>
        <div class="form-wrapper">
            <form id="loginform" name="wrapper" action="#" method="post" onsubmit="return false">
                <input type="text" name="username" placeholder="username" class="input-item">
                <input type="password" name="password" placeholder="password" class="input-item">
                <input type="button" class="btn" onclick="getInputVal()" value="login">
            </form>
<!--            <p class="alert">cap</p>-->
        </div>
        <div class="msg">
            没有该系统的用户？
            <a href="#">注册</a>
        </div>
    </div>
</div>

这段代码使用了form表单，为了能够接收到用户输入的登陆信息，并且弃用表单提交，原因是表单提交会使页面跳转，给用户带来不好的体验。而使用ajax请求能很好的解决这一点。

<script  type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">
</script>
<script>
    function getInputVal(){
        var params = $("#loginform").serializeArray();
        var result = {};
        $.each(params, function(index, value) {
            result[value.name] = value.value;
        })
        // console.log(JSON.stringify(result))
        $.ajax({
            contentType:"application/json;charset=UTF-8",
            traditional:true,
            type:"POST",
            async: true,
            dataType:"json",
            url:"http://localhost:8080/index",
            data:JSON.stringify(result),
            success: function (jr){
                // var obj= JSON.parse(data);
                // alert(obj.result);
                console.log(jr)
            },
            error: function (data1){
                // alert(data1.stringify())
            }
        })
    }
</script>
</body>
</html>

请求类型为POST，发送类型为JSON字符串，需要注意的是，发送类型一定要定义为

contentType:"application/json;charset=UTF-8"，否则，后端无法接收数据！！

将三块代码拼接在一起就是完整的前端代码。

四、后端的实现

1.接收数据

由于前端发送的是JSON字符串，后端接收时必须使用@ResponseBody和@RequestBody注解，

并且要使用JAVA类进行封装，可以自定义USER类，也可以使用MAP类，但要注意自定义类的属性要与JSON字符串的属性个数一致，不然会接收不到数据。

2.数据库查询

使用了mybatis，mybatis是公司项目使用最多的mysql数据库框架，比JDBC更简洁、更快、更安全。附上配置链接MyBatis：一文带你全面了解 - 知乎，至于数据库如何创建，相信大家是有基础的哈哈哈。

需要在UserMapper中定义以下sql语句：

    <select id="findByusername" parameterType="String" resultType="String">
        select nullif(password,0) from tb_user where username=#{name}
    </select>

使用nullif()，是为了防止查询为空时报错，阻止程序正常运行。

完成配置以后，可以使用Test类进行查询测试。

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.junit.Test;
import pojo.User;
import java.io.IOException;
import java.io.Reader;

public class UserTest {
    @Test
    public void userFindByTest() {
        String resources = "MybatisConfig.xml";
        Reader reader = null;
        try {
            reader = Resources.getResourceAsReader(resources);
        }catch (IOException e) {
            e.printStackTrace();
        }
        SqlSessionFactory sqlMapper = new SqlSessionFactoryBuilder().build(reader);
        SqlSession session = sqlMapper.openSession();
        String upassword = session.selectOne("findByusername","kz");
        System.out.println(upassword);
        session.close();
    }
}

注意类名的修改。测试成功后，直接将配置粘贴复制到contorll类中。

String resources = "MybatisConfig.xml";
Reader reader = null;
try {
    reader = Resources.getResourceAsReader(resources);
}catch (IOException e) {
    e.printStackTrace();
}
SqlSessionFactory sqlMapper = new SqlSessionFactoryBuilder().build(reader);
SqlSession session = sqlMapper.openSession();

接下来就使用JAVA语言中的分支结构，进行对登陆数据的判断。

先判断输入是否为空：

if (Objects.equals(username, "") || Objects.equals(password, "")) {
            json.put("result","error: haven't username or password");
            System.out.println(json);
            return json;
}

再进行查询，有三种结果，分别是无用户名，密码错误，登陆成功。

        else{
            String upassword = session.selectOne("findByusername",username);
            if(upassword==null){
                json.put("result","error: don't find username");
            }else if (upassword.equals(password)){
                json.put("result","success: login success");
            }else json.put("result","error: password error");
            System.out.println(json);
            return json;
        }

由于需要返回给前端一个JSON数据，还需要在MAVEN中配置JSON相关的依赖。可参考以下文章

Maven项目使用JSON需要的依赖包_maven org.json-CSDN博客

附上完整的contorll代码：

package com.example.gc_web.contorller;

import com.fasterxml.jackson.databind.util.JSONPObject;
import jakarta.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.web.bind.annotation.*;
import pojo.User;

import java.io.IOException;
import java.io.Reader;
import java.util.Map;
import java.util.Objects;

@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
@RestController
@CrossOrigin(origins = "*")

public class login_contorll {
    @RequestMapping(path = "/index",method = RequestMethod.POST)
    @ResponseBody
    public JSONObject login(@RequestBody Map map){
//        System.out.println(map.get("username"));//hahah
//        System.out.println(map.get("password"));//123456
        String username= (String) map.get("username");
        String password= (String) map.get("password");
        JSONObject json = new JSONObject();
        String resources = "MybatisConfig.xml";
        Reader reader = null;
        try {
            reader = Resources.getResourceAsReader(resources);
        }catch (IOException e) {
            e.printStackTrace();
        }
        SqlSessionFactory sqlMapper = new SqlSessionFactoryBuilder().build(reader);
        SqlSession session = sqlMapper.openSession();
        if (Objects.equals(username, "") || Objects.equals(password, "")) {
            json.put("result","error: haven't username or password");
            System.out.println(json);
            return json;
        }
        else{
            String upassword = session.selectOne("findByusername",username);
            if(upassword==null){
                json.put("result","error: don't find username");
            }else if (upassword.equals(password)){
                json.put("result","success: login success");
            }else json.put("result","error: password error");
            System.out.println(json);
            return json;
        }
//        return new JSONObject();
    }
}

附上Application代码：

package com.example.gc_web;

import com.example.gc_web.contorller.login_contorll;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.web.bind.annotation.*;

@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
@RestController

public class GcWebApplication {

    public static void main(String[] args) {
        SpringApplication.run(login_contorll.class,args);
    }


}

五、总结

这个案例在只有java基础下，做了5天之久，对于SpringBoot下各种框架的使用还不够熟练，还需要多加的练习。做这个案例的初衷是为了实现一个基于深度学习的垃圾分类系统，所以前后端的开发并不是我主要的任务，如果本文章出现原则上的错误，希望各位大佬指导指导。

总结了以下难点：

1.ajax请求的发送与接收

2.mybatis的配置以及使用

后续文章将对登陆系统的注册部分进行完善。

# spring boot # mybatis # json # javascript # ajax # mvc # intellij-idea
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

AI人工智能——详解人工智能算力高质量发展评估体系报告【附全文阅读】

avatar 2048 AI社区
cover

Vibe Coding 时代：我的思考与程序员的未来之路

avatar 2048 AI社区

我与AI: 盘一盘我是怎么在项目开发中应用Agent Skills的

本文总结了AI Agent Skills在2025年开发实践中的应用价值与设计理念。Skills通过标准化封装专业知识，实现专家级稳定输出、组织知识资产化、跨平台复用和复杂任务处理。其核心创新是渐进式披露机制：元数据层(100token/技能)始终加载，主体指令层(1000-5000token)触发加载，附加资源层按需调用。这种设计显著优化了上下文管理效率，相比传统MCP方式可减少95%初始tok

avatar 2048 AI社区