1、从数据库出发，先建立测试数据，这里使用的MYSQL，通过脚本模式创建测试数据。
SET NAMES UTF8; DROP DATABASE IF EXISTS disk; CREATE DATABASE disk CHARSET=UTF8; USE disk; CREATE TABLE udisk( uid INT PRIMARY KEY AUTO_INCREMENT, uname VARCHAR(24), pic VARCHAR(60), price FLOAT(9,2), addedTime BIGINT ); INSERT INTO udisk VALUES (NULL,'金士顿 SE9H','img/1.jpg','49.90','1234567890123'), (NULL,'金士顿 DT100G3','img/2.jpg','47.90','1234567890123'), (NULL,'权尚 Transshow','img/3.jpg','39.90','1234567890123'), (NULL,'闪迪（SanDisk）酷铄(CZ73) ','img/4.jpg','79.90','1234567890123'), (NULL,'金士顿 32GB','img/5.jpg','99.90','1234567890123');
2、创建 init.php 主要用于保存php连接数据库的相关代码。
<?php
/*数据库链接初始化页面*/
$conn = mysqli_connect('127.0.0.1','root','','tarena',3306);
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
3、建立 add.php 实现php操作数据库添加数据功能。
<?php
@$uname = $_REQUEST['uname'] or die('uname required');
@$pic = $_REQUEST['pic'] or die('pic required');
@$price = $_REQUEST['price'] or die('price required');
require('disk_inti.php');
$addTime = time()*1000;
$sql = "INSERT INTO udisk VALUES(NULL,'$uname','$pic','$price','$addTime')";
$result = mysqli_query($conn,$sql);
if($result===false){
echo "添加失败，请检查SQL语句";
}else{
echo "添加成功，商品编号为".mysqli_insert_id($conn);
echo "<a href='udisk_select.php'>查看所以U盘</a>";
}
4、创建用于实现添加功能的视图(add.html文件) 一个简单的数据添加入口 测试用。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> <form action="disk_add.php"> U盘名称：<input name="uname"><br> 图片路径：<input name="pic"><br> U盘价格：<input name="price"> <input type="submit"> </form> </body> </html>
5、使用PHP创建数据查找功能主界面 并使用JS绑定删除功能
<?php // 执行SQL查找语句
require('disk_inti.php');
$sql = "SELECT * FROM udisk";
$result = mysqli_query($conn,$sql);
if($result===false){ // 判断查找结果
echo "数据查询失败，请检查SQL语句";
}else{
$list = mysqli_fetch_all($result,1);
}
//var_dump($list);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
<style>
div {
250px;
float:left;
margin-right:80px;
margin-top:25px;
padding:0 25px;
position:relative;
border:1px solid #aaa;
border-radius:3px;
}
div img {
100%
}
div a {
position:absolute;
top:0;
right:10px;
}
</style>
</head>
<body>
<h3>U盘列表</h3>
<?php //抓取数据 响应到视图中
foreach($list as $d){
echo "<div><img src=$d[pic]><span>价格：$d[price]</span><p>$d[uname]</p><a href=$d[uid]>X</a></div>";
}
?>
</body>
<script> //为X按钮绑定事件
var a = document.querySelectorAll("div a");
console.log(a);
for(var i = 0 ; i<a.length ; i++){
a[i].addEventListener("click",function(e){
e.preventDefault();
if(confirm("确定要删除此商品？"))
{ location.href="udisk_delete.php?uid="+this.href.slice(-1);}
});
}
</script>
</html>
6、创建delete.php 补全删除功能
<?php
@$uid = $_REQUEST['uid'] or die('uid required');
require('disk_inti.php');
$sql ="DELETE FROM udisk WHERE uid=$uid";
$result = mysqli_query($conn,$sql);
if($result===false){
echo "删除失败";
}else{
echo "<h3>删除成功</h3>";
echo "被删除的记录数：".mysqli_affected_rows($conn);
echo "<a href='udisk_select.php'>返回U盘列表</a>";
}