PHP網(wǎng)站開發(fā)項目式教程（微課版）（第2版）任務(wù)8 實現(xiàn)接收、閱讀、刪除郵件功能

PHP網(wǎng)站開發(fā)項目式教程（微課版）（第2版）任務(wù)8實現(xiàn)接收、閱讀、刪除郵件功能

接收、閱讀和刪除郵件都是郵箱項目的核心功能，本任務(wù)中需要實現(xiàn)的功能如下。能夠使用分頁瀏覽查看收件箱中的郵件和已刪除文件夾中的郵件。單擊收件箱中當前頁某封郵件的主題或發(fā)件人之后，能夠打開并閱讀郵件。能夠根據(jù)用戶選擇的選項將收件箱中的郵件放入已刪除文件夾，也可以將已刪除文件夾中的郵件徹底刪除。任務(wù)8-1分頁瀏覽郵件

需要解決的核心問題如何通過URL向服務(wù)器提交數(shù)據(jù)？服務(wù)器端如何獲取URL提交的數(shù)據(jù)？如何使用函數(shù)mysqli_fetch_array()獲取查詢結(jié)果記錄集中的記錄？如何訪問記錄中每列的信息？如何設(shè)計分頁瀏覽中使用的“首頁”“上頁”“下頁”“尾頁”超鏈接？如何獲取當前用戶收件箱的所有郵件？如何獲取郵件總頁數(shù)？如何獲取當前頁中的所有記錄？為了能夠打開郵件，要如何設(shè)計收件箱中每封郵件的超鏈接？分頁瀏覽中的數(shù)據(jù)驗證的作用是什么？如何進行驗證？單擊email.php頁面左側(cè)的“收信”或者“收件箱”超鏈接時，要從右側(cè)的浮動框架子窗口中顯示圖8-1所示的頁面運行效果。圖8-1

收郵件頁面運行效果8.1.1收郵件功能描述

在收郵件界面中需要實現(xiàn)以下描述的功能。（1）能夠獲取當前用戶收件箱中尚未設(shè)置刪除標志的郵件總數(shù)并顯示出來。（2）能夠?qū)崿F(xiàn)郵件的分頁瀏覽功能，輸出“首頁”“上頁”“下頁”“尾頁”的文本或者超鏈接，若當前顯示的是第一頁中的郵件信息，則“首頁”和“上頁”超鏈接不可用，若當前顯示的是最后一頁中的郵件信息，則“下頁”和“尾頁”超鏈接不可用。（3）能夠根據(jù)用戶單擊的頁面超鏈接進行換頁，例如，當前正在顯示的是第2頁，單擊“下頁”超鏈接后，能夠?qū)㈨摯a3提交給服務(wù)器，以打開下頁中的郵件信息。若此時單擊“上頁”超鏈接，則能夠?qū)㈨摯a1提交給服務(wù)器，以打開上頁中的郵件信息。（4）能夠通過查詢語句中的限制子句limit獲取每頁中指定的郵件，能夠使用mysqli_fetch_array()函數(shù)從查詢結(jié)果記錄集中獲取一條記錄（一封郵件的所有信息），然后以數(shù)組的形式將每封郵件的發(fā)件人、主題、收發(fā)日期以及郵件中是否有附件等信息顯示到郵件列表中。若有附件，就在指定列中顯示附件小圖標flag-1.jpg。（5）能夠根據(jù)用戶的選擇，修改每頁中的郵件數(shù)。（6）單擊任意郵件中的發(fā)件人或者主題超鏈接時，能夠?qū)斍班]件的emailno列值（郵件序號）提交給服務(wù)器，實現(xiàn)打開與閱讀郵件的功能。（7）能夠根據(jù)用戶是否已經(jīng)閱讀過某封郵件來確定該郵件的發(fā)件人和主題超鏈接是否要設(shè)置為加粗效果。（8）選中需要刪除郵件左側(cè)的復選框，單擊“刪除”按鈕之后，能夠?qū)⑦x中的所有郵件設(shè)置為已刪除郵件。8.1.2用$_GET接收URL附加數(shù)據(jù)1．為瀏覽器端功能與服務(wù)器端功能獨立創(chuàng)建文件（1）創(chuàng)建瀏覽器端文件get.html。

創(chuàng)建文件get.html，在文件內(nèi)部設(shè)置超鏈接，鏈接熱點是“單擊超鏈接運行文件get.php，同時向該文件提交數(shù)據(jù)”，通過鏈接打開的文件是get.php。單擊超鏈接時，向服務(wù)器端提交的鍵值對是data=123。

在超鏈接中設(shè)置向服務(wù)器端提交數(shù)據(jù)需要使用href="url?鍵名=鍵值"來完成。

頁面運行效果如圖8-2所示。圖8-2

get.html的運行效果（2）創(chuàng)建服務(wù)器端文件get.php。

創(chuàng)建文件get.php，獲取并輸出get.html文件中超鏈接提交的數(shù)據(jù)。

通過超鏈接提交的數(shù)據(jù)在服務(wù)器端必須使用系統(tǒng)數(shù)組$_GET來接收，$_GET中需要使用的鍵名是超鏈接href屬性中數(shù)據(jù)對的鍵名。

單擊圖8-2中的超鏈接之后，會運行g(shù)et.php文件，運行效果如圖8-3所示。圖8-3

頁面文件get.php運行效果

在圖8-3中，瀏覽器地址欄內(nèi)的“get.php?data=123”是get.html文件中超鏈接標簽中href屬性的取值，顯示在?后面的數(shù)據(jù)對是要通過$_GET系統(tǒng)數(shù)組接收的數(shù)據(jù)。

由此可知，要使用超鏈接向服務(wù)器提交數(shù)據(jù)時，需要使用href="url?鍵名=鍵值"來完成設(shè)置；而在服務(wù)器端必須使用系統(tǒng)數(shù)組$_GET接收超鏈接提交的數(shù)據(jù)。2．將提交數(shù)據(jù)與接收數(shù)據(jù)功能在一個文件中實現(xiàn)

將提交數(shù)據(jù)與接收數(shù)據(jù)功能在一個文件中實現(xiàn)，是指在這個文件中創(chuàng)建超鏈接，超鏈接標簽中href屬性指定要鏈接的文件仍舊是該文件自身，即單擊超鏈接提交的數(shù)據(jù)仍舊由當前文件自己接收并處理，提交數(shù)據(jù)在瀏覽器端完成，而接收數(shù)據(jù)在服務(wù)器端完成。8.1.3處理查詢結(jié)果記錄集中的記錄

打開收件箱后，在顯示每頁中的郵件信息時，系統(tǒng)需要從查詢結(jié)果記錄集中逐條獲取記錄，然后以數(shù)組的形式獲取每條記錄中每列的列值。

PHP中提供了mysqli_fetch_array()、mysqli_fetch_row()、mysqli_fetch_object()、mysqli_fetch_assoc()等多種不同的函數(shù)來處理查詢結(jié)果記錄集中的記錄，本書主要講解mysqli_fetch_array()

和mysqli_fetch_object()這兩個常用的函數(shù)。1．mysqli_fetch_array()函數(shù)

使用mysqli_fetch_array()函數(shù)可以從查詢結(jié)果記錄集中獲取記錄指針指向的記錄。格式：arraymysqli_fetch_array(查詢結(jié)果記錄集)。

返回結(jié)果有兩種情況：如果記錄指針指向某條存在的記錄，則將獲取該記錄中的所有列，并且以數(shù)組的形式保存；如果記錄指針指向最后一條記錄之后，則返回false。

對于存放記錄信息的數(shù)組，可以使用兩種形式訪問數(shù)組元素：第一種是使用從0開始的數(shù)字索引，索引0代表查詢結(jié)果中第一列的信息，索引1代表第二列的信息，以此類推；第二種是使用鍵名訪問，使用數(shù)據(jù)表中的列名作為數(shù)組元素的鍵名，因為這種形式更直觀、更容易理解，所以成為程序中的主要用法。

創(chuàng)建頁面文件fetch_array.php，查詢數(shù)據(jù)表emailmsg中發(fā)件人wangaihua@163.com的全部郵件，獲取信息之后，將查詢結(jié)果中所有記錄的郵件序號、發(fā)件人、收件人、主題4列的列值以表格形式輸出。

頁面運行效果如圖8-6所示。圖8-6

fetch_array.php頁面運行效果2．mysqli_fetch_object()函數(shù)

使用mysqli_fetch_object()函數(shù)可以從查詢結(jié)果記錄集中獲取記錄指針指向的記錄。格式：objectmysqli_fetch_object(查詢結(jié)果記錄集)。

返回結(jié)果有兩種情況：若指向的記錄存在，則將返回的結(jié)果保存為對象，使用表中的列名作為對象的屬性來獲取各列的值；若指向的記錄不存在，則返回false。8.1.4分頁瀏覽郵件

為了美化設(shè)計的頁面，項目中仍舊要結(jié)合樣式的應(yīng)用來實現(xiàn)收郵件頁面的分頁瀏覽功能。

需要創(chuàng)建的文件有樣式文件receiveemail.css、頁面文件receiveemail.php和腳本文件receiveemail.js。

圖8-1所示的收件箱界面的整個頁面的邊距要定義為0（需要在receiveemail.css文件中增加樣式代碼body{margin:0;}），頁面包含上下排列的3個div，分別使用類選擇符.div1、.div2和.div3定義樣式。下面介紹3個div的樣式定義、div中子元素的樣式定義、div內(nèi)部要顯示的內(nèi)容的獲取及輸出。

頁面布局結(jié)構(gòu)如圖8-7所示。圖8-7

receiveemail.php頁面的布局結(jié)構(gòu)1．元素<divclass="div1">的設(shè)計（1）內(nèi)容說明。

元素<divclass="div1">中要放置的內(nèi)容是文本“收件箱”、當前用戶收件箱中的郵件總數(shù)以及可以修改每頁郵件數(shù)的下拉列表元素，效果如圖8-8所示。圖8-8

元素<divclass="div1">中的內(nèi)容（2）樣式設(shè)計。

類選擇符.div1的樣式要求如下：寬度為auto，高度為25px，上下填充為0，左右填充為10px，邊距為0，div中文本的字號為10pt，文本行高為25px。（3）內(nèi)容設(shè)計。

設(shè)計這一部分內(nèi)容的關(guān)鍵有兩點，第一是獲取當前用戶收件箱中的郵件總數(shù)，第二是修改每頁中的記錄數(shù)。2．元素<divclass="div2">的設(shè)計（1）內(nèi)容說明。

元素<divclass="div2">中的內(nèi)容包含兩部分，分別是位于左側(cè)的總控制復選框與“刪除”和“刷新”兩個按鈕，以及位于右側(cè)的“首頁”“上頁”“下頁”“尾頁”4個超鏈接（也可能是文本），效果如圖8-9所示。圖8-9

元素<divclass="div2">中的內(nèi)容（2）樣式設(shè)計。

類選擇符.div2的樣式要求：寬度為auto，高度為25px，上下填充為5px，左右填充為20px，上下邊距為5px，左右邊距為0，背景為淺灰色#eee，下邊框為1px、#aaf顏色的實線。

元素<divclass="div2">中的內(nèi)容是橫向排列的兩個div，分別使用類選擇符.div2-1和.div2-2定義樣式。元素<divclass="

div2-1">的內(nèi)容是總控制復選框以及“刪除”和“刷新”兩個按鈕，元素<divclass="div2-2">的內(nèi)容是超鏈接或文本“首頁”“上頁”“下頁”“尾頁”。

類選擇符.div2-1的樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，向左浮動；使用包含選擇符.div2-1input定義div內(nèi)部兩個按鈕的文本字號是10pt。

類選擇符.div2-2的樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，向右浮動，div中文本的字號為10pt，文本行高為25px。（3）內(nèi)容設(shè)計。

這一部分內(nèi)容是為分頁瀏覽郵件信息做準備，需要通過以下5步來實現(xiàn)相應(yīng)功能。①確定每頁中要顯示的記錄數(shù)：最初由程序開發(fā)人員直接在代碼中給定的數(shù)字是5，如果用戶重新選擇了自己郵箱中每頁的記錄數(shù)，則按照用戶選擇的進行修改。②確定收件箱中的郵件頁數(shù)：根據(jù)每頁中的記錄數(shù)和郵件總數(shù)來計算，因為得到的郵件頁數(shù)可能是小數(shù)，所以需要使用函數(shù)ceil()取得不小于該數(shù)的最小整數(shù)。③確定當前要顯示郵件信息的頁碼：若是用戶剛剛打開收件箱，則顯示的應(yīng)當是第1頁的郵件信息，之后系統(tǒng)會根據(jù)用戶單擊的“首頁”“上頁”“下頁”“尾頁”超鏈接獲取當前要顯示的郵件信息的頁碼。④設(shè)計“刪除”和“刷新”按鈕：在頁面中選擇要刪除的郵件之后，單擊“刪除”按鈕時能夠?qū)⑧]件設(shè)置為已刪除狀態(tài)，該按鈕需要設(shè)置為submit類型；在用戶單擊“刷新”按鈕時，要保證在當前窗口中重新運行頁面文件receiveemail.php，這樣做的目的是如果用戶收到了新的郵件，能夠及時刷新頁面收到郵件，該按鈕需要設(shè)置為普通的button元素。⑤設(shè)計超鏈接或文本“首頁”“上頁”“下頁”“尾頁”。在用戶單擊超鏈接時，除了要以鏈接的方式重新打開頁面文件receiveemail.php之外，還必須能夠向該頁面文件提交需要的頁碼以實現(xiàn)頁碼的變化，提交每頁中的郵件記錄數(shù)以確保每一頁都能按照用戶的要求顯示相應(yīng)數(shù)量的記錄。3．元素<divclass="div3">的設(shè)計（1）內(nèi)容說明。

元素<divclass="div3">的內(nèi)容包含使用表格排列的復選框、郵件的發(fā)件人、主題、附件圖標、收發(fā)日期等信息，效果如圖8-10所示。圖8-10

元素<divclass="div3">中的內(nèi)容（2）樣式設(shè)計。

類選擇符.div3的樣式要求為：寬度為auto，高度為auto，填充為0，邊距為0。

元素<divclass="div3">內(nèi)部表格使用包含選擇符.div3table定義樣式：寬度為100%，文本字號為10pt。

表格單元格使用包含選擇符.div3tabletd定義樣式：高度為30px，下邊框為1px、#aaf顏色的實線，單元格內(nèi)容在垂直方向上居中，這里的下邊框是針對每封郵件信息下面的橫線設(shè)計的。

表格內(nèi)部超鏈接的樣式定義為兩種情況：沒有閱讀過的郵件超鏈接，使用類名a1定義為黑色，沒有下畫線，文本加粗顯示；閱讀過的郵件超鏈接，使用標簽名a定義為黑色，沒有下畫線，文本非加粗顯示。

表格需要包含5列，列寬分別是30px、150px、auto、20px和120px。

收件箱的界面寬度必須能夠適應(yīng)浮動框架子窗口的寬度，也就是必須適應(yīng)瀏覽器窗口的寬度變化，所以收件箱界面中定義的所有div都沒有設(shè)置具體的寬度值，寬度值都為auto。而在使用的表格中，將用于顯示郵件主題的第3列的寬度設(shè)置為auto，是為了保證在其他4列寬度都固定的情況下，通過這一列的寬度變化來適應(yīng)整體的寬度變化，若是5列的寬度都設(shè)置為auto，運行效果將不穩(wěn)定。（3）內(nèi)容設(shè)計。

這一部分內(nèi)容要輸出當前頁中的所有郵件信息，需要使用如下4個操作步驟來完成。①獲取當前頁中要顯示郵件記錄的起始記錄號，這里所說的記錄號不是指在emailmsg表中的郵件序號emailno，而是查詢當前賬號收件箱中的所有郵件時得到的查詢結(jié)果記錄集中的編號，每個查詢結(jié)果記錄集中的記錄編號都是從0開始的。要顯示記錄的頁碼$pageno當前頁中第一條記錄的編號$pagestart1025310415表8-1

分頁瀏覽中頁碼與第一條記錄的編號的對應(yīng)關(guān)系②得到當前頁的起始記錄號之后，需要定義新的查詢語句，以獲取在當前頁中將要顯示的若干條記錄。例如，一頁中的記錄數(shù)$pagesize為5，若得到的起始記錄號是5，則需要獲取5、6、7、8、9這5條記錄。③在頁面中增加元素<divclass="div3">，在其內(nèi)部添加表格（是指添加表格的起始標簽<table>、結(jié)束標簽</table>以及<table>標簽中相關(guān)屬性的設(shè)置）。④使用循環(huán)語句從查詢結(jié)果記錄集中逐一獲取記錄，按照如下方式進行處理并輸出。4．控制復選框的全選操作

單擊div2中的id為control的復選框，控制同時選中或者取消選中當前頁所有郵件前面的復選框元素。8.1.5分頁瀏覽中的數(shù)據(jù)驗證

在運行receiveemail.php的頁面中，若用戶選擇了一封或者幾封郵件，那么當用戶單擊“刪除”按鈕時，需要運行delete.php文件將選中的文件放入已刪除文件夾。但是，若用戶沒有選擇要刪除的郵件而直接單擊了“刪除”按鈕，就必須阻止服務(wù)器端運行文件delete.php。

函數(shù)調(diào)用說明如下。

在表單標簽<form>中增加代碼onsubmit="returnvalidate();"，當用戶單擊submit類型的“刪除”按鈕時調(diào)用函數(shù)。

用戶沒有選擇要刪除的附件，直接單擊“刪除”按鈕時的運行效果如圖8-11所示。圖8-11

驗證腳本的運行效果8.1.6receiveemail.css和receiveemail.php的完整代碼1．receiveemail.css的完整代碼2．receiveemail.php的完整代碼任務(wù)8-2打開并閱讀郵件

需要解決的核心問題如何計算一封郵件中的附件數(shù)？如何將用戶編輯郵件時按【Enter】鍵生成的字符替換為閱讀郵件內(nèi)容中的段落標簽？函數(shù)nl2br()和str_replace()各自的含義是什么？

如何顯示附件名稱前面的文件類型圖標？如何根據(jù)emailmsg表中附件信息列attachment的信息得到超鏈接要打開的附件文件名稱信息？如何確定是否要將當前賬號信息寫入emailmsg表的readflag列？

在receiveemail.php頁面中，當用戶單擊每一封郵件的發(fā)件人或者主題時，將打開超鏈接指定的頁面文件openemail.php，閱讀選擇的郵件內(nèi)容，同時還可以閱讀或下載附件。打開不帶附件的郵件的界面如圖8-12所示；打開帶附件的郵件的界面如圖8-13所示。圖8-12

打開不帶附件的郵件的界面圖8-13

打開帶附件的郵件的界面8.2.1打開并閱讀郵件頁面的布局結(jié)構(gòu)及功能說明1．布局結(jié)構(gòu)

為了保證頁面的美觀效果，與寫郵件、收郵件界面的要求一樣，需要將整個頁面的邊距設(shè)置為0。

整個頁面的布局結(jié)構(gòu)如圖8-14所示。圖8-14

打開郵件頁面的布局結(jié)構(gòu)

從圖8-12可以看出，打開不帶附件的郵件之后，頁面中顯示了上下兩部分內(nèi)容。第一部分使用ID選擇符#div1定義樣式，內(nèi)容包含分行顯示的郵件主題、發(fā)件人信息、收件人信息和日期信息；第二部分使用ID選擇符#div2定義樣式，內(nèi)容是郵件內(nèi)容。

從圖8-13可以看出，打開帶附件的郵件之后，頁面中顯示了上、中、下3部分內(nèi)容。第一部分使用ID選擇符#div1定義樣式，內(nèi)容中除了郵件主題、發(fā)件人、收件人和日期信息之外，還包含附件個數(shù)信息。第二部分使用ID選擇符#div2定義樣式，內(nèi)容仍舊是郵件內(nèi)容。第三部分使用ID選擇符#div3定義樣式，該div內(nèi)部使用不同的段落顯示了附件的名稱以及附件名稱下方的“下載”和“打開”超鏈接。2．功能說明

閱讀郵件的功能說明如下。（1）能夠根據(jù)用戶選擇的郵件序號獲取并顯示郵件信息。（2）如果用戶是第一次閱讀某封郵件，則需要在該郵件的readflag列中增加用戶賬號信息。（3）能夠計算出附件的個數(shù)并在頁面中輸出。（4）顯示郵件內(nèi)容時，必須能夠?qū)l(fā)件人在編輯郵件內(nèi)容時按【Enter】鍵生成的字符替換為本頁面中的段落標簽，否則無論原來的郵件內(nèi)容有多長，都會顯示在一個段落中；要求每個段落第一行都要縮進兩個字符；任何情況下都要求為內(nèi)容區(qū)保留一定的頁面空間，若元素<divid='div2'>的高度不夠200px，則將高度設(shè)置為200px，否則高度根據(jù)郵件內(nèi)容高度來確定。（5）能夠根據(jù)是否存在附件來確定是否顯示元素<divid='div3'>。（6）元素<divid='div3'>中顯示的附件文件名稱信息前面帶有文件類型圖標。（7）顯示元素<divid='div3'>時，除了要輸出存放在數(shù)據(jù)表中的附件信息之外，在用戶單擊“下載”或“打開”超鏈接時，必須實現(xiàn)附件的下載或打開操作。

圖8-13中顯示的附件信息包含隨機數(shù)標識、附件名稱及附件大小3部分信息，這是為了保證用戶在接收附件之前可以確定附件的大小等。

當用戶單擊“打開”或“下載”超鏈接時，要打開或下載的附件都是保存在upload文件夾下的文件，這些文件名稱前面都帶有“（隨機數(shù)標識）”前綴。為了保證用戶能夠正常打開或下載附件，設(shè)計超鏈接時，要在文件名稱前面增加“（隨機數(shù)標識）”前綴。8.2.2字符串替換函數(shù)

字符串替換是Web編程中經(jīng)常使用的操作，如要過濾掉用戶提交的不文明詞語信息、處理字符串中包含的危險腳本、替換掉某些關(guān)鍵詞等。1．在openemail.php文件中的應(yīng)用需求

用戶在寫郵件界面中id為content的表單元素中輸入內(nèi)容時，經(jīng)常需要進行換行操作，這時只需按【Enter】鍵即可，而通過頁面在瀏覽器中輸出內(nèi)容要進行換行操作時，使用的是換行標簽<br/>或段落標簽<p>?！綞nter】鍵與頁面標簽之間是不通用的，因此在openemail.php頁面中顯示郵件內(nèi)容時，需要將用戶編輯郵件內(nèi)容時按【Enter】鍵生成的字符替換成HTML中的段落標簽，這需要使用字符串替換函數(shù)來完成。

PHP提供的字符串替換函數(shù)有兩個，分別是nl2br()和str_replace()。2．nl2br()函數(shù)

nl2br()函數(shù)名稱中的數(shù)字2實際上是to的縮寫，簡單理解該函數(shù)的作用就是，當用戶在文本區(qū)域中輸入文本時，把用戶按【Enter】鍵生成的字符替換為HTML的換行標簽<br/>。更為準確的解釋是在字符串中的每個新行（\n）之前插入HTML換行標簽<br/>。格式：nl2br(string)參數(shù)string是必需的，是規(guī)定要檢查的字符串。

頁面文件初始運行結(jié)果如圖8-15所示。

圖8-15中沒有出現(xiàn)PHP代碼部分輸出的內(nèi)容。

在圖8-15中輸入3段內(nèi)容之后，單擊“提交”按鈕，得到圖8-16所示的運行界面。

從圖8-16中可以看出，輸出的第一部分內(nèi)容將用戶編輯時輸入的3個段落都顯示在一行中，即用戶在文本區(qū)域中輸入內(nèi)容時按【Enter】鍵的操作在瀏覽器中輸出時不起任何作用；輸出的第二部分內(nèi)容則將原來的3個段落分成3行來顯示。圖8-15

txt.php文件初始運行效果圖8-16

提交文本之后的運行界面3．str_replace()函數(shù)

str_replace()函數(shù)能夠按照用戶的要求，將用戶指定的任意子串全部替換成另一個子串。格式：str_replace(find,replace,string,count)參數(shù)說明：參數(shù)find，必需，規(guī)定要查找的子串，也就是將要被替換掉的子串；參數(shù)replace，必需，規(guī)定要用來替換的子串；參數(shù)string，必需，規(guī)定被搜索的字符串；參數(shù)count，可選，對替換次數(shù)進行計數(shù)，通常很少使用。8.2.3打開并閱讀郵件功能的實現(xiàn)

設(shè)計打開并閱讀郵件頁面，需要創(chuàng)建的文件有樣式文件openemail.css和頁面文件openemail.php。

分別創(chuàng)建這兩個文件，并在openemail.css文件中使用代碼body{margin:0;}定義整個頁邊距為0。

之后在設(shè)計過程中，按照頁面內(nèi)容的順序分別設(shè)計元素<divid='div1'>、<divid='div2'>和<divid='div3'>。1．設(shè)計元素<divid='div1'>（1）元素<divid='div1'>及內(nèi)部元素的樣式要求。

使用選擇符#div1定義樣式要求：寬度為auto（保證能夠適應(yīng)浮動框架窗口寬度的變化），高度為auto（根據(jù)實際內(nèi)容的多少來確定），上下填充為10px，左右填充為0，邊距為0，背景色為#eef，下邊框為2px、#aaf顏色的實線。

頁面中所有段落的樣式直接使用HTML標簽名選擇符p定義：上下邊距為5px，左右邊距為0，上下填充為0，左右填充為10px（保證段落內(nèi)容左右不貼邊），段落中文本的字號為10pt，文本行高為20px。（2）設(shè)計div中的內(nèi)容。

設(shè)計元素<divid='div1'>中的內(nèi)容需要通過3個操作步驟來實現(xiàn)。①獲取要打開的郵件的序號。②連接并打開數(shù)據(jù)庫email，以指定的郵件序號為條件查詢數(shù)據(jù)表emailmsg，得到指定序號的郵件信息。③從服務(wù)器端輸出元素<divid='div1'>，并在其內(nèi)部輸出需要的郵件信息。2．設(shè)計元素<divid='div2'>（1）元素<divid='div2'>及內(nèi)部元素的樣式要求。

使用選擇符#div2定義樣式要求：寬度為auto，高度為auto，上下填充為10px，左右填充為0，邊距為0。

元素<divid='div2'>內(nèi)部控制輸出郵件內(nèi)容的所有段落都要增加縮進2個字符的樣式，直接使用包含選擇符#div2p定義即可。（2）設(shè)計div中的內(nèi)容。

設(shè)計元素<divid='div2'>中的內(nèi)容需要兩個操作步驟。第1步，輸出元素<divid='div2'>，在div內(nèi)部開始處先增加一個段落標簽，然后將當前郵件內(nèi)容中的回車換行符使用段落標簽替換之后，在div中輸出。第2步，判斷元素<divid='div2'>的高度是否小于200px，若小于200px，則將其設(shè)置為200px，否則使該元素的高度根據(jù)內(nèi)容的多少自動設(shè)置。3．設(shè)計元素<divid='div3'>（1）元素<divid='div3'>及內(nèi)部元素的樣式要求。

使用選擇符#div3定義樣式要求：寬度為auto，高度為auto，填充為0，邊距為0，邊框為1px、#aaf顏色的實線。

元素<divid='div3'>中用來顯示附件個數(shù)的段落樣式與其他段落樣式不同，這里使用包含選擇符#div3.p1定義，樣式要求為：邊距為0，背景色為#eef，文本行高為40px。

所有的附件名稱信息前面都帶有附件文件類型圖標，使用選擇符#div3.p2>img定義圖標的樣式：寬度為20px，右邊距為5px，與段落中的文件名稱之間保留距離，在垂直方向上與文件名稱頂端對齊。（2）設(shè)計div中的內(nèi)容。

首先判斷是否需要輸出元素<divid='div3'>，若當前郵件中有附件，則要輸出，否則不需要輸出。

輸出元素<divid='div3'>中的內(nèi)容需要3個操作步驟。第1步，使用類名為p1的段落控制輸出附件個數(shù)。第2步，分割數(shù)據(jù)表emailmsg中attachment的列值，獲取各個附件的信息，格式為“(隨機數(shù)標識符)文件名稱.擴展名(文件大小)”，并將其作為即將顯示的附件名稱信息。第3步，對上面步驟得到的附件信息進行處理，獲取用于超鏈接“打開”或“下載”的附件名稱信息，格式為“(隨機數(shù)標識符)文件名稱.擴展名”，這是在文件夾upload中存儲的文件名稱格式。（3）顯示附件前面的圖標。

不同類型的附件前面應(yīng)顯示不同的圖標，項目提供的圖標文件夾內(nèi)容如圖8-19所示。

上傳的所有圖片文件，都以該圖片自身的縮略圖作為文件類型圖標。

實現(xiàn)該功能極佳的方案是使用jQuery代碼。在使用jQuery代碼之前，需要下載jQuery庫文件，此處使用的是jquery-1.11.3.min.js。圖8-19

提供的文件類型圖標4．修改emailmsg表中的readflag列值

當用戶打開郵件之后，要判斷當前郵件readflag列中是否已經(jīng)保存過該用戶的賬號信息，如果沒有保存過，則意味著該用戶是第一次打開當前郵件，需要將用戶的賬號信息寫入數(shù)據(jù)表emailmsg的readflag列。8.2.4openemail.css和openemail.php文件的完整代碼1．openemail.css的完整代碼2．openemail.php的完整代碼任務(wù)8-3刪除郵件

需要解決的核心問題如何將選定的郵件放入已刪除文件夾？徹底刪除郵件時，如何將upload文件夾中的相關(guān)附件文件同時刪除？

刪除郵件包括將郵件從收件箱放入已刪除文件夾的邏輯刪除、分頁瀏覽已刪除文件夾中的內(nèi)容和將已刪除文件夾中的郵件徹底刪除3個部分的操作。8.3.1將郵件放入已刪除文件夾

在receiveemail.php頁面中，選中要刪除的某封或者某幾封郵件前面的復選框，如圖8-20所示。圖8-20

在receiveemail.php頁面中選中要刪除的郵件前面的復選框

用戶單擊“刪除”按鈕之后，將執(zhí)行頁面文件delete.php，接收receiveemail.php文件中復選框組傳遞過來的郵件序號，把被選中郵件記錄的deleted列值設(shè)置為1，即把被選中郵件放入已刪除文件夾，然后返回頁面文件receiveemail.php中，并彈出消息框告知用戶移動到已刪除文件夾中的郵件數(shù)，效果如圖8-21所示。圖8-21

在receiveemail.php頁面中顯示被移動到已刪除文件夾中的郵件數(shù)8.3.2分頁瀏覽已刪除文件夾中的郵件

用戶單擊

email.php

頁面左側(cè)的超鏈接“