前端页面
前端代码:GoodBaseSetting.vue
<template>
<div>
<el-container class="content-row">
<div class="input-tip">
商品名称:
</div>
<div class="input-field">
<el-input v-model="queryParams.gname"></el-input>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
商品原价:
</div>
<div class="input-field">
<el-input v-model="queryParams.goprice"></el-input>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
商品折扣价:
</div>
<div class="input-field">
<el-input v-model="queryParams.grprice"></el-input>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
库存数量:
</div>
<div class="input-field">
<el-input v-model="queryParams.gstore"></el-input>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
商品封面:
</div>
<el-upload
name="fileName"
:auto-upload="false"
:limit="1"
:on-change="handleChange"
:file-list="fileList"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
</el-container>
<el-container class="content-row">
<div class="input-tip">
是否推荐:
</div>
<div class="input-field">
<el-radio-group v-model="queryParams.isRecommend">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
是否广告:
</div>
<div class="input-field">
<el-radio-group v-model="queryParams.isAdvertisement">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">
商品分类:
</div>
<div class="input-field">
<el-select v-model="queryParams.goodstype_id">
<el-option v-for="item in categoryList"
:key="item.id" :label="item.typename" :value="item.id">
</el-option>
</el-select>
</div>
<div style="margin-top:6px">
<el-button type="primary" size="mini" round @click="addCategory">添加分类</el-button>
</div>
</el-container>
<el-container class="content-row">
<el-button type="success" plain @click="submit">提交</el-button>
<div style="margin-left:40px"></div>
<el-button type="warning" plain @click="cancel">取消</el-button>
</el-container>
</div>
</template>
<script>
import axios from 'axios'
import {ElMessage} from 'element-plus'
export default{
data(){
return {
queryParams:{
gname:"",
goprice:0,
grprice:0,
gstore:0,
gpicture:"",
isAdvertisement:0,
isRecommend:0,
goodstype_id:0
},
categoryList:[
{
id:1231,
typename:"男装",
},
],
}
},
mounted(){
let baseURL='http://localhost:8888';
axios.get(baseURL+"/type/showAllTypes")
.then(successResponse=>{
this.categoryList=successResponse.data;
}).catch(failResponse=>{
alert("响应异常");
})
},
methods:{
//通过onchanne触发方法获得文件列表
handleChange(file, fileList) {
this.queryParams.gpicture=fileList[0].raw.name;
this.queryParams.fileName=fileList[0].raw;
},
cancel(){
this.$router.go(-1)
},
submit(){
ElMessage({
type:'success',
message:'设置商品基本属性: '+JSON.stringify(this.queryParams)
})
if(this.queryParams.gname=="" || this.queryParams.gpicture==""){
alert("商品名称或图片为空,请重新输入!")
}
else{
let formData=new FormData();
for(var key in this.queryParams){
formData.append(key.toString(), this.queryParams[key]);
}
let config={
headers:{'Content-Type':'multipart/form-data'}
};
let baseURL='http://localhost:8888/goods/addGoods';
axios.post(baseURL, formData, config)
.then(successResponse => {
if (successResponse.data === "no") {
ElMessage({
message:'添加商品失败',
type:'error',
duration:3000
});
}else{
ElMessage({
message:'添加商品成功!',
type:'success',
duration:3000
});
}
})
.catch(failResponse => {
ElMessage({
message:'响应异常',
type:'error',
duration:3000
});
})
}
},
addCategory(){
this.$router.push({name:'GoodCategory'})
}
}
}
</script>
后端代码:Controller
@CrossOrigin //跨域访问
@RequestMapping("/addGoods")
public String addGoods(Goods goods)
throws IllegalStateException, IOException{
System.out.println("goods:"+goods.toString());
return goodsService.addGoods(goods);
}
后端代码:ServiceImpl
@Override
public String addGoods(Goods goods) throws IllegalStateException, IOException {
String act="add";
MultipartFile myfile=goods.getFileName();
// System.out.println("gpicture:"+goods.getGpicture()+", fileName:"+goods.getFileName());
//如果选择了上传文件,将文件上传到指定的目录images
if(!myfile.isEmpty()){
//上传文件路径
String path="H:\\JetBrains\\IntelliJ_IDEA\\JavaEE_Proj2022\\SpringBoot_Proj_2022\\" +
"spb_eBusiness\\src\\main\\resources\\static\\images";
//获得上传文件原名
String fileName=myfile.getOriginalFilename();
//对文件重命名
String fileNewName=MyUtil.getNewFileName(fileName);
File filePath=new File(path+File.separator+fileNewName);
//如果文件目录不存在,创建目录
if(!filePath.getParentFile().exists())
filePath.getParentFile().mkdirs();
//将上传文件保存到一个目标文件中
myfile.transferTo(filePath);
//将重命名后的图片名存到goods对象中,添加时使用
goods.setGpicture(fileNewName);
}
if("add".equals(act)){
int n= goodsRepository.addGoods(goods);
if(n>0) //成功
return "ok";
//失败
return "no";
}else{//修改
int n= goodsRepository.updateGoods(goods);
if(n>0) //成功
return "ok";
//失败
return "no";
}
}