Vue的添加+图片上传+二级联动
2021/8/19 23:07:22
本文主要是介绍Vue的添加+图片上传+二级联动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、一种写法
1、Domain=Model
2、Repository=Dal
3、Service=Bll
4、写成文件夹或直接做成方法可以清晰的分辨写作的代码模块
二、Dal层
//显示 查询 public List<DisPlayModel> GetShow(int? nid,string name) { var list = from a in db.UserModels join b in db.TableModels on a.BNId equals b.NId join c in db.TableModels on a.BPId equals c.PId select new DisPlayModel { Id = a.Id, Pictrue = a.Pictrue, Number = a.Number, Name = a.Name, BNId = a.BNId, BNName = b.TradeName, Shop = a.Shop, BPId = a.BPId, BPName = c.TradeName, SellingPrice = a.SellingPrice, MarketPrice = a.MarketPrice, Repertory = a.Repertory, Weight = a.Weight, IssueTime = a.IssueTime, State = a.State, NId = b.NId, TradeName = b.TradeName, PId = b.PId }; if(nid!=null) { list = list.Where(p => p.NId == nid); } if(!string.IsNullOrEmpty(name)) { list = list.Where(p => p.Name.Contains(name)); } return list.ToList(); } //添加 public int Adds(UserModel user) { db.UserModels.Add(user); return db.SaveChanges(); } //下拉框 public List<TableModel> GetXiaLa(int id) { return db.TableModels.Where(p => p.PId == id).ToList(); }
三、Bll层
//显示查询 public List<DisPlayModel> GetShow(int? nid, string name) { return userDal.GetShow(nid, name); } //添加 public int Adds(UserModel user) { return userDal.Adds(user); } //下拉框 public List<TableModel> GetXiaLa(int id) { return userDal.GetXiaLa(id); }
四、控制器
//显示页面 public ActionResult Index() { return View(); } //显示 查询 [HttpGet] public ActionResult GetShow(int? nid, string name) { var list = userBll.GetShow(nid,name); return Json(list,JsonRequestBehavior.AllowGet); } //添加页面 public ActionResult Add() { return View(); } //添加功能 [HttpPost] public ActionResult Adds(UserModel user) { return Json(userBll.Adds(user),JsonRequestBehavior.DenyGet); } //下拉框功能 [HttpGet] public ActionResult GetXiaLa(int id) { return Json(userBll.GetXiaLa(id),JsonRequestBehavior.AllowGet); } //文件上传功能 [HttpPost] public ActionResult UpLoad() { try { //一、获取前台传过来的文件 var file = Request.Files[0]; //将虚拟路径转成物理路径 var imgDir = Server.MapPath("/Images/"); //判断你要存储的文件夹是否存在,不存在创建 //需要引用System.IO if (!Directory.Exists(imgDir)) { //创建文件夹 Directory.CreateDirectory(imgDir); } //保存 file.SaveAs(imgDir + file.FileName); return Json(new { code = 1, fileName = file.FileName, msg = "" },JsonRequestBehavior.DenyGet); } catch (Exception ex) { return Json(new { code = 0, fileName = "", msg = ex.Message }, JsonRequestBehavior.DenyGet); } }
五、页面显示
@*引用*@ <script src="~/Content/vue.js"></script> <script src="~/Content/axios.js"></script> <div id="app"> <table class="table table-bordered"> <tr> <td>商品图:</td> <td><input type="file" value="" v-on:change="UpLoad" /></td> </tr> <tr> <td>商品编号:</td> <td><input type="text" v-model="pageData.Number" value="" /></td> </tr> <tr> <td>商品名称:</td> <td><input type="text" v-model="pageData.Name" value="" /></td> </tr> <tr> <td>商品分类:</td> <td> 品牌: <select v-model="pageData.BNId" v-on:change="getClassifys"> <option v-for="(item,index) in brands" :value="item.NId">{{item.TradeName}}</option> </select> 所属分类: <select v-model="pageData.BPId"> <option v-for="(item,index) in classifys" :value="item.NId">{{item.TradeName}}</option> </select> </td> </tr> <tr> <td>商铺:</td> <td><input type="text" v-model="pageData.Shop" value="" /></td> </tr> <tr> <td>销售价:</td> <td><input type="text" v-model="pageData.SellingPrice" value="" /></td> </tr> <tr> <td>市场价:</td> <td><input type="text" v-model="pageData.MarketPrice" value="" /></td> </tr> <tr> <td>库存:</td> <td><input type="text" v-model="pageData.Repertory" value="" /></td> </tr> <tr> <td>重量:</td> <td><input type="text" v-model="pageData.Weight" value="" /></td> </tr> <tr> <td>发布时间:</td> <td><input type="date" v-model="pageData.IssueTime" value="" /></td> </tr> <tr> <td>上架状态:</td> <td> <input type="radio" name="name" v-model="pageData.State" value="1" />上架 <input type="radio" name="name" v-model="pageData.State" value="2" />下架 <input type="radio" name="name" v-model="pageData.State" value="3" />未上架 </td> </tr> <tr> <td></td> <td colspan="2"><input type="button" class="btn btn-success" v-on:click="PostAdd" value="新添" /></td> </tr> </table> </div> <script> let app = new Vue({ el: "#app", //类 data() { return { pageData: { Pictrue: "", Number: "", Name: "", BNId: "0", BPId: "0", Shop: "", SellingPrice: "", MarketPrice: "", Repertory: "", Weight: "", IssueTime: "", State: "", }, brands: [], classifys: [], } }, //方法 methods: { //品牌 getBrand() { axios.get('/User/GetXiaLa?id=0').then(res => { this.brands = res.data; this.brands.unshift({ "NId": "0", "TradeName": "请选择" }); }); }, //分类 getClassifys() { if (this.pageData.BNId > 0) { axios.get('/User/GetXiaLa?id=' + this.pageData.BNId).then(res => { this.classifys = res.data; this.classifys.unshift({ "NId": "0", "TradeName": "请选择" }); this.pageData.BPId = 0; }); } this.classifys = []; }, //上传图片 UpLoad(event) { //获取图片 let file = event.target.files[0]; //设置头部类型 //可不写 但不标准 let config = { haders: { 'Context-Type': "multpart/form-data" } } let fd = new FormData(); fd.append("file", file); axios.post('/User/UpLoad', fd, config).then(res => { if (res.data.code > 0) { this.pageData.Pictrue = res.data.fileName; alert("上传成功"); } else { alert(res.data.msg); } }) }, //添加 PostAdd() { axios.post('/User/Adds', this.pageData).then(res => { if (res.data > 0) { alert("添加成功"); } else { alert("添加失败"); } }) } }, //文档就绪函数 created: function () { this.getBrand(); } }) </script>
待续......
这篇关于Vue的添加+图片上传+二级联动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15useCallback教程:React Hook入门与实践
- 2024-11-15React中使用useContext开发:初学者指南
- 2024-11-15拖拽排序js案例详解:新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战:从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程:从入门到实践
- 2024-11-14useReducer开发入门教程:轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程:轻松掌握React中的useRef用法
- 2024-11-14useState开发:React中的状态管理入门教程