Vue学习之增删改查小案例

淩亂°似流年 2021-11-29 11:24 392阅读 0赞

增删改查小案例

--------------------

案例效果如下:

![在这里插入图片描述][2019071206233612.gif]  
其实也就是实现对表单数据的添加，删除和关键字查询的操作。

# 综合案例 #

## 1.页面布局 ##

页面布局我们通过bootstrap来快速实现，具体步骤如下

### 1.1 基础页面 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    </head>
    <body>
        <div id="app">
    
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
    
                },
                methods: {
                    
                }
            })
        </script>
    </body>
    </html>

### 1.2 表单布局 ###

使用bootstrap来设置table，在vscode中安装bootstrap插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

先把这两个插件给装好，

![在这里插入图片描述][20190712063802670.gif]

然后准备数据

![在这里插入图片描述][20190712063950894.gif]

v-for使用

![在这里插入图片描述][20190712064211395.gif]

页面效果如下

![在这里插入图片描述][20190712064618194.png]

### 1.3 头部样式 ###

通过bootstrap来添加头部布局

![在这里插入图片描述][20190712065154359.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

添加对应的添加元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

## 2.添加记录 ##

通过点击‘添加按钮’将数据添加到table中  
通过v-model指令将id和name输入框的信息和vm中的id和name绑定，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

给"添加按钮"绑定点击事件

![在这里插入图片描述][20190712070137484.gif]

添加效果

![在这里插入图片描述][2019071207032074.gif]

添加后将输入框内容置空

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

## 3.删除记录 ##

删除记录的实现逻辑:点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]

注意：方法名称不要使用delete!

数组常用的循环方法比较

循环方法      | 说明                    
     --------- | ---------------------- 
     forEach   | 不可终止循环                
     some      | 返回true终止循环            
     findIndex | 返回true可以终止循环，返回满足条件的索引
     filter    | 过滤数组，返回过滤后的数组

通过数组的some方法来循环判断

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]

或者通过findIndex方法来获取满足条件的下标，然后再删除数据:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]

删除效果

![在这里插入图片描述][20190712071449242.gif]

## 4.关键字查询 ##

关键字查询也就是根据用户的输入返回满足条件的信息，  
添加搜索框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11]

然后v-for中循环的信息就不能是直接操作list数据，而应该是调用方法返回的信息

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12]

添加search方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 13]

通过foreach来实现效果

search(keywords){
      // 保存新的数组
       var newList = []
       this.list.forEach(item => {
           // 判断循环的记录是否包含的查询的关键字
           if(item.name.indexOf(keywords) != -1){
               // 将循环的记录添加到新的数组中
               newList.push(item)
           }
       })
       // 返回数组信息
       return newList
    }

![在这里插入图片描述][20190712072746469.gif]

通过filter来实现效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 14]

![在这里插入图片描述][20190712073218327.gif]

搞定！

数组常用的循环方法比较

[2019071206233612.gif]: /images/20211129/8b84c77994f04342b405f1b20ef54bd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211129/5656b07b98fd4e1cb2dd271965cc4f01.png
[20190712063802670.gif]: /images/20211129/4bd69f6870ba49e997ddae3d792f504d.png
[20190712063950894.gif]: /images/20211129/fdf4bdbb874c4fb2ac0a36fd0f6f78e6.png
[20190712064211395.gif]: /images/20211129/c7d889a5b3d3456cbea3aa7a429b213d.png
[20190712064618194.png]: /images/20211129/4bb04a15b46f47aeb75bd7f26e3244b2.png
[20190712065154359.gif]: /images/20211129/687c054c6cc44a0897b805439d83cdcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211129/c075f3163ffa4eb9b68ddae1524a2fce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211129/d5209c08c7d24f0486d8fa51582ca3a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211129/9b6885c048604f0b9b8ba36dfa4e2b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211129/7ec4e80d5fa14025a269c5fabda94472.png
[20190712070137484.gif]: /images/20211129/b4828676c7944b3da5ee69ab1d369686.png
[2019071207032074.gif]: /images/20211129/f33f1e86b69c42e1a109248e3b06ff49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211129/9f5ecf7d36e74b18b3a4f2f000d51db4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211129/06f2a6af63874a1bb3051f49bb40ecab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]: /images/20211129/0d41059451e544a19d6dcd52db74fbd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]: /images/20211129/aeeef4f5d381411b8f3eab66e6c2a265.png
[20190712071449242.gif]: /images/20211129/b81b49bc51f540239ed5349bfd22ce6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]: /images/20211129/deb9b42ecc2b4d4cbaaf3ac83efcddda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10]: /images/20211129/42e4cf985b7949fd8706f5d7a539a61e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11]: /images/20211129/fe790abe7de94ed1bb1476e4b4013844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12]: /images/20211129/a11a4040f1cd490190db59d1eff6976e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 13]: /images/20211129/ed06f90f72da4e1abb02a7a383a9d1be.png
[20190712072746469.gif]: /images/20211129/18d97c9046cf48229174f2509d86ce49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 14]: /images/20211129/ea2ee1598a0b4b92bee268ea0d620e6d.png
[20190712073218327.gif]: /images/20211129/a25e445aecfe44668bcaf85ac742087c.png