简单的ssm练手联手项目
简单的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练手联手项目的更多相关文章
- 初始Spring MVC——练手小项目
初始Spring MVC 前几天开始了我的spring学习之旅,由于之前使用过MVC模式来做项目,所以我先下手的是 Spring MVC,做个练手项目,非常简单 项目介绍: 用户输入信息 -> ...
- java客房管理小项目，适合java小白练手的项目！
java客房管理小项目 这个客房管理小项目,适合java初学者练手.功能虽然不多,但是内容很齐全! 喜欢这样文章的可以关注我,我会持续更新,你们的关注是我更新的动力!需要更多java学习资料的也可以私 ...
- vue练手小项目--眼镜在线试戴
最近看到了一个眼镜在线试戴小项目使用纯js手写的,本人刚学习vue.js没多久,便试试用vue做做看了,还没完善. 其中包括初始图片加载,使用keywords查找,父子组件之间传递信息,子组件之间传递 ...
- Python适合练手的项目
原文地址:https://www.jianshu.com/p/039156321e30 项目地址:https://github.com/DeqianBai/Python-Project/tree/ma ...
- Spring+Mybatis整合的练手小项目（一）项目部署
声明:教程是网上找的,代码是自己敲的 项目目录大致如下: 1. 首先创建Maven工程,在pom.xml中加入项目所需依赖: <?xml version="1.0" enco ...
- 前端练手小项目——网页版qq音乐仿写
qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...
- 一个vue练手的小项目
编程路上的菜鸟一枚 : 最近接触了vue 然后写了一个练手的项目 使用vue-cli脚手架来搭建了的项目 技术: vue2 + vue-router + ES6 + axios 框架有 mint- ...
- 仿PC版微信的练手项目（可实时通讯）
仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...
- 【开源】前端练手笔记，Chrome扩展应用程序(html+CSS+JS) （1）
项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...
随机推荐
- AtCoder AIsing Programming Contest 2020 D - Anything Goes to Zero (二进制,模拟)
题意:给你一个长度为\(n\)的\(01\)串,从高位到低位遍历,对该位取反,用得到的十进制数\(mod\)所有位上\(1\)的个数,不断循环直到为\(0\),输出每次遍历时循环的次数. 题解:根据题 ...
- 力扣992.K个不同整数的子数组-C语言实现
题目 原题链接 给定一个正整数数组 A,如果 A 的某个子数组中不同整数的个数恰好为 K,则称 A 的这个连续.不一定独立的子数组为好子数组. (例如,[1,2,3,1,2] 中有 3 个不同的整数: ...
- TextCNN论文解读
引言 本文是对<Convolutional Neural Networks for Sentence Classification>的原理解读,简称TextCNN. 作者提出了一种基于CN ...
- Linux-开机运行流程
目录 CentOS7开机流程 Linux运行级别 systemd进程管理 systemd的优势 systemd相关文件 systemd启动相关命令 systemd开机自启动相关命令 systemd服务 ...
- dp的小理解
这段时间刷dp,总结出了一个不算套路的套路. 1.根据题意确定是否有重叠子问题,也就是前面的状态对后面的有影响,基本满足这个条件的就可以考虑用dp了. 2.确定是dp后,就是最难的部分--如何根据题意 ...
- [转]论基于DSSA的软件架构设计与应用
[摘要] 去年三月份,我所在的公司启动国网电力用户用电信息采集系统项目,我被任命为项目负责人.国网电力用户用电信息采集系统是国家电网公司坚强智能电网建设的一部分.由于公司之前为南网(主要是广东省) ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- swiper & swiper slider
swiper & swiper slider mobile swiper https://idangero.us/swiper/ https://idangero.us/swiper/get- ...
- auto responsive rem
auto responsive rem 移动端适配 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentEle ...
- UI 素材网站
UI 素材网站 UI 设计师网站 国外: dribble.behance.Pinteres 国内: 优设.站酷.UI中国.花瓣 https://design.google/ https://dribb ...