前端：boostrap+vue.js 模拟后台数据增删改查

最新推荐文章于 2020-10-20 13:44:17 发布

竹缘号

最新推荐文章于 2020-10-20 13:44:17 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： boostrap vue.js 前端模拟数据增删改查增删改查前端

本文链接：https://blog.csdn.net/qq_38643028/article/details/91349259

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端：boostrap+vue.js 模拟后台数据增删改查

工具使用
界面设计
数据添加
数据删除
数据查询
数据修改
整体效果

工具使用

使用vs code，一个很好的代码编写软件，支持许多插件！！

界面设计

将html代码模板准备好，对于boostrap、jQuery和vue的文件的引用可更具自己的喜爱来引用。如图所示：

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
              return {}
            },
            methods: {}
        });
    </script>
</body>

</html>

添加boostrap的组件样式，并创建模拟数据。使用vue中的v-for来循环遍历数据，这里对于数据的绑定我使用v-text和{{}}两种方式，v-text会覆盖原来的内容。效果图如下:

代码如下:

<body>
    <div id="app">
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">前端：模拟后台数据增删改查</h3>
              </div>
              <div class="panel-body form-inline">
                   <label>id:<input type="text" class="form-control" ></label>
                   <label>name:<input type="text" class="form-control" ></label>
                   <button type="button" class="btn btn-primary">添加</button>
                   <label>搜索:<input type="text" class="form-control" placeholder="输入关键字"></label>
              </div>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td v-text="item.id"></td>
                    <td>{{ item.name }}</td>
                    <td><a href="">删除</a> 
                        <a href="">添加</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
              return {
                  list:[{id:1,name:'马云'},{id:2,name:'马化腾'},{id:3,name:'任正非'}],
              }
            },
            methods: {}
        });
    </script>
</body>
</html>

数据添加

使用v-model来双向绑定数据，添加个点击事件add。在body相关区域修改以下代码

 <label>id:<input type="text" class="form-control" v-model="id"></label>
<label>name:<input type="text" class="form-control" v-model="name"></label>
 <button type="button" class="btn btn-primary" @click='add'>添加</button>

在vue的data中为添加输入框绑定数据

 data() {
              return {
                  list:[{id:1,name:'马云'},{id:2,name:'马化腾'},{id:3,name:'任正非'}],
                  id:'',
                  name:'',
              }
            },

在vue的方法内添加add事件，代码如下：

 methods: {
          add(){
                 this.list.push({id:this.id,name:this.name})
                 this.id=this.name=''//使输入框为空
                }

数据删除

修改以下代码:

<a href="" @click.prevent='del(item.id)'>删除</a>

在vue的方法中添加删除方法

del(id){
            var index = this.list.findIndex(item=>{
                     if(item.id==id) return true
      		 })
		  this.list.splice(index,1);//index为索引下标，此为删除指定下标的数据
    }

数据查询

在vue中添加keyword数据，和setlist数据（为数据修改做准备）代码如下:

 data() {
              return {
                  list:[{id:1,name:'马云'},{id:2,name:'马化腾'},{id:3,name:'任正非'}],
                  id:'',
                  name:'',
                  sid:'',
                  sname:'',
                  keyword:'',
                  setlist:[],
              }
            },

修改以下代码:

<label>搜索:<input type="text" class="form-control " placeholder="输入关键字" v-model="keyword" ></label>

将之前的v-for修改成以下代码:

<tbody>
                <tr v-for="(item, index) in search(keyword)" :key="index">
                    <td v-text="item.id"></td>
                    <td>{{ item.name }}</td>
                    <td><a href="" @click.prevent='del(item.id)'>删除</a> 
                        <a href="">修改</a></td>
                </tr>
            </tbody>

在vue的methods中添加search查询事件

search(word){
                    return this.list.filter(item=>{
                        // 在ES6中为字符串提供了新方法，即String.pototype.includes('要判断是否包含的字符串段')
                        if(item.name.includes(word)) return item
                    })
                }

数据修改

修改以下代码:

<a  data-toggle="modal" href='#modal-id' @click='set(item.id)'>修改</a>

添加boostrap的模态框组件，绑定相关数据。

  <!-- 模态框 -->
        <div class="modal fade" id="modal-id">
            <div class="modal-dialog  modal-sm">
                <div class="modal-content" >
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改表单</h4>
                    </div>
                    <div class="modal-body">
                       <form class="form-horizontal" role="form">
                           <div class="form-group" >
                               <label  class="col-sm-2 control-label">id:</label>
                               <div class="col-sm-10">
                                   <input type="email" class="form-control" placeholder="" v-model="item.id">
                               </div>
                           </div>
                           <div class="form-group">
                            <label  class="col-sm-2 control-label">name:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" placeholder="" v-model="sname">
                            </div>
                        </div>
                       </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click.prevent='update(sid)' data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

方法事件中添加以下事件代码:

//set方法为获取需修改的数据
 set(id){
          this.setlist =this.list.filter(item=>{
                if(item.id==id) {
                   this.sid=item.id
                   this.sname=item.name
                }
          })
    },
    //update方法为确认修改
 update(id) {
         this.list.find((item, i) => {
                if (item.id == id) {
                    tem.id=this.sid
                     item.name=this.sname
                      // this.list.splice(i, 1, item)
            	 }
         })
      this.sid=this.sname=''
 },

整体效果

在这里插入图片描述
整体代码,对输入框的相关的class使用vue的class绑定改变方式处理，添加了输入框为空时，输入框颜色改变，校验是否正确添加:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">前端：模拟后台数据增删改查</h3>
            </div>
            <div class="panel-body form-inline">
                <label :class="iflag?'has-error':''">id:<input type="text" class="form-control" v-model="id"></label>
                <label :class="nflag?'has-error':''">name:<input type="text" class="form-control"
                        v-model="name"></label>
                <button type="button" class="btn btn-primary" @click='add'>添加</button>
                <label>搜索:<input type="text" class="form-control " placeholder="输入关键字" v-model="keyword"></label>
            </div>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search(keyword)" :key="index">
                    <td v-text="item.id"></td>
                    <td>{{ item.name }}</td>
                    <td><a href="" @click.prevent='del(item.id)'>删除</a>
                        <a data-toggle="modal" href='#modal-id' @click='set(item.id)'>修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" id="modal-id">
            <div class="modal-dialog  modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改表单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">id:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="" v-model="sid">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">name:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="" v-model="sname">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click.prevent='update(sid)'
                            data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                        id: 1,
                        name: '马云'
                    }, {
                        id: 2,
                        name: '马化腾'
                    }, {
                        id: 3,
                        name: '任正非'
                    }],
                    id: '',
                    name: '',
                    sid: '',
                    sname: '',
                    keyword: '',
                    setlist: [],
                    iflag: false,
                    nflag: false,
                }
            },
            methods: {
                add() {
                    if (this.id == '') {
                        this.iflag = true
                        this.nflag=false
                    } else if (this.name == '') {
                        this.nflag = true
                        this.iflag=false
                    } else {
                        this.list.push({
                            id: this.id,
                            name: this.name
                        })
                        this.iflag=this.nflag=false
                        this.id = this.name = '' //是输入框为空
                    }
                },
                del(id) {
                    var index = this.list.findIndex(item => {
                        if (item.id == id) return true
                    })
                    this.list.splice(index, 1); //index为索引下标，此为删除指定下标的数据
                },
                search(word) {
                    return this.list.filter(item => {
                        // 在ES6中为字符串提供了新方法，即String.pototype.includes('要判断是否包含的字符串段')
                        if (item.name.includes(word)) return item
                    })
                },
                set(id) {
                    this.list.filter(item => {
                        if (item.id == id){
                            this.sid=item.id
                            this.sname=item.name
                        }
                    })
                },
                update(id) {
                    this.list.find((item, i) => {
                        if (item.id == id) {
                            item.id=this.sid
                            item.name=this.sname
                           // this.list.splice(i, 1, item)
                        }
                    })
                    this.sid=this.sname=''
                },
            }
        });
    </script>
</body>

</html>