（入门级web应用）小书签收集站开发日志（一）--项目规划及最基本功能实现_web后台项目书签功能

作者：码创造者 | 2024-07-13 17:52:08

踩

web后台项目书签功能

项目总体规划制定

实现最基本功能：单用户添加、显示、编辑、删除小书签（这样就可以给自己添加方便了）
实现小书签分类管理：可以通过属性标签找到所需的小书签
实现多用户，用户可以添加小书签的引用到自己的包裹里
实现用户文件夹管理，用户可以通过文件夹管理自己的小书签。（文件夹可以存放重复书签，保存的是引用，冗余较小）

最基本功能实现思路

简答的架构：

服务器端 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());
}
?>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/820827