简单的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 ...
随机推荐
- 使用eclipse搭建第一个java web应用
一. 首先是eclipse得下载,你要下载Eclipse IDE for Java EE这种类型的,我之前下载的Eclipse IDE for Enterprise Java Developers是官 ...
- java-GUI编程学习总结
狂神说java-GUI编程学习总结 1.简介 2.AWT 2.1.实现如图1-2 (1)面向过程写法 (2)内部类写法 (3)完全改造成面向对象 3.Swing 3.1.鼠标花点 3.2.弹窗 3.3 ...
- 操作系统：Linux进程与线程
这里是一部分内容,还会做修改. 一:目的及内容 学习fork(),exec,pthread库函数的使用,阅读源码,分析fork,exec,pthread_create函数的机理 代码实现: 进程A创建 ...
- μC/OS-III---I笔记5---多值信号量
多值信号量 操作系统中利用信号量解决进程间的同步和互斥(互斥信号量)的问题,在多道程序环境下,操作系统如何实现进程之间的同步和互斥显得极为重要.比如对同一部分资源的访问是要互斥,不能在另一个进程A在访 ...
- TensorFlow+restore读取模型
# 注意和前一或二篇Lenet训练并验证的文章从`y_conv = tf.nn.softmax(fc2)`起的不同 # 部分函数请参照前后2篇文章 import tensorflow as tf im ...
- 如何给 GitHub 添加 SSH key， 如何生成 SSH key 详细图文教程！
如何给 GitHub 添加 SSH key, 如何生成 SSH key 详细图文教程! 一. 生成 SSH key https://ide.c9.io/xgqfrms/ 创建一个空项目:(或使用 ...
- PWA & Service Workers 版本更新 bug
PWA & Service Workers 版本更新 bug PWA & Service Worker https://developer.mozilla.org/zh-CN/docs ...
- Axios 取消 Ajax 请求
Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...
- JavaScript getter and setter All In One
JavaScript getter and setter All In One getter & setter JavaScript Object Accessors JavaScript A ...
- Taro Advanced
Taro Advanced aro 代码与小程序代码混写 https://nervjs.github.io/taro/docs/hybrid.html https://github.com/NervJ ...