简单的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 ...
随机推荐
- Codeforces Gym-102219 2019 ICPC Malaysia National E. Optimal Slots(01背包+输出路径)
题意:给你一个体积为\(T\)的背包,有\(n\)个物品,每个物品的价值和体积都是是\(a_{i}\),求放哪几个物品使得总价值最大,输出它们,并且输出价值的最大值. 题解:其实就是一个01背包输出路 ...
- JavaScript——浏览器检查
遍历opera中的所有方法
- CF1478-A. Nezzar and Colorful Balls
CF1478-A. Nezzar and Colorful Balls 题意: 有\(n\)个球,每个球上面都有一个数字\(a_i\),这些数字是组成的序列是非递减的.现在你要给每个球涂色,你必须保证 ...
- kubernetes实战-交付dubbo服务到k8s集群（一）准备工作
本次交付的服务架构图:因为zookeeper属于有状态服务,不建议将有状态服务,交付到k8s,如mysql,zk等. 首先部署zk集群:zk是java服务,需要依赖jdk,jdk请自行下载: 集群分布 ...
- 二进制安装kubernetes（四） kube-scheduler组件安装
介绍资料转载地址:https://www.jianshu.com/p/c4c60ccda8d0 kube-scheduler在集群中的作用 kube-scheduler是以插件形式存在的组件,正因为以 ...
- leetcode 周赛 205 1576-5508-5509-5510
第四题比较难,看题解用并查集做比较简单,但是我觉得难度在想到用并查集,可能是最近做题少所以想不到吧. 1 替换所有的问号 class Solution { public: string modifyS ...
- python yield && scrapy yield
title: python yield && scrapy yield date: 2020-03-17 16:00:00 categories: python tags: 语法 yi ...
- 1005E1 Median on Segments (Permutations Edition) 【思维+无序数组求中位数】
题目:戳这里 百度之星初赛原题:戳这里 题意:n个不同的数,求中位数为m的区间有多少个. 解题思路: 此题的中位数就是个数为奇数的数组中,小于m的数和大于m的数一样多,个数为偶数的数组中,小于m的数比 ...
- 记录一个状压DP用到的骚操作
不断的让i=i^lowbit(i)就可以枚举i二进制里面所有的1 嘛,很显然,怕是我没想到哦
- JWT实现登录认证实例
JWT全称JSON Web Token,是一个紧凑的,自包含的,安全的信息交换协议.JWT有很多方面的应用,例如权限认证,信息交换等.本文将简单介绍JWT登录权限认证的一个实例操作. JWT组成 JW ...