mysql前段编写_个人网站留言页面（前端jQuery编写、后台php读写MySQL）

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

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

数据库设计和实现思路

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

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

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

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

定下功能

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

1、显示评论列表

2、能够提交评论

3、进行回复

评论类

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

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

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

var oCmt = new Comment({

parent: $('#box'), //你想要将这个评论放到页面哪个元素中

id: 0,

getCmtUrl: './php/getcomment.php',

setCmtUrl: './php/comment.php'

})

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

Comment.allocate({

parent: $('#box'),

id: 0,

getCmtUrl: './php/getcomment.php',

setCmtUrl: './php/comment.php'

})

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

构造函数

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方法，那么可以写成：

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函数

fn.init = function (options) {

//初始化node

this.initNode(options);

//将内容放进容器

this.parent.html(this.body);

//初始化事件

this.initEvent();

//获取列表

this.getList();

};

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

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

initNode函数

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

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 = '

' +

'

' +

'' +

'提交评论' +

'

' +

'

' +

'

'