项目总体规划制定
- 实现最基本功能:单用户添加、显示、编辑、删除小书签 (这样就可以给自己添加方便了)
- 实现小书签分类管理: 可以通过属性标签找到所需的小书签
- 实现多用户,用户可以添加小书签的引用到自己的包裹里
- 实现用户文件夹管理,用户可以通过文件夹管理自己的小书签。(文件夹可以存放重复书签,保存的是引用,冗余较小)
最基本功能实现思路
简答的架构:
服务器端 bookmarklet.php根据提交的服务返回数据或执行动作
客户端 index.html通过ajax技术与服务器交互
UI设计:
index.html
显示数据库中的小书签
一个添加按钮,用于新建小书签
小书签边上都有编辑和删除按钮,可以方便地管理
全选框,可以批量管理
知识点整理:
php操作数据库
实现
bookmarklet.php
<?php
require_once('business.php')
switch(isset($_POST['service'])? $_POST['service'] : 'disp' ) {
case 'add': return add($_POST['name'],$_POST['content']);
case 'disp': return disp();
case 'modify': return modify($_POST['id'],$_POST['name'],$_POST['content']);
case 'del': return del($_POST['id'],$_POST['name'],$_POST['content']);
default: break;
}
?>
index.html(只完成了添加)
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bt1').click(function(){
var postdata = 'service=add&name='+$('#name').val()+'&content='+$('#content').val()
htmlobj=$.ajax({
type: 'POST',
url: './bookmarklet.php',
data: postdata,
timeout:8000,
async: false,
//success: function(res) { alert(res);}
});
alert(postdata);
$("#responseText").html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id="responseText"></div>
<input type='text' id="name" placeholder ='名称'></div>
<input type='text' id="content" placeholder ='javascript:XXXX...'></div>
<input type='button' id="bt1" value='提交'></div>
</body>
</html>
business.php(只完成了对添加的处理)
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', 'hello');
define('DB_NAME', 'dlutdb');
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
function add($name,$content){
global $dbc;
mysqli_query($dbc,"INSERT INTO bookmarklet(name,content) VALUES ('$name', '$content')")
or die("Error add bookmarklet: " . mysql_error());
}
?>