基于SpringBoot+Ajax的表单校验功能（待改进）

基于SpringBoot+Ajax的表单校验功能

（自尝试）根据所学自己尝试完成的功能，不代表最终的版本

• 目前觉的此方法效率会很低、待改进
• Ajax、lombok、SpringBoot

数据库

目录结构

依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.py</groupId>
    <artifactId>CGB-AJAX-02</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>CGB-AJAX-02</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

配置文件

spring.main.banner-mode=off

server.port=80
server.servlet.context-path=/

spring.datasource.url=jdbc:mysql://localhost:3306/mysql1?serverTimezone=GMT%2B8&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root

mybatis.mapper-locations=classpath://mapper/*/*.xml

logging.level.com.py=debug

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/pages/
spring.thymeleaf.suffix=.html

controller

package com.py.ajax.controller;

import java.util.ArrayList;
import java.util.List;

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.ResponseBody;

import com.py.ajax.pojo.Student;
import com.py.ajax.service.StudentService;

/**
 * @author WL
 * @version 创建时间：2020-9-3 9:03:05
 * @Description 类描述
 */
@Controller
@RequestMapping("/")
public class AjaxController {
    // 用于保存数据库中的数据
    List<String> names = new ArrayList<String>();
    
    @Autowired
    private StudentService studentService;

    @RequestMapping("indexPage")
    public String inIndex() {
        return "index";
    }

    // index
    @ResponseBody
    @RequestMapping("ajax")
    public String doAjax() {
        return "Ajax Page";
    }
    
    // 进入index2.html
    @RequestMapping("index2")
    public String inIndex2() {
        return "index2";
    }
    
    // 检查输入的信息是否已经存在
    @ResponseBody
    @RequestMapping("ajax2")
    public String doCheck(String name) {
        //为了保证每次遍历时，集合中数据都和数据库保持一致，先清空
        names.clear();
        // 把从数据库中获取的信息遍历保存在names集合中
        for (Student stu : studentService.findName()) {
            names.add(stu.getName());
        }
        // 判断数据在数据库中是否存在，或者输入是否为空
        if (names.contains(name) || name.length() <= 0) {
            return name + "已存在或姓名不能为空";
        } else {
            return name + "不存在，可以保存";
        }

    }
    
    // 保存输入的信息
    @RequestMapping("doSave")
    public String doSave(Student stu, String name) {
        names.clear();
        // 效率很低，目前的方法
        // 把从数据库中获取的信息遍历保存在names集合中
        for (Student stu2 : studentService.findName()) {
            names.add(stu2.getName());
        }
        // 判断
        if (names.contains(name) || name.length() <= 0) {
            return "index2";
        } else {
            stu.setName(name);
            studentService.saveStu(stu);
            return "index2";
        }
    }
}

dao

package com.py.ajax.dao;

import java.util.List;

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import com.py.ajax.pojo.Student;

/**
* @author WL
* @version 创建时间：2020-9-3 10:07:55
* @Description 类描述
*/
@Mapper
public interface StudentMapper {
    @Select("select * from stu ")
    List<Student> findName();
    
    @Insert("insert into stu value(null,#{name})")
    int saveStu(Student stu);

}

pojo

package com.py.ajax.pojo;

import lombok.Data;

/**
* @author WL
* @version 创建时间：2020-9-3 10:06:22
* @Description 类描述
*/
@Data
public class Student {
    private Integer stu_id;
    private String name;
    
}

service

package com.py.ajax.service;

import java.util.List;

import com.py.ajax.pojo.Student;

/**
* @author WL
* @version 创建时间：2020-9-3 10:07:36
* @Description 类描述
*/
public interface StudentService {
    
    List<Student> findName();

    int saveStu(Student stu);
}

serviceImpl

package com.py.ajax.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.py.ajax.dao.StudentMapper;
import com.py.ajax.pojo.Student;
import com.py.ajax.service.StudentService;

/**
* @author WL
* @version 创建时间：2020-9-3 10:18:05
* @Description 类描述
*/
@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper studentMapper;
    
    @Override
    public  List<Student> findName() {
        return studentMapper.findName();
    }

    @Override
    public int saveStu(Student stu) {
        studentMapper.saveStu(stu);
        return 0;
    }

}

index2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
#ROWid {
    color: red;
}
</style>

</head>
<body>
    <h1>Ajax Page</h1>

    <fieldset>
        <!-- 对页面进行分组设计 -->
        <legend>Ajax 表单请求(数据库验证)</legend>
        <form action="doSave">
            <input type="text" name="name" id="inId" onblur="Check()" onfocus="Clear()">
            <button onclick="doSave()">SAVE</button>
            <span id="resultId"></span>
            <div id="ROWid"></div>
            
        </form>
    </fieldset>
    <script type="text/javascript">
        function Clear() {
            document.getElementById("ROWid").innerHTML = "";
        }
        // 检查是否存在
        function Check() {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("ROWid").innerHTML = xhr.responseText;
                }
                ;
            };

            var name = document.getElementById("inId").value;

            xhr.open("GET", "ajax2?name=" + name, true);
            xhr.send();
        }

        // 保存
        function doSave() {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xht.status == 200) {
                    document.getElementById("resultId").innerHTML = xhr.responseText;
                }
                var name = document.getElementById("inId").value;
                xhr.open("POST","doSave", true);
                xhr.setRequestHeader("Content-Type",
                        "application/x-www-form-urlencoded");
                xhr.send("name="+name);
            }
        }
    </script>

</body>
</html>

结果