vue案例-图书管理_vue图书管理

作者：从前慢现在也慢 | 2024-06-02 16:46:12

踩

vue图书管理

1.学习vue时做的一个小案例，本身案例很简单，经过优化又加些比较常用的功能，比如在添加图书前，先判断编号是否存在，并提示给用户，并且编号文本框只能输入数字等等优化。
2.使用到数组数据，方法，监视，挂载钩子，数据是本地数据，方法实现了大部分的功能函数，监视属性实现动态检查数据的合法性，挂载实现了计时器的触发，每秒查询本地时间并且做了格式化，主要是修改与添加图书时，自动调用本地的时间日期。

-案例所有代码在文章末尾-

案例功能-增删改查

1.效果图
2.添加与修改图书
3.删除图书
4.查询图书
5.全部代码

1.效果图

静态图
在这里插入图片描述
动态图

2.添加与修改图书

这个vue方法实现增加与修改的图书，一个方法解决增加与修改图书，实现代码复用

 addbook: function () {
                    if (this.flag) {
                        // changetime;
                        this.books.some((item) => {
                            if (item.id == this.idmsg) {

                                item.date = this.dates;

                                item.name = this.namemsg;

                                this.tipmsg = ""
                                return true;
                            }
                        })

                    } else {
                        arr = {
                            id: this.idmsg,
                            name: this.namemsg,
                            date: this.dates
                        };
                        this.books.push(arr);
                        this.tipmsg = ""
                    }

                },
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

3.删除图书

根据findIndex方法找到需要删除的数组索引，通过splice方法删除（splice是在源数组修改）

    del: function (id) {

                    var index = this.books.findIndex(function (item) {

                        return item.id == id
                    })


                    this.books.splice(index, 1)
                },
               

1
2
3
4
5
6
7
8
9
10
11
12

4.查询图书

通过vue的watch监视属性，动态监视数据的变化，数据一变化就调用函数方法，来查询数组的编号ID是否存在，如果存在或不存在都会通过信息提示给用户。

 idmsg: function (val) {
                    this.idmsg = val.replace(/\D/g, "")
                    if (this.flag) {
                        this.tipmsg = ""
                    } else {
                        this.books.some((item) => {
                            if (item.id == val) {
                                this.tipmsg = "ID已存在"
                                return true
                            } else if (val == "") {

                                this.tipmsg = ""

                            } else {
                                this.tipmsg = "ID可用"
                            }
                        })
                    }
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        caption {
            font-weight: bold;
            font-size: 24px;
        }

        .clearfix::after {
            display: block;
            content: "";
            height: 0;
            clear: both;
        }

        table {
            width: 600px;
            margin: auto;
            background-color: #f4faed;

            /* background-color: #247624; */
            border: rebeccapurple solid 1px;
        }

        th,
        td {

            text-align: center;
            width: 150px;
            border: rebeccapurple solid 1px;
        }

        th {
            background-color: #e3f1d1;
        }

        .tail {
            margin: 20px auto;
            width: 600px;
            font-weight: bold;
            font-size: 20px;
            /* border: 1px solid brown; */
        }

        #submit {
            display: none;
        }

        .submit {
            font-weight: bold;
            margin: 20px auto;
            width: 600px;
            margin-top: 15px;
            /* background-color: aliceblue; */
        }

        .submit input:nth-of-type(1) {
            text-align: center;
            width: 100px;

        }

        .submit input:nth-of-type(2) {
            width: 150px;
            text-align: center;
        }

        .submit span {
            margin-left: 18px;
        }

        .submit .go {
            margin-left: 8px;
            width: 80px;
        }

        .crrent {
            display: none;
        }

        .show {
            display: block;

        }

        .tipmsg {
            font-size: 12px;
            color: brown;
            width: 240px;
            line-height: 14px;
            margin-top: 5px;
            text-align: center;
            /* text-indent: 20px; */
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <caption>图书管理</caption>

            <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>日期</th>
                    <th>设置</th>
                </tr>

            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td><a href="#" @click.prevent="change(item.id,item.name)">修改</a><span> | </span> <a href="#"
                            @click="del(item.id)">删除</a></td>
                </tr>


            </tbody>

        </table>
        <div class="submit" :class="crrent">
            <span>编号：</span><input type="text" v-model.trim="idmsg" :disabled="flag" placeholder="请输入数字">
            <span>书名：</span><input type="text" v-model="namemsg">
            <input type="button" class="go" v-model="tip" @click="addbook">
            <input type="button" class="go" value="取消" @click="cancle">
            <div class="tipmsg">{{tipmsg}}</div>
        </div>

        <div class="tail clearfix">
            <div class="left"> <span>图书数量：</span><span style="color: brown;font-size: 25px;">{{books.length}}</span>
            </div>
            <div class="right"> <a href="#" @click="sub">添加图书(add)</a></div>

        </div>
        <!-- {{dates}}
        <input type="button" value="123" @click="changetime()"> -->

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",

            data() {
                return {
                    dates: "",
                    tipmsg: "",
                    flag: false,
                    idmsg: "",
                    namemsg: "",
                    tip: "",
                    crrent: "crrent",

                    books: [

                        {
                            id: "1",
                            name: "三国演义",
                            date: "9-1日15:35",
                        },
                        {
                            id: "2",
                            name: "水浒传",
                            date: "9-2日15:35"
                        },
                        {
                            id: "3",
                            name: "红楼梦",
                            date: "9-5日15:35"
                        },
                        {
                            id: "4",
                            name: "西游记",
                            date: "9-19日15:35"
                        },
                    ]

                }
            },
            mounted() {
                this.changetime();
            },
            methods: {
                changetime: function () {

                    // var ret = ""
                    setInterval(
                        () => {
                            var dates = new Date()
                            this.dates = (dates.getMonth() + 1) + "月" + dates.getDate() + "日" + dates.getHours() + ":" + dates.getMinutes() + ":" + dates.getSeconds()
                        }, 1000)
                },
                sub: function () {
                    this.idmsg = "";
                    this.flag = false

                    this.crrent = "show"
                    this.tip = "添加图书"
                    this.namemsg = "";

                    this.tipmsg = "";
                },
                cancle: function () {
                    this.crrent = "crrent"
                },
                change: function (id, name) {

                    this.flag = true;
                    // console.log(this.flag);
                    this.crrent = "show"
                    this.tip = "修改图书"
                    this.idmsg = id;
                    this.namemsg = name;
                    this.tipmsg = "";


                },
                addbook: function () {
                    if (this.flag) {
                        // changetime;
                        this.books.some((item) => {
                            if (item.id == this.idmsg) {

                                item.date = this.dates;

                                item.name = this.namemsg;

                                this.tipmsg = ""
                                return true;
                            }
                        })

                    } else {
                        arr = {
                            id: this.idmsg,
                            name: this.namemsg,
                            date: this.dates
                        };
                        this.books.push(arr);
                        this.tipmsg = ""
                    }

                },


                del: function (id) {

                    var index = this.books.findIndex(function (item) {

                        return item.id == id
                    })


                    this.books.splice(index, 1)
                },


            },
            watch: {
                idmsg: function (val) {
                    this.idmsg = val.replace(/\D/g, "")



                    if (this.flag) {
                        this.tipmsg = ""
                    } else {

                        this.books.some((item) => {


                            if (item.id == val) {
                                this.tipmsg = "ID已存在"
                                return true
                            } else if (val == "") {

                                this.tipmsg = ""

                            } else {
                                this.tipmsg = "ID可用"
                            }
                        })


                    }



                }
            }


        })


    </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

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/663489