spring boot商品添加模块多表插入-全栈篇-前后端不分离
程序员文章站
2022-06-28 18:55:51
spring boot商品添加模块多表插入废话不说直接开始1.1数据库表关系1.1.2主表 tb_item后端1.1.3关联表 td_item_lei1.1.4tb_item的id对应了td_item_lei的item_id2.开发软件及技术Mysqleclipsemybatis-pluspox.xml没有把整个pox复进来,看自己需要什么依赖往上加就行了1.8
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
下一篇： 学习JAVA入门介绍