PHP網(wǎng)站開發(fā)項(xiàng)目式教程-打開并閱讀郵件

任務(wù)八接收、閱讀、刪除郵件分頁(yè)瀏覽郵件打開并閱讀郵件刪除郵件8.2打開并閱讀郵件在receiveemail.php頁(yè)面中，點(diǎn)擊每一封郵件的發(fā)件人或者郵件主題時(shí)，將打開超鏈接所指定的頁(yè)面文件openemail.php，閱讀選擇的郵件內(nèi)容，同時(shí)還可以閱讀或下載附件。界面效果展示左圖為不帶附件的郵件閱讀界面；右圖為帶附件的郵件閱讀界面8.2.1打開并閱讀郵件頁(yè)面的布局結(jié)構(gòu)及功能說(shuō)明div1-顯示郵件基本信息div2-顯示郵件內(nèi)容div3-顯示附件功能說(shuō)明（1）能夠根據(jù)用戶選擇的郵件序號(hào)獲取并顯示郵件信息。（2）能夠計(jì)算出附件的個(gè)數(shù)并在頁(yè)面中輸出。（3）顯示郵件內(nèi)容時(shí)，必須能夠?qū)l(fā)件人在編輯郵件內(nèi)容時(shí)按下的回車鍵轉(zhuǎn)換為本頁(yè)面中的段落標(biāo)記，否則無(wú)論原來(lái)的郵件內(nèi)容有多長(zhǎng)，都顯示在一個(gè)段落中；要求每個(gè)段落第一行都要縮進(jìn)兩個(gè)字符；任何情況下都要求為內(nèi)容區(qū)保留一定的頁(yè)面空間，若盒子div2的高度不夠200px，則將高度設(shè)置為200px，否則高度根據(jù)郵件內(nèi)容高度來(lái)確定。功能說(shuō)明（4）能夠根據(jù)是否存在附件來(lái)確定是否顯示盒子div3。（5）顯示盒子div3時(shí)，除了將放在數(shù)據(jù)表中存儲(chǔ)的附件信息輸出之外，在用戶點(diǎn)擊“下載”或“打開”鏈接時(shí)能夠?qū)崿F(xiàn)附件的下載或打開操作。在顯示的附件信息中包含了隨機(jī)數(shù)標(biāo)識(shí)、附件名稱及附件大小三部分信息，這是為了保證用戶在接收附件之前可以確定附件的大小。當(dāng)用戶點(diǎn)擊“打開”或“下載”超鏈接時(shí)，要打開或下載的附件都是保存在upload文件夾下的文件，這些文件名稱前面都帶有“(隨機(jī)數(shù)標(biāo)識(shí))”前綴，為了保證用戶能夠正常打開或下載附件，設(shè)計(jì)超鏈接時(shí)，要保留文件名前面

“(隨機(jī)數(shù)標(biāo)識(shí))”前綴，去掉文件名后面的“(大小)”。在附件文件名稱前面顯示附件類型圖標(biāo)8.2.2字符串替換函數(shù)思考問(wèn)題：用戶從寫郵件界面的表單元素content中輸入內(nèi)容時(shí)，怎樣實(shí)現(xiàn)回車換行？html頁(yè)面中對(duì)內(nèi)容換行時(shí)需要怎樣實(shí)現(xiàn)？如何將用戶輸入的回車換行轉(zhuǎn)換成頁(yè)面中換行標(biāo)記或者是段落標(biāo)記？使用字符串替換函數(shù)nl2br()或str_replace()函數(shù)nl2br()該函數(shù)名字中的數(shù)字2表示to函數(shù)作用：簡(jiǎn)單理解，就是把在文本域中輸入文本時(shí)按下的回車鍵所生成的字符替換為HTML的換行符標(biāo)記<br/>精確解釋，是在字符串中的每個(gè)新行(\n)之前插入HTML換行標(biāo)記<br/>函數(shù)格式：nl2br(string)參數(shù)string是必需的，規(guī)定要檢查的字符串。函數(shù)nl2br()應(yīng)用示例創(chuàng)建頁(yè)面文件nl2br.php，其中包含兩部分代碼，第一部分代碼生成表單界面，包含一個(gè)name屬性為txt的文本區(qū)域元素和一個(gè)submit類型的按鈕“提交”；第二部分是php代碼，用于接收和處理本頁(yè)面中表單元素提交的數(shù)據(jù)。在表單文本區(qū)域元素中輸入帶有回車的文本內(nèi)容并提交之后，重新運(yùn)行頁(yè)面文件nl2br.php，獲取用戶提交的文本信息，進(jìn)行兩種處理：第一，直接輸出獲取到的信息；第二，將所獲取信息中的回車字符使用函數(shù)nl2br()替換為換行標(biāo)記后再輸出，對(duì)比觀察兩種輸出的不同效果。代碼如下運(yùn)行界面左圖為初次運(yùn)行并輸入內(nèi)容的界面右圖為點(diǎn)擊提交按鈕之后的輸出界面輸入三段內(nèi)容直接輸出，無(wú)換行，瀏覽器不解釋回車換行鍵將回車換行替換為<br/>之后的結(jié)果str_replace()函數(shù)函數(shù)功能：將用戶指定的任意子串全部替換成另一個(gè)子串；函數(shù)格式：str_replace(find,replace,string,count)；參數(shù)解釋：find：必需，規(guī)定要查找的子串，也就是將要被替換掉的子串；replace：必需，規(guī)定要用來(lái)進(jìn)行替換的子串；string：必需，規(guī)定被搜索的字符串；count：是可選參數(shù)，對(duì)替換次數(shù)進(jìn)行計(jì)數(shù)，通常很少使用。str_replace()函數(shù)應(yīng)用示例創(chuàng)建頁(yè)面文件strreplace.php，其中包含兩部分代碼，第一部分代碼生成表單界面，包含一個(gè)name屬性為txt的文本區(qū)域元素和一個(gè)submit類型的按鈕“提交”；第二部分是php代碼，用于接收和處理本頁(yè)面中表單元素提交的數(shù)據(jù)。在表單文本區(qū)域元素中輸入帶有回車的文本內(nèi)容并提交之后，重新運(yùn)行頁(yè)面文件strreplace.php，獲取用戶提交的文本信息，進(jìn)行兩種處理：第一，直接輸出獲取到的信息；第二，將所獲取信息中的回車字符使用函數(shù)str_replace()替換為段落標(biāo)記后再輸出，對(duì)比觀察兩種輸出的不同效果。代碼如下被替換掉的字符是“chr(13).chr(10)”，其中chr(13)是回車符，chr(10)是換行符，這兩個(gè)字符不可顛倒順序；運(yùn)行效果圖思考問(wèn)題：為什么使用str_replace()函數(shù)處理之后，第一個(gè)段落與后面兩個(gè)段落的效果是不同的？要如何修改？完整代碼8.2.3打開并閱讀郵件的功能實(shí)現(xiàn)設(shè)計(jì)打開并閱讀郵件頁(yè)面，需要?jiǎng)?chuàng)建的文件有樣式文件openemail.css和頁(yè)面文件openemail.php。分別創(chuàng)建兩個(gè)文件，并在openemail.css文件中使用代碼body{margin:0;}定義整個(gè)頁(yè)邊距為0。之后，在設(shè)計(jì)過(guò)程中，我們按照頁(yè)面內(nèi)容的順序分別設(shè)計(jì)元素<divid='div1'>、<divid='div2'>和<divid='div3'>。1.設(shè)計(jì)元素<divid='div1'>元素<divid='div1'>及內(nèi)部元素的樣式要求選擇符#div1：寬度自動(dòng)，高度自動(dòng)，填充10px，邊距0，背景色#eef，下邊框2像素實(shí)線顏色為#aaf。div1中使用段落顯示郵件信息，段落樣式：上下邊距5px，左右邊距都0，填充0，段落中的字號(hào)10pt，文本行高20px。1.設(shè)計(jì)元素<divid='div1'>中的內(nèi)容要三個(gè)操作步驟：第一步，獲取要打開的郵件的郵件序號(hào)；第二步，連接打開數(shù)據(jù)庫(kù)email，以指定的郵件序號(hào)為條件查詢數(shù)據(jù)表emailmsg，得到指定序號(hào)的郵件信息；第三步，從服務(wù)器端輸出元素<divid='div1'>，并在其內(nèi)部輸出需要的郵件信息。盒子div1的內(nèi)容閱讀帶附件的郵件時(shí)，盒子div1中的內(nèi)容如下圖所示思考問(wèn)題：如何判斷是否有附件并獲取附件個(gè)數(shù)？解決附件個(gè)數(shù)的問(wèn)題使用explode()和分號(hào)字符分割當(dāng)前郵件附件列中的附件名稱信息，分割后的結(jié)果保存在數(shù)組$attach中；獲取數(shù)組元素的個(gè)數(shù)，減去1之后，即可得到附件個(gè)數(shù)，保存在變量$attachCnt中。在div1結(jié)束之前，判斷若是附件不為空，則輸出附件個(gè)數(shù)2.設(shè)計(jì)元素<divid='div2'>元素<divid='div2'>及內(nèi)部元素的樣式要求選擇符#div2：寬度自動(dòng)，高度自動(dòng)，上下填充10px，左右填充0，邊距0。元素<divid='div2'>內(nèi)部控制輸出郵件內(nèi)容的所有段落都要增加縮進(jìn)2個(gè)字符的樣式，直接使用包含選擇符#div2p定義即可。2.設(shè)計(jì)元素<divid='div2'>的內(nèi)容需要兩個(gè)操作步驟。第一步，輸出元素<divid='div2'>，在div內(nèi)部開始處先增加一個(gè)段落標(biāo)記，然后將當(dāng)前郵件內(nèi)容中的回車換行符號(hào)使用段落標(biāo)記替換之后，在div中輸出；第二步，判斷元素<divid='div2'>的高度是否小于200px，若是小于200px，則將其設(shè)置為200px，否則該元素的高度根據(jù)內(nèi)容的多少來(lái)自動(dòng)設(shè)置修改openemail.php文件在盒子div1的下方增加如下代碼3.設(shè)計(jì)元素<divid='div3'>元素<divid='div3'>及內(nèi)部元素的樣式要求選擇符#div3：寬度自動(dòng)，高度自動(dòng)，填充0，邊距0，邊框1像素實(shí)線顏色為#aaf。元素<divid='div3'>中用來(lái)顯示附件個(gè)數(shù)的段落樣式使用包含選擇符#div3.p1進(jìn)行定義，樣式要求：邊距0，背景色#eef，文本行高40px。顯示附件名稱大小信息的段落，使用#div3.p2定義樣式，上下邊距5像素，左右0，上下填充0，左右填充10像素，文本字號(hào)10pt，行高20像素3.設(shè)計(jì)元素<divid='div3'>設(shè)計(jì)div中的內(nèi)容首先要判斷是否需要輸出元素<divid='div3'>，若是當(dāng)前郵件中有附件，則要輸出，否則不需要輸出。輸出元素<divid='div3'>中的內(nèi)容需要三個(gè)操作步驟。第一步，使用類名為p1的段落控制輸出附件個(gè)數(shù)；第二步，對(duì)數(shù)組$attach中的附件信息進(jìn)行處理，獲取用于超鏈接打開或下載的附件名稱信息，格式為“(隨機(jī)數(shù)標(biāo)識(shí)符)文件名稱.擴(kuò)展名”，這是在文件夾upload中存儲(chǔ)的文件名稱格式。思考問(wèn)題如何根據(jù)附件名稱信息“(隨機(jī)數(shù)標(biāo)識(shí)符)文件名稱.擴(kuò)展名(文件大小)”格式得到“(隨機(jī)數(shù)標(biāo)識(shí)符)文件名稱.擴(kuò)展名”格式？在附件名稱信息中有兩對(duì)括號(hào)的位置是固定的，一對(duì)位于開始部分用于定界隨機(jī)數(shù)，一對(duì)位于最后用于定界文件大小，使用explode()函數(shù)和左圓括號(hào)分割符分割保存在$attach[$i]中的附件名稱（如“(3247)附件a.docx(1.25kB)”），然后將其保存在數(shù)組$attName中，結(jié)果至少有3部分，第一部分一定是空串，最后一部分一定是大小信息。如果文件名中存在用圓括號(hào)定界的內(nèi)容，如“(3247)附件a(李梅).docx(1.25kB)”，則分割之后會(huì)有更多的子串，無(wú)論子串有多少，都需要將最后的大小信息部分去掉，得到保存在upload文件夾中的文件名稱格式，如“(3247)附件a.docx”或者“(3247)附件a(李梅).docx”修改openemail.php文件在設(shè)置div2盒子高度的腳本代碼之后增加如下代碼：顯示附件前面的圖標(biāo)教學(xué)目標(biāo)在不同類型的附件前面顯示不同的圖標(biāo)使用jQuery代碼實(shí)現(xiàn)實(shí)現(xiàn)的效果如下這里直接使用圖片文件“(88227)jQuery中的查找.png”解決方案第一步，定義兩個(gè)數(shù)組，用于解決文件類型繁多的問(wèn)題一個(gè)數(shù)組kzmArr：存放除了圖片文件擴(kuò)展名之外的所有的擴(kuò)展名一個(gè)數(shù)組fileImg：存放上面數(shù)組中文件類型對(duì)應(yīng)的圖標(biāo)文件名稱也可以定義一個(gè)二維數(shù)組，但是后面要用的查找方法需要做相應(yīng)變化解決方案第二步，提取擴(kuò)展名并對(duì)應(yīng)到文件類型圖標(biāo)使用字符串分割方法將文件名稱最后的一個(gè)擴(kuò)展名分離出來(lái)，查找數(shù)組kzmArr，找出擴(kuò)展名對(duì)應(yīng)的元素下標(biāo)，根據(jù)該下標(biāo)找到數(shù)組fileImg中對(duì)應(yīng)的圖標(biāo)文件名稱第三步，解決圖片附件名稱前面顯示附件圖片的問(wèn)題得到的擴(kuò)展名若是在數(shù)組kzmArr中查找不到，則說(shuō)明是圖片文件的擴(kuò)展名，此時(shí)直接將該圖片元素插入段落開始的位置即可。完成操作為輸出附件信息的段落添加一個(gè)類名，例如p2，方便接下來(lái)獲取這些段落對(duì)頁(yè)面中類名為p2的段落進(jìn)行遍歷獲取段落中的內(nèi)容，保存在變量pText中使用“(”分割（應(yīng)用split()方法）pText，得到數(shù)組fileNameArr使用fileNameArr.pop()將數(shù)組最后一個(gè)元素（文件大小部分的內(nèi)容）彈出后丟棄將數(shù)組元素剩余部分使用join()方法以“(”作為連接符，連接起來(lái)得到upload文件夾下存儲(chǔ)的文件名稱，保存在變量fileName中（這一步只為圖片附件做準(zhǔn)備）遍歷段落的函數(shù)（續(xù)）使用fileNameArr.pop()彈出數(shù)組最后一個(gè)元素，該元素內(nèi)容包含著擴(kuò)展名部分，保存在變量fileNameKzm中使用圓點(diǎn)分割fileNameKzm的內(nèi)容，從得到的數(shù)組中彈出最后一個(gè)元素，就是文件的擴(kuò)展名，保存在變量kzm中使用kzmArr.indexOf(kzm)查找擴(kuò)展名在數(shù)組中對(duì)應(yīng)的下標(biāo)，保存在變量kzmInd中如果kzmInd不等于-1，說(shuō)明在數(shù)組kzmArr中存在擴(kuò)展名，將數(shù)組fileImg中相應(yīng)元素值作為圖標(biāo)文件，使用prepend()方法插入在當(dāng)前段落前面否則，說(shuō)明擴(kuò)展名在數(shù)組kzmArr中不存在，將upload文件夾下的fileName