简单的ssm练手联手项目

这是一个简单的ssm整合项目实现了汽车的品牌，价格，车型的添加，修改，删除，所有数据从数据库中拿取

使用到了jsp+mysql+Mybatis+spring+springmvc 等后端技术，使用springboot快速搭建项目，前端使用到了layui

1.准备数据库相关

1.1 新建car表

CREATE TABLE `car` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `brand` varchar(20) NOT NULL,
  `type` varchar(20) NOT NULL,
  `price` double(20,0) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=utf8;

1.2 添加数据

INSERT INTO `car` VALUES ('1', '丰田', '卡罗拉', '128888');
INSERT INTO `car` VALUES ('2', '本田', '思域', '138888');
INSERT INTO `car` VALUES ('3', '宝马', '3系', '328888');
INSERT INTO `car` VALUES ('4', '荣威', 'RX8', '168888');
INSERT INTO `car` VALUES ('5', '丰田', '汉兰达', '328888');
INSERT INTO `car` VALUES ('6', '大众', '帕沙特', '218888');
INSERT INTO `car` VALUES ('7', '奥迪', 'A6', '456666');
INSERT INTO `car` VALUES ('8', '宝马', '7系', '1200000');

2开始项目

新建一个springboot项目

添加相关依赖

</dependency>
    <!--阿里巴巴连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.20</version>
    </dependency>
    <!--mybatis-plus依赖 -->
    <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus</artifactId>
        <version>3.3.1</version>
    </dependency>

    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.3</version>
    </dependency>


    <!--jstl依赖 -->
    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

    <!--使jsp页面生效 -->
    <!-- https://mvnrepository.com/artifact/org.apache.tomcat.embed/tomcat-embed-jasper -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
        <version>9.0.33</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.15</version>
    </dependency>
    <dependency>
        <groupId>taglibs</groupId>
        <artifactId>standard</artifactId>
        <version>1.0.6</version>
    </dependency>
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>4.2.0</version>
    </dependency>




</dependencies>

创建com.car.pojo.Car数据库表对应类，打上@TableName注解关联上数据库表，提供get/set方法，如果不想手写get/set方法可以在创建springboot项目时勾选上Lombok依赖，可以自动创建get/set方法

@TableName("car")//和数据库的表相对应
//@Data//自动添加get/set方法
public class Car {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String type;
    private String brand;
    private Double price;

    public Integer getId() {
        return id;
    }

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

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getBrand() {
        return brand;
    }

    public void setBrand(String brand) {
        this.brand = brand;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Car{" +
                "id=" + id +
                ", type='" + type + ''' +
                ", brand='" + brand + ''' +
                ", price=" + price +
                '}';
    }
}

在car包下新建conteoller.AutoConteoller类并打上@Controller注解

@Controller
public class AutoController {
    @Autowired
    private AutoServiceImpl autoService;

    @RequestMapping("/findAll")
    public String findAll(Integer page,Model model){
        //开始分页
        PageHelper.startPage(page,3);
        List<Car> carList = autoService.findAll(page);
        PageInfo<Car> pageInfo = new PageInfo<>(carList);
        model.addAttribute("list",carList);
        model.addAttribute("page",page);
        return "list";
    }
    //添加数据
    @RequestMapping("/add")
    public String addCar(Car car){
        autoService.addCar(car);
        return "redirect:findAll";
    }
    //搜索
    @RequestMapping("/findCarByType")
    public String findCarByType(String brand,Model model){
        List<Car> carList = autoService.findCarByType(brand);
        model.addAttribute("list",carList);
        return "list";
    }
    //根据id删除
    @RequestMapping("/delete")
    public String deleteById(Integer id){
        autoService.deleteById(id);
        return "redirect:findAll";
    }
    //跳转修改页
    @RequestMapping("/alter")
    public String skip(Integer id,Model model){
        List<Car> carBrand = autoService.findCarById(id);
        model.addAttribute("list",carBrand);
        return "update";
    }
    //修改
    @RequestMapping("/update")
    public String updateCarByBrand(Car car){
        autoService.updateCarByBrand(car);
        return "redirect:findAll";
    }
    //根据id查询
    public String findCarById(Integer id,Model model){
        List<Car> cars = autoService.findCarById(id);
        model.addAttribute("list",cars);
        return "list";
    }

}

在car包下新建srvice.AutoService接口

public interface AutoService {
    //查询所有
    List<Car> findAll(Integer page);
    //新增
    void addCar(Car car);
    //根据品牌搜索
    List<Car> findCarByType(String brand);
    //根据id删除
    void deleteById(Integer id);
    //修改
    void updateCarByBrand(Car car);
    //根据id查询
    List<Car> findCarById(Integer id);
}

在Service包下新建AutoService接口的实现类impl.AutoServiceImpl实现AutoService接口中的方法，并打上@Service注解‘

@Service
public class AutoServiceImpl implements AutoService {
    @Autowired(required = false)
    private AutoMapper autoMapper;

    //查询所有
    @Override
    public List<Car> findAll(Integer page) {
        List<Car> carList = autoMapper.findAll(page);
        return carList;
    }

    @Override
    public void addCar(Car car) {
        autoMapper.addCar(car);
    }

    @Override
    public List<Car> findCarByType(String brand) {
        List<Car> carList = autoMapper.findCarByType(brand);
        return carList;
    }

    @Override
    public void deleteById(Integer id) {
        autoMapper.deleteById(id);
    }

    @Override
    public void updateCarByBrand(Car car) {
        autoMapper.updateCarByBrand(car);
    }

    @Override
    public List<Car> findCarById(Integer id) {
        List<Car> cars = autoMapper.findCarById(id);
        return cars;
    }
}

在car包下新建mapper.AutoMapper接口，并打上@Mapper注解

@Mapper
public interface AutoMapper {
    @Select("select * from car")
    List<Car> findAll(Integer page);
    //添加
    @Insert("insert into car(brand,type,price)values(#{brand},#{type},#{price})")
    void addCar(Car car);
    //根据品牌查询
    @Select("select * from car where brand like '%${brand}%'")
    List<Car> findCarByType(String brand);
    //根据id删除
    @Delete("delete from car where id=#{id}")
    void deleteById(Integer id);
    //修改
    @Update("update car set brand=#{brand},type=#{type},price=#{price} where brand=#{brand}")
    void updateCarByBrand(Car car);
    //根据id查询
    @Select("select * from car where id = #{id}")
    List<Car> findCarById(Integer id);
}

新建list.jsp页面（主页面展示）

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" href=".././css/layui.css" rel="stylesheet">
<html>
<head>
    <title>品牌列表</title>
    <style type="text/css">
        .layui-form{
            display: flex;
        }
        .layui-btn{
            margin-left: 10px;
        }
        .hint{
            color: red;
            line-height: 40px
        }
        .break-point{
            height: 2px;
        }
        .layui-table th{
            text-align: center;
        }
        .layui-table td{
            text-align: center;
        }
        .layui-card{
            background-color:#393D49;
        }
        .layui-card-header{
            color: #01AAED;
            text-align: center;
        }
        .page-button{
            width: 30%;
            display: flex;
            align-items:center;
            justify-content: center;
        }
        .main{
            display: flex;
            align-items:center;
            justify-content: center;
        }
    </style>
</head>
<tbody>
<div class="layui-card">
    <div class="layui-card-header">汽车列表</div>
</div>
<form class="layui-form" action="add" method="get">
    <div class="layui-form-item">
        <label class="layui-form-label">品牌</label>
        <div class="layui-input-block">
            <input type="text" name="brand" required  lay-verify="required" placeholder="请输入品牌" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">型号</label>
        <div class="layui-input-block">
            <input type="text" name="type" required  lay-verify="required" placeholder="请输入型号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="number" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="submit" value="添加" class="layui-btn"/>
    <input type="reset" value="重置" class="layui-btn layui-btn-primary"/>
</form>
<!-- 搜索 -->
<form class="layui-form" action="findCarByType" method="get">
    <div class="layui-form-item">
        <label class="layui-form-label">品牌</label>
        <div class="layui-input-block">
            <input type="text" name="brand" required  lay-verify="required" placeholder="请输入品牌" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="submit" value="搜索" class="layui-btn"/>
    <input type="reset" value="重置" class="layui-btn layui-btn-primary"/>
    <div>
        <div class="hint">提示：搜索功能支持模糊查找</div>
    </div>
</form>
<hr class="layui-bg-green">
<table class="layui-table">
    <thead>
    <tr>
        <th>编号</th>
        <th>品牌</th>
        <th>型号</th>
        <th>价格</th>
        <th>删除|修改</th>
    </tr>
    <tbody>
<c:forEach items="${list}" var="carlist">
    <tr>
        <td>${carlist.id}</td>
        <td>${carlist.brand}</td>
        <td>${carlist.type}</td>
        <td>￥${carlist.price}</td>
        <td>
            <a href="delete?id=${carlist.id}" class="layui-btn layui-btn-normal">删除</a>
            <a href="alter?id=${carlist.id}" class="layui-btn layui-btn-normal">修改</a>
        </td>
    </tr>
</c:forEach>
    </tbody>

    </tbody>
</table>
</body>
</html>

新建update.jsp页面（车辆信息修改）

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" rel="stylesheet" href=".././css/layui.css">
<html>
<head>
    <title>修改</title>
    <style type="text/css">
        .layui-form{
            display: flex;
        }
        .layui-btn{
            margin-left: 10px;
        }
        .layui-card{
            background-color:#393D49;
        }
        .layui-card-header{
            color: #01AAED;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">修改</div>
</div>
<c:forEach items="${list}" var="car">
    <form class="layui-form" action="update" method="get">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <input type="text" name="brand" required  lay-verify="required" placeholder="${car.brand}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车型</label>
            <div class="layui-input-block">
                <input type="text" name="type" required  lay-verify="required" placeholder="${car.type}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" placeholder="${car.price}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input type="submit" value="修改" class="layui-btn"/>
        <input type="reset" value="重置" class="layui-btn layui-btn-primary"/>
    </form>
</c:forEach>
</body>
</html>

注意：前端使用到了Layui需要的可以去Layui官网下载根据文档使用

简单的ssm整合练手项目：汽车项目

简单的ssm练手联手项目

1.准备数据库相关

1.1 新建car表

1.2 添加数据

2开始项目