spring boot商品添加模块多表插入-全栈篇-前后端不分离

spring boot商品添加模块多表插入

废话不说直接开始

1.1数据库表关系

1.1.2主表 tb_item

后端

1.1.3关联表 td_item_lei

1.1.4tb_item的id对应了td_item_lei的item_id

2.开发软件及技术

Mysql
eclipse
mybatis-plus

pox.xml

没有把整个pox复进来,看自己需要什么依赖往上加就行了

	<properties>
		<java.version>1.8</java.version>
		<maven-jar-plugin.version>3.0.0</maven-jar-plugin.version>
		<!-- 跳过测试类打包 -->
		<skipTests>true</skipTests>
	</properties>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<!-- mysql -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		<scope>runtime</scope>
		</dependency>
		<!--spring-test测试=-->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
		</dependency>
		<!-- 基于mybatis框架实现的一个分页插件 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.13</version>
		</dependency>
		<!-- mysql-plus -->
		<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
	    <!-- 添加AOP的依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>

3.定义实体类POJO

3.1ItemCat 商品基本信息

package com.cy.pj.common.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;
import lombok.experimental.Accessors;

@JsonIgnoreProperties(ignoreUnknown = true)
@TableName("tb_item")
@Data
@Accessors(chain = true)
public class Item {
    @TableId(type = IdType.AUTO)
    //id
    private Long id;
    //卖点
    private String title;
    //标题
    private String sellpointa;
    //标题
    private String sellpointb;
    //标题
    private String sellpointc;
    //标题
    private String sellpointd;
    //标题
    private String sellpointe;
    //价格
    private Long price;
    //数量
    private String num;
    //图片
    private String image;
    //分类id
    private Long cid;
    //1正常，2下架
    private Integer status;		
     //下面加入get set方法
}	

3.2ItemDesc商品参数信息(可以加get set方法，太长了没有复出来)

package com.cy.pj.common.pojo;

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

@TableName("td_item_lei")
@Data
@Accessors(chain = true)
public class ItemDesc {

    @TableId
    private Long itemId;
    //型号
    private String model;
    //品牌
    private String brand;
    //公价
    private Long official;
    //表径
    private String size;
    //表壳
    private String watchcase;
    //表带
    private String watch;
    //功能
    private String pass;
    //附属品
    private String accessory;
    //款式
    private String style;
    //机芯
    private String movment;
    //颜色
    private String colour;
    
    }

4.定义mapper(其实是继承mybatis-plus方法)

4.1ItemitemMapper (继承mybatis通用方法)

package com.cy.pj.sys.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cy.pj.common.pojo.Item;

public interface ItemitemMapper extends BaseMapper<Item>{

}

4.2ItemitemDescMapper

package com.cy.pj.sys.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cy.pj.common.pojo.ItemDesc;

public interface ItemitemDescMapper extends BaseMapper<ItemDesc> {

}

5.service

package com.cy.pj.sys.service;

import com.cy.pj.common.pojo.Item;
import com.cy.pj.common.pojo.ItemDesc;

public interface ItemitemService {
	
	 /**
     * 商品添加
     * @param item
     * @param itemDesc
     */
    void saveItem(Item item, ItemDesc itemDesc);
    
}

6.serviceImpl

package com.cy.pj.sys.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.cy.pj.common.pojo.Item;
import com.cy.pj.common.pojo.ItemDesc;
import com.cy.pj.sys.dao.ItemitemDescMapper;
import com.cy.pj.sys.dao.ItemitemMapper;
import com.cy.pj.sys.service.ItemitemService;

@Service
public class ItemitemServiceImpl implements ItemitemService{
	
    @Autowired(required = false)
   // @Autowired
    private ItemitemMapper itemMapper;

    @Autowired
    private ItemitemDescMapper itemDescMapper;

    @Override
    @Transactional
    public void saveItem(Item item, ItemDesc itemDesc) {
        item.setStatus(1);
        itemMapper.insert(item);
        itemDesc.setItemId(item.getId());
        itemDescMapper.insert(itemDesc);

    }

   
}

前端

用的是HTML 最终效果如下

HTML解释起来比较复杂，直接复制整个页面出来，每一行代码起什么作用都有注解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <style>
    .form-group{
      display: flex;
      margin: 0 10px 10px 0 !important;
    }
    .control-label{
      text-align: left !important;
    }
    #title,#title1,#title2,#title3,#title4,#title5{
      border: none;
      border-radius: 0;
      box-shadow:none;
      border-bottom: 1px solid #ccc;
    }
    .parameter{
      display: flex;
      flex-wrap: wrap;
    }
    #priceId,#numId,#modelId,#brandId,#officialId,#sizeId,#watchcaseId,#watchId,#passId,#accessoryId,#priceId,#styleId,#movmentId,#colourId{
      width: 250px;
      border: none;
      border-radius: 0;
      box-shadow:none;
      border-bottom: 1px solid #ccc;
    }
    #upBox {
      position: relative;
    }
    #inputBox {
      width: 100px;
      height: 30px;
      border: 1px solid cornflowerblue;
      color: cornflowerblue;
      border-radius: 20px;
      position: relative;
      text-align: center;
      line-height: 30px;
      overflow: hidden;
      font-size: 12px;
    }
    #inputBox input {
      width: 114%;
      height: 40px;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: -14%;
    }
    #imgBox {
      display: flex;
    }
    .imgContainer {
      display: inline-block;
      margin-left: 1%;
      border: 1px solid #666666;
      position: relative;
      margin-top: 30px;
      box-sizing: border-box;
    }
    .imgContainer img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
    .imgContainer p {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 30px;
      background: black;
      text-align: center;
      line-height: 30px;
      color: white;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      display: none;
    }
    .imgContainer:hover p {
      display: block;
    }
    #btn {
      outline: none;
      width: 100px;
      height: 30px;
      background: cornflowerblue;
      border: 1px solid cornflowerblue;
      color: white;
      cursor: pointer;
      margin-top: 30px;
      border-radius: 5px;
    }
  </style>
  <body>
    <!-- Horizontal Form -->
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加商品</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <div class="form-group">
        <label class="col-sm-2 control-label">选择品牌</label>
        <div class="col-sm-10">
          <ul id="menuTree" class="ztree"></ul>
        </div>
      </div>
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="title" class=" control-label">商品卖点</label>
            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="name"
                id="title"
                placeholder="请输入商品卖点"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title1" class="control-label">标题1</label>

            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="note"
                id="title1"
                placeholder="请输入商品标题1"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title2" class=" control-label">标题2</label>

            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="note"
                id="title2"
                placeholder="请输入商品标题2"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title3" class=" control-label">标题3</label>

            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="note"
                id="title3"
                placeholder="请输入商品标题3"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title4" class="control-label">标题4</label>

            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="note"
                id="title4"
                placeholder="请输入商品标题4"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title5" class="control-label">标题5</label>

            <div class="col-sm-5">
              <input
                type="text"
                class="form-control"
                name="note"
                id="title5"
                placeholder="请输入商品标题5"
              />
            </div>
          </div>
          <div class="parameter">
            <div class="form-group">
              <label for="priceId" class=" control-label">价格</label>

              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="priceId"
                  placeholder="请输入商品价格"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="numId" class=" control-label">库存</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="numId"
                  placeholder="请输入商品库存,建议输入“有货”"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="modelId" class=" control-label">型号</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="modelId"
                  placeholder="请输入商品型号"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="brandId" class="control-label">品牌</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="brandId"
                  placeholder="请输入商品品牌"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="officialId" class="control-label">公价</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="officialId"
                  placeholder="请输入商品公价"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="sizeId" class="control-label">表径</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="sizeId"
                  placeholder="请输入商品表径"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="watchcaseId" class="control-label">表壳</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="watchcaseId"
                  placeholder="请输入商品表壳"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="watchId" class="control-label">表带</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="watchId"
                  placeholder="请输入商品表带"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="passId" class="control-label">功能</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="passId"
                  placeholder="请输入商品功能"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="accessoryId" class="control-label"
                >附属品</label
              >
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="accessoryId"
                  placeholder="请输入商品附属品"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="styleId" class=" control-label">款式</label>
              <div class="col-sm-3">
                <input type="text" class="form-control" name="note" id="styleId"
                placeholder="请输入商品款式">
              </div>
            </div>
            <div class="form-group">
              <label for="priceId" class="control-label">售价</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="priceId"
                  placeholder="请输入商品售价"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="movmentId" class="control-label">机芯</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="movmentId"
                  placeholder="请输入商品售价"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="colourId" class="control-label">颜色</label>
              <div class="col-sm-3">
                <input
                  type="text"
                  class="form-control"
                  name="note"
                  id="colourId"
                  placeholder="请输入商品售价"
                />
              </div>
            </div>
          </div>
        </div>
        <div style="position: relative;display: flex;">
          商品图片：
          <div id="upBox">
            <div id="inputBox">
              <input
                type="file"
                title="请选择图片"
                id="file"
                multiple
                accept="image/png,image/jpg,image/gif,image/JPEG"
              />点击选择图片
            </div>
            <div id="imgBox"></div>
            <button id="btn">上传</button>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">重置</button>
          <button type="button" class="btn btn-info pull-right btn-save">
            提交
          </button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
    <script
      type="text/javascript"
      src="bower_components/ztree/jquery.ztree.all.min.js"
    ></script>
    <script type="text/javascript">
      var zTree;
      var setting = {
      data : {
     	    simpleData : {
     			enable : true, //使用简单数据模式
     			idKey : "id",  //节点数据中保存唯一标识的属性名称
     			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
     			rootPId : null  //根节点id
     		}
     	},
     	check:{
     		enable:true,
     		nocheckInherit:true
     	}//此配置提供复选框操作(可查官方zTree)
      }
      $(function(){
      	//异步加载菜单信息,初始化页面菜单
      	doLoadSysMenus();
      	$(".box-footer")
      	.on("click",".btn-save",doSaveOrUpdate);
      	
      });
      $(".btn-cancel").click(function () {
        	$("#title").val("");
          	$("#title1").val("");
          	$("#priceId").val("");
          	$("#numId").val("");
          	$("#title2").val("");
          	$("#title3").val("");
          	$("#title4").val("");
          	$("#modelId").val("");
          	$("#brandId").val("");
          	$("#officialId").val("");
          	$("#sizeId").val("");
          	$("#watchcaseId").val("");
          	$("#watchId").val("");
          	$("#passId").val("");
          	$("#accessoryId").val("");
          	$("#styleId").val("");
          	//$("#priceId").val(data.price)
          	$("#movmentId").val("");
          	$("#colourId").val("");
          	$("#title5").val("");
    	})
      function doInitEditFormData(data){
      	console.log("data",data);
      	//1.初始化角色自身信息
      	$("#title").val(data.title);
      	$("#title1").val(data.sellpointa)
      	$("#priceId").val(data.price)
      	$("#numId").val(data.num)
      	$("#title2").val(data.sellpointb)
      	$("#title3").val(data.sellpointc)
      	$("#title4").val(data.sellpointd)
      	$("#modelId").val(data.model)
      	$("#brandId").val(data.brand)
      	$("#officialId").val(data.official)
      	$("#sizeId").val(data.size)
      	$("#watchcaseId").val(data.watchcase)
      	$("#watchId").val(data.watch)
      	$("#passId").val(data.pass)
      	$("#accessoryId").val(data.accessory)
      	$("#styleId").val(data.style)
      	//$("#priceId").val(data.price)
      	$("#movmentId").val(data.movment)
      	$("#colourId").val(data.colour)
      	$("#title5").val(data.sellpointe);
      	//$("#priceId").val(data.price)
      	//$("#numId").val(data.num);
      	
      	//2.初始化菜单信息
      	//2.1展开树节点
      	zTree.expandAll(true);
      	//2.2获取角色对应的菜单id
      	var menuIds=data.menuIds;
      	//2.3迭代所有菜单id
      	for(var i in menuIds){
      	  //基于菜单id获取ztree中的node节点
      	  var node=
      	  zTree.getNodeByParam("id",menuIds[i]);
      	  //让节点选中
      	  zTree.checkNode(node,true,false);
      	}
      }
      function doCancel(){
      	var url="role/role_list11";
      	$("#mainContentId")
      	.load(url);
      }
      function doSaveOrUpdate(){
      	debugger
      	//1.参数(表单数据)
      	var params=doGetEditFormData();
      	if(!params.title.trim()){
      		alert("商品卖点不能为空");
      		return;
      	}
      	if(!params.menuIds.trim()){
      		alert("请选择品牌")
      		return;
      	}
      	var data=$("#mainContentId").data("data");
      	if(data)params.id=data.id;
      	//2.url
      	var insertUrl="item/save";
      	var url=data?updateUrl:insertUrl;
      	//3.ajax request
      	$.post(url,params,function(result){
      		if(result.state==1){
      		   alert("提交成功");
      		   doCancel();
      		}else{
      		   alert("提交成功");
      		}
      	})
      }
      function doGetEditFormData(){
      	//1.获取角色自身信息
      	var params={
      		title:$("#title").val(),
      		sellpointa:$("#title1").val(),
      		sellpointb:$("#title2").val(),
      		price:$("#priceId").val(),
      		num:$("#numId").val(),
      		sellpointc:$("#title3").val(),
      		model:$("#numId").val(),
      		brand:$("#brandId").val(),
      		official:$("#officialId").val(),
      		size:$("#sizeId").val(),
      		watchcase:$("#watchcaseId").val(),
      		watch:$("#watchId").val(),
      		pass:$("#passId").val(),
      		accessory:$("#accessoryId").val(),
      		style:$("#styleId").val(),
      		price:$("#priceId").val(),
      		movment:$("#movmentId").val(),
      		colour:$("#colourId").val(),
      		sellpointd:$("#title4").val(),
      		sellpointe:$("#title5").val()
      		//price:$("#priceId").val,
      		//num:$("#numId").val
      		
      		
      	}
      	//2.获取选中菜单信息
      	var menuIds=[];
      	console.log(zTree)
      	var checkedNodes=
      	zTree.getCheckedNodes(true);
      	for(var i in checkedNodes){
      		menuIds.push(checkedNodes[i].id);
      	}
      	params.menuIds=menuIds.toString();
      	return params;
      }
      //页面加载完成时初始化zTree
      function doLoadSysMenus(){
      	var url="item/doFindZtree"
      	$.getJSON(url,function(result){
      	 console.log(result);
      	 if(result.state==1){
      		zTree=$.fn.zTree.init(
      		$("#menuTree"),setting,result.data);
      		//修改时添加如下代码(注意先后顺序)
      		var rowData=$("#mainContentId").data("data");
      	    if(rowData)doInitEditFormData(rowData);
      	 }else{
      		alert(result.message);
      	 }
      });
  }
      

      imgUpload({
        inputId: "file", //input框id
        imgBox: "imgBox", //图片容器id
        buttonId: "btn", //提交按钮id
        upUrl: "", //提交地址
        data: "file1", //参数名
      });
      var imgSrc = []; //图片路径  
      var imgFile = []; //文件流  
      var imgName = []; //图片名字  
      //选择图片  
      function imgUpload(obj) {
        var oInput = '#' + obj.inputId;
        var imgBox = '#' + obj.imgBox;
        var btn = '#' + obj.buttonId;
        $(oInput).on("change", function() {
            var fileImg = $(oInput)[0];
            var fileList = fileImg.files;
            for(var i = 0; i < fileList.length; i++) {
                var imgSrcI = getObjectURL(fileList[i]);
                imgName.push(fileList[i].name);
                imgSrc.push(imgSrcI);
                imgFile.push(fileList[i]);
            }  
            addNewContent(imgBox);  
        })  
        $(btn).on('click', function() {  
            var data = new Object;  
            data[obj.data] = imgFile;  
            submitPicture(obj.upUrl, data);  
        })  
      }  
      //图片展示  
      function addNewContent(obj) {  
        $(imgBox).html("");  
        for(var a = 0; a < imgSrc.length; a++) {  
            var oldBox = $(obj).html();  
            $(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');  
        }  
      }  
      //删除  
      function removeImg(obj, index) {  
          imgSrc.splice(index, 1);  
          imgFile.splice(index, 1);  
          imgName.splice(index, 1);  
          var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");  
          addNewContent(boxId);  
      }  
      //上传(将文件流数组传到后台)  
      function submitPicture(url,data) {  
        console.log(data);  
        alert('请打开控制台查看传递参数！');  
        if(url&&data){  
            $.ajax({  
                type: "post",  
                url: url,  
                async: true,  
                data: data,  
                traditional: true,  
                success: function(dat) {  
        //          console.log(dat);  
                }  
            });  
        }  
      }  
      //图片灯箱  
      function imgDisplay(obj) {  
          var src = $(obj).attr("src");  
          var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'  
          $('body').append(imgHtml);  
      }  
      //关闭  
      function closePicture(obj) {  
          $(obj).parent("div").remove();  
      }
      //图片预览路径
      function getObjectURL(file) {  
          var url = null;  
          if(window.createObjectURL != undefined) { // basic  
              url = window.createObjectURL(file);  
          } else if(window.URL != undefined) { // mozilla(firefox)  
              url = window.URL.createObjectURL(file);  
          } else if(window.webkitURL != undefined) { // webkit or chrome  
              url = window.webkitURL.createObjectURL(file);  
          }  
          return url;  
      }  
    </script>
  </body>
</html>

结束！！！！

本文地址：https://blog.csdn.net/m0_46596133/article/details/109581037