526互联

使用SpringBoot实现网页版交互式增删改查

发布时间 2023-08-28 20:43:44作者: yesyes1

1、新建项目

选中以下几个Develop Tools：

2、引入依赖

<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>3.0.2</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>3.0.2</version>
            <scope>test</scope>
        </dependency>
        <!--阿里数据源-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.16</version>
        </dependency>

        <!--        获取页面session对象request对象response对象 HttpServletXXX jar包-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
        </dependency>

        <!--        json转换工具包-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </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>

        <!--热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

3、搭建四层架构

4、连接数据库（application.yml）

spring:
  web:
    resources:
      static-locations: classpath:/static/,classpath:/templates/
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=true
    username: root
    password: 20214063
    driver-class-name: com.mysql.cj.jdbc.Driver
    #普通浏览器只能get和post请求，
    #所以如果需要其他的请求方式，需要这个，然后隐藏起来
  mvc:
    hiddenmethod:
      filter:
        enabled: true
  devtools:
    restart:
      enabled: true #设置开启热部署
  freemarker:
    cache: false #页面不加载缓存，修改即使生效
mybatis:
  configuration:
    map-underscore-to-camel-case: true #下划线驼峰设置
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl   # 打印SQL语句

将上面的代码语句写入到application.properties文件里面：

之后可以在IDEA里面尝试连接数据库，测试连接成功：

5、写相关代码

user实体类：

package com.example.pojo;

public class User {
    public int getId() {
        return id;
    }

    public void setId(int 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;
    }

    public String getJia() {
        return jia;
    }

    public void setJia(String jia) {
        this.jia = jia;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                ", jia='" + jia + '\'' +
                '}';
    }

    public int id;
    public String name;
    public int age;
    public String jia;
}

controller类：

package com.example.controller;


import com.example.pojo.User;
import com.example.service.UserService;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.List;
import java.util.Map;

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/index.html")
    public String checkAll(Map<String, List> result){
        List list=userService.findAll();
        result.put("list",list);
        return "index";
    }

    //新增数据
    @PostMapping("/add")
    public String addIt(User user){
        userService.addUser(user);
        return "redirect:/index.html";
    }

    //删除数据
    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable Integer id, HttpServletResponse servletResponse){
        userService.deleteUser(id);
        System.out.println("delete方法执行");
        return "redirect:/index.html";
    }

    //根据id进行查找数据
    @GetMapping("/query/{id}")
    public String updatePage(Model model, @PathVariable int id){
        User users = userService.queryById(id);
        model.addAttribute("list",users);
        //表示跳转到modifie,html界面
        return "modifie";
    }

    @PutMapping("/update")
    public String updateUser(Model model,User user,HttpServletRequest request) {
        String id = request.getParameter("id");
        User userById = userService.queryById(Integer.parseInt(id));
        userService.updateUser(user);
        System.out.println(user);
        return "redirect:/index.html";
    }


}

service类：

service接口：

package com.example.service;

import com.example.pojo.User;

import java.util.List;

public interface UserService {
    List<User> findAll();

    User queryById(int id);

    int addUser(User user);
    int deleteUser(int id);
    int updateUser(User user);
}

serviceImpl实现类：

package com.example.service.impl;

import com.example.mapper.UserMapper;
import com.example.pojo.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    public UserMapper userMapper;


    @Override
    public List<User> findAll() {
        return userMapper.findAll();
    }

    @Override
    public User queryById(int id) {
        return userMapper.queryById(id);
    }

    @Override
    public int addUser(User user) {
        return userMapper.addUser(user);
    }

    @Override
    public int deleteUser(int id) {
        return userMapper.deleteUser(id);
    }

    @Override
    public int updateUser(User user) {
        return userMapper.updateUser(user);
    }
}

mapper类：

package com.example.mapper;

import com.example.pojo.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface UserMapper {
    @Select("select * from student")
    public List<User> findAll();

    @Select("select * from student where id=#{id}")
    public User queryById(int id);

    @Insert("insert into student(name,age,jia) values(#{name},#{age},#{jia})")
    public int addUser(User user);

    @Delete("delete from student where id=#{id}")
    public int deleteUser(int id);

    @Update("update student set name=#{name},age=#{age},jia=#{jia} where id=#{id}")
    public int updateUser(User user);
}

6、网页相关代码

add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div style="width:600px;height:100%;margin-left:270px;">
    <form action="/add" method="post">
        <!--        form-control给input添加这个class后就会使用bootstrap自带的input框-->
        姓名：<input class="form-control" type="text" th:value="${name}" name="name"><br>
        <!--注意参数的拼接-->
        年龄：<input class="form-control" type="text" th:value="${age}" name="age"><br>

        家乡：<input class="form-control" type="text" th:value="${jia}" name="jia"><br>
        <button class="btn btn-primary btn-lg btn-block">保存</button>
    </form>
</div>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<style>
    a{
        color: #ffffff;
    }
    h1{
        /*文字对齐*/
        text-align: center;
    }
</style>

<body>
<h1>spring-boot</h1>
<!--table-striped:斑马线格式，table-bordered：带边框的表格，table-hover：鼠标悬停高亮的表格-->
<table class="table table-striped table-bordered table-hover text-center">
    <thead>
    <tr style="text-align:center">
        <!--        th标签定义html表格中的表头单元格-->
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>家乡</th>
        <th>操作</th>
    </tr>
    </thead>
    <!--tr标签定义html表格中的所有行-->
    <!--    遍历集合，如果被遍历的变量users为null或者不存在，则不会进行遍历，也不会报错-->
    <tr th:each="list:${list}">
        <!--        td标签定义html表格中的标准单元格-->
        <td th:text="${list.id}"></td>
        <td th:text="${list.name}"></td>
        <td th:text="${list.age}"></td>
        <td th:text="${list.jia}"></td>
        <td>
            <!--         a标签用来定义超链接 href表示超链接-->
            <a class="btn btn-primary" th:href="@{'/query/'+${list.id}}">更改</a>
            <a class="btn btn-danger" th:href="@{'/delete/'+${list.id}}">删除</a>
        </td>
    </tr>
</table>
<button class="btn btn-block" ><a href="add.html">添加用户</a></button>

</body>

</html>

modifie.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>修改用户</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div style="width:600px;height:100%;margin-left:270px;">
  <form action="/update" method="post">
    <!-- rest风格中的更新是put请求，
    所以这块先使用post请求，然后隐藏起来改为put请求-->
    <input name="_method" type="hidden" value="put">
    ID：<input class="form-control"  type="text" th:value="${list.id}" name="id"><br>
    姓名：<input class="form-control" type="text" th:value="${list.name}" name="name"><br>
    年龄：<input class="form-control" type="text" th:value="${list.age}" name="age"><br>
    家乡：<input class="form-control" type="text" th:value="${list.jia}" name="jia"><br>
    <button class="btn btn-primary btn-lg btn-block" type="submit">提交</button>
  </form>
</div>

</body>
</html>