bootstrap+springboot增删改查分页

最新推荐文章于 2025-05-26 09:23:51 发布

原创最新推荐文章于 2025-05-26 09:23:51 发布 · 1.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#springboot #bootstrap #增删改查 #分页 #mybatis

java 同时被 3 个专栏收录

67 篇文章

订阅专栏

mysql

9 篇文章

订阅专栏

springboot

8 篇文章

订阅专栏

本文介绍了一个基于Spring Boot的商品管理系统实现过程，包括前后端交互、数据分页查询、增删改查等功能，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:pom.xml中加入依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2:application.properties里面加入

spring.thymeleaf.prefix=classpath:/templates/
spring.resources.static-locations=classpath:/,classpath:/resources/,classpath:/static/

3:productList.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表展示页面</title>
</head>
<!--引入index.html,index.html里面全是引入的js-->
<div th:include="index :: header" ></div>
<style type="text/css">
    body{
        margin-top: 60px;
    }
</style>
<body>
<div  class="container-fluid">
<div id="toolbar">
    <form class="form-inline">

        <table>
            <tr>
                <td>
                    <button type="button" onclick="toAddProduct()" class="btn btn-success glyphicon glyphicon-plus">添加</button>
                </td>
                <td>
                    <button type="button" onclick="deleteProduct()"  class="btn btn-danger glyphicon glyphicon-trash">删除</button>
                </td>
                <td>名称</td>
                <td>
                    <input type="text" id="searchTitle" class="form-control"/></td>
                <td>
                <td>描述</td>
                <td>
                    <input type="text" id="searchDescription" class="form-control"/></td>
                <td>
                    <div class="text-center">
                        <button type="button" onclick="searchProduct()" class="btn btn-info glyphicon glyphicon-search">搜索</button>
                        <button type="button" onclick="cleanSearch()" class="btn btn-info glyphicon glyphicon-search">清空</button>   
                    </div>
                </td>

            </tr>
        </table>
    </form>
</div>

<table class="table" id="productTable"></table>
</div>
</body>
<script th:src="@{../product/showProduct.js}"></script>
</html>

4:product.js

//初始化
$(function(){
    findAllProductList();
})
//条件查询
function searchProduct(){
    var searchTitle = $("#searchTitle").val();
    var searchDescription = $("#searchDescription").val();
    $('#productTable').bootstrapTable('refresh',{
        query:{
            title:searchTitle,
            description:searchDescription
        }
    })
}


//清除条件查询
function  cleanSearch() {
    $("#searchTitle").val("");
    $("#searchDescription").val("");
    $("#productTable").bootstrapTable("refresh");
    console.log('暂未获取到用户数据')
}



//添加
function toAddProduct(){
    var dialog = bootbox.dialog({
        title: '添加商品',
        message: createAddContent("../page/toAddProduct"),
        size: 'large',
        buttons: {
            cancel: {
                label: "取消",
                className: 'btn-danger',
                callback: function(){}
            },
            ok: {
                label: "保存",
                className: 'btn-info',
                callback: function(){
                    saveProduct();
                }
            }
        }
    });

}
var res;
function createAddContent(url){
    $.ajax({
        url:url,
        async:false,
        success:function(data){
            res = data;
        }
    });
    return res;
}
function saveProduct(){
    $.ajax({
        url:"../commodity/saveProduct",
        type:"post",
        data:$("#addForm").serialize(),
        dataType:"json",
        success:function(data){
            if(data){
                $('#productTable').bootstrapTable('refresh');
            }else{
                bootbox.alert({
                    size:'small',
                    title:'提示',
                    message:'保存失败'
                })
            }
        }
    })
}


//删除
deleteProduct=function(){
    var row= $("#productTable").bootstrapTable('getSelections');
    if(row.length<1){
        bootbox.alert({
            size: "small",
            title: "提示",
            message: "请至少选择一条!",
            buttons: {
                ok: {
                    label: '确定',
                    className: 'btn-success'
                }
            },
            callback: function(){}
        })
    }else{
        var ids="";
        for (var i = 0; i < row.length; i++) {
            ids==""?ids+=row[i].productid:ids+=","+row[i].productid;
        }
        bootbox.alert({
            size: "small",
            title: "提示",
            message: "是否确认删除id为"+ids+"的数据吗!",
            buttons: {
                ok: {
                    label: '确定',
                    className: 'btn-success'
                }
            },
            callback: function(){
                if(true){
                    $.ajax({
                        url:"../commodity/deleteProductByIdAndIds",
                        data:{ids:ids},
                        success:function(){
                            alert("删除成功");
                            $("#productTable").bootstrapTable("refresh");
                        }
                    })
                }
            }
        })
    }
}


//列表
findAllProductList=function(){
    $("#productTable").bootstrapTable({
        toolbar:'#toolbar',
        url:'../commodity/findAllProductList',	//获取数据地址
        //toolbar:'#toolbar', //条查的工具栏
        method:'post',
        contentType:'application/x-www-form-urlencoded',//post请求按照表单提交,提交参数到后台
        pagination:true,//是否展示分页
        pageList:[2,4,6,8,10],
        pageNumber:1,
        pageSize:2,
        sidePagination:'server',
        clickToSelect: true, //是否启用点击选中行
        striped:true,//是否显示斑马线
        queryParams:function(){
            return {
                page: this.pageNumber,
                rows: this.pageSize,
                title:$("#searchTitle").val(),
                description : $("#searchDescription").val()
            };
        },
        columns:[
            {checkbox:true},
            {field:'productid',title:'商品ID',align:'center'},
            {field:'title',title:'商品名称',align:'center'},
            {field:'description',title:'商品描述',align:'center'},
            {field:'num',title:'库存',align:'center'},
            {field:'price',title:'价格',align:'center'},
            {field:'imgid',title:'图片',align:'center'},
            {field:'issale',title:'是否促销',align:'center',formatter:function(value,row,index){return value==1?"促销":"高价";}},
            {field:'saleprice',title:'促销价格',align:'center'},
            {field:'ishot',title:'是否热卖',align:'center',formatter:function(value,row,index){return value==1?"热卖":"卖不动";}},
            {field:'ison',title:'是否上架',align:'center',formatter:function(value,row,index){return value==1?"上架":"下架";}},
            {field:'istui',title:'是否推荐',align:'center',formatter:function(value,row,index){return value==1?"推荐":"不推荐";}},
            {field:'createtime',title:'创建时间',align:'center'},
            {field:'storename',title:'店铺名称',align:'center'},
            {field:'cz',title:'操作',align:'center',formatter:function(value,row,index){
                    return '<a href="javascript:findInfo('+row.productid+');">查看</a>|<a href="javascript:toEditProduct('+row.productid+');">编辑</a>'
            }}

        ]

    })

}


//查看详情
function findInfo(productid) {
    var dialog = bootbox.dialog({
        title: '查看详情',
        message: createAddContent('../page/toProductInfo'),
        size: 'large',
        buttons: {
            cancel: {
                label: "关闭",
                className: 'btn-danger',
                callback: function () {
                }
            }
        }
    });
    $.ajax({
        url:'../commodity/findProductInfoById',
        typr:'post',
        data:{
            productid:productid
        },
        dataType:'json',
        success:function(data){
            $("#productid").val(data.productid);
            $("#title").val(data.title);
            $("#description").val(data.description);
            $("#num").val(data.num);
            $("#price").val(data.price);
            $("#saleprice").val(data.saleprice);
            $("#issale").val(data.issale==1?"促销":"高价");
            $("#ishot").val(data.ishot==1?"热卖":"卖不动");
            $("#ison").val(data.ison==1?"上架":"下架");
            $("#istui").val(data.istui==1?"推荐":"不推荐");
            $("#storename").val(data.storename);
        }
    })
}



//修改编辑按钮
function toEditProduct(productid){
    var dialog = bootbox.dialog({
        title: '修改会员',
        message: createAddContent('../page/toEditProduct'),
        size: 'large',
        buttons: {
            cancel: {
                label: "取消!",
                className: 'btn-danger',
                callback: function(){
                }
            },
            ok: {
                label: "保存!",
                className: 'btn-info',
                callback: function(){
                    updateProduct();
                }
            }
        }
    });

    $.ajax({
        url:'../commodity/findProductInfoById',
        typr:'post',
        data:{
            productid:productid
        },
        dataType:'json',
        success:function(data){
            $("#productid").val(data.productid);
            $("#title").val(data.title);
            $("#description").val(data.description);
            $("#num").val(data.num);
            $("#price").val(data.price);
            $("#saleprice").val(data.saleprice);
            $("#issale").val(data.issale);
            $("#ishot").val(data.ishot);
            $("#ison").val(data.ison);
            $("#istui").val(data.istui);
            $("#storename").val(data.storename);
        }
    })
}

function updateProduct(){
    $.ajax({
        url:"../commodity/updateProduct",
        type:"post",
        data:$("#updateForm").serialize(),
        dataType:"json",
        success:function(data){
            if(data){
                $('#productTable').bootstrapTable('refresh');
            }else{
                bootbox.alert({
                    size:'small',
                    title:'提示',
                    message:'保存失败'
                })
            }
        }
    })
}

}

5:ProductController

package com.limy.controller;


import com.limy.model.Product;
import com.limy.service.CommodityServiceLmy;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.UUID;

@Controller
@RequestMapping("commodity")
public class CommodityController {
    @Autowired
    private CommodityServiceLmy commodityServiceLmy;

    SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    //商品管理--分页列表---limy
    @RequestMapping("findAllProductList")
    @ResponseBody
    public HashMap<String,Object> findAllProductList(Integer page, Integer rows, Product product){
        HashMap<String, Object> productlist = commodityServiceLmy.findAllProductList(page,rows,product);
        return productlist;
    }


    //商品管理--批量删除---limy
    @RequestMapping("deleteProductByIdAndIds")
    @ResponseBody
    public boolean deleteProductByIdAndIds(Integer[] ids) {
        try {
            commodityServiceLmy.deleteProductByIdAndIds(ids);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }

    }
    //商品管理---添加---limy
    @RequestMapping("saveProduct")
    @ResponseBody
    public boolean saveProduct(Product product){
        if(null!=product.getTitle()&&!"".equals(product.getTitle())){
            try {
                String uuid = getUUID();
                product.setProductid(Integer.valueOf(uuid));
                product.setCreatetime(dateFormat.format(new Date()));
                commodityServiceLmy.saveProduct(product);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }else{
            return false;
        }
    }

    //商品管理---查看单条详情---limy
    @RequestMapping("findProductInfoById")
    @ResponseBody
    public Product findProductById(Integer productid){
        Product product = commodityServiceLmy.findProductById(productid);
        return product;
    }

    //商品管理---修改保存--limy
    @RequestMapping("updateProduct")
    @ResponseBody
    public boolean updateProduct(Product product){
        if(null!=product.getProductid()){
            try {
                product.setCreatetime(dateFormat.format(new Date()));
                commodityServiceLmy.updateProduct(product);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }else{
            return false;
        }
    }

    public static String getUUID() {
        String id =null;
        UUID uuid = UUID.randomUUID();
        id = uuid.toString();
        //去掉随机ID的短横线
        id = id.replace("-", "");
        //将随机ID换成数字
        int num = id.hashCode();
        //去绝对值
        num = num < 0 ? -num : num;
        id = String.valueOf(num);
        return id;
    }


}

6:service

package com.limy.service;


import com.limy.model.Product;

import java.util.HashMap;
import java.util.List;

public interface CommodityServiceLmy {
    //列表
    HashMap<String, Object> findAllProductList(Integer page, Integer rows, Product product);

    Product findProductById(Integer productid);
    //删除
    void deleteProductByIdAndIds(Integer[] ids);

    void saveProduct(Product product);

    void updateProduct(Product product);

    List<Product> fandAll();
}

7:serviceImpl

package com.limy.serviceImpl;

import com.limy.mapper.CommodityMapper;
import com.limy.model.Product;
import com.limy.service.CommodityServiceLmy;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;

@Service
public class CommodityServiceImpl implements CommodityServiceLmy {
    @Autowired
    private CommodityMapper commodityMapper;


    //列表
    @Override
    public HashMap<String, Object> findAllProductList(Integer page, Integer rows, Product product) {
        HashMap<String, Object> params = new HashMap<>();
        params.put("product", product);
        int count = commodityMapper.findProductCount(params);
        Integer start = (page - 1) * rows;
        params.put("startIndex",start);
        params.put("endIndex",rows);
        List<Product> productList= commodityMapper.findProductList(params);
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("total", count);
        hashMap.put("rows", productList);
        return hashMap;
    }

    @Override
    public Product findProductById(Integer productid) {
        return commodityMapper.findProductById(productid);
    }

    //删除
    @Override
    public void deleteProductByIdAndIds(Integer[] ids) {
        commodityMapper.deleteProductByIdAndIds(ids);
    }
    //添加
    @Override
    public void saveProduct(Product product) {
        commodityMapper.saveProduct(product);
    }

    @Override
    public void updateProduct(Product product) {
        commodityMapper.updateProduct(product);
    }

    @Override
    public List<Product> fandAll() {
        return commodityMapper.fandAll();
    }

}

8:mapper

package com.limy.mapper;

import com.limy.model.Product;

import java.util.HashMap;
import java.util.List;

public interface CommodityMapper {

    Product findProductById(Integer productid);

    int findProductCount(HashMap<String, Object> params);

    List<Product> findProductList(HashMap<String, Object> params);

    void deleteProductByIdAndIds(Integer[] ids);

    void saveProduct(Product product);

    void updateProduct(Product product);

    List<Product> fandAll();
}

9:product.xml

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.limy.mapper.CommodityMapper">



    <select id="findProductCount" parameterType="map" resultType="int">
        select count(1) from shop_product t
        <include refid="tiaocha"></include>
    </select>
    <select id="findProductList" parameterType="map" resultType="com.limy.model.Product">
        select * from shop_product t
        <include refid="tiaocha"></include>
        LIMIT ${startIndex},${endIndex}
    </select>
    <sql id="tiaocha">
        <where>
            <if test="product.title!=null and  product.title!=''">
                and t.title like '%${product.title}%'
            </if>
            <if test="product.description!=null and  product.description!=''">
                and t.description like '%${product.description}%'
            </if>
        </where>
    </sql>



    <delete id="deleteProductByIdAndIds" parameterType="int">
        delete from shop_product where productid in
        (
        <foreach collection="array" index="index" item="ids" separator=",">
            #{ids}
        </foreach>
        )
    </delete>


    <!--添加-->
    <insert id="saveProduct" parameterType="com.limy.model.Product">
		insert into shop_product
		  (productid,title,description,num,price,imgid,issale,saleprice,ishot,ison,istui,createtime,storename)
		  values
		  (#{productid},#{title},#{description},#{num},#{price},#{imgid},#{issale},#{saleprice},#{ishot},#{ison},#{istui},#{createtime},#{storename})
	</insert>

    <!--根据id查询单条详情-->
    <select id="findProductById" resultType="com.limy.model.Product">
      select * from shop_product where productid=#{productid}
    </select>

    <!--修改-->
    <update id="updateProduct" parameterType="com.limy.model.Product">
		update shop_product set productid=#{productid},cateid=#{cateid},title=#{title},description=#{description},num=#{num},
		price=#{price},imgid=#{imgid},issale=#{issale},
		saleprice=#{saleprice},ishot=#{ishot},ison=#{ison},
		istui=#{istui},createtime=#{createtime},storeid=#{storeid},storename=#{storename}
		where productid = #{productid}
	</update>


    <select id="fandAll" resultType="com.limy.model.Product">
      select * from shop_product
    </select>

</mapper>

10:product实体类

package com.limy.model;

import java.io.Serializable;

public class Product implements Serializable {
    private static final long serialVersionUID = -7358719935960505448L;
    //商品表
        private     Integer         productid;          //商品id
        private     Integer         cateid;                //商品分类id
        private     String           title;                   //商品标题
        private     String           description;       //商品描述
        private     Integer         num;                  //库存
        private     Double         price;                 //价格
        private     String           imgid;                //封面图
        private     Integer         issale;                 //是否促销(0:否，1:是)
        private     Double         saleprice;            //促销价格
        private     Integer         ishot;                  //是否热卖(0:否，1:是)
        private     Integer         ison;                   //是否上架(0:否，1:是)
        private     Integer         istui;                   //是否推荐(0:否，1:是)
        private     String           createtime;         //创建时间
        private     Integer          storeid;            //店铺id
        private     String           storename;         //店铺名字


    public Integer getStoreid() { return storeid; }

    public void setStoreid(Integer storeid) { this.storeid = storeid; }

    public String getStorename() {return storename; }

    public void setStorename(String storename) { this.storename = storename; }

    public Integer getProductid() {
        return productid;
    }

    public void setProductid(Integer productid) {
        this.productid = productid;
    }

    public Integer getCateid() {
        return cateid;
    }

    public void setCateid(Integer cateid) {
        this.cateid = cateid;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public String getImgid() {
        return imgid;
    }

    public void setImgid(String imgid) {
        this.imgid = imgid;
    }

    public Integer getIssale() {
        return issale;
    }

    public void setIssale(Integer issale) {
        this.issale = issale;
    }

    public Double getSaleprice() {
        return saleprice;
    }

    public void setSaleprice(Double saleprice) {
        this.saleprice = saleprice;
    }

    public Integer getIshot() {
        return ishot;
    }

    public void setIshot(Integer ishot) {
        this.ishot = ishot;
    }

    public Integer getIson() {
        return ison;
    }

    public void setIson(Integer ison) {
        this.ison = ison;
    }

    public Integer getIstui() {
        return istui;
    }

    public void setIstui(Integer istui) {
        this.istui = istui;
    }

    public String getCreatetime() {
        return createtime;
    }

    public void setCreatetime(String createtime) {
        this.createtime = createtime;
    }

    @Override
    public String toString() {
        return "Product{" +
                "productid=" + productid +
                ", cateid=" + cateid +
                ", title='" + title + '\'' +
                ", description='" + description + '\'' +
                ", num=" + num +
                ", price=" + price +
                ", imgid='" + imgid + '\'' +
                ", issale=" + issale +
                ", saleprice=" + saleprice +
                ", ishot=" + ishot +
                ", ison=" + ison +
                ", istui=" + istui +
                ", createtime='" + createtime + '\'' +
                ", storeid=" + storeid +
                ", storename='" + storename + '\'' +
                '}';
    }
}

11:index.html-----引入所有的js文件

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>js引入页面</title>
    <div th:fragment="header">
    <!-- 引入bootstrap的css -->
    <link  href="../js/bootstrap/css/bootstrap.min.css" th:href="@{../js/bootstrap/css/bootstrap.min.css}" rel="stylesheet" >
    <!-- 引入bootstrap-treeview的css -->
    <link  href="../js/treeview/bootstrap-treeview.min.css" th:href="@{../js/treeview/bootstrap-treeview.min.css}" rel="stylesheet" >
    <!-- 引入bootstrap-addTabs的css -->
    <link  href="../js/addTabs/addTabs.css"  th:href="@{../js/addTabs/addTabs.css}" rel="stylesheet" >
    <!-- 引入bootstrap-table的css -->
    <link  href="../js/table/bootstrap-table.min.css"  th:href="@{../js/table/bootstrap-table.min.css}" rel="stylesheet" >
    <!-- 引入fileinput的css -->
    <link type="text/css" rel="stylesheet" href="../js/fileinput/css/fileinput.min.css"  th:href="@{../js/fileinput/css/fileinput.min.css}" />




    <!-- 引入jquery -->
    <script type="text/javascript" src="../js/jquery.min.js" th:src="@{../js/jquery.min.js}"></script>
    <!-- 引入my97 -->
    <script type="text/javascript" src="../js/my97/WdatePicker.js" th:src="@{../js/my97/WdatePicker.js}"></script>
    <!-- 引入bootstrap的js-->
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap.min.js"  th:src="@{../js/bootstrap/js/bootstrap.min.js}"></script>
    <!-- 引入bootstrap的js-->
    <script type="text/javascript" src="../js/treeview/bootstrap-treeview.min.js" th:src="@{../js/treeview/bootstrap-treeview.min.js}"></script>
    <!-- 引入bootstrap的js-->
    <script type="text/javascript" src="../js/addTabs/addTabs.js" th:src="@{../js/addTabs/addTabs.js}"></script>
    <!-- 引入bootstrap-table的js-->
    <script type="text/javascript" src="../js/table/bootstrap-table.min.js" th:src="@{../js/table/bootstrap-table.min.js}"></script>
    <script type="text/javascript" src="../js/table/locale/bootstrap-table-zh-CN.min.js" th:src="@{../js/table/locale/bootstrap-table-zh-CN.min.js}"></script>
    <!-- 引入bootbox.js -->
    <script type="text/javascript" src="../js/bootbox/bootbox.js" th:src="@{../js/bootbox/bootbox.js}"></script>
        <!-- 引入fileinput的js -->
        <script type="text/javascript" src="../js/fileinput/js/fileinput.js" th:src="@{../js/fileinput/js/fileinput.min.js}"></script>
        <!--  引入fileinput的js -->
        <script type="text/javascript" src="../js/fileinput/js/locales/zh.js" th:src="@{../js/fileinput/js/locales/zh.js}"></script>


        <script type="text/javascript" src="../js/fileinput/themes/fa/theme.js" th:src="@{../js/fileinput/themes/fa/theme.js}"></script>


        <!-- 引入时间插件 -->
        <link type="text/css" rel="stylesheet" href="../js/datetimepicker/css/bootstrap-datetimepicker.css" th:href="@{../js/datetimepicker/css/bootstrap-datetimepicker.css}"/>


        <script type="text/javascript" src="../js/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" th:src="@{../js/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
        <script type="text/javascript" src="../js/datetimepicker/js/bootstrap-datetimepicker.js" th:src="@{../js/datetimepicker/js/bootstrap-datetimepicker.js}"></script>

        <script type="text/javascript" src="../js/area.js" th:src="@{../js/area.js}"></script>
    </div>
</head>
<body>
测试跳转
</body>
</html>

12:效果图
在这里插入图片描述