1.创建数据库
create table t_goods(
goods_id int primary key auto_increment,
goods_name varchar(20),
goods_price double,
goods_imgpath varchar(50)
);
2.创建SpringBoot项目
3.导入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 引入 Druid 数据源依赖:https://mvnrepository.com/artifact/com.alibaba/druid -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.9</version>
</dependency>
4.创建javabean
GoodsBean.java
package com.wangxing.springboot.bean;
public class GoodsBean {
private int goodsid;
private String goodsname;
private double goodsprice;
private String goodsimgpath;
public int getGoodsid() {
return goodsid;
}
public void setGoodsid(int goodsid) {
this.goodsid = goodsid;
}
public String getGoodsname() {
return goodsname;
}
public void setGoodsname(String goodsname) {
this.goodsname = goodsname;
}
public double getGoodsprice() {
return goodsprice;
}
public void setGoodsprice(double goodsprice) {
this.goodsprice = goodsprice;
}
public String getGoodsimgpath() {
return goodsimgpath;
}
public void setGoodsimgpath(String goodsimgpath) {
this.goodsimgpath = goodsimgpath;
}
}
ResBean.java
package com.wangxing.springboot.bean;
public class ResBean {
private boolean success;
private String msg;
public ResBean(boolean success,String msg){
this.success = success;
this.msg = msg;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
5.创建数据访问接口
package com.wangxing.springboot.mapper;
import com.wangxing.springboot.bean.GoodsBean;
import java.util.List;
public interface GoodsMapper {
public void insertGoods(GoodsBean goodsBean);
public void updateGoods(GoodsBean goodsBean);
public void deleteGoods(int goodsid);
public GoodsBean selectGoodsById(int goodsid);
public List<GoodsBean> selectGoods();
}
6.在src/main/resources/mapper/GoodsMappe.xml创建SQL映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wangxing.springboot.mapper.GoodsMapper">
<insert id="insertGoods" parameterType="com.wangxing.springboot.bean.GoodsBean">
insert into t_goods value(null,#{goodsname},#{goodsprice},#{goodsimgpath})
</insert>
<update id="updateGoods" parameterType="com.wangxing.springboot.bean.GoodsBean">
update t_goods set goods_name=#{goodsname},goods_price=#{goodsprice},goods_imgpath=#{goodsimgpath}
where goods_id=#{goodsid}
</update>
<delete id="deleteGoods" parameterType="int">
delete from t_goods where goods_id=#{goodsid}
</delete>
<resultMap id="goodsMap" type="com.wangxing.springboot.bean.GoodsBean">
<id column="goods_id" property="goodsid"></id>
<result column="goods_name" property="goodsname"></result>
<result column="goods_price" property="goodsprice"></result>
<result column="goods_imgpath" property="goodsimgpath"></result>
</resultMap>
<select id="selectGoodsById" parameterType="int" resultMap="goodsMap">
select * from t_goods where goods_id=#{goodsid}
</select>
<select id="selectGoods" resultMap="goodsMap">
select * from t_goods
</select>
</mapper>
7.在src/main/resources/config/mybatis-config.xml创建MyBatis核心配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
</configuration>
8.创建Druid数据源配置类
package com.wangxing.springboot.config;
import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import javax.sql.DataSource;
@Configuration
public class DruidConfig {
@ConfigurationProperties(prefix = "spring.druiddatasource")
@Bean
public DataSource druid(){
return new DruidDataSource();
}
}
9.创建MyBatis配置类
package com.wangxing.springboot.config;
import org.mybatis.spring.annotation.MapperScan;
import org.mybatis.spring.boot.autoconfigure.ConfigurationCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@MapperScan("com.wangxing.springboot.mapper")
@Configuration
public class MyBatisConfig {
@Bean
public ConfigurationCustomizer configurationCustomizer(){
return new ConfigurationCustomizer(){
@Override
public void customize(org.apache.ibatis.session.Configuration configuration) {
configuration.setMapUnderscoreToCamelCase(true);
}
};
}
}
10.在SpringBoot的核心配置文件[application.properties]中配置数据源参数.....
#将springBoot默认的数据源用alibaba的Druid代替
spring.druiddatasource.type=com.alibaba.druid.pool.DruidDataSource
#配置alibaba的Druid数据源参数
spring.druiddatasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.druiddatasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.druiddatasource.username=root
spring.druiddatasource.password=123456
spring.druiddatasource.initialSize=5
spring.druiddatasource.minIdle=5
spring.druiddatasource.maxActive=20
spring.druiddatasource.maxWait=60000
spring.druiddatasource.timeBetweenEvictionRunsMillis=60000
spring.druiddatasource.minEvictableIdleTimeMillis=300000
spring.druiddatasource.validationQuery=SELECT 1 FROM DUAL
spring.druiddatasource.testWhileIdle=true
spring.druiddatasource.testOnBorrow=false
spring.druiddatasource.testOnReturn=false
spring.druiddatasource.poolPreparedStatements=true
#配置MyBatis核心配置文件的位置
mybatis.config-location=classpath:config/mybatis-config.xml
#配置SQL映射文件的位置
mybatis.mapper-locations=classpath:mapper/*Mapper.xml
11.创建业务访问接口以及实现类
GoodsService.java
package com.wangxing.springboot.service;
import com.wangxing.springboot.bean.GoodsBean;
import java.util.List;
public interface GoodsService {
public void insertGoods(GoodsBean goodsBean);
public void updateGoods(GoodsBean goodsBean);
public void deleteGoods(int goodsid);
public GoodsBean selectGoodsById(int goodsid);
public List<GoodsBean> selectGoods();
}
GoodsServiceImpl.java
package com.wangxing.springboot.service.impl;
import com.wangxing.springboot.bean.GoodsBean;
import com.wangxing.springboot.mapper.GoodsMapper;
import com.wangxing.springboot.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("goodsService")
public class GoodsServiceImpl implements GoodsService {
@Autowired
private GoodsMapper goodsMapper;
@Override
public void insertGoods(GoodsBean goodsBean) {
goodsMapper.insertGoods(goodsBean);
}
@Override
public void updateGoods(GoodsBean goodsBean) {
goodsMapper.updateGoods(goodsBean);
}
@Override
public void deleteGoods(int goodsid) {
goodsMapper.deleteGoods(goodsid);
}
@Override
public GoodsBean selectGoodsById(int goodsid) {
return goodsMapper.selectGoodsById(goodsid);
}
@Override
public List<GoodsBean> selectGoods() {
return goodsMapper.selectGoods();
}
}
12.创建控制器
package com.wangxing.springboot.controller;
import com.wangxing.springboot.bean.GoodsBean;
import com.wangxing.springboot.bean.ResBean;
import com.wangxing.springboot.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/goods")
public class GoodsController {
@Autowired
private GoodsService goodsService;
@RequestMapping("/add.do")
public ResBean addGoods(@RequestBody GoodsBean goodsBean){
try {
goodsService.insertGoods(goodsBean);
return new ResBean(true,"添加成功!");
}catch (Exception e){
e.printStackTrace();
return new ResBean(false,"添加失败!");
}
}
@RequestMapping("/update.do")
public ResBean updateGoods(@RequestBody GoodsBean goodsBean){
try {
goodsService.updateGoods(goodsBean);
return new ResBean(true,"修改成功!");
}catch (Exception e){
e.printStackTrace();
return new ResBean(false,"修改失败!");
}
}
@RequestMapping("/delete.do")
public ResBean deleteGoods(int goodsid){
try {
goodsService.deleteGoods(goodsid);
return new ResBean(true,"删除成功!");
}catch (Exception e){
e.printStackTrace();
return new ResBean(false,"删除失败!");
}
}
@RequestMapping("/findOne.do")
public GoodsBean findOneGoods(int goodsid){
return goodsService.selectGoodsById(goodsid);
}
@RequestMapping("/findList.do")
public List<GoodsBean> findListGoods(){
return goodsService.selectGoods();
}
}
13.配置主类
package com.wangxing.springboot.springbootdemo10;
import com.wangxing.springboot.config.DruidConfig;
import com.wangxing.springboot.config.MyBatisConfig;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Import;
@SpringBootApplication
@ComponentScan(basePackages = "com.wangxing.springboot")
@Import({MyBatisConfig.class, DruidConfig.class})
public class Springbootdemo10Application {
public static void main(String[] args) {
SpringApplication.run(Springbootdemo10Application.class, args);
}
}
14.导入jquery的函数库文件
15.创建测试用的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试SSM</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#but1").click(function () {
var data={"goodsid":null,"goodsname":"锤子","goodsprice":499,"goodsimgpath":"imgs/shouji4.jpg"};
var goodsjson=JSON.stringify(data);
$.ajax({url:"../goods/add.do",
data:goodsjson,
type:"POST",
datatype:"json",
contentType:"application/json",
success:function (response) {
alert(response.msg);
}});
});
$("#but2").click(function () {
var data={"goodsid":4,"goodsname":"vivo","goodsprice":499,"goodsimgpath":"imgs/shouji5.jpg"};
var goodsjson=JSON.stringify(data);
$.ajax({url:"../goods/update.do",
data:goodsjson,
type:"POST",
datatype:"json",
contentType:"application/json",
success:function (response) {
alert(response.msg);
}});
});
$("#but3").click(function () {
$.ajax({url:"../goods/delete.do?goodsid=4",
type:"GET",
datatype:"json",
success:function (response) {
alert(response.msg);
}});
});
$("#but4").click(function () {
$.ajax({url:"../goods/findOne.do?goodsid=2",
type:"GET",
datatype:"json",
success:function (response) {
alert(response.goodsname+","+response.goodsprice);
}});
});
$("#but5").click(function () {
$.ajax({url:"../goods/findList.do",
type:"GET",
datatype:"json",
success:function (response) {
for(var i=0;i<response.length;i++){
alert(response[i].goodsname+","+response[i].goodsprice);
}
}});
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试添加数据"/>
<input id="but2" type="button" value="测试修改数据"/>
<input id="but3" type="button" value="测试删除数据"/>
<input id="but4" type="button" value="测试根据id查询"/>
<input id="but5" type="button" value="测试查询所有"/>
</body>
</html>
以下是访问模板:
访问thymeleaf【模板】
1.发送请求【点图片进入详情】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="test/findOne.do?goodsid=1"><img src="imgs/shouji1.jpg"/></a>
<a href="test/findOne.do?goodsid=2"><img src="imgs/shouji2.jpg"/></a>
<a href="test/findOne.do?goodsid=3"><img src="imgs/shouji3.jpg"/></a>
</body>
</html>
2.收到请求,后台处理
package com.wangxing.springboot.controller;
import com.wangxing.springboot.bean.GoodsBean;
import com.wangxing.springboot.bean.ResBean;
import com.wangxing.springboot.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@Controller
@RequestMapping("/test")
public class TestController {
@Autowired
private GoodsService goodsService;
@RequestMapping("/findOne.do")
public String findOneGoods(int goodsid, Model model){
GoodsBean goodsBean=goodsService.selectGoodsById(goodsid);
model.addAttribute("goodsBean",goodsBean);
return "goodsitem";
}
}
3.后台处理后,发送到模板展示
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>商品详情页</title>
<style>
img{
width: 100px;
height: 150px;
border: 5px solid black;
}
#span1{
color: red;
font-size: 30px;
}
#span2{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<img th:src="${goodsBean.goodsimgpath}" /><br>
<span id="span1" th:text="${goodsBean.goodsname}"></span><br>
<span id="span2" th:text="${goodsBean.goodsprice}"></span>
</center>
</body>
</html>