8.20晴天

时间:2021-08-20
本文章向大家介绍8.20晴天,主要包括8.20晴天使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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>

二  添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
@{
    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>

原文地址:https://www.cnblogs.com/furker/p/15168256.html