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
- JavaScript | 函数定义的两种方法;预编译与执行
- jQuery特效 | 导航底部横线跟随鼠标缓动
- JavaScript | 选中并获取多行文本框内容的效果
- JavaScript | 动画显示比例的投票效果
- 原生JS | 作用域
- 腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析
- 原生JS | 随机抽取不重复的数组元素 —— 有没有更好的方法?
- 原生JS | 逻辑操作符的短路问题
- 数字识别,从KNN,LR,SVM,RF到深度学习
- 原生JS | 数据类型检测,并没你想象的那么简单
- Excel 有哪些可能需要熟练掌握而很多人不会的技能?
- 原生JS | 值类型与引用类型变量
- 【编程基础】C语言内存使用的常见问题
- kmeans聚类理论篇K的选择(轮廓系数)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android网络技术HttpURLConnection详解
- Ubuntu16.04下CUDA8.0和CUDA9.0共存
- Ubuntu 20.04 开启隐藏录音降噪功能(推荐)
- 解密 Linux 版本信息的方法
- ubuntu20.04连接wifi的方法(2种)
- 服务器Centos部署MySql并连接Navicat过程详解
- Android横竖屏幕切换生命周期详解
- LINUX中如何查看某个端口是否被占用的方法
- Android实现RecyclerView添加分割线的简便方法
- Android定时器Timer的停止和重启实现代码
- Ubuntu20.04开启root账户的方法步骤
- Android 将view 转换为Bitmap出现空指针问题解决办法
- Android ScrollView 下嵌套 ListView 或 GridView出现问题解决办法
- Ubuntu 安装cuda10.1驱动的实现步骤
- Android单例模式的几种方法总结