Vue的添加+图片上传+二级联动

本文主要是介绍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的添加+图片上传+二级联动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！