个人网站消息页面(前面是jQuery写的 后面是php读写MySQL)

首先去个人网站的留言页面，可以看到效果：留言板。

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

数据库设计和实现思路。

表：数据库中已创建注释，其结构如下：

所有评论(包括文章评论回复和留言板)都写在同一个表中，不同的评论区用所属的字段来区分。

在同一个评论区，如果parent为0，表示评论，如果parent为某个值，表示回复哪个评论。思路并不复杂。

注意，这里没有提到CSS，大家可以根据自己的需求进行定制。现在开始打包：

设置功能。

我们根据自己的需要设置功能。首先，我的网站没有实现消息提醒和即时通讯的功能，所以评论回复不会提示站长或用户，只会对消息区产生影响，所以我们简单实现以下功能：

1.显示评论列表。

2.能够提交意见。

3.做出答复。

注释类

我们将注释函数封装到一个类中，通过实例化可以创建不同的注释区域，这样想并不难。

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

因此，我们可以猜测用于实例化评论区的代码可能是：

varocmt=new comment({ parent : $(' # box ')，//要将此注释放在页面的哪个元素中？id:0，getcmturl3360 '。/PHP/getcomment.php '，setcmturl3360 '。/PHP/comment.php'})当然。

评论。allocate ({parent: $ ('# box ')，id: 0，getcmturl3360 '。/PHP/getcomment.php '，setcmturl3360 '。/PHP/comment.php'})类似，但初始化的地方不同。

构造器

函数Comment(options){ this .归属感=options.idthis . getcmturl=options . getcmturl；this . setcmturl=options . setcmturl；this . list=[]；this . keys={ }；this . offset=5；} var fn=Comment.prototypeComment.allocate=function(选项){ var oCmt=new Comment(选项)；if (oCmt .归属感==undefined ||！oCmt.getCmtUrl ||！ocmt . setcmturl){ return null；};oCmt.init(选项)；返回oCmt};我们慢慢解释变量和方法。如果没有定义分配方法，它可以写成：

函数Comment(options){ this .归属感=options.idthis . getcmturl=options . getcmturl；this . setcmturl=options . setcmturl；this . list=[]；this . keys={ }；this . offset=5；if (this .归属感==undefined ||！this.getCmtUrl ||！this . setcmturl){ return null；};this . init(options)} var fn=comment . prototype；不考虑变量，就像我总是先写函数，然后需要添加属性变量，之后再添加。我们只需要看到构造函数最终执行：

this.init(选项)

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

初始化函数

fn . init=function(options){//initialize node this . initnode(options)；//将内容放入容器this . parent . html(this . body)；//初始化事件this . initevent()；//获取列表this . getlist()；};Fn是Comment.prototype，只说一次，以后不再说了。

初始化是有四个任务要做。从代码注释中可以看出，我们现在将逐一解释。

InitNode函数

您可以从名称中看到主初始化节点或缓存dom。

fn。init node=function(options){//init wrapper box if(！选项。家长){这个。parent=选项。父项[0].nodeType==1？选项。父： $(“#”选项。父母)；};if(！这个。家长){这个。parent=$(' div ')；$(“正文”).追加(这个。父母)；}//初始化此内容。body=(function(){ var strHTML=' div class=' m-comment ' ' ' div class=' CMT-form ' ' ' textarea class=' CMT-text ' placeholder='欢迎建议，提问题，共同学习！/text area ' ' button class=' u-button u-log in-BTN '提交评论/button ' '/div ' ' div class=' CMT-内容' ' ' div class=' u-加载1 '/div ' ' div class='否-CMT '暂时没有评论/div ' ' ul class=' CMT-列表'/ul ' ' div class=' f-clear ' ' ' div class='寻呼机-盒子'/div ' '/div ' '/div ' '/div ' '；return $(STRHtml)；})();//初始化其他节点this.text=this.body.find(' .cmt-text ').eq(0)；this.cmtBtn=this.body.find ' .u形按钮')。eq(0)；this.noCmt=this.body.find ' .不-CMT ' .eq(0)；this.cmtList=this.body.find(' .cmt-list ').eq(0)；this.loading=this.body.find(' .u型负载1’.eq(0)；这个。页面框=这个。尸体。查找(' .传呼机盒')。eq(0)；};代码中我们可以看出：

this.parent:保存的是容器节点这个身体：保存的是评论区的html this.text:保存的是评论的文本区域元素this.cmtBtn :保存的是提交按钮this.noCmt :保存的是没有评论时的文字提醒this.cmtList :保存的是列表的容器这个正在加载：保存的是加载列表时的正在加载GIF格式图片this.pagerBox:需要分页时的分页器容器

射流研究…上没有难点，都是一些框架的方法

将内容放进容器中

this.parent.html(this.body)

这个没什么好讲的，很简单，这时我们的评论组件应该在页面显示了，只是现在没有加载评论列表，也不能评论，下面先讲加载评论列表

下载新闻组清单函数

首先是初始化列表，清空，显示加载可交换的图像格式图，隐藏没有评论的提醒字样，做好准备就发起创建交互式、快速动态网页应用的网页开发技术请求。

思路是用服务器端编程语言(专业超文本预处理器的缩写)将该评论区的留言全部弄下来，在前端再来整理，ajax请求为：

fn。resetlist=function(){ this。装货。CSS(' display '，' block') this.noCmt.css('display '，' none ')；这个。cmtlist。html(" ")；};fn。get list=function(){ var self=this；这个。reset list()；$.ajax({ url: self.getCmtUrl，type: 'get '，dataType: 'json '，data : { id : self。属性}，成功：函数（数据){ if(！数据){警报('获取评论列表失败');回来！1;};//整理评论列表self.initList(数据);self.loading.css('display '，' none ')；//显示评论列表如果(自我。名单。长度==0){//暂时没有评论self.noCmt.css('display '，' block ')；}else{ //设置分页器var total=数学。天花板(自我。名单。长度/自我。偏移)；自我。Pager=新Pager({ index : 1，total: total，parent: self.pagerBox[0]，onchange : self。docchangepage。bind(self)，label:{ prev: ' '，next : ' ' })；} }，error: function(){ alert('获取评论列表失败');} });};得到形式，然后传送编号过去，得到了的数据希望是列表数组。

服务器端编程语言(专业超文本预处理器的缩写)的内容不讲，下面贴出结构化查询语言语句：

$ id=$ _ GET[' id ']；$query='从属于的注释中选择=$ id按时间排序；$ str='['；foreach($ result as $ key=$ value){ $ id=$ value[' id ']；$ username=$ value[' username ']；$ time=$ value[' time ']；$ content=$ value[' content ']；$ parent=$ value[' parent ']；$str .=end { ' id ' :“{ id }”、' parent ' :“{ parent }”、' username ' :“{ username }”、“time”:“{ time }”、“content”:“{ content }”、“response”:[]} end；} $str=substr($str，0，-1)；$str .=']';echo $ str获得的是数据字符串，jQuery的创建交互式、快速动态网页应用的网页开发技术可以将它转为数据数据，获得的数据如下：

如果加载成功，那么我们会得到很多数据。我们现在在成功回调函数中，数据需要排序后才能显示，因为现在所有的评论和回复都属于同一个层。

InitList函数

fn.initList=函数(数据){ this . list=[]；//保存注释列表this . keys={ }；//保存注释id和索引对应表var index=0；//的遍历处理(var i=0，len=data.length我透镜；i ){ var t=data[i]，id=t[' id ']；if(t[' parent ']==0){ this . keys[id]=index；this . list . push(t)；}else{ var parentId=t['parent']，parent index=this . keys[parent id]；this . list[ParentIndex][“response”]。push(t)；} };};我的想法是：this.lists都是注释(父项为0的消息)，如果父项为0，则将其推入此。列表；否则，如果parent不是0，则表示是回复，所以找到对应的评论，将回复推送到该评论的响应中。

但是还是有一个问题，就是因为id在增加，中间删除了一些注释，所以id和索引不一定匹配，所以用this.keys保存id和索引的对应关系。

遍历一次，把所有的数据整理出来，所有的数据都存储在这个. list中，剩下的就是把数据变成html，放到页面上。

//如果(self . list . length==0){//self上没有注释，则显示注释列表。nocmt.css ('display '，' block ')暂时；}else{ //设置寻呼机var total=math . ceil(self . list . length/self . offset)；self . Pager=new Pager({ index : 1，total: total，parent: self.pagerBox[0]，onchange : self . docchangepage . bind(self)，label:{ prev: ' '，next : ' ' })；}这是ajax的一部分，刚才成功回调了函数。数据整理后，如果数据为空，则显示“暂无评论”。

否则，设置寻呼机。我直接用了之前包装好的传呼机。如果你感兴趣，可以阅读我之前的文章：

面向对象：寻呼机封装。

简单来说，onchange函数将执行一次，默认页码为1，保存在参数obj.index中

fn . docchangepage=function(obj){ this . show list(obj . index)；};显示列表功能

fn.showList=(function(){ /*生成一条评论字符串*/function OneLi(_ obj){ var str 1=' '；//处理回复for(var i=0，len=_ obj。回应。长度；我透镜；I){ var t=_ obj。回应[I]；内容=内容。替换(/\ lt \；/g，")；内容=内容。替换(/\ gt \；/g，")；str 1=' Li class=' f-clear ' tabletbodytrtd ' ' span class=' username ' ' t . username ':/span/tdtd ' ' span class=' child-content ' ' t . content '/span/TD/tr/t body/table ' '/Li ' }//处理评论var headImg=if(_ obj。username==' kang '){ HeAdimg=' kang _ head '。jpg '；} else { var index=math。地板(数学。random()* 6)1；headImg='head '索引. jpg ' } _ obj。内容=_ obj。内容。替换(/\ lt \；/g，")；_ obj。内容=_ obj。内容。替换(/\ gt \；/g，")；var str 2=' Li class=' f-clear ' ' ' div class=' head g-col-1 ' ' ' img src=' http :/img/head/' head img ' ' width=' 100% '/' '/div ' ' div class=' content g-col-19 ' ' ' div class=' f-clear ' ' ' span class=' username f-float-left ' ' _ obj。username/span ' ' span class=' time f-float-left ' ' _ obj。time/span ' '/div ' ' span class=' parent-content ' ' _ obj。content/span ' ' ul class=' child-comment ' ' str/ul ' '/div ' ' class=' response ' class=' f-show response ' data-id=' ' _ obj。id ' '[回复]/a ' '/div ' '/Li '；返回str 2 }；返回函数(页){ var len=this。名单。len，end=len -(第- 1页)* this.offset，start=end - this.offset 0？0 : end - this.offset，current=this。名单。切片(开始，结束);var cmtList=for(var I=电流。长度-1；I=0；i - ){ var t=当前[i]，index=this。key[t [' id ']；当前[I][' index ']=index；CMT名单=OneLi(t)；}这个。CMTList。html(CMTList)；};})();这个函数的参数为页面，就是页数，我们根据页数，截取这个。目录的数据，然后遍历生成html。

超文本标记语言模板我是用字符串连接起来的，看个人喜好。

生成后就这个。CMTList。html(CMTList)；这样就显示列表了，效果图看最开始。

现在需要的功能还有评论回复，而初始化函数中也只剩下最后一个initEvent

initEvent函数

fn.initEvent=function () { //提交按钮点击this.cmtBtn.on('click '，this.addCmt.bind(this，this.cmtBtn，this.text，0))；//点击回复，点击取消回复，点击回复中的提交评论按钮this.cmtList.on('click '，this。DockResponse。绑定(这个))；};

上面截图来自我的个人网站，当我们点击回复时，我们希望能有地方写回复，可以提交，可以取消，由于这几个元素都是后来添加的，所以我们将行为都托管到评论列表这个元素。

下面先将提交评论事件函数。

addCmt函数

fn.addCmt=function (_btn，_text，_parent) { //防止多次点击如果(_ BTN。attr('数据禁用')==' true '){ return！1;} //处理提交空白定义变量值=_text.val().replace(/^\s | \ s $/g ' ')；value=value.replace(/[\r\n]/g，' br ')；if(！值){ alert('内容不能为空');回来！1;} //禁止点击_btn.attr('data-disabled '，' true ')；_btn.html('评论提交中.');//提交处理var self=这个，电子邮件，用户名；用户名=$。cookie('用户');if(！用户名){用户名='游客；}电子邮件=$。cookie('电子邮件');if(！email){ email='[email protected]'；} var now=new Date()；$.ajax({ type: 'get '，dataType: 'json '，url: this.setCmtUrl，数据： {属于： self。属性，parent: _parent，email: email，username: username，content: value }，success 3360 function(_ data){//解除禁止点击_btn.attr('data-disabled '，' ')；_btn.html('提交评论');if(！_data) { alert('评论失败，请重新评论');回来！1;} if (_data['result']==1) { //评论成功警报('评论成功');var id=_data['id']，time=now。getfullyear()'-'(现在。getmonth()1)'-'现在。getdate()' '现在。gethours()' : '现在。getminutes()' : '现在。getseconds()；if(_ parent==0){ var index=self。名单。长度；if(！self.pager) { //设置分页器self.noCmt.css('display '，' none ')；var total=数学。天花板(自我。名单。长度/自我。偏移)；自我。Pager=新Pager({ index : 1，total: total，parent: self.pagerBox[0]，onchange : self。docchangepage。bind(self)，label:{ prev: ' '，next : ' ' })；}自我。key[id]=index；自我。名单。push({ ' id ' : id，' username': username，' time': time，' content': value，' response ' :[]})；自我。显示列表(1)；自我。寻呼机。_ $ SetIndex(1)；} else { var index=self。keys[_ parent]，page=self.pager. _ _ indexself。列表[索引][“响应”].push({ 'id': id，' username': username，' time': time，' content ' : value })；self.showList(第页);}自我。文字。val(" ")；} else { alert('评论失败，请重新评论');} }，error: function () { alert('评论失败，请重新评论');//解除禁止点击_btn.attr('data-disabled '，' ')；_btn.html('提交评论');} });}参数有3个：_btn，_text，_parent之所以要有这三个参数是因为评论或者回复这样才能使用同一个函数，从而不用分开写。

点击后就是常见的防止多次提交，检查一下甜饼干中有没有用户名、电子邮件等用户信息，没有就使用游客身份，然后处理一下内容，去去掉空白啊，\n换成英国铁路公司等等，检验过后发起创建交互式、快速动态网页应用的网页开发技术请求。

成功后把新的评论放到这个。列表，然后执行this.showList(1)刷新显示

服务器端编程语言(专业超文本预处理器的缩写)部分仍然不讲，sql语句如下：

$ parent=$ _ GET[' parent ']；$归属感=$_GET['归属感'];$ content=htmlentities($ _ GET[' content '])；$ username=$ _ GET[' username ']；$ email=$ _ GET[' email ']；$ query='在注释中插入(父级，归属感，内容，时间，用户名，电子邮件)值($父，$归属感、$content '、NOW()、' $username '、' $ email ')'；doClickResponse函数fn。doclick response=function(_ event){ var target=$(_ event。目标)；var id=target。attr(' data-id ')；if(目标。具有类(“响应”)目标。attr('数据禁用')！='true') { //点击回复var Odiv=文档。创建元素(' div ')；oDiv。类名=' CMT形式'；奥迪夫。innerhtml='文本区域类=' CMT-文本'占位符='欢迎建议，提问题，共同学习！/text area ' ' button class=' u-button ResBtn ' data-id=' id ' '提交评论/button ' ' a href=' JavaScript : void(0)；class='cancel'[取消回复]/a '；target.parent().父项()。追加(OdiV)；oDiv=null target . attr(' data-disabled '，' true ')；} else if(target。有类(' cancel '){//点击取消回复var ppNode=target.parent().parent()，oRes=ppNode.find ' ' .回应')。eq(0)；target.parent().移除();oRes.attr('data-disabled '，' ')；} else if(target。有类(' resBtn '){//点击评论var oText=target.parent().查找('。cmt-text ').eq(0)，parent=target。attr(' data-id ')；this.addCmt(目标，oText，父级);}else{ //其他情况回来！1;}};根据目标类来判断点击的是哪个按钮。

如果点击回复，生成html，放到这条评论的后面

var Odiv=文档。创建元素(' div ')；oDiv。类名=' CMT形式'；奥迪夫。innerhtml='文本区域类=' CMT-文本'占位符='欢迎建议，提问题，共同学习！/text area ' ' button class=' u-button ResBtn ' data-id=' id ' '提交评论/button ' ' a href=' JavaScript : void(0)；class='cancel'[取消回复]/a '；target.parent().父项()。追加(OdiV)；oDiv=null target . attr(' data-disabled '，' true ')；//阻止重复生成超文本标记语言点击取消，就把刚才生成的移动掉

var ppNode=target.parent().parent()，oRes=ppNode.find ' ' .回应')。eq(0)；target.parent().移除();oRes.attr('data-disabled '，' ')；//让回复按钮重新可以点击点击提交，获取一下该获取的元素，直接调用addCmt函数

var oText=target.parent().查找('。cmt-text ').eq(0)，parent=target。attr(' data-id ')；this.addCmt(目标，oText，父级);注意：家长刚才生成超文本标记语言时我把它存在了提交按钮的数据编号上了。

到此全部功能都实现了，希望对大家的学习有所启发。