SpringBoot教学资料4-SpringBoot简单增删改查（带前端）-526互联

最终样式：

增：

删：

改：

项目结构：

- springboot1.5.9以下兼容jdk1.7

- springboot2.x.x版本兼容jdk1.8

- springboot3.0及以上版本兼容jdk17

- springboot2.1之后的版本已经兼容JDK11

pom.xml:

<?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.7.13</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.bai</groupId>
    <artifactId>crudspringboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>crudspringboot</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-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.1</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.3.1</version>
            <scope>test</scope>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- tomcat 依赖包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <!--<scope>provided</scope>-->
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <!--<scope>provided</scope>-->
        </dependency>
        <!-- servlet 依赖包 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <!--<scope>provided</scope>-->
        </dependency>
        <!-- JSTL (JSP standard Tag Library) JSP 标准标签库 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

    </dependencies>

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

</project>

application.properties:

# 监听端口
server.port=8080

# Spring datasource配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456


# 视图层的配置
spring.mvc.view.prefix=WEB-INF/views/
spring.mvc.view.suffix=.jsp

#DispatcherServlet 的配置# 启动时 加载
spring.jersey.servlet.load-on-startup=1

# MyBatis的配置# Mapper文件的位置 * 所有
mybatis.mapper-locations=classpath:mapper/*.xml
# Model 层的配置 包
mybatis.type-aliases-package=com.bai.crudspringboot.model

user.jap:

<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<head>
    <title>用户列表</title>
</head>

<body>
<table border="1">
    <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Age</td>
        <td>删除</td>
        <td>修改</td>
    </tr>
    <c:forEach var="user" items="${users}">
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.age}</td>
            <td><a href='javascript:userDel("${user.id}")'> 删除 </a></td>
            <td><a href="updateview?id=${user.id}"> 修改 </a></td>
        </tr>
    </c:forEach>
</table>
<br />
<br />
<a href="addview"> 新增用户 addview </a>
<br />
<br />
<a href="addview2"> 新增用户2  addview2</a>
</body>
<script src="/asset/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    // JS 定义一个名为userDel的js方法，可传入参数id
    function userDel(id){
        $.ajax({
            // 请求方式 POST GET 与控制器的设置一致
            type : "POST",
            // 访问控制器的url
            url : "delete",
            //往控制器传入的参数，JSON居多，String
            data : {
                "id" : id
            },
            // 接收后台的数据类型 text json 和 控制器的 return 一致
            dataType : "text",
            //请求成功时
            success : function(message) {
                if (message == "ok"){
                    alert("删除成功");
                    location.href = "alluser";
                } else {
                    alert("删除失败");
                }
            },
            //请求失败时
            error : function(message) {
                alert("删除失败");
            }
        });
    }
</script>
</html>

addview.jsp

<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<head>
    <title>新增用户</title>
</head>
<body>
新增用户
<form id="userInfo" method="post">
    name: <input type="text" name="name" id="name"><br>
    age:  <input type="text" name="age" id="age"><br>
    <input type="button" id="commit"  value="提交">
</form>
</body>
<script src="/asset/js/jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        // # 之后的变量和 id="commit" 值一致 才可以绑定
        $("#commit").click(function () {
            //id="name" 找到的
            var name = $("#name").val();
            var age = $("#age").val();
            //debugger 调试使用
            $.ajax({
                type : "POST",
                url : "add",
                data : {
                    "name" : name,
                    "age" : age
                },
                // 接收后台的数据类型
                dataType : "text",
                // 请求成功
                success : function(message) {
                    if (message == "ok"){
                        alert("新增成功");
                        // 调用显示所有用户的控制器
                        location.href = "alluser";
                    } else {
                        alert(message);
                    }
                },
                //请求失败
                error : function(message) {
                    alert("新增失败");
                }
            });
        })
    })
</script>
</html>

updateview.jsp

<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<head>
    <title>修改用户</title>
</head>
<body>
修改用户
<form id="userInfo" method="post">
    id: <input type="text" name="id" id="id" value="${user.id}" disabled="disabled"><br>
    name: <input type="text" name="name" id="name" value="${user.name}"><br>
    age:  <input type="text" name="age" id="age" value="${user.age}"><br>
    <input type="button" id="commit"  value="更新用户">
</form>
</body>
<script src="/asset/js/jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        $("#commit").click(function () {
            var id = $("#id").val();
            var name = $("#name").val();
            var age = $("#age").val();
            $.ajax({
                type : "POST",
                url : "update",
                data : {
                    "id" : id,
                    "name" : name,
                    "age" : age
                },
                // 接收后台的数据类型
                dataType : "text",
                // 返回成功
                success : function(message) {
                    if (message == "ok"){
                        alert("修改成功");
                        // 调用显示所有用户的控制器
                        location.href = "alluser";
                    } else {
                       alert(message);
                    }
                },
                //失败
                error : function(message) {
                    alert("修改请求失败");
                }
            });
        })
    })
</script>
</html>

User.java:

package com.bai.crudspringboot.model;

// 和数据库的表设计、字段对应的
public class User {

    private String id;
    private String name;
    private int age;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

UserDao.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- namespace 包名+接口名 -->
<mapper namespace="com.bai.crudspringboot.dao.UserDao">
    <resultMap id="UserMap" type="com.bai.crud_springboot.model.User">
        <id column="id" javaType="String" property="id"/>
        <result column="name" javaType="String" property="name"/>
        <result column="age" jdbcType="INTEGER" property="age" />
    </resultMap>

    <!-- id = 接口文件的 方法名
    resultType 返回值类型 要与使用的对象一致
    -->
    <select id="select" resultType="com.bai.crudspringboot.model.User">
        SELECT * FROM user order by age
    </select>

    <!-- 增加用户
    parameterType 传入的参数类型
    因为MyBatis做了优化，以接口为准

    #占位符
    MySQL客户端的SQL语句
    insert into  `user` (`id`, `name`, `age`) values ('fa4f46','张三','23');
    需要改为
    insert into `user` (`id`, `name`, `age`) values (#{id},#{name},#{age});

    'fa4f46' 改为 #{id}
    特定的值  改为 #{id}

    规范  #{类的变量名称}
    -->
    <insert id="addUser" parameterType="com.bai.crudspringboot.model.User" >
        insert into `user` (`id`, `name`, `age`)
        values (#{id},#{name},#{age});
    </insert>

    <!-- 删除用户 -->
    <delete id="delUser" parameterType="com.bai.crudspringboot.model.User" >
        delete from user where id = #{id}
    </delete>

    <select id="selectById" resultType="com.bai.crudspringboot.model.User">
        SELECT * FROM user where id = #{id}
    </select>

    <!-- 更新用户 -->
    <update id="updateUser" parameterType="com.bai.crudspringboot.model.User" >
        update user set id= #{id},name= #{name},age= #{age} where id = #{id}
    </update>

</mapper>

UserDao.java:

package com.bai.crudspringboot.dao;

import com.bai.crudspringboot.model.User;

import java.util.List;

public interface UserDao {

    // 方法名和 UserDao.xml select标签的select对应
    List<User> select();

    void addUser(User user);

    void delUser(String id);

    User selectById(String id);

    void updateUser(User user);
}

UserService.java:

package com.bai.crudspringboot.service;

import com.bai.crudspringboot.model.User;

import java.util.List;

// 用户服务层的接口
public interface UserService {

    List<User> get();

    void insert(User user);

    void remove(String id);

    User getById(String id);

    void updateInfo(User user);

}

UserServiceImpl.java:

package com.bai.crudspringboot.service.Impl;

import com.bai.crudspringboot.dao.UserDao;
import com.bai.crudspringboot.model.User;
import com.bai.crudspringboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
/*
UserService 接口的实现

@Service 以当前类为模板创建一个对象放入Spring容器中
id：默认小驼峰
此时id 是  userServiceImpl

 */
@Service
public class UserServiceImpl implements UserService {
    /*
    @Autowired
    把 Dao层的 对象，从Spring中拿出来，注入到当前Bean中
     */
    @Autowired
    private UserDao userDao;

    @Override
    public List<User> get() {

        // 因为业务简单 复杂之后代码很多
        List<User> users = userDao.select();

        return users;
    }

    @Override
    public void insert(User user) {

        userDao.addUser(user);
    }

    @Override
    public void remove(String id) {
        userDao.delUser(id);
    }

    @Override
    public User getById(String id) {
        return userDao.selectById(id);
    }

    @Override
    public void updateInfo(User user) {
        userDao.updateUser(user);
    }
}

UserController.java:

如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，配置的视图解析器InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。

如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。

package com.bai.crudspringboot.controller;

import com.bai.crudspringboot.model.User;
import com.bai.crudspringboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
import java.util.UUID;
/*
 以类UserController为模板
 创建一个userController对象
 存放到Spring容器中
 */
@Controller
public class UserController {
    /*
    @Autowired：在Spring容器中，找一个Bean，注入到当前Bean中
    Bean:指定的id 小驼峰
    备注：可单独使用
    配对注解
    @Qualifier
    要求 userServiceImpl Bean注入到当前Bean中
    备注：和@Autowired配合使用，服务层有多态时常用
     */
    @Autowired
    @Qualifier("userServiceImpl")
    private UserService userService;
    /*
    显示用户列表
    @RequestMapping 设置请求的参数
    value 控制器名
    method 请求方式
     */
    @RequestMapping(value = "/alluser", method = RequestMethod.GET)
    public ModelAndView alluser() {
        List<User> usersResult = userService.get();
        ModelAndView mav = new ModelAndView();
        // 视图的名字 .jsp不带
        mav.setViewName("user");
        //携带的数据，让试图去展示
        mav.addObject("users", usersResult);
        return mav;
    }
    /*
    第一种写法
    跳入到新增用户的 jsp
     */
    @RequestMapping(value = "/addview", method = RequestMethod.GET)
    public ModelAndView addview() {

        ModelAndView mav = new ModelAndView();
        mav.setViewName("addview");

        return mav;
    }
    /*
    第二种写法
    跳入到新增用户的 jsp
    请求方式默认是 GET
     */
    @RequestMapping(value = "addview2")
    public String addView2() {
        return "addview";
    }
    /*
     接收用户提交过来的用户信息

     @ResponseBody = 应答 消息体
     不在让此方法去视图解析题
     而是 在请求过来的http的消息体中写入返回的值，给客户端（jsp页面、第三方、软件客户端等）

     控制器 add
     方法 add
     必须一致吗？不是
     一致是因为，方便、快捷、整洁
     */
    @ResponseBody
    @RequestMapping(value = "add", method = RequestMethod.POST)
    public String add(HttpServletRequest request, User user) {
        if (user.getAge() <0 || user.getAge() >200){
            return "年龄不正确";
        }

        // 生成一个 id
        String id = UUID.randomUUID().toString();

        user.setId(id);

        //调用服务层方法增加一个用户
        userService.insert(user);
        return "ok";
    }
    /*
    删除用户
    只在方法上有此注解
    @RequestMapping(value = "delete"
    访问方式 域名:端口/delete

    类和方法上有此注解
    类 @RequestMapping(value = "/user"
    方法 @RequestMapping(value = "/delete"
    访问方式 域名:端口/user/delete
     */
    @ResponseBody
    @RequestMapping(value = "delete", method = RequestMethod.POST)
    public String delete(HttpServletRequest request, String id) {
        /*
        调用服务层方法 删除一个用户
        此方法并不非常严谨，待改进
         */
        userService.remove(id);

        return "ok";
    }

    //显示一个用户
    @RequestMapping(value = "/updateview", method = RequestMethod.GET)
    public ModelAndView updateview(String id) {

        User userResult = userService.getById(id);

        ModelAndView mav = new ModelAndView();
        mav.setViewName("updateview");
        mav.addObject("user", userResult);

        return mav;
    }

    // 更新用户
    @ResponseBody
    @RequestMapping(value = "update", method = RequestMethod.POST)
    public String update(HttpServletRequest request, User user) {

        //调用服务层方法 更新一个用户
        userService.updateInfo(user);
        return "ok";
    }
}

CrudSpringBootApplication.java:

package com.bai.crudspringboot;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

//去扫描Dao层接口

@MapperScan("com.bai.crudspringboot.dao")
@SpringBootApplication
public class CrudspringbootApplication {

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

}

访问网址：http://localhost:8080/alluser

springboot mybatis项目教学