简单的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官网下载根据文档使用