SpringBoot中的增删改查案例

目录

一、案例说明

二、数据库 

三、案例源码

3.1、pom文件

3.2、Application.yml

3.3、项目结构

a)整体结构

 b)Java代码部分

c)资源文件部分

3.4、业务功能的实现

1)配置类

2)实体类

3)Mapper文件 

4)Service

5)Controller

6)视图

四、测试效果图

启动项目

浏览器访问 

添加功能 

修改 

删除 

附件:pom文件


一、案例说明

Idea 2022.3.3汉化版 、mysql 5.7  、  JDK 8

springboot + thymeleaf + restful + layui.css + bootstrap

 图书表和出版社表为例,实现增删改查的功能。

该案例需要准备一些样式表:

layui官网

bootstrap的下载地址

bootstrap-select下载地址

bootstrap-table下载地址

(在bootstrap-select和bootstrap-table中也都是使用文件中dist目录下的文件)

commons-lang3的官方教程

commons-lang3的官方API

1. commons-lang3是Apache提供的一个java.lang包的增强版本,Lang3为java.lang API提供了许多帮助程序实用程序,特别是字符串操作方法,基本数值方法,对象反射,并发,创建和序列化以及系统属性。此外,它还包含对java.urti.Date的基本增强,以及一系列专用于构建方法的实用程序,例如hashCode,toString和equals。
2.提供了官方的API地址,可通过文档获取需要的支持。 

二、数据库 

Book表

 Publish表

温馨小贴士:book 表中字段 pic 为图片路径(表中是图片名字和格式)。

在案例中使用到了文件(图片)上传。则需要注意的是:文件保存位置。

//将所有/upimg/的访问请求都拦截到指定目录
registry.addResourceHandler("/upimg/**").addResourceLocations("file:D://uploadImg//");

由于在配置类BeanConfig中配置了拦截器(👆),将所有/upimg/的访问请求都拦截到指定目录。

所以,需要根据指定目录存放文件(图片)。

本案例文件(图片)存放地址为:

没有文件夹的要根据自己的设置进行创建,并存放使用的图片。否则,项目运行无法加载图片。 

三、案例源码

3.1、pom文件

1、需要加载各种所需依赖坐标。

2、构建资源。      

target文件夹是项目编译之后的资源文件夹。该文件夹中存在的内容才可以被项目中读取使用。

如果target中没有所需要的文件资源时, 检查pom.xml文件中是否拥有以下配置:

 <!-- 使得程序在执行过程中,能够解析到各个mapper.xml文件 。
				否则target目录下没有对应的mapper文件,程序不能正常执行。  -->
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.yml</include>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.css</include>
                    <include>**/*.js</include>
                    <include>**/*.html</include>
                    <include>**/*.png</include>
                    <include>**/*.jpg</include>
                    <include>**/*.properties</include>
                    <include>**/*.yml</include>
                    <include>**/*.xml</include>
                    <include>**/*.conf</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
        

3.2、Application.yml

# 服务器设置:  端口号和访问路径
server:
  port: 8088
  servlet:
    context-path: /shq
# 数据源设置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/2101_files?serverTimezone=UTC
    username: root
    password: 123456
  thymeleaf:
    cache: false
    suffix: .html
  web:
    resources:
      static-locations: classpath:/templates/,classpath:/static/image/
# 让控制台显示执行的SQL语句
logging:
  level:
    cn:
      shq:
        mapper: debug
# mybatis配置
mybatis:
  type-aliases-package: cn.shq.model   # 别名
  configuration:
    auto-mapping-behavior: full  #设置全自动映射
    use-column-label: true    # 列标签代替字段名
#设置mapper的路径
  mapper-locations: classpath:cn/shq/mapper/*.xml 

3.3、项目结构

a)整体结构

 b)Java代码部分

c)资源文件部分

案例中所使用的CSS、JS文件需要从各个官网上下载(本文头部👆提供的有各个网址)。

把静态文件放到static下面;把HTML文件放到templates下面;

3.4、业务功能的实现

1)配置类

BeasConfig.java

package cn.shq.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.ResourceUtils;
import org.springframework.web.filter.HiddenHttpMethodFilter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class BeanConfig extends WebMvcConfigurationSupport {
    /**
     *    拦截器
     * */
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
// 自定义设置:指定程序中 路径为 /upimg/** 的文件,统统都到指定的Locations中去找(即 D://uploadImg//目录下去找)
        registry.addResourceHandler("/upimg/**").addResourceLocations("file:D://uploadImg//");
//  访问路径为/static/的请求,都到项目中static目录中。
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
//   在pom文件中 加载的各种前端文件 保存在resources/webjar目录下。
//        如果没有这一行代码的配置,则运行测试发现:没有样式表,找不到对应的样式文件。
        registry.addResourceHandler("/webjars/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX +"/META-INF/resources/webjars/");
        super.addResourceHandlers(registry);
    }
    /**
     * 添加restful支持
     */
    @Bean
    public HiddenHttpMethodFilter hiddenHttpMethodFilter() {
        HiddenHttpMethodFilter hiddenHttpMethodFilter = new HiddenHttpMethodFilter();
        hiddenHttpMethodFilter.setBeanName("HiddenHttpMethodFilter");
        hiddenHttpMethodFilter.setMethodParam("_method");
        return hiddenHttpMethodFilter;
    }
}

2)实体类

Book.java 

package cn.shq.model;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Book {

  private long bookId;
  private String bookName;
  private String author;
  private long price;
  private long pubId;
  /**
   * @DateTimeFormat:可以解决日期格式问题。
   *   因为页面传递过来的是String类型,而java中需要是Date类型。所以使用该注解可以进行类型转换。
   *   也可以使用另外一种方式实现类型转换:自己写一个日期格式转换类。
   * */
  @DateTimeFormat(pattern = "yyyy-MM-dd")
  private Date pubDate;

  private String pic;

}

Publish.java 

package cn.shq.model;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Publish {

  private long pubId;
  private String pubName;
  private String loc;

}

BookVO.java 

package cn.shq.model;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class BookVO {

// book类中的属性
    private long bookId;
    private String bookName;
    private String author;
    private long price;
    private Date pubDate;
    private String pic;
//    👇  publish 出版社
    private Publish publish;
}

3)Mapper文件 

BookMapper.java

package cn.shq.mapper;

import cn.shq.model.Book;
import cn.shq.model.BookVO;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Component;

import java.util.List;
@Mapper
@Component
public interface BookMapper {
    //    查询全部
    List<BookVO> selectAll();
    //    添加
    int insert(Book book);
    //    删除    (根据编号进行删除)
    int del(Integer bookId);
    //    修改
    int update(Book book);
    //    条件查询 -----> 根据编号查找对应信息
    Book findByID(Integer bookId);

}

BookMapper.xml 

<?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="cn.shq.mapper.BookMapper">
    <!-- 查询全部-->
    <select id="selectAll" resultMap="allRs">
        select b.*,p.* from book b,publish p where b.pubId=p.pubId
    </select>

    <resultMap id="allRs" type="BookVO">
        <id column="bookId" jdbcType="INTEGER" property="bookId"></id>
        <association column="pubId" property="publish" javaType="Publish">
            <id column="pubId" property="pubId"></id>
        </association>
    </resultMap>
    <!--增加-->
    <insert id="insert" parameterType="Book">
        insert into book(bookName,pubId,pubDate,pic)values(#{bookName},#{pubId,jdbcType=INTEGER},#{pubDate,jdbcType=TIMESTAMP},#{pic})
    </insert>
    <!--    删除-->
    <delete id="del" parameterType="int">
        delete from book where bookId = #{bookId}
    </delete>
    <!--    修改-->
    <update id="update" parameterType="Book">
        update book set bookName= #{bookName},pubId = #{pubId},pubDate = #{pubDate},pic = #{pic}
        where bookId = #{bookId}
    </update>
    <!--  根据ID 查找单条信息 -->
    <select id="findByID" parameterType="int" resultType="Book">
        select * from book where bookId = #{bookId}
    </select>


</mapper>

PublishMapper.java 

package cn.shq.mapper;

import cn.shq.model.Publish;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;

import java.util.List;

@Mapper
@Component
public interface PublishMapper {
    @Select("select * from publish")
    List<Publish> selectAll();
}

4)Service

BookService.java

package cn.shq.service;

import cn.shq.model.Book;
import cn.shq.model.BookVO;

import java.util.List;

public interface BookService {
    //    查询全部
    List<BookVO> selectAll();
    //    添加
    int insert(Book book);
    //    删除    (根据编号进行删除)
    int del(Integer bookId);
    //    修改
    int update(Book book);
    //    条件查询 -----> 根据编号查找对应信息
    Book findByID(Integer bookId);
}

BookServiceImpl.java

package cn.shq.service.impl;

import cn.shq.mapper.BookMapper;
import cn.shq.model.Book;
import cn.shq.model.BookVO;
import cn.shq.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;
@Service
@Transactional
public class BookServiceImp implements BookService {
    @Autowired
    BookMapper bookMapper;
    @Override
    public List<BookVO> selectAll() {
        return bookMapper.selectAll();
    }

    @Override
    public int insert(Book book) {
        return bookMapper.insert(book);
    }

    @Override
    public int del(Integer bookId) {
        return bookMapper.del(bookId);
    }

    @Override
    public int update(Book book) {
        return bookMapper.update(book);
    }

    @Override
    public Book findByID(Integer bookId) {
        return bookMapper.findByID(bookId);
    }


}

PublicServiceImpl.java

package cn.shq.service.impl;

import cn.shq.mapper.PublishMapper;
import cn.shq.model.Publish;
import cn.shq.service.PublishService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;
@Service
@Transactional
public class PublishServiceImpl implements PublishService {
    @Autowired
    PublishMapper mapper;

    @Override
    public List<Publish> selectAll() {
        return mapper.selectAll();
    }
}

5)Controller

在控制器中使用到了图片的文件上传以及页面传递的日期格式,所以需要写一个工具类。

工具类BaseController.java

该工具类在本案例中放在util包中。

package cn.shq.util;


import org.apache.commons.lang3.time.DateUtils;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;

import java.beans.PropertyEditorSupport;
import java.io.File;
import java.text.ParseException;
import java.util.Date;

public class BaseController extends DateUtils {
    //定义真实的上传路径 :  案例中所用到的文件(图片)保存在改目录下。
    public final String REAL_PATH = "D:"+ File.separator+"uploadImg"+File.separator;
    //访问路径
    public final String VISIT_PATH = File.separator+"upimg"+File.separator;
    /**
     * 将前台传递过来的日期格式的字符串,自动转化为Date类型
     */
    private static String[] parsePatterns = {
            "yyyy-MM-dd", "yyyy-MM-dd HH:mm:ss", "yyyy-MM-dd HH:mm", "yyyy-MM",
            "yyyy/MM/dd", "yyyy/MM/dd HH:mm:ss", "yyyy/MM/dd HH:mm", "yyyy/MM",
            "yyyy.MM.dd", "yyyy.MM.dd HH:mm:ss", "yyyy.MM.dd HH:mm", "yyyy.MM"
    };
    /**
     * 日期型字符串转化为日期 格式
     */
    public static Date parseDate(Object str) {
        if (str == null)
        {
            return null;
        }
        try
        {
            return parseDate(str.toString(), parsePatterns);
        }
        catch (ParseException e)
        {
            return null;
        }
    }
    @InitBinder
    public void initBinder(WebDataBinder binder)
    {
        // Date 类型转换
        binder.registerCustomEditor(Date.class, new PropertyEditorSupport()
        {
            @Override
            public void setAsText(String text)
            {
                setValue(parseDate(text));
            }
        });
    }
}

控制器类BookController.java

package cn.shq.controller;

import cn.shq.model.*;
import cn.shq.service.BookService;
import cn.shq.service.PublishService;
import cn.shq.util.BaseController;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;


import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class BookController extends BaseController {
    @Autowired
    BookService bookService;
    @Autowired
    PublishService publishService;

    //          应用的上下文路径,也可以称为项目路径
    @Value("${server.servlet.context-path}")
    String projName;    //  将项目路径 注入到  projName中。

    /**
     *  查询全部
     * */
    @GetMapping("/books")
    public String books(Model model){
        List<BookVO> bs = bookService.selectAll();
        System.out.println("bs:"+bs);
        model.addAttribute("bs",bs);
        return "index";
    }
    /**
     * 文件上传
     * */
    @PostMapping("/doUpload")
    @ResponseBody
    public Map<String,String> doUpload(MultipartFile photo) throws IOException {
        Map<String,String> result = new HashMap<>();
        //判断是否为空
        if(null ==photo){
            result.put("type","error");
            result.put("msg","请选择上传的图片");
            return result;
        }
        //判断大小
        long size = photo.getSize();
        if(size > 2000000){
            result.put("type","error");
            result.put("msg","上传的图片超过限定大小,请上传2M以内的图片!");
            return result;
        }
        //拿到图片的后缀
        int index = photo.getOriginalFilename().lastIndexOf(".");
        String suffix = photo.getOriginalFilename().substring(index);
        //判断后缀是否是图片
        if(!".jpg,.jpeg,.png,.gif".toUpperCase().contains(suffix.toUpperCase())){
            result.put("type","error");
            result.put("msg","必须上传指定格式的图片.jpg,.jpeg,.png,.gif");
            return result;
        }
        //修改文件的名字
        String newFileName = System.currentTimeMillis()+""+suffix;
        //建立文件              ↓ 因为上面继承了工具类,则可以直接使用this表示。
        File file = new File(this.REAL_PATH,newFileName);
        //写入磁盘
        photo.transferTo(file);//把文件写入到指定的路径中;
        //返回给前端数据
        result.put("type","success");
        result.put("msg","上传成功!");
        result.put("fileName",newFileName);
        result.put("imgName",projName+File.separator+this.VISIT_PATH+newFileName);
        result.put("filePath",this.VISIT_PATH);
        return result;
    }

    /**
     *   添加
     *     1、点击添加按钮,先执行查询所有的出版社,然后跳往添加的页面。
     *     2、执行添加操作。
     * */
    @GetMapping("/toAdd")
    public String toAdd(Model model){
        List<Publish> pubs = publishService.selectAll();
        model.addAttribute("pubs",pubs);
        return "add";
    }
    @PostMapping("/doAdd")
    public String doAdd(Book book){
        bookService.insert(book);
        return "redirect:/books";
    }

    //删除
    @GetMapping("/doDel/{bookId}")
    public String doDel(@PathVariable Integer bookId){
        bookService.del(bookId);
        return "redirect:/books";
    }
    /**
     * 修改:
     *     1、点击修改按钮,先根据ID查询到对应书籍的信息,和出版社信息,跳往修改页面。
     *     2、执行修改操作。
     * */
    @GetMapping("/toUpdate/{bookId}")
    public String toUpdate(@PathVariable Integer bookId,Model model){
        Book book = bookService.findByID(bookId);
        List<Publish> pubs = publishService.selectAll();
        model.addAttribute("book",book);
        model.addAttribute("pubs",pubs);
        return "update";
    }
    @PutMapping("/doUpdate")
    public String doUpdate(Book book){
        bookService.update(book);
        return "redirect:/books";
    }
}

6)视图

index.html

<!DOCTYPE html>
<!--   引入 thymeleaf -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
    th:fragment="common"  起了个名字叫 common的模板片段
    在其他页面可以使用  th:insert 或 th:replace属性轻易地包含进需要的页面中
   -->
<head th:fragment="common">
    <meta charset="UTF-8">
    <title>首页</title>
    <!--
        开始引入各种样式文件和脚本文件
    -->
    <script type="text/javascript" th:src="@{/static/js/jquery-3.4.1.min.js}"></script>
    <!--
        此处使用的webjars 路径,是在pom文件中已经引入的,可以直接拿来使用。
    -->
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.6/css/layui.css}"/>

    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>

    <link th:href="@{/static/css/bootstrap-table.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/static/js/bootstrap-table.min.js}"></script>

    <link th:href="@{/static/css/bootstrap-select.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/static/js/bootstrap-select.min.js}"></script>

    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>

<a class="layui-btn" th:href="@{/toAdd}">添加</a>
<th:block th:if="!${#lists.isEmpty(bs)}">
    <table class="layui-table" width="70%">
        <tr>
            <td>图书编号</td>
            <td>图书名称</td>
            <td>出版社</td>
            <td>出版日期</td>
            <td>宣传页</td>
            <td>操作</td>
        </tr>
        <tr th:each="b:${bs}" th:object="${b}">
            <td th:text="*{bookId}"></td>
            <td th:text="*{bookName}">图书名称</td>
            <td th:text="*{publish.pubName}">出版社</td>
            <td th:text="*{#dates.format(pubDate,'yyyy-MM-dd hh:mm:ss')}">出版日期</td>
            <td>
                <img th:src="@{|/upimg/${b.pic}|}" class="img-circle" width="40px" height="40px">
            </td>
            <td>
                <a th:href="@{/doDel/{bookId}(bookId=*{bookId})}" class="layui-btn">删除</a>
                <a th:href="@{/toUpdate/{bookId}(bookId=*{bookId})}" class="layui-btn">修改</a>
            </td>
        </tr>
    </table>
</th:block>
</body>
</html>

add.html 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
    th:insert:将被引用的模板片段插⼊到自己的标签体中
    th:replace:将被引用的模板片段替换掉自己
-->
<head th:replace="index::common">
  <meta charset="UTF-8">
  <title>添加图书</title>
</head>
<body>

<form th:action="@{/doAdd}" method="post" id="myFrm">

  <div class="form-group">
    <label for="bookName">图书名称</label>
    <input type="text" class="form-control" id="bookName" placeholder="bookName" name="bookName">
  </div>
  <div class="form-group">
    <label for="uppubId">出版社</label>
    <select class="form-control selectpicker" id="uppubId" name="pubId">
      <option value="-1">请选择</option>
      <th:block th:each="p:${pubs}" th:object="${p}">
        <option th:value="*{pubId}" th:text="*{pubName}"></option>
      </th:block>
    </select>
  </div>
  <div class="form-group">
    <label for="pubDate">出版日期</label>
    <div class='input-group date' id='datetimepicker1'>

      <input type='text' class="form-control" name="pubDate"  id="pubDate" />

      <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label"> 科目图片</label>
    <div class="col-sm-10">
      <input type="hidden" name="pic" value="" id="pic"/>
      <input type="file" name="photo" id="photoFile"/>
      <input type="button" value="上传" id="upload" class="btn-default">
      <img alt="宣传图片" src="" width="50px" height="50px" id="preview_photo" class="img-circle" style="border:1px solid gray;border-radius: 10px;"/>
    </div>
  </div>
  <button type="submit" class="layui-btn">添加</button>
</form>
<script type="module">
  $(function () {
    //  日期插件   : 日期格式  和 中国区域
    $('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',
      locale: moment.locale('zh-cn')
    });

    //点击上传
    $("#upload").click(function(){
      //判断是否选中一个文件
      if($("#photoFile").val() == ""){
        alert('必须选择图片!');
        return;
      }
      //封装传给后台的数据
      var formData = new FormData();//虚拟出来一个表单数据
      formData.append("photo",document.getElementById("photoFile").files[0]);
      $.ajax({
        url:'[[@{/doUpload}]]',
        type:'POST',
        data:formData,
        contentType: false,
        processData: false,
        dataType:'json',
        success:function(result){
          $("#preview_photo").attr("src",result.filePath+result.fileName);
          alert($("#preview_photo").attr("src"));
          $("#pic").val(result.fileName);
        },
        error:function(msg){
          console.log(msg);
        }
      });
    });
  });
</script>
</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="index::common">
    <meta charset="UTF-8">
    <title>修改界面</title>
</head>
<body>
<form th:action="@{/doUpdate}" method="post" id="myFrm" th:object="${book}">
    <input type="hidden" name="_method" value="PUT"/>
    <input type="hidden" th:field="*{bookId}"/>
    <div class="form-group">
        <label for="bookName">图书名称</label>
        <input type="text" class="form-control" id="bookName" placeholder="请输入图书名称" th:field="*{bookName}">
    </div>
    <div class="form-group">
        <label for="uppubId">出版社</label>
        <select class="form-control selectpicker" id="uppubId" th:field="*{pubId}">
            <option value="-1">请选择</option>
            <th:block th:each="p:${pubs}">
                <option th:value="${p.pubId}" th:text="${p.pubName}"></option>
            </th:block>
        </select>
    </div>
    <div class="form-group">
        <label for="pubDate">出版日期</label>
        <div class='input-group date' id='datetimepicker1'>

            <input type='text' class="form-control" name="pubDate" th:value="*{#dates.format(pubDate,'yyyy-MM-dd')}"  id="pubDate" />

            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"> 科目图片</label>
        <div class="col-sm-10">
            <input type="hidden" th:field="*{pic}" value="" id="pic"/>
            <input type="file" name="photo" id="photoFile"/>
            <input type="button" value="上传" id="upload" class="btn-default">
            <!--                        ↓  此处|是个分隔符, 可以去掉。    -->
            <img alt="宣传图片" th:src="@{|/upimg/${book.pic}|}" width="50px" height="50px" id="preview_photo" class="img-circle"/>
        </div>
    </div>
    <button type="submit" class="layui-btn">Submit</button>
</form>
<script>
    $(function(){
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('.selectpicker').selectpicker({});
        //点击上传
        $("#upload").click(function(){
            //判断是否选中一个文件
            if($("#photoFile").val() == ""){
                alert('必须选择图片!');
                return;
            }
            //封装传给后台的数据
            var formData = new FormData();//虚拟出来一个表单数据
            formData.append("photo",document.getElementById("photoFile").files[0]);
            $.ajax({
                url:'[[@{/doUpload}]]',
                type:'POST',
                data:formData,
                contentType: false,
                processData: false,
                dataType:'json',
                success:function(result){

                    $("#preview_photo").attr("src",result.imgName);
                    $("#pic").val(result.fileName);

                },
                error:function(msg){
                    console.log(msg);
                }
            });
        });
    });
</script>
</body>
</html>

四、测试效果图

启动项目

 浏览器访问 

地址:http://localhost:8088/shq/books

效果: 

添加功能 

修改 

 

删除 

附件:pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>cn.shq</groupId>
    <artifactId>springBoot_CRUD</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springBoot_CRUD</name>
    <description>springBoot_CRUD</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <!--     thymeleaf   -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--      web      -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--        mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>
        <!--      前端开发者工具  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--        mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.25</version>
        </dependency>
        <!--       lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--        测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <!--        前端开始-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>layui</artifactId>
            <version>2.5.6</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-select</artifactId>
            <version>1.13.17</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-datetimepicker</artifactId>
            <version>2.4.4</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-table</artifactId>
            <version>1.16.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>momentjs</artifactId>
            <version>2.24.0</version>
        </dependency>
        <!--  前端结束-->

        <!--     lang包的增强版   -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.9</version>
        </dependency>

        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
            <version>2.1.5</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.10</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>



    </dependencies>

    <build>
        <!-- 使得程序在执行过程中,能够解析到各个mapper.xml文件 。
				否则target目录下没有对应的mapper文件,程序不能正常执行。  -->
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.yml</include>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.css</include>
                    <include>**/*.js</include>
                    <include>**/*.html</include>
                    <include>**/*.png</include>
                    <include>**/*.jpg</include>
                    <include>**/*.properties</include>
                    <include>**/*.yml</include>
                    <include>**/*.xml</include>
                    <include>**/*.conf</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

  • 15
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
Spring Boot 是一款非常流行的 Java Web 开发框架,它可以快速开发和构建可靠的 Web 应用程序。下面是一个简单的增删改查开源案例,供参考: 1. 创建数据库表 首先,我们需要创建一个名为 `user` 的数据库表,表包含以下字段: ```sql CREATE TABLE user ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(100) NOT NULL, age INT(3) NOT NULL, PRIMARY KEY (id) ); ``` 2. 创建 Spring Boot 项目 使用 Spring Initializr 创建一个空的 Spring Boot 项目,添加以下依赖: ```xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` 其,`spring-boot-starter-web` 是 Spring Boot 的 Web 组件,`spring-boot-starter-data-jpa` 是 Spring Data JPA 的依赖,`h2` 是一个嵌入式数据库,用于测试和开发。 3. 创建实体类 在项目创建一个名为 `User` 的实体类,用于映射数据库表的数据: ```java @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; // getters and setters } ``` 4. 创建 Repository 在项目创建一个名为 `UserRepository` 的接口,继承 `JpaRepository`,并且定义一些查询方法: ```java public interface UserRepository extends JpaRepository<User, Long> { List<User> findByAge(Integer age); List<User> findByNameContaining(String name); } ``` 5. 创建控制器 在项目创建一个名为 `UserController` 的控制器,定义一些接口用于增删改查: ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping("") public ResponseEntity<List<User>> findAll() { List<User> users = userRepository.findAll(); return ResponseEntity.ok(users); } @PostMapping("") public ResponseEntity<User> create(@RequestBody User user) { User savedUser = userRepository.save(user); return ResponseEntity.ok(savedUser); } @PutMapping("/{id}") public ResponseEntity<User> update(@PathVariable Long id, @RequestBody User user) { User savedUser = userRepository.findById(id).orElse(null); if (savedUser == null) { return ResponseEntity.notFound().build(); } savedUser.setName(user.getName()); savedUser.setAge(user.getAge()); User updatedUser = userRepository.save(savedUser); return ResponseEntity.ok(updatedUser); } @DeleteMapping("/{id}") public ResponseEntity<Void> delete(@PathVariable Long id) { User savedUser = userRepository.findById(id).orElse(null); if (savedUser == null) { return ResponseEntity.notFound().build(); } userRepository.delete(savedUser); return ResponseEntity.ok().build(); } } ``` 6. 运行应用程序 在终端运行以下命令: ``` mvn spring-boot:run ``` 然后访问 `http://localhost:8080/users` 即可看到所有用户数据,使用 Postman 等工具可以测试接口的增删改查功能。 至此,一个简单的 Spring Boot 实现增删改查的开源案例就完成了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CiCi喜之郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值