PHP网站开发项目式教程-打开并阅读邮件

任务八接收、阅读、删除邮件分页浏览邮件打开并阅读邮件删除邮件8.2打开并阅读邮件在receiveemail.php页面中，点击每一封邮件的发件人或者邮件主题时，将打开超链接所指定的页面文件openemail.php，阅读选择的邮件内容，同时还可以阅读或下载附件。界面效果展示左图为不带附件的邮件阅读界面；右图为带附件的邮件阅读界面8.2.1打开并阅读邮件页面的布局结构及功能说明div1-显示邮件基本信息div2-显示邮件内容div3-显示附件功能说明（1）能够根据用户选择的邮件序号获取并显示邮件信息。（2）能够计算出附件的个数并在页面中输出。（3）显示邮件内容时，必须能够将发件人在编辑邮件内容时按下的回车键转换为本页面中的段落标记，否则无论原来的邮件内容有多长，都显示在一个段落中；要求每个段落第一行都要缩进两个字符；任何情况下都要求为内容区保留一定的页面空间，若盒子div2的高度不够200px，则将高度设置为200px，否则高度根据邮件内容高度来确定。功能说明（4）能够根据是否存在附件来确定是否显示盒子div3。（5）显示盒子div3时，除了将放在数据表中存储的附件信息输出之外，在用户点击“下载”或“打开”链接时能够实现附件的下载或打开操作。在显示的附件信息中包含了随机数标识、附件名称及附件大小三部分信息，这是为了保证用户在接收附件之前可以确定附件的大小。当用户点击“打开”或“下载”超链接时，要打开或下载的附件都是保存在upload文件夹下的文件，这些文件名称前面都带有“(随机数标识)”前缀，为了保证用户能够正常打开或下载附件，设计超链接时，要保留文件名前面

“(随机数标识)”前缀，去掉文件名后面的“(大小)”。在附件文件名称前面显示附件类型图标8.2.2字符串替换函数思考问题：用户从写邮件界面的表单元素content中输入内容时，怎样实现回车换行？html页面中对内容换行时需要怎样实现？如何将用户输入的回车换行转换成页面中换行标记或者是段落标记？使用字符串替换函数nl2br()或str_replace()函数nl2br()该函数名字中的数字2表示to函数作用：简单理解，就是把在文本域中输入文本时按下的回车键所生成的字符替换为HTML的换行符标记<br/>精确解释，是在字符串中的每个新行(\n)之前插入HTML换行标记<br/>函数格式：nl2br(string)参数string是必需的，规定要检查的字符串。函数nl2br()应用示例创建页面文件nl2br.php，其中包含两部分代码，第一部分代码生成表单界面，包含一个name属性为txt的文本区域元素和一个submit类型的按钮“提交”；第二部分是php代码，用于接收和处理本页面中表单元素提交的数据。在表单文本区域元素中输入带有回车的文本内容并提交之后，重新运行页面文件nl2br.php，获取用户提交的文本信息，进行两种处理：第一，直接输出获取到的信息；第二，将所获取信息中的回车字符使用函数nl2br()替换为换行标记后再输出，对比观察两种输出的不同效果。代码如下运行界面左图为初次运行并输入内容的界面右图为点击提交按钮之后的输出界面输入三段内容直接输出，无换行，浏览器不解释回车换行键将回车换行替换为<br/>之后的结果str_replace()函数函数功能：将用户指定的任意子串全部替换成另一个子串；函数格式：str_replace(find,replace,string,count)；参数解释：find：必需，规定要查找的子串，也就是将要被替换掉的子串；replace：必需，规定要用来进行替换的子串；string：必需，规定被搜索的字符串；count：是可选参数，对替换次数进行计数，通常很少使用。str_replace()函数应用示例创建页面文件strreplace.php，其中包含两部分代码，第一部分代码生成表单界面，包含一个name属性为txt的文本区域元素和一个submit类型的按钮“提交”；第二部分是php代码，用于接收和处理本页面中表单元素提交的数据。在表单文本区域元素中输入带有回车的文本内容并提交之后，重新运行页面文件strreplace.php，获取用户提交的文本信息，进行两种处理：第一，直接输出获取到的信息；第二，将所获取信息中的回车字符使用函数str_replace()替换为段落标记后再输出，对比观察两种输出的不同效果。代码如下被替换掉的字符是“chr(13).chr(10)”，其中chr(13)是回车符，chr(10)是换行符，这两个字符不可颠倒顺序；运行效果图思考问题：为什么使用str_replace()函数处理之后，第一个段落与后面两个段落的效果是不同的？要如何修改？完整代码8.2.3打开并阅读邮件的功能实现设计打开并阅读邮件页面，需要创建的文件有样式文件openemail.css和页面文件openemail.php。分别创建两个文件，并在openemail.css文件中使用代码body{margin:0;}定义整个页边距为0。之后，在设计过程中，我们按照页面内容的顺序分别设计元素<divid='div1'>、<divid='div2'>和<divid='div3'>。1.设计元素<divid='div1'>元素<divid='div1'>及内部元素的样式要求选择符#div1：宽度自动，高度自动，填充10px，边距0，背景色#eef，下边框2像素实线颜色为#aaf。div1中使用段落显示邮件信息，段落样式：上下边距5px，左右边距都0，填充0，段落中的字号10pt，文本行高20px。1.设计元素<divid='div1'>中的内容要三个操作步骤：第一步，获取要打开的邮件的邮件序号；第二步，连接打开数据库email，以指定的邮件序号为条件查询数据表emailmsg，得到指定序号的邮件信息；第三步，从服务器端输出元素<divid='div1'>，并在其内部输出需要的邮件信息。盒子div1的内容阅读带附件的邮件时，盒子div1中的内容如下图所示思考问题：如何判断是否有附件并获取附件个数？解决附件个数的问题使用explode()和分号字符分割当前邮件附件列中的附件名称信息，分割后的结果保存在数组$attach中；获取数组元素的个数，减去1之后，即可得到附件个数，保存在变量$attachCnt中。在div1结束之前，判断若是附件不为空，则输出附件个数2.设计元素<divid='div2'>元素<divid='div2'>及内部元素的样式要求选择符#div2：宽度自动，高度自动，上下填充10px，左右填充0，边距0。元素<divid='div2'>内部控制输出邮件内容的所有段落都要增加缩进2个字符的样式，直接使用包含选择符#div2p定义即可。2.设计元素<divid='div2'>的内容需要两个操作步骤。第一步，输出元素<divid='div2'>，在div内部开始处先增加一个段落标记，然后将当前邮件内容中的回车换行符号使用段落标记替换之后，在div中输出；第二步，判断元素<divid='div2'>的高度是否小于200px，若是小于200px，则将其设置为200px，否则该元素的高度根据内容的多少来自动设置修改openemail.php文件在盒子div1的下方增加如下代码3.设计元素<divid='div3'>元素<divid='div3'>及内部元素的样式要求选择符#div3：宽度自动，高度自动，填充0，边距0，边框1像素实线颜色为#aaf。元素<divid='div3'>中用来显示附件个数的段落样式使用包含选择符#div3.p1进行定义，样式要求：边距0，背景色#eef，文本行高40px。显示附件名称大小信息的段落，使用#div3.p2定义样式，上下边距5像素，左右0，上下填充0，左右填充10像素，文本字号10pt，行高20像素3.设计元素<divid='div3'>设计div中的内容首先要判断是否需要输出元素<divid='div3'>，若是当前邮件中有附件，则要输出，否则不需要输出。输出元素<divid='div3'>中的内容需要三个操作步骤。第一步，使用类名为p1的段落控制输出附件个数；第二步，对数组$attach中的附件信息进行处理，获取用于超链接打开或下载的附件名称信息，格式为“(随机数标识符)文件名称.扩展名”，这是在文件夹upload中存储的文件名称格式。思考问题如何根据附件名称信息“(随机数标识符)文件名称.扩展名(文件大小)”格式得到“(随机数标识符)文件名称.扩展名”格式？在附件名称信息中有两对括号的位置是固定的，一对位于开始部分用于定界随机数，一对位于最后用于定界文件大小，使用explode()函数和左圆括号分割符分割保存在$attach[$i]中的附件名称（如“(3247)附件a.docx(1.25kB)”），然后将其保存在数组$attName中，结果至少有3部分，第一部分一定是空串，最后一部分一定是大小信息。如果文件名中存在用圆括号定界的内容，如“(3247)附件a(李梅).docx(1.25kB)”，则分割之后会有更多的子串，无论子串有多少，都需要将最后的大小信息部分去掉，得到保存在upload文件夹中的文件名称格式，如“(3247)附件a.docx”或者“(3247)附件a(李梅).docx”修改openemail.php文件在设置div2盒子高度的脚本代码之后增加如下代码：显示附件前面的图标教学目标在不同类型的附件前面显示不同的图标使用jQuery代码实现实现的效果如下这里直接使用图片文件“(88227)jQuery中的查找.png”解决方案第一步，定义两个数组，用于解决文件类型繁多的问题一个数组kzmArr：存放除了图片文件扩展名之外的所有的扩展名一个数组fileImg：存放上面数组中文件类型对应的图标文件名称也可以定义一个二维数组，但是后面要用的查找方法需要做相应变化解决方案第二步，提取扩展名并对应到文件类型图标使用字符串分割方法将文件名称最后的一个扩展名分离出来，查找数组kzmArr，找出扩展名对应的元素下标，根据该下标找到数组fileImg中对应的图标文件名称第三步，解决图片附件名称前面显示附件图片的问题得到的扩展名若是在数组kzmArr中查找不到，则说明是图片文件的扩展名，此时直接将该图片元素插入段落开始的位置即可。完成操作为输出附件信息的段落添加一个类名，例如p2，方便接下来获取这些段落对页面中类名为p2的段落进行遍历获取段落中的内容，保存在变量pText中使用“(”分割（应用split()方法）pText，得到数组fileNameArr使用fileNameArr.pop()将数组最后一个元素（文件大小部分的内容）弹出后丢弃将数组元素剩余部分使用join()方法以“(”作为连接符，连接起来得到upload文件夹下存储的文件名称，保存在变量fileName中（这一步只为图片附件做准备）遍历段落的函数（续）使用fileNameArr.pop()弹出数组最后一个元素，该元素内容包含着扩展名部分，保存在变量fileNameKzm中使用圆点分割fileNameKzm的内容，从得到的数组中弹出最后一个元素，就是文件的扩展名，保存在变量kzm中使用kzmArr.indexOf(kzm)查找扩展名在数组中对应的下标，保存在变量kzmInd中如果kzmInd不等于-1，说明在数组kzmArr中存在扩展名，将数组fileImg中相应元素值作为图标文件，使用prepend()方法插入在当前段落前面否则，说明扩展名在数组kzmArr中不存在，将upload文件夹下的fileName