<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"> <style> .el-page-header__content{ color: white; font-weight: bold; } </style> </head> <body> <div id="app"> <el-page-header style="background-color: #0095d7; color: white;line-height: 60px" @back="goBack" content="添加商品"> </el-page-header> <el-card style="width: 600px;height: 700px;margin: 0 auto"> <el-form label-width="80px"> <el-form-item label="商品标题"> <el-input type="text" v-model="p.title"></el-input> </el-form-item> <el-form-item label="商品价格"> <el-input type="text" v-model="p.price"></el-input> </el-form-item> <el-form-item label="商品原价"> <el-input type="text" v-model="p.oldPrice"></el-input> </el-form-item> <el-form-item label="商品销量"> <el-input type="text" v-model="p.saleCount"></el-input> </el-form-item> <el-form-item label="商品库存"> <el-input type="text" v-model="p.num"></el-input> </el-form-item> <el-form-item label="商品分类"> <el-select v-model="p.categoryId"> <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option> </el-select> </el-form-item> <el-form-item label="商品图片"> <el-upload action="/upload" name="pic" limit="1" list-type="picture-card" :on-success="handleSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <el-form-item> <el-button type="success" @click="insert()">添加商品</el-button> </el-form-item> </el-form> </el-card> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> <!-- import Vue before Element --> <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script> <!-- import JavaScript --> <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script> <script> let v = new Vue({ el: '#app', data: function() { return { dialogImageUrl: '', dialogVisible: false, p:{ title:"", price:"", oldPrice:"", saleCount:"", num:"", categoryId:"", url:"" }, categoryArr:[] } }, methods:{ insert(){ if (v.p.url==""){ v.$message.error("请选择上传的图片!"); return; } //发出添加商品的请求 axios.post("/product/insert",v.p).then(function (response) { location.href="/admin.html"; }) }, handleSuccess(response,file,fileList){ //response代表服务器响应的图片路径 v.p.url = response; }, goBack(){ history.back();//返回上一页面 }, handleRemove(file, fileList) { console.log(file, fileList); //发出删除图片的请求 axios.get("/remove?url="+ v.p.url).then(function () { v.$message("服务器图片删除完成"); v.p.url=""; }) }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } }, created:function () { //发请求获取分类数据 axios.get("/category/select").then(function (response) { v.categoryArr = response.data; }) } }) </script> </html>
前端添加物品
最新推荐文章于 2023-04-08 22:30:45 发布