mysql+ php_php+mysql

本文整理一下使用php和mysql向前端推送数据的过程。

数据库部分：

1.首先安装服务器，我选择xampp，安装可以选择任意地址。安装完成，打开xampp-control.exe 。

选择开启Apache和MySQL：

2.浏览器进去http://localhost/phpmyadmin/。

这个时候就可以看到数据库页面。新建一个数据库。

3.新建一个数据表，假设我们需要的数据有n个字段，字段数就选择n+1，多出的一个字段用来存放id。

4.新建完成后设置表的内容时，id记得勾选A_I，这样新建的表项id值会自动增加。如果是字符串类型的数据，排序规则选择utf8_general_ci，这样前端也使用utf8编码，不会出现乱码。

5.新建表完成以后，SQL页面可以看到如何使用命令行操作表格，后面我们在代码中对表格的操作也会利用这些命令行。

代码部分：

1.从数据库读取数据并显示在页面上，我们用jquery的ajax读取:

js代码：var $lists = $("article ul");

$lists.empty();

$.ajax({

url:"server/getnews.php",

type:"get",/*ajax get方法读取数据*/datatype:"json",/*json方式获取*/data:{"newstype":newsType},/*传递一个条件，当newstype项的值为newsType时*/success:function(data) {

$.each(data,function(index,item) {/*将data逐条遍历*/console.log(item);/*将数据内容放置到页面上*/

var $lists = $("article ul");var $list = $("

").addClass("news-list").prependTo($lists);var $newsImg = $("

console.log(item.newstype);var $img = $("").attr("src", item.newsimg).appendTo($newsImg);var $newsContent = $("

").html(item.newstitle).appendTo($newsContent);var $p = $(" ").addClass("news-time").html(item.newstime).appendTo($p);var $newsSrc = $(" ").addClass("news-src").html(item.newssrc).appendTo($p);

});

},

error:function(){

console.log('error');

}

});

下面看一下getnews.php怎么实现：

if($link){mysql_select_db("testabc");/*连接数据库*/

mysql_query("SET NAMES utf8");$newstype=$_GET["newstype"];/*获取参数newstype*/

if($newstype == "all"){$sql = "SELECT * FROM news"; /*传递命令行，表示获取全部的表项*/}else{$sql = "SELECT * FROM `news` WHERE `newstype` = '{$newstype}'"; /*传递命令行，表示获取所有newstype等于传递的参数的表项*/}$result = mysql_query($sql,$link);$senddata = array();while($row = mysql_fetch_assoc($result)){array_push($senddata,array('id'=>$row['id'],

'newstype'=>$row['newstype'],

'newsimg'=>$row['newsimg'],

'newstime'=>$row['newstime'],

'newssrc'=>$row['newssrc'],

'newstitle'=>$row['newstitle']

));

}echo json_encode($senddata);

}mysql_close($link);?>

2.向数据库写入数据：

js代码：//添加一条数据

$("#btnsubmit").click(function(e) {

e.preventDefault();//提交添加

var jsonNews ={"newstitle": $("#newsTitle").val(),/*从页面读取到的值*/

"newstype": $("#newsType").val(),"newsimg": $("#newsImg").val(),"newstime": $("#newsTime").val(),"newssrc": $("#newsSrc").val()

}

$.ajax({

url:"server/insert.php",

type:"post",/*ajax post方法提交*/data:jsonNews,

datatype:"json",

success:function(data){

console.log(data);

},

error:function(XHR,textStatus,errorThrown){

console.log(textStatus+"ready:"+XHR.readyState);

}

})

});

php代码：

因为我们需要很多次调用php代码连接数据库，以后需要改动库名或者用户名等会很不方便，所以我们把连接数据库的操作单独提到一个文件中，比如命名为db.php：

//db.php

$link = mysql_connect('localhost','name','pwd');if(!$link){echo json_encode(array('linkmsg'=>'false'));

}else{mysql_select_db("testabc");mysql_query("SET NAMES utf8");

}?>

然后在其他php文件中直接调用这个文件：

//insert.php

$newstitle = addslashes(htmlspecialchars($_POST["newstitle"]));$newstype = $_POST["newstype"];$newsimg = $_POST["newsimg"];$newstime = $_POST["newstime"];$newssrc = $_POST["newssrc"];$sql = "INSERT INTO `news` (`newstitle`,`newstype`,`newsimg`,`newstime`,`newssrc`) VALUES ('{$newstitle}','{$newstype}','{$newsimg}','{$newstime}','{$newssrc}')";$result = mysql_query($sql,$link);echo json_encode(array("success"=>"ok"));

}mysql_close($link);?>

3.删除一条数据：

//js代码删除一条数据

var deleteId = null;

$newsTbody.on("click",".btn-danger",function(e){

$("#deleteModal").modal("show");/*模态框提示是否确认删除*/deleteId= $(this).parent().prevAll().eq(4).html();/*获取需要删除的数据的id*/console.log(deleteId);

})

$("#deleteModal #confirmDelete").click(function(e){if(deleteId){

$.ajax({

url:"server/delete.php",

type:"post",/*post方法提交请求*/data:{"newsid":deleteId},

success:function(data){

console.log("delete success");

$("#deleteModal").modal("hide");

refreshNews();

}

})

}

});

对应的php：

//delete.php

$sql = "DELETE FROM `news` WHERE `news`.`id`={$newsid}";/*组装删除命令*/

$result = mysql_query($sql,$link);echo json_encode(array("delete"=>"success"));

}mysql_close($link);?>

4.修改一条数据：

//js代码修改新闻

var updateId = null;

$newsTbody.on("click",".btn-primary",function(e){

$("#updateModal").modal("show");/*弹出模态框来给用户修改*/updateId= $(this).parent().prevAll().eq(4).html();/*获取修改的数据id*/$.ajax({

url:"server/curnews.php",

type:"get",/*get方法获取本条数据显示在模态框*/datatype:"json",

data:{"newsid":updateId},

success:function(data){

$("#unewsTitle").val(data[0].newstitle);

$("#unewsType").val(data[0].newstype);

$("#unewsImg").val(data[0].newsimg);

$("#unewsSrc").val(data[0].newssrc);var utime = data[0].newstime.split(' ')[0];

$("#unewsTime").val(utime);

}

})

})

$("#updateModal #confirmUpdate").click(function(e){

$.ajax({

url:"server/update.php",

type:"post",/*post方法将修改后的数据传回php*/data:{"newstitle":$("#unewsTitle").val(),"newstype":$("#unewsType").val(),"newsimg":$("#unewsImg").val(),"newstime":$("#unewsTime").val(),"newssrc":$("#unewsSrc").val(),"id":updateId

},

success:function(data){

$("#updateModal").modal("hide");

refreshNews();

}

})

});

//curnews.php

$sql = "SELECT * FROM `news` WHERE `id`={$newsid}";$result = mysql_query($sql,$link);$senddata = array();while($row = mysql_fetch_assoc($result)){array_push($senddata,array('id'=>$row['id'],

'newstype'=>$row['newstype'],

'newsimg'=>$row['newsimg'],

'newstime'=>$row['newstime'],

'newssrc'=>$row['newssrc'],

'newstitle'=>htmlspecialchars_decode($row['newstitle'])

));

}echo json_encode($senddata);

}mysql_close($link);?>

//update.php

$newstitle = addslashes(htmlspecialchars($_POST["newstitle"]));$newstype = $_POST["newstype"];$newsimg = $_POST["newsimg"];$newstime = $_POST["newstime"];$newssrc = $_POST["newssrc"];$newsid = $_POST['id'];$sql = "UPDATE `news` SET `newstitle`='{$newstitle}',`newstype`='{$newstype}',`newsimg`='{$newsimg}',`newstime`='{$newstime}',`newssrc`='{$newssrc}' WHERE `id`={$newsid}";$result = mysql_query($sql,$link);echo json_encode(array("success"=>"ok"));

}mysql_close($link);?>

以上就是php+mysql数据库的增删查改方案。

附几张页面参考，利用bootstrap完成：

增加：

删除：

修改：

endding~