Vue、PHP、Bootstrap联手打造简单数据管理表格
这是一个用Vue、Bootstrap和PHP一起写的小实例，回顾总结了一下之前学习的知识，顺带添加点学习乐趣。
先上效果图：
用到的知识有：Vue数据绑定及组件、Bootstrap界面、PHP-AJAX交互、MySQL存储，其他细节的就不说了。
建立的文件有三个：一个HTML文件（Vue.html，js内嵌在HTML中）、两个PHP文件（getData.php、addData.php）。
首先构建前端界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试HTML</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.6/css/tether.min.css" rel="stylesheet">
<style type="text/css">
#app-1{
width: 50%;
margin:auto;
margin-top: 6%;
}
.btn{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app-1">
<table class="table table-hover table-bordered table-condensed">
<thead>
<tr>
<td style="width: 30%">姓名</td><td style="width: 30%">年龄</td><td style="width: 20%">性别</td><td style="width: 20%">删除</td>
</tr>
</thead>
<tbody>
<tr is="table-row" v-for="item in ar" :details="item"></tr>
<tr>
<td>
<input type="text" class="form-control" v-model="name">
</td>
<td>
<input type="number" class="form-control" v-model="age">
</td>
<td>
<select class="form-control" v-model="gender">
<option selected="selected" value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td>
<button class="btn btn-sm btn-warning" @click="addData">添加</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.6/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
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>';
var app1 = new Vue({
el:'#app-1',
data:{
ar:[{name:'钟德鸣',age:21,gender:'male'}],
name:'',
age:'',
gender:'男'
},
methods:{
addData:function(){
var addObj = {};
addObj.name = this.name;
addObj.age = this.age;
addObj.gender = this.gender;
$.ajax({
url:'addData.php',
type:'POST',
data:addObj,
// dataType:'json',
success:function(response){
if (response == "1") {
alert("添加成功！");
}
else{
alert("添加失败！");
}
window.location.reload();
},
error:function(){
alert('failed!');
}
});
}
},
components:{
'tableRow':{
template:templateStr,
props:['details'],
methods:{
delData:function(){
var name = event.target.value;
var delStr = 'name=' + name;
$.ajax({
url:'getData.php',
type:'POST',
data:delStr,
success:function(response){
if(response == '1'){
alert('删除成功！');
window.location.reload();
}
else{
alert('删除失败！');
window.location.reload();
}
},
error:function(){
alert('请求失败！');
}
});
}
}
}
}
});
var getData = function(){
$.ajax({
url:'getData.php',
type:'GET',
data:{},
dataType:'json',
success:function(response){
if(response == 'failed'){
alert('Get Data Failed!');
}
if(typeof response === 'string'){
response = JSON.parse(response);
}
app1.ar = response;
},
error:function(){
alert('Failed!');
}
});
};
$(function(){
getData();
});
</script>
</body>
</html>
不要忘记应用一些必要的包。
其中有一些需要注意的地方：
（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
<?php
$conn = mysqli_connect('localhost','root','***********','person');
if(!empty($_POST['name'])){
$delStr = "delete from information where name = '" . $_POST['name'] ."';";
$result = mysqli_query($conn,$delStr);
if($result === true){
echo '1';
}
else{
echo '0';
}
}
else{
if($conn){
$result = mysqli_query($conn,'select *from information');
if(mysqli_num_rows($result)>0){
$array = array();
while ($row = mysqli_fetch_array($result)) {
array_push($array, $row);
}
echo json_encode($array);
}
else{
echo "failed";
}
}
}
?>
（2）addData.php
<?php
if(!empty($_POST['name'])){
$conn = mysqli_connect('localhost','root','***********','person');
if($conn){
$insertStr = "insert into information(name,age,gender) values ('".$_POST['name']."','".$_POST['age']."','".$_POST['gender']."');";
$result = mysqli_query($conn,$insertStr);
if($result){
echo "1";
}
else{
echo "0";
}
}
}
?>
其中也有一些需要注意的地方：
（1）在查询表数据时，利用mysqli_query()函数返回的结果，使用mysqli_num_rows可以获取查询结果条数，可以用于判断是否有查询到结果，使用mysqli_fetch_array可以把结果按数组形式返回。
（2）addData在添加数据时，注意在构造插入字符串时，PHP使用“.”运算符连接字符串而不是“+”号，写完js代码之后再写PHP代码容易混淆，曾经一度导致没有插入数据。
这个小实例主要是运用了一下新学习的Vue知识，顺便回顾了一下PHP知识和Bootstrap知识。球员数据并不真实，属于随意捏造哦。
最后上一张数据库数据的图，以说明数据已经真实的添加到数据库中：
Vue、PHP、Bootstrap联手打造简单数据管理表格的更多相关文章
- 用 Vue 改造 Bootstrap，渐进提升项目框架[转]
GitChat 作者:Meathill 原文:用 Vue 改造 Bootstrap,渐进提升项目框架 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 [不要错过文末彩蛋] 前言 Vue ...
- 用 Vue 改造 Bootstrap，渐进提升项目框架
前言 Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势.我认为 Vue 成功的关键在于三点: 学习曲线平缓,有点经验的前端基本上一天就能看完文档,然后就可以上手操作. 上 ...
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- 【网络爬虫入门01】应用Requests和BeautifulSoup联手打造的第一条网络爬虫
[网络爬虫入门01]应用Requests和BeautifulSoup联手打造的第一条网络爬虫 广东职业技术学院 欧浩源 2017-10-14 1.引言 在数据量爆发式增长的大数据时代,网络与用户的沟 ...
- vue springboot利用easypoi实现简单导出
vue springboot利用easypoi实现简单导出 前言 一.easypoi是什么? 二.使用步骤 1.传送门 2.前端vue 3.后端springboot 3.1编写实体类(我这里是dto, ...
- JavaScript案例七：简单生成表格
JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...
- 使用Vs2005打造简单分页浏览器(1)原创
原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1 引言很早就有搞一个浏览器的 ...
- Bootstrap入门（四）表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
随机推荐
- Maven是什么
一.Maven是什么 Maven是一个Apache公司的开源项目,是项目构建工具.用来管理依赖. 1.Maven的好处 使用maven可以在项目中不用导入项目依赖的jar包,省去了下载和导入jar包的 ...
- solr linux配置
一.先在官网下载solr的最新版本或者你需求的版本1 目前我使用的是4.10.3(http://archive.apache.org/dist/lucene/solr/4.10.3/)2 复制到你的云 ...
- log4j 详细讲解
日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...
- C# 连接Oracle，进行查询，插入操作
注:OracleConnection和OracleCommand已被标注为[弃用的],可以使用System.Data.OleDb.OleDbConnection代替OracleCOnnection,使 ...
- Sequence contains no elements : LINQ error
1.错误意思: 出现错误的原因是:你要从一个null中取的数据. 2.错误的处理 1,使用FirstOrDefault() 来代替 First() 2.使用SingleOrDefault 来代替 Si ...
- Java 线程--继承java.lang.Thread类实现线程
现实生活中的很多事情是同时进行的,Java中为了模拟这种状态,引入了线程机制.先来看线程的基本概念. 线程是指进程中的一个执行场景,也就是执行流程,进程和线程的区别: 1.每个进程是一个应用程序,都有 ...
- https加解密过程
前前后后,看了许多次关于https加解密过程的相关文档资料,一直似懂非懂.这次,终于理解了,还画了个图,做个记录. 知识点 1.对称加密:双方用同一个密码加解密.如des,aes 2.非对称加密:双方 ...
- 新手必需用！大道至简的前端编辑器Sublime Text
很多人在进入学习前端的时候(包括我自己),除了选择学习合适的技术,还需要一个得(自)心(己)应(喜)手(欢)的开发工具,一个得心应手的开发工具除了可以令你的效率大大提高,也可以令你在写代码的时候,心情 ...
- Apache服务器运维笔记(2)----使用apxs来进行编译安装 mod_txt 模块
mod_txt是一个非常有趣的模块,它实现了文本的输出过滤器,它可以在指定类型的网页上,将你指定的txt文件显示在网页的头部和尾部. 在它的主页 http://apache.webthing.com/ ...
- 边缘检测matlab算法汇总
边缘检测matlab算法汇总 1. 基于一阶微分算子检测边缘图像 一阶微分边缘算子又称梯度边缘算子,它是利用图像在边缘处的阶跃性,及图像梯度在边缘去得极大值得特征性进行边缘检测. Sobel ...