Vue使用axios提交POJO数据（含文件）到后端

最新推荐文章于 2024-01-28 23:41:44 发布

Vorüarn0362

最新推荐文章于 2024-01-28 23:41:44 发布

阅读量355

点赞数

分类专栏： Web开发文章标签： vue.js 前端 javascript JavaEE

本文链接：https://blog.csdn.net/Sgappti/article/details/128582373

版权

Web开发专栏收录该内容

1 篇文章

订阅专栏

该代码示例展示了如何使用Vue.js组件创建一个前端页面，用于输入商品的基本信息如名称、价格、库存等，并通过axios与后端接口进行交互。用户可以选择商品图片，选择是否推荐和作为广告，以及商品分类。提交时，数据会以multipart/form-data格式发送到后端，后端处理文件上传和商品信息存储。

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

前端页面

前端代码：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";
        }
    }