留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx

上传人:b****6 文档编号:19317417 上传时间:2023-01-05 格式:DOCX 页数:9 大小:800.15KB
下载 相关 举报
留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx_第1页
第1页 / 共9页
留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx_第2页
第2页 / 共9页
留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx_第3页
第3页 / 共9页
留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx_第4页
第4页 / 共9页
留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx_第5页
第5页 / 共9页
点击查看更多>>
下载资源
资源描述

留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx

《留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx(9页珍藏版)》请在冰豆网上搜索。

留言板的处理流程及其实现过程学习资料Word文档下载推荐.docx

里输入的是title,即该留言的标题;

<

标签输入的是留言的正文内容。

可以直接通过<

的属性来定义该标签的呈现方式,但还是建议通过CSS来定义。

这样可定义的内容更丰富,程序编写更灵活。

这里就是该标签的CSS样式。

Width和height:

直接定义了这个输入框的宽和高

Letter-spacing:

定义输入框中文字之间的间隔,为了美观最好还是不要让文字挤在一起。

Ling-heigh:

定义输入框中的行高,类似Word中的段落间距的设置,也是为了美观。

Font-size:

定义文字的大小

Padding:

定义文字块距离输入框边界的距离,不要让文字离输入框边界太近,也是为了美观

下面重点来讲一下上图中剩下的三个CSS属性。

resize

我们在HTML文件中写入<

标签,然后在浏览器中打开,会看到在输入框右下角有两个45度的短线,意思是可以通过鼠标拖动这个短线来调整输入框的大小。

这种特性很灵活,但是往往在已经计算好尺寸的网页里不适用。

因为用户任意改变输入框的尺寸,会影响页面中的其他元素的尺寸,从而影响整个页面的整体美观。

所以我们通过CSS让用户无法修改这个<

标签的尺寸。

在CSS中写入resize:

none

即重新改变尺寸为“否”。

这样处理后,在输入框右下角就不会出现这两个短线了。

overflow-x/overflow-y

文字如果在x轴方向溢出,将如何处理?

我们在<

标签中输入的内容如果过长,则<

会进行相应的处理。

我的这个实例中设置了overflow-x的值为hidden。

表示如果文字溢出,在X轴方向上隐藏不显示。

而overflow-y的值为auto,表示如果文字太多,则会在输入框中自动加入滚动条。

类似于这样的效果。

后端业务逻辑

我们在上面的代码截图能够看到,我把<

标签写在了<

表单中了,这是因为在进行数据提交的时候,只有通过表单的方式,才能取到<

中的内容。

在表单外面写了两个<

div>

,作为操作的按钮。

一个是提交内容,一个是重写。

这里捎带的讲解一下CSS3的新属性,可以方便的修饰div标签的外轮廓形状,让矩形的div的轮廓变成圆角矩形。

看到在这两个标签的CSS属性中,有一条是border-radius:

50px;

表示的是轮廓的半径,这样做的结果就是div变成了圆角矩形,这个值越大,矩形边缘的弧度就更大。

下面讲解通过jQuery的ajax方法,取得标签中的内容,然后提交给服务器端的一个PHP文件进行业务逻辑的处理。

下图是发布按钮的单击事件的代码截图:

从代码第27行开始,通过$("

.post"

)取得提交按钮的控制权,当这个标签发生了点击事件,则会触发下面的动作。

$("

).click(function(e)

▉ 

28行——如果当用户名的这一栏为空值,则提示先登录,才能发布消息。

对应这段代码

inputtype="

text"

hidden="

true"

value="

?

php 

echo$_COOKIE["

username"

];

?

>

"

name="

这段代码是通过PHP的超全局变量$_COOKIE来进行的。

当用户登录成功后,PHP程序会控制浏览器将用户的cookie信息(username和password)写入到浏览器的cookie文件中,当用户下次登录的时候,通过PHP程序检测浏览器的cookie内容,如果有对应的内容,则将网页的状态设置为该用户已登录,如果没有cookie信息,则这个input标签的value的值为空,表示用户未登录。

30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格,则提示标题或正文不能为空。

这里使用了jQuery的正则表达式来验证字符串的内容。

/^\s*$/表示以空格(space)开始(^),并有一个或多个空格(*),而且以空格结束($)。

【关于jQuery或javascript的正则表达式的讲解,请参考本网站编程栏目的相关文章】

32行——如果num<

0,则提示已经超出了输入字数的上限。

这里我们先来看看新浪微博里的小功能,但是很提升用户体验。

34行——如果上面的条件都满足,表示用户的情况满足发布的要求,则在点击发布按钮的时候,进行ajax异步操作。

这里没有直接使用jQuery的ajax()方法,而是使用了它的简化版$.get()方法。

因为在表单标签中,我们定义了表单信息是以get的方式提交的,<

formmethod="

get"

,这种方式的特点是当用户提交时,会在浏览器地址栏中显示提交的信息,比如

微博中默认只能输入140个字符,在输入字符的同时,系统会实时的检测用户输入的字数,如果超出了140这个显示,则提示,并无法发布。

这种设计其实是新浪微博抄袭美国的twitter的设计。

这样做的用意是让用户用很少的字来说明事情,写完自己想说的事,这样让浏览者也能快速的舒服的看完你所发布的信息。

因为现在的互联网阅读是碎片化的阅读,在快速的生活节奏下,已经很少有能像读小说那样去欣赏,去体会大段文字的魅力了。

另外的用意是,这样也逼迫着用户多发消息,多发帖子,有什么大事小情都发消息,从而让这个网站的内容更丰富,流量更大。

言归正传,那么如何能够实时的检测<

中的字数呢?

jQuery能够办到。

首先在页面里用一个<

span>

标签来显示还能输入的字数。

然后在js文档中用jQuery提供的键盘事件函数来计算字数的情况

第4行,首先定义一个全局变量maxWord,表示能够输入的文字上限,赋值为140。

第5行,定义一个全局变量num,用来存放还能输入的字符数。

第6行,给class为num的<

标签中放入maxWord的值,表示当页面刚加载好的时候,在输入框下面就显示“您可以输入140个字符”

第7行,$("

.content"

).keydown(function(e),输入框的键盘按下事件出发keydown方法,执行相应的操作。

第8行,让maxWord的值减去当前输入框的字符的长度,就得到了还能够输入多少字符。

第9~13行,进行判断,如果num为负数,表示输入的字符已经超过了140这个上限,则还能输入多少字符的那个提示的数字变为红色,表示警示,否则还是黑色。

那么不光是键盘按下,用户在用拼音输入法或者英文输入法打字完毕后,键盘会按起的,那么再调用keyup(function(e)方法,来进行同样的逻辑判断。

这样就保证了在用户输入字符的时候,系统实时的检测输入的字符数。

(这个实时计算输入字符数的代码必须写在发布按钮点击那个代码块的上面)

(一)创业机会分析调用jQuery的get方法,第一个参数”post.php”,表示将参数信息传给这个PHP服务器文件进行处理;

第二个参数表示要传的数据,username、title和content;

第三个参数表示回调函数,这个函数的参数就是接收PHP文件传回来的结果。

如果传回的结果为success,在页面弹出对话框显示发布成功,跳转到show.php这个页面;

如果传回fail,提示失败,还是跳转到show.php这个页面。

这样就处理完了前端的所有事情。

那么接下来看一看通过jQuery的ajax技术,把数据传到服务器的post.php文件后做了哪些事情。

400-500元1326%

虽然调查显示我们的创意计划有很大的发展空间,但是各种如“漂亮女生”和“碧芝”等连锁饰品店在不久的将来将对我们的创意小屋会产生很大的威胁。

打开post.php文

当然,在竞争日益激烈的现代社会中,创业是件相当困难的事。

我们认为,在实行我们的创业计划之前,我们首先要了解竞争对手,吸取别人的经验教训,制订相应竞争的策略。

我相信只要我们的小店有自己独到的风格,价格优惠,服务热情周到,就一定能取得大多女孩的信任和喜爱。

一、消费者分析conn.php

他们的成功秘诀在于“连锁”二字。

凭借“连锁”,他们在女孩们所喜欢的小玩意上玩出了大名堂。

小店连锁,优势明显,主要有:

post.php

首先看看conn.php文件,这个文件是用来连接MySQL数据库的。

第2行,通过PHP的系统函数mysql_connect()与数据库建立连接,这个函数的参数分别是所连接的数据库名,用户名和密码。

本项目中数据库名是localhost,root用户,密码为空。

把这个连接传给一个变量$conn作为句柄,$conn=mysql_connect("

localhost"

"

root"

);

然后调用PHP系统函数mysql_select_db()来打开数据库,里面的参数第一个是要连接的数据库实例,第二个参数是数据库连接的句柄。

mysql_select_db("

message"

$conn);

就算你买手工艺品来送给朋友也是一份意义非凡的绝佳礼品哦。

而这一份礼物于在工艺品店买的现成的礼品相比,就有价值意义,虽然它的成本比较低但它毕竟它是你花心血花时间去完成的。

就像现在最流行的针织围巾,为何会如此深得人心,更有人称它为温暖牌绝大部分多是因为这个原因哦。

而且还可以锻炼你的动手能力,不仅实用还有很大的装饰功用哦。

接下来看post.php文件。

首先include(”conn.php”),把数据库连接文件包含在这个业务逻辑的文件里,其实就类似于Java中的导入包中的某个类。

第3~5行,把从页面中通过get方法拿来的数据赋给PHP变量。

第6行,创建一个$response变量,用于向页面返回信息。

第7行,利用PHP内部函数str_replace()把content中的空格和换行符替换为HTML中的空格和换行,以保证将来在页面中显示的时候能够正常空格和换行。

第8行,运行一段insert的SQL语言,向数据库中的表插入一条记录,表示用户输入的信息。

第10~14行,调用PHP的系统函数mysql_query(),第一个参数是SQL语句,第二个参数是数据库连接句柄。

如果插入成功,则返回“success”,否则返回“fail”。

第16行,返回业务逻辑处理的结果。

第17行,关闭数据库连接,节省资源,应对更多的访问。

以上就是如何实现提交一条帖子的全过程。

下面我们来看看如何在页面中显示数据库表中的内容。

打开show.php文件

show.php

2003年,上海市人均GDP按户籍人口计算就达到46700元,是1995年的2.5倍;

居民家庭人均月可支配收入为14867元,是1995年的2.1倍。

收入不断增加的同时,居民的消费支出也在增加。

2003年上海居民人均消费支出为11040元,其中服务性消费支出为3369元,是1995年的3.6倍。

4、“体验化”消费和post.php文件类似,也是先引入数据库连接文件,然后执行一段查询的SQL语句。

通过mysql_fetch_row(数据库查询结果)这个函数取得查询的结果集,将这个结果集赋给一个变量$row。

这个变量指向每一行记录,而每一行记录就是一个数组,数组的元素对应着select语句所查询的字段顺序。

通过while循环将结果集的记录一条一条的输出,连同HTML代码一起显示在页面上。

最后不要忘记关闭数据库连接,这是一个好习惯。

其实动态网页的逻辑并不难,就是前端采集数据,进行数据验证,然后将请求提交到后端的服务器业务逻辑程序中进行处理,然后将处理的结果返回给前端,并进行显示。

而本项目中用到的ajax就是一个中间环节,是前端和后端的桥梁。

也可以借助更加方便,封装性更好的框架来实现。

以上服务器端的业务逻辑代码,同样也可以用Java语言来实现,请读者自己实验。

夏日的街头,吊带装、露背装、一步裙、迷你裙五彩缤纷、争妍斗艳。

爱美的女孩们不仅在服饰搭配上费尽心机,饰品的选择也十分讲究。

可惜在商店里买的项链、手链、手机挂坠等往往样式平淡无奇,还容易出现雷同现象。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 求职职场 > 社交礼仪

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1