【SpringBoot】SSM案例

  • 【SpringBoot】SSM案例
  • 一、整合SSM
  • 二、实现CRUD操作
  • 2.1 结合thymeleaf实现用户展示
  • 2.2 实现用户新增
  • 2.3 用户修改
  • 2.4 删除用户


【SpringBoot】SSM案例

一、整合SSM

  1. 新建springboot项目
  2. ssm改成springboot ssm ssh springboot_html

  3. 最终版本的pom依赖
<?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.6.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>SpringBootDemoSSM</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringBootDemoSSM</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-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.2.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
        <!--连接池依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.6</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <!--开启热部署-->
                <configuration>
                    <fork>true</fork>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
  1. 配置数据库及mybatis
# jdbc的相关配置
# MySQL的版本不同,需要的驱动器也不同
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://*.*.*.*:3306/springboot?serverTimezone=UTC
spring.datasource.username=***
spring.datasource.password=***

# 配置连接池
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource

# 指定mybatis的别名
mybatis.type-aliases-package=com.example.mapper

#指定MyBatis的映射文件的路径
mybatis.mapper-locations=classpath:mapper/*.xml
  1. 数据表结构
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT, 
`name` varchar(255) DEFAULT NULL, 
`age` int(11) DEFAULT NULL, PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  1. 新建数据表对应实体类
package com.example.entity;

public class User {

    private Integer id;

    private String name;

    private Integer age;
	//省略getter、setter、toString
}
  1. 创建UserMapper接口
package com.example.mapper;

import com.example.entity.User;

import java.util.List;

public interface UserMapper {

    /**
     * 查询所有用户
     * @return
     */
    public List<User> queryAll();
}
  1. 在resource目录下创建mapper文件夹,在文件夹中新建文件UserMapper.xml
  • 文件名与UserMapper接口一致
  • id对应UserMapper接口中的方法名
  • 命名空间对应UserMapper全限定路径名
<?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">
<mapper namespace="com.example.mapper.UserMapper">
    <select id="queryAll" resultType="com.example.entity.User">
        select * from users
    </select>
</mapper>
  1. 新建service接口与接口实现
package com.example.service;

import com.example.entity.User;

import java.util.List;

public interface IUserService {

    /**
     * 查询全部用户
     * @return
     */
    public List<User> queryAll();
}
package com.example.service.impl;

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

import java.util.List;

@Service
public class UserServiceImpl implements IUserService {

    @Autowired
    private UserMapper userMapper;

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

接口实现中在使用UserMapper接口对象的时候会报红,这个不影响

  1. 创建Controller层
package com.example.controller;

import com.example.entity.User;
import com.example.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/user/queryAll")
    public List<User> queryAll(){
        return userService.queryAll();
    }
}
  1. 测试
    在浏览器中输入:
    localhost:8080/user/queryAll

二、实现CRUD操作

2.1 结合thymeleaf实现用户展示

  1. 新建前端模板user.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
    <h1>用户管理</h1>
    <table border="1" style="width: 300px">
        <tr>
            <th>用户ID</th>
            <th>用户姓名</th>
            <th>用户年龄</th>
        </tr>
        <tr th:each="user:${list}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
</body>
</html>
  1. controller设置前端传值
package com.example.controller;

import com.example.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

//返回页面就不可以再用@RestController注解了
//@RestController
@Controller
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/user/queryAll")
    public String queryAll(Model model){
        model.addAttribute("list",userService.queryAll())
        return "user";
    }
}
  1. 测试
    鼠标点击,测试页面:用户信息

2.2 实现用户新增

  1. 修改用户展示页面,增加用户新增按钮
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
<h1>用户管理</h1>
<a href="/user/addPage">新增用户</a>
<table border="1" style="width: 300px">
    <tr>
        <th>用户ID</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr th:each="user:${list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
    </tr>
</table>
</body>
</html>
  1. 新增用户新增页面userAdd.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
<h1>添加用户</h1>
<form th:action="@{/user/save}" method="post">
    <label>姓名:</label><input type="text" name="name"><br>
    <label>年龄:</label><input type="text" name="age"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>
  1. 编辑UserMapper接口类与UserMapper.xml文件
/**
* 新增用户
* @return
*/
public Integer addUser(User user);
<insert id="addUser" parameterType="com.example.entity.User">
    insert into users (name,age)VALUES(#{name},#{age})
</insert>
  1. 修改service
//IUserService

/**
* 新增用户
* @return
*/
public Integer addUser(User user);
// UserServiceImpl
@Override
public Integer addUser(User user) {
    return userMapper.addUser(user);
}
  1. 修改controller
/**
 * 跳转用户新增页面
 * @return
 */
@RequestMapping("/user/addPage")
public String addPage(){
    return "userAdd";
}

/**
 * 跳回用户展示页面
 * @param user
 * @return
 */
@RequestMapping("/user/save")
public String userSave(User user){
    userService.addUser(user);
    return "redirect:/user/queryAll";
}

2.3 用户修改

  1. 修改用户展示页面,增加修改按钮
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
<h1>用户管理</h1>
<a href="/user/addPage">新增用户</a>
<table border="1" style="width: 300px">
    <tr>
        <th>用户ID</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
        <th>操作</th>
    </tr>
    <tr th:each="user:${list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
        <td>
            <a th:href="@{/user/updatePage(id=${user.id})}">修改</a>
        </td>
    </tr>
</table>
</body>
</html>
  1. 增加用户修改页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
<h1>更新用户</h1>
<form th:action="@{/user/update}" method="post">
    <input type="hidden" name="id" th:value="${user.id}">
    <label>姓名:</label><input type="text" name="name" th:value="${user.name}"><br>
    <label>年龄:</label><input type="text" name="age" th:value="${user.age}"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>
  1. 编辑UserMapper接口类与UserMapper.xml文件
/**
 * 根据id查询用户信息
 * @param id
 * @return
 */
public User queryById(Integer id);

/**
 * 修改用户
 * @param user
 * @return
 */
public Integer updateUser(User user);
<select id="queryById" resultType="com.example.entity.User" >
    select * from users where id = #{id}
</select>

<update id="updateUser" parameterType="com.example.entity.User">
    update users set name=#{name},age=#{age} where id =#{id}
</update>
  1. 修改service
//IUserService

/**
 * 根据id查询用户信息
 * @param id
 * @return
 */
public User queryById(Integer id);

/**
 * 修改用户
 * @param user
 * @return
 */
public Integer updateUser(User user);
// UserServiceImpl

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

@Override
public Integer updateUser(User user) {
    return userMapper.updateUser(user);
}
  1. 修改controller
/**
 * 查询需要修改的用户信息,并将其展示到修改页面
 * @param id
 * @param model
 * @return
 */
@RequestMapping("/user/updatePage")
public String updateInfo(Integer id,Model model){
    User user = userService.queryById(id);
    model.addAttribute("user",user);
    return "userUpdate";
}

/**
 * 修改用户
 * @param user
 * @return
 */
@RequestMapping("/user/update")
public String updateUser(User user){
    userService.updateUser(user);
    return "redirect:/user/queryAll";
}

2.4 删除用户

参照用户查询、新增、修改