Vue、PHP、Bootstrap联手打造简单数据管理表格

这是一个用Vue、Bootstrap和PHP一起写的小实例,回顾总结了一下之前学习的知识,顺带添加点学习乐趣。

先上效果图:

 

用到的知识有:Vue数据绑定及组件、Bootstrap界面、PHP-AJAX交互、MySQL存储,其他细节的就不说了。

建立的文件有三个:一个HTML文件(Vue.html,js内嵌在HTML中)、两个PHP文件(getData.php、addData.php)。

首先构建前端界面:

  

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>测试HTML</title>
  6     <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
  7     <link href="https://cdn.bootcss.com/tether/1.3.6/css/tether.min.css" rel="stylesheet">
  8     <style type="text/css">
  9         #app-1{
 10             width: 50%;
 11             margin:auto;
 12             margin-top: 6%;
 13         }
 14         .btn{
 15             cursor: pointer;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <div id="app-1">
 21     <table class="table table-hover table-bordered table-condensed">
 22         <thead>
 23             <tr>
 24                 <td style="width: 30%">姓名</td><td style="width: 30%">年龄</td><td style="width: 20%">性别</td><td style="width: 20%">删除</td>
 25             </tr>
 26         </thead>
 27         <tbody>
 28             <tr is="table-row" v-for="item in ar" :details="item"></tr>
 29             <tr>
 30                 <td>
 31                     <input type="text" class="form-control" v-model="name">
 32                 </td>
 33                 <td>
 34                     <input type="number" class="form-control" v-model="age">
 35                 </td>
 36                 <td>
 37                     <select class="form-control" v-model="gender">
 38                         <option selected="selected" value="男"></option>
 39                         <option value="女"></option>
 40                     </select>
 41                 </td>
 42                 <td>
 43                     <button class="btn btn-sm btn-warning" @click="addData">添加</button>
 44                 </td>
 45             </tr>
 46         </tbody>
 47     </table>
 48 </div>
 49 <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
 50 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 51 <script src="https://cdn.bootcss.com/tether/1.3.6/js/tether.min.js"></script>
 52 <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
 53 <script type="text/javascript">
 54     var templateStr = '<tr><td>{{details.name}}</td><td>{{details.age}}</td><td>{{details.gender}}</td><td><button class="btn btn-danger btn-sm" :value="details.name" @click="delData">删除</button></td></tr>';
 55     var app1 = new Vue({
 56         el:'#app-1',
 57         data:{
 58             ar:[{name:'钟德鸣',age:21,gender:'male'}],
 59             name:'',
 60             age:'',
 61             gender:''
 62         },
 63         methods:{
 64             addData:function(){
 65                 var addObj = {};
 66                 addObj.name = this.name;
 67                 addObj.age = this.age;
 68                 addObj.gender = this.gender;
 69                 $.ajax({
 70                     url:'addData.php',
 71                     type:'POST',
 72                     data:addObj,
 73                     // dataType:'json',
 74                     success:function(response){
 75                         if (response == "1") {
 76                             alert("添加成功!");
 77                         }
 78                         else{
 79                             alert("添加失败!");
 80                         }
 81                         window.location.reload();
 82                     },
 83                     error:function(){
 84                         alert('failed!');
 85                     }
 86                 });
 87             }
 88         },
 89         components:{
 90             'tableRow':{
 91                 template:templateStr,
 92                 props:['details'],
 93                 methods:{
 94                     delData:function(){
 95                         var name = event.target.value;
 96                         var delStr = 'name=' + name;
 97                         $.ajax({
 98                             url:'getData.php',
 99                             type:'POST',
100                             data:delStr,
101                             success:function(response){
102                                 if(response == '1'){
103                                     alert('删除成功!');
104                                     window.location.reload();
105                                 }
106                                 else{
107                                     alert('删除失败!');
108                                     window.location.reload();
109                                 }
110                             },
111                             error:function(){
112                                 alert('请求失败!');
113                             }
114                         });
115                     }
116                 }
117             }
118         }
119     });
120     var getData = function(){
121         $.ajax({
122             url:'getData.php',
123             type:'GET',
124             data:{},
125             dataType:'json',
126             success:function(response){
127                 if(response == 'failed'){
128                     alert('Get Data Failed!');
129                 }
130                 if(typeof response === 'string'){
131                     response = JSON.parse(response);
132                 }
133                 app1.ar = response;
134             },
135             error:function(){
136                 alert('Failed!');
137             }
138         });
139     };
140     $(function(){
141         getData();
142     });
143 </script>
144 </body>
145 </html>
View Code

不要忘记应用一些必要的包。

其中有一些需要注意的地方:

(1)在table中插入Vue组件作为tr,不能直接写组件名称。如果直接将<table-row>写在table标签中,会被认为是无效的内容,引起渲染错误。解决方法是使用is属性解决。

(2)table-row标签中使用的details属性,需要现在组件中声明,否则Vue会报错“property details is not defined...”,注意在components中声明属性时,props是一个数组,不能直接用字符串声明。

(3)我的组件是声明在Vue实例中的,所以是一个局部注册组件,只能在指定的作用域内使用。注册时的格式不同于全局注册时的格式,需要注意一下。局部注册时,components是作为参数对象的一个属性,但是components本身就是一个对象。

(4)注意到在声明组件的字符串模板中,为删除按钮绑定的事件不是声明在Vue实例中,而是在components对象属性中。原因是删除按钮的事件是子组件的事件不是父组件的事件;如果声明在Vue实例中,那么只有<table-row>之外$('#app-1')之内的标签可以使用。如果难以理解,请往下看(6)。

(5)table-row标签下的tr是定义添加行的代码。添加行中的表单控件的值通过v-model这个语法糖绑定在Vue示例的data属性中。当它们的值发生变化时,app1对象的data属性也会发生变化。

(6)注意到button控件中,也绑定了一个点击事件,看一下点击事件的事件函数在哪定义呢,根据(4)中的结论,应该定义在Vue实例中。事实就是如此,addData方法定义在Vue示例的methods属性中。而(4)中的delData函数必须定义在components对象属性中。区别就在于delData是子组件的事件函数,而addData是父组件的事件函数。

(7)addData函数通过ajax向后台传送数据,这里直接传输了一个对象,PHP后台接受数据的方式与接受表单数据方式一致。不过表单中控件的name对应了传输的对象的属性。这里如果直接传输json数据,会导致在PHP后台无法通过$_POST[]方式接受数据。

(8)看到删除按钮的事件函数delData,由于只需要传输一个name参数(MySQL数据表中的主键),所以没有用对象方式传递参数,而是用一个字符串,这样传递数据,在PHP后台也是可以获取的。

(9)关于选择框绑定数据:

  单选列表:
    在select标签中指定v-model,v-model会将选中的option的value传递给data,如果没有指定value则默认value即为选项内容。
  多选列表:
    data中的数据为一个数组,v-model指向这个数组。

下面是PHP代码:

(1)getData.php

 1 <?php
 2 $conn = mysqli_connect('localhost','root','***********','person');
 3 if(!empty($_POST['name'])){
 4     $delStr = "delete from information where name = '" . $_POST['name'] ."';";
 5     $result = mysqli_query($conn,$delStr);
 6     if($result === true){
 7         echo '1';
 8     }
 9     else{
10         echo '0';
11     }
12 }
13 else{
14     if($conn){
15         $result = mysqli_query($conn,'select *from information');
16         if(mysqli_num_rows($result)>0){
17             $array = array();
18             while ($row = mysqli_fetch_array($result)) {
19                 array_push($array, $row);
20             }
21             echo json_encode($array);
22         }
23         else{
24             echo "failed";
25         }
26     }
27 }
28 ?>

 

(2)addData.php

 1 <?php
 2 if(!empty($_POST['name'])){
 3     $conn = mysqli_connect('localhost','root','***********','person');
 4     if($conn){
 5         $insertStr = "insert into information(name,age,gender) values ('".$_POST['name']."','".$_POST['age']."','".$_POST['gender']."');";
 6         $result = mysqli_query($conn,$insertStr);
 7         if($result){
 8             echo "1";
 9         }
10         else{
11             echo "0";
12         }
13     }
14 }
15 ?>

其中也有一些需要注意的地方:

(1)在查询表数据时,利用mysqli_query()函数返回的结果,使用mysqli_num_rows可以获取查询结果条数,可以用于判断是否有查询到结果,使用mysqli_fetch_array可以把结果按数组形式返回。

(2)addData在添加数据时,注意在构造插入字符串时,PHP使用“.”运算符连接字符串而不是“+”号,写完js代码之后再写PHP代码容易混淆,曾经一度导致没有插入数据。

 

这个小实例主要是运用了一下新学习的Vue知识,顺便回顾了一下PHP知识和Bootstrap知识。球员数据并不真实,属于随意捏造哦。

最后上一张数据库数据的图,以说明数据已经真实的添加到数据库中:

转载于:https://www.cnblogs.com/DM428/p/7067366.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值