页面读取本地JSON文件并进行对比插入列表_网页中打开本地json文件

作者：黑客灵魂 | 2024-08-11 08:55:44
踩
网页中打开本地json文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <!-- 导入View.js包 -->
        <script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script>
        <!-- 导入bootstrap样式 -->
       
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        
        
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表-->
        
    </head>
    
    <body>
        
        
        <div id="app">
            
            <!-- 添加品牌，panel面板(主面板) -->
            <div class="panel panel-primary">
                
                <!-- panel面板header -->  
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                
                <!-- panel面板body -->
                <div class="panel-body form-inline">
                    <label><!--<label> 标签为 input 元素定义标注（标记）-->
                        Id:
                        <input type="text" class="form-control" v-model="id"/>
                        <!--v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值-->
                    </label>
                    
                    <label>
                        Name:
                        <input type="text" class="form-control" v-model="name" @keyup.enter="add()" />

                        <!--@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件.
                            @keyup.enter回车按键松开-->

                    </label>
                    
                    <input type="button" value="添加" class="btn btn-primary" @click="add()"/>
                    <!--@click表示绑定事件-->
                    <label>
                        搜索：
                        <!-- 这里v-color中如果不加单引号，表示data中的变量，加了表示字符串 -->
                        <input type="text" class="form-control" v-model="keywords" v-focus v-color="'red'" />
                    </label>
                    <label>
                        <input type="file" id="file1" multiple/>
                        <!--multiple 属性规定允许用户输入到 <input> 元素的多个值。
                        注意：multiple 属性适用于以下 input 类型：email 和 file-->
                    </label>

                </div>
            </div>
            
            <!-- 品牌列表 -->
            <table class="table table-bodered table-hover table-striped">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                
                <!-- 表身 -->
                <tbody>
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <!-- 这里key如果不加：就当做一个字符串了。keywords关键字 -->
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.ctime | dateFormat("yyyy-mm-dd") }}</td>
                        <td>
                            <a href="#" @click.prevent="del(item.id)">删除</a>
                            <!--@click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件-->
                        </td>
                    </tr>
                </tbody>
            </table>
            
        </div>
        
        <script>
        
            var arrLogo = [];
        
            window.addEventListener('load', () => {
            //addEventListener() 方法用于向指定元素添加监听事件

            const f = document.getElementById('file1');
            f.addEventListener('change', evt => {
                const input = evt.target;
            //const声明一个只读的常量。一旦声明，常量的值就不能改变。常量所谓的常量就是不能改变的值

                arrLogo = upload(input);
            });
            });
        
            // 全局过滤器，进行时间格式化
            /*filter过滤器
            DATE_FORMAT(date, format) 函数用于以不同的格式显示日期/时间数据
            date参数是合法的日期。format规定日期/时间的输出格式
            pattern是验证输入字段的意思*/

            Vue.filter('dateFormat',function(dateStr,pattern){              
                // 根据字符串拿到时间
                var dt = new Date(dateStr)
                
                // 拿到年月日
                var y = dt.getFullYear()
                var m = (dt.getMonth()+1).toString().padStart(2,'0')    // 使用ES6提供的方法，将月份补充为2位

                /*padStart()方法用于用另一个字符串填充一个字符串,直到达到给定的长度
                用法:string.padStart(targetLength, padString)
                参数：此方法接受上述和以下所述的两个参数：
                targetLength:它是原始字符串填充后最终字符串的长度。如果该值小于原始字符串的长度，则返回原始字符串。
                padString:这是要用原始字符串填充的字符串。如果此值太长而无法在targetLength内，则它将从结尾处截断。默认使用的字符串是空格字符(“”)。
                返回值：它返回用给定字符串填充到给定长度的最终字符串。*/
                var d = dt.getDate().toString().padStart(2,'0')
                
                // 如果输入格式为yyyy-mm-dd，toLowerCase()把输入字符串中的大写字母全部转换为小写字符
                if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                }else{      // 如果输入格式
                    var hh = dt.getHours().toString().padStart(2,'0')
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    var ss = dt.getSeconds().toString().padStart(2,'0')
                    return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
                }
                
            })
            
            // 自定义按键修饰符，keyCodes自定义按键修饰符别名
            Vue.config.keyCodes.f2 = 113    // 将f2键的keyCode为113，将113和f2绑定
            
            // 自定义指令，调用指令时需要加v-
            Vue.directive('focus',{
                bind: function(el){
                    
                },
                inserted: function(el){ 
                // inserted 表示元素插入到DOM中到时候，会执行inserted函数，el为JS原生元素
                    el.focus()          // 从内存渲染到页面上的时候，执行inserted focus焦点
                }
            })
            
            Vue.directive('color',{
                bind: function(el,binding){
                    // binding.expression = 'red',binding.value=red
                    el.style.color = binding.value      // 一加载到内存中去，就调用
                }  // 不管元素有没有被插入到页面中去，这个元素就已经有了一个内联样式
            })
                        
            function upload(input) {
            
                let arrLogo = [];
            
                //支持chrome IE10
                if (window.FileReader) {
            //FileReader对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
                    var file = input.files[0];
                    var reader = new FileReader();
                    reader.onload = function() {
                        console.log(this.result);
                        let param = JSON.parse(this.result);
                        //parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数
                        arrLogo.push(param['Logo1']);
                        arrLogo.push(param['Logo2']);
                        arrLogo.push(param['Logo3']);
                        arrLogo.push(param['Logo4']);
                        arrLogo.push(param['Logo5']);
                        
                        arrLogo.push(param['Logo6']);
                        arrLogo.push(param['Logo7']);
                        arrLogo.push(param['Logo8']);
                        arrLogo.push(param['Logo9']);
                        arrLogo.push(param['Logo10']);
                    }
                    reader.readAsText(file);
                    //readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示
                }
                
                return arrLogo;
            }
            
            var vm = new Vue({
                el:'#app',
                data:{
                    id:'',      // 与Id文本框进行了双向绑定，可以自动拿到文本框里的值
                    name:'',    // 与Name 文本框进行了双向绑定，可以自动拿到文本框里的值
                    keywords:'',    // 搜索的关键字
                    list:[
                        { id:1, name:'奔驰',ctime:new Date() },
                        { id:2, name:'宝马',ctime:new Date() }
                    ]
                },
                methods:{
                    add(){ // 添加一个car的信息
                    
                        if((this.id.length == 0) && (this.name.length == 0))
                        {
                            alert('id 和 name不能为空');
                            return;
                        }
                    
                        
                        if(this.id.length == 0)
                        {
                            alert('id不能为空');
                            return;
                        }
                        if(this.name.length == 0)
                        {
                            alert('name不能为空');
                            return;
                        }
                        
                        // 判断该品牌是否存在
                    
                        /*
                        if (window.FileReader) {
                            var file = input.files[0];
                            var reader = new FileReader();
                            reader.onload = function() {
                                console.log(this.result);
                                let param = JSON.parse(this.result);
                                
                                arrLogo.push(param['Logo1']);
                                arrLogo.push(param['Logo2']);
                                arrLogo.push(param['Logo3']);
                                arrLogo.push(param['Logo4']);
                                arrLogo.push(param['Logo5']);
                                
                                arrLogo.push(param['Logo6']);
                                arrLogo.push(param['Logo7']);
                                arrLogo.push(param['Logo8']);
                                arrLogo.push(param['Logo9']);
                                arrLogo.push(param['Logo10']);
                                
                                console.log(param);
                                console.log("key = id, value = %d" , param['id']);
                                console.log("key = success, value = %s" , param['success']);
                                
                                alert("key = id, value = " + param['id']);
                                alert("key = strAnodeMaterial, value = " + param['result']['strAnodeMaterial']);
                                
                                console.log("key = strAnodeMaterial, value = %s" , param['result']['strAnodeMaterial']);
                                console.log("key = strBatchNumber, value = %s" , param['result']['strBatchNumber']);
                                console.log("key = strContainerNumber, value = %s" , param['result']['strContainerNumber']);
                                console.log("key = strCustomer, value = %s" , param['result']['strCustomer']);
                                console.log("key = strDiaphragm, value = %s" , param['result']['strDiaphragm']);
                                console.log("key = strElectrolyte, value = %s" , param['result']['strElectrolyte']);
                                console.log("key = strNegativeMaterial, value = %s" , param['result']['strNegativeMaterial']);
                                console.log("key = strOrderNO, value = %s" , param['result']['strOrderNO']);
                                console.log("key = strPlace, value = %s" , param['result']['strPlace']);
                                console.log("key = strProjectClassify, value = %s" , param['result']['strProjectClassify']);
                                console.log("key = strShareOrder, value = %s" , param['result']['strShareOrder']);
                                
                            }
                            //reader.readAsText(file);
                            reader.readAsText('汽车品牌文件.json');
                        }
                        */
                        console.log(arrLogo);
                        
                        /*
                        let arrLogo = [
                        "宝马汽车集团(BMW)",
                        "戴姆勒集团(Daimler)",
                        "菲亚特集团(Fiat)",
                        "福特集团(Ford)",
                        "通用汽车集团(General Motors,GM)",
                        "PSA标致雪铁龙集团",
                        "雷诺-日产联盟(Renault-Nissan Alliance)",
                        "丰田汽车集团(Toyota)",
                        "大众汽车集团(Volkswagen AG)"
                        ];
                        */
                        
                        if(!arrLogo.includes(this.name))
                        {
                            alert('该品牌不存在！');
                            return;
                        }
                        
                        // console.log('ok!')
                        // 1. 获取到id和name
                        // 2. 组织出一个对象
                        var car = {id:this.id,name:this.name,ctime:new Date()}
                        // 3. 把对象添加的 data 中去
                        this.list.push(car)

                        this.id = ''
                        this.name = ''
                    },
                    del(id){ // 根据删除一个car的信息
                        // 根据id查询对象在list中的index
                        var index = this.list.findIndex(item => {   // 遍历list,将集合中每个元素传入item,
                            if (item.id == id){                     // 如果返回true，findIndex方法将这个item对应的index 返回
                                return true
                            }
                        })
                        this.list.splice(index,1)
                        //splice主要用来对js中的数组进行操作，包括删除，添加，替换等。index,1中index为位置。1是删除一行
                    },
                    search(keywords){
                        var newList = this.list.filter(item => {    // 遍历list将集合中每个元素传入item,
                            if (item.name.includes(keywords)){      // 如果item.name中包含keywords,返回item
                                return item
                            }
                        })
                        return newList
                    }
                    
                    
                }
            }); 
        </script>
    </body>
</html>

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/963302