8.19周大侠

1搭建框架

2用VUE完成功能

一 显示

@{
    ViewBag.Title = "ShowG";
}

<h2>ShowG</h2>
<script src="/Scripts/vue.js"></script>
<script src="/Scripts/axios.js"></script>
<div id="app">
    商品类目： <select v-model="gtid">
        <option value="" >请选择</option>
        <option v-for="(item,index) in gtypeitem" :value="item.GTName" >{{item.GTId}}</option>
    </select>
    上架状态:<select>
    <option value="">请选择</option>
    <option value="上架" v-model="sta">上架</option>
    <option value="未上架">未上架</option>
    <option value="下架">下架</option>
</select>
         <input type="text" name="name" value="" v-model="name"/>
         <input type="button" name="name" value="搜索" />
    <table class="table table-hover">
        <tr>
            <td>
                <input type="checkbox" name="name" value="" v-model="allcbk"/>
            </td>
            <td>ID</td>
            <td>商品图</td>
            <td>商品编号</td>
            <td>商品名称</td>
            <td>品牌</td>
            <td>所属分类</td>
            <td>销售价</td>
            <td>市场价</td>
            <td>库存</td>
            <td>发布时间</td>
            <td>上架状态</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="name" value="" v-model="cbk"/>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a>购买</a>
            </td>
        </tr>
    </table>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                list: [],
                pageindex: 1,
                pagesize: 3,
                totalcount: 0,
                totalpage:0,
                name: "",
                allcbk: false,
                cbk: [],
                gtid: "",
                sta: "",
                gtypeitem: []
               
            }
        },
        methods: {
            Gtypes() {
                axios.get('/Info/GTYpe?id=0').then(res => {
                    this.gtypeitem = res.data;
                })
            },
           
        },
        created: function () {
            this.Gtypes();
        }
    })
</script>

二  添加

@{
    ViewBag.Title = "AddG";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>添加商品</h2>


<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="proData.GCode" value="" /></td>
        </tr>
        <tr>
            <td>商品名称:</td>
            <td><input type="text" v-model="proData.GName" value="" /></td>
        </tr>
        <tr>
            <td>商品分类:</td>
            <td>
                分类:
                <select v-model="proData.GTId" v-on:change="getClassify">
                    <option v-for="(item,index) in brands" :value="item.GTId">{{item.GTName}}</option>
                </select>
                品牌:
                <select v-model="proData.GPId">
                    <option v-for="(item,index) in classifys" :value="item.GTId">{{item.GTName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>销售价:</td>
            <td><input type="text" v-model="proData.XPrice" value="" /></td>
        </tr>
        <tr>
            <td>市场价:</td>
            <td><input type="text" v-model="proData.SPrice" value="" /></td>
        </tr>
        <tr>
            <td>库存:</td>
            <td><input type="text" v-model="proData.Num" value="" /></td>
        </tr>
        <tr>
            <td>发布时间:</td>
            <td><input type="date" v-model="proData.Uptime" value="" /></td>
        </tr>
        <tr>
            <td>上架状态:</td>
            <td>
                <input type="radio" name="name" v-model="proData.Gsta" value="1" />上架
                <input type="radio" name="name" v-model="proData.Gsta" value="2" />下架
                <input type="radio" name="name" v-model="proData.Gsta" value="3" />未上架
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input type="button" class="btn btn-success" value="新添" v-on:click="handleSubmit" /></td>
        </tr>

    </table>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                proData: {  //产品添加
                    GCode: "",
                    GName: "",
                    GPId: "0",
                    GTId: "0",
                    XPrice: "",
                    SPrice: "",
                    Num: "",
                    Uptime: "",
                    Gsta: "",
                    ImgUrl:""
                },
                brands: [],  //品牌
                classifys:[] //分类
            }
        },
        methods: {
            //加载分类
            getBrand() {
                axios.get('/Info/GTYpe?id=0').then(res => {
                    this.brands = res.data;
                    this.brands.unshift({ "GTId": "0", "GTName": "请选择" });
                });
            },
            //加载品牌
            getClassify() {
                //this.proData.GTId>0  代表 点击的不是请选择
                if (this.proData.GTId>0) {
                    axios.get('/Info/GTYpe?id=' + this.proData.GTId).then(res => {
                        this.classifys = res.data;
                        this.classifys.unshift({ "GTId": "0", "GTName": "请选择" });
                        this.proData.GPId = 0;  //将品牌  变成 请选择状态
                    });
                }
                this.classifys = [];
            },
            //上传图片
            upLoad(event) {
                //获取图片
                let file = event.target.files[0];
                //配置头部类型
                //let config = {
                //    headers: {
                //        'Context-Type':"multipart/form-data"
                //    }
                //}

                let fd = new FormData();
                fd.append("file", file);

                axios.post('/Info/UpLoad', fd).then(res => {
                    if (res.data.code > 0) {
                        this.proData.ImgUrl = res.data.fileName;
                        alert('上传成功')
                    } else {
                        alert(res.data.msg)
                    }
                })


               
            },
            //添加
            handleSubmit() {
                axios.post('/Info/AddGoods', this.proData).then(res => {
                    if (res.data > 0) {
                        alert('添加成功');
                    } else {
                        alert('添加失败')
                    }
                    
                })
            }
        },
        created: function () {
            this.getBrand()
        }

    })
</script>

　　商品添加控制器代码

 

 添加的内部代码

@{
    ViewBag.Title = "AddG";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>添加商品</h2>


<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="proData.GCode" value="" /></td>
        </tr>
        <tr>
            <td>商品名称:</td>
            <td><input type="text" v-model="proData.GName" value="" /></td>
        </tr>
        <tr>
            <td>商品分类:</td>
            <td>
                分类:
                <select v-model="proData.GTId" v-on:change="getClassify">
                    <option v-for="(item,index) in brands" :value="item.GTId">{{item.GTName}}</option>
                </select>
                品牌:
                <select v-model="proData.GPId">
                    <option v-for="(item,index) in classifys" :value="item.GTId">{{item.GTName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>销售价:</td>
            <td><input type="text" v-model="proData.XPrice" value="" /></td>
        </tr>
        <tr>
            <td>市场价:</td>
            <td><input type="text" v-model="proData.SPrice" value="" /></td>
        </tr>
        <tr>
            <td>库存:</td>
            <td><input type="text" v-model="proData.Num" value="" /></td>
        </tr>
        <tr>
            <td>发布时间:</td>
            <td><input type="date" v-model="proData.Uptime" value="" /></td>
        </tr>
        <tr>
            <td>上架状态:</td>
            <td>
                <input type="radio" name="name" v-model="proData.Gsta" value="1" />上架
                <input type="radio" name="name" v-model="proData.Gsta" value="2" />下架
                <input type="radio" name="name" v-model="proData.Gsta" value="3" />未上架
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input type="button" class="btn btn-success" value="新添" v-on:click="handleSubmit" /></td>
        </tr>

    </table>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                proData: {  //产品添加
                    GCode: "",
                    GName: "",
                    GPId: "0",
                    GTId: "0",
                    XPrice: "",
                    SPrice: "",
                    Num: "",
                    Uptime: "",
                    Gsta: "",
                    ImgUrl:""
                },
                brands: [],  //品牌
                classifys:[] //分类
            }
        },
        methods: {
            //加载分类
            getBrand() {
                axios.get('/Info/GTYpe?id=0').then(res => {
                    this.brands = res.data;
                    this.brands.unshift({ "GTId": "0", "GTName": "请选择" });
                });
            },
            //加载品牌
            getClassify() {
                //this.proData.GTId>0  代表 点击的不是请选择
                if (this.proData.GTId>0) {
                    axios.get('/Info/GTYpe?id=' + this.proData.GTId).then(res => {
                        this.classifys = res.data;
                        this.classifys.unshift({ "GTId": "0", "GTName": "请选择" });
                        this.proData.GPId = 0;  //将品牌  变成 请选择状态
                    });
                }
                this.classifys = [];
            },
            //上传图片
            upLoad(event) {
                //获取图片
                let file = event.target.files[0];
                //配置头部类型
                //let config = {
                //    headers: {
                //        'Context-Type':"multipart/form-data"
                //    }
                //}

                let fd = new FormData();
                fd.append("file", file);

                axios.post('/Info/UpLoad', fd).then(res => {
                    if (res.data.code > 0) {
                        this.proData.ImgUrl = res.data.fileName;
                        alert('上传成功')
                    } else {
                        alert(res.data.msg)
                    }
                })


               
            },
            //添加
            handleSubmit() {
                axios.post('/Info/AddGoods', this.proData).then(res => {
                    if (res.data > 0) {
                        alert('添加成功');
                    } else {
                        alert('添加失败')
                    }
                    
                })
            }
        },
        created: function () {
            this.getBrand()
        }

    })
</script>