个人网站留言页面前端jQuery编写、后台php读写MySQL

首先，上个人网站的留言页面，大家可以看看效果：留言板

前端为了省事，使用jQuery编写，后台使用PHP简单读写MysqL数据库。

数据库设计和实现思路

数据库创建了一个表：comments，结构如下图：

全部评论（包括文章评论回复，留言板）都写在同一张表中，不同的评论区用字段belong区分

同一个评论区里，parent为0表示为评论，parent为某值时表示为哪个评论的回复，思路不复杂。

注意，这里并不讲CSS，大家根据自己的需要定制，现在开始封装：

定下功能

我们根据自己的需要定下功能，首先我的网站并没有实现消息提醒，即时通讯的功能，所以评论回复并不会提示站长或者用户，只会对留言区产生效果，所以我们只要简单实现以下功能：

1、显示评论列表

2、能够提交评论

3、进行回复

评论类

我们将评论的功能封装成一个类，通过实例化就能创建不同的评论区，所以不难想到，

实例化的时候我们需要传入的参数可能有：评论区的id、获取评论的PHP地址，提交评论的PHP地址。

所以我们可以猜想实例化评论区的代码可能为：

rush:js;"> var oCmt = new Comment({ parent: $('#Box'),//你想要将这个评论放到页面哪个元素中 id: 0,getCmtUrl: './PHP/getcomment.PHP',setCmtUrl: './PHP/comment.PHP' })

当然，我是在Comment类上定义一个静态方法

rush:js;"> Comment.allocate({ parent: $('#Box'),id: 0,setCmtUrl: './PHP/comment.PHP' })

大同小异，只是初始化的地方不同而已

构造函数

rush:js;"> function Comment(options){ this.belong = options.id; this.getCmtUrl = options.getCmtUrl; this.setCmtUrl = options.setCmtUrl; this.lists = []; this.keys = {}; this.offset = 5; }

var fn = Comment.prototype;

Comment.allocate = function(options){
var oCmt = new Comment(options);
if (oCmt.belong == undefined || !oCmt.getCmtUrl || !oCmt.setCmtUrl) {
return null;
};
oCmt.init(options);
return oCmt;
};

里面的变量和方法我们慢慢解释，如果你不定义一个allocate方法，那么可以写成：

rush:js;"> function Comment(options){ this.belong = options.id; this.getCmtUrl = options.getCmtUrl; this.setCmtUrl = options.setCmtUrl; this.lists = []; this.keys = {}; this.offset = 5; if (this.belong == undefined || !this.getCmtUrl || !this.setCmtUrl) { return null; }; this.init(options) }

var fn = Comment.prototype;

变量先不说，像我都是先写功能函数，然后需要添加属性变量再回头来添加，我们只需要看到构造函数最后执行了:

this.init(options)

从名字可以看出是初始化函数。

init函数

rush:js;"> fn.init = function (options) { //初始化node this.initNode(options); //将内容放进容器 this.parent.html(this.body); //初始化事件 this.initEvent(); //获取列表 this.getList(); };

fn为Comment.prototype，只说一次，下面就不再说了。

初始化就是有4个工作要做，从代码注释可以看出，现在一个一个讲解

initNode函数

从名字可以看出主要初始化节点或者缓存dom

rush:js;"> fn.initNode = function(options){ //init wrapper Box if (!!options.parent) { this.parent = options.parent[0].nodeType == 1 ? options.parent : $('#' + options.parent); }; if (!this.parent) { this.parent = $('div'); $('body').append(this.parent); } //init content this.body = (function(){ var strHTML = '

' + '评论' + '

' + '

' + '

评论

' + '

' + '
Box">
' + '

' + '

' + '