劉新華

（廣州市交通高級技工學(xué)校 廣東省廣州市 510540）

1 引言

目前，5G 通信、大數(shù)據(jù)、互聯(lián)網(wǎng)、云計(jì)算等技術(shù)的快速發(fā)展，人們已經(jīng)進(jìn)入到了先進(jìn)的移動互聯(lián)網(wǎng)時(shí)代，基于計(jì)算機(jī)技術(shù)設(shè)計(jì)的網(wǎng)站覆蓋了各個(gè)行業(yè)，比如在線教育、智能旅游、醫(yī)療診斷、娛樂游戲、金融投資等，有效地提升了行業(yè)信息化、共享化和智能化水平。計(jì)算機(jī)網(wǎng)站作為人們與信息社會交流的一個(gè)重要橋梁，其引入的設(shè)計(jì)和開發(fā)技術(shù)也逐漸提升，但是，由于目前網(wǎng)站登錄的設(shè)備越來越多，不僅包括PD 電腦、筆記本電腦等，還包括智能手機(jī)、平板電腦、車載電子、安防門禁和工業(yè)控制顯示設(shè)備，因此網(wǎng)站渲染已經(jīng)面臨著跨設(shè)備和多種尺寸屏幕的現(xiàn)狀，從簡單的人機(jī)交互網(wǎng)站開始向用戶體驗(yàn)交互網(wǎng)站發(fā)展，因此網(wǎng)站輸出到不同的設(shè)備上會產(chǎn)生一系列問題，比如網(wǎng)站顯示不全面、網(wǎng)站無法打開、瀏覽器與網(wǎng)站無法適配，嚴(yán)重影響網(wǎng)頁用戶的體驗(yàn)，也會降低用戶對網(wǎng)站的信賴度。

因此，網(wǎng)絡(luò)設(shè)計(jì)師和程序開發(fā)人員為了提高計(jì)算機(jī)網(wǎng)站的運(yùn)行性能，經(jīng)過多年的研究和改進(jìn)，提出了一些先進(jìn)的網(wǎng)站設(shè)計(jì)技術(shù)，比如HTML5+JavaScript、HTML5+CSS3 等，網(wǎng)站開發(fā)也引入了先進(jìn)的工具，比如Photoshop、Fireworks 和Flash 等，為了能夠?qū)崿F(xiàn)網(wǎng)站在多平臺上輸出，也引入了微服務(wù)架構(gòu)和SQLite 數(shù)據(jù)庫，提高了網(wǎng)站信息處理的效率，一定程度上也提高了網(wǎng)站的開發(fā)水平。

2 計(jì)算機(jī)網(wǎng)站設(shè)計(jì)架構(gòu)技術(shù)

計(jì)算機(jī)網(wǎng)站設(shè)計(jì)架構(gòu)經(jīng)過多年的研究，也提出了很多的種類，從最初的C/S 架構(gòu)、B/S 架構(gòu)等發(fā)展到了微服務(wù)架構(gòu)，因此大大的提高了網(wǎng)站的可移植性、并發(fā)性和響應(yīng)速度。C/S 架構(gòu)模式的計(jì)算機(jī)網(wǎng)站必須安裝客戶端程序，因此對計(jì)算機(jī)設(shè)備的要求就比較高，不利于網(wǎng)站的推廣和提高用戶流量。B/S 架構(gòu)模式的計(jì)算機(jī)網(wǎng)站只需要在瀏覽器上輸入服務(wù)器地址即可登錄，可以提高PC 設(shè)備登錄的速度，但是由于云計(jì)算和移動通信技術(shù)的發(fā)展，目前人們通過智能手機(jī)和平板電腦等移動設(shè)備登錄網(wǎng)站的頻率越來越高，因此傳統(tǒng)的C/S 架構(gòu)和B/S 架構(gòu)已經(jīng)無法適應(yīng)新時(shí)期的需求，網(wǎng)絡(luò)工程師提出了微服務(wù)架構(gòu)[1]。基于微服務(wù)架構(gòu)的網(wǎng)站架構(gòu)如圖1所示。

圖1：基于微服務(wù)架構(gòu)的計(jì)算機(jī)網(wǎng)站

微服務(wù)架構(gòu)是一項(xiàng)非常先進(jìn)的計(jì)算服務(wù)技術(shù)，其可以與當(dāng)前最為流行的云計(jì)算進(jìn)行結(jié)合，在云中部署應(yīng)用程序，從而可以方便使用智能手機(jī)等移動設(shè)備登錄網(wǎng)站，微服務(wù)架構(gòu)通過“輕量級設(shè)備與HTTP 型API 進(jìn)行溝通”，可以實(shí)現(xiàn)網(wǎng)站的重構(gòu)和逆向工程，從而可以在不影響網(wǎng)站整體架構(gòu)的過程中，進(jìn)一步提高服務(wù)性能，不影響計(jì)算機(jī)網(wǎng)站的接入和輸出[2]。微服務(wù)架構(gòu)可以將網(wǎng)站的功能分解到各個(gè)離散的服務(wù)中，從而降低系統(tǒng)功能的耦合性和提高系統(tǒng)靈活性，圍繞計(jì)算機(jī)網(wǎng)站的業(yè)務(wù)領(lǐng)域組件創(chuàng)建應(yīng)用，從而可以進(jìn)行迭代升級和管理服務(wù)，加快了Web 應(yīng)用網(wǎng)站向移動應(yīng)用網(wǎng)站的轉(zhuǎn)變。微服務(wù)能夠給應(yīng)用網(wǎng)站提供一個(gè)API Gateway 接口，為網(wǎng)站工程師提供一個(gè)服務(wù)入口，該入口對前臺是透明的，能夠聚合后臺的多種服務(wù)，實(shí)現(xiàn)安全過濾和流量控制，還可以提高網(wǎng)站的性能。

3 計(jì)算機(jī)網(wǎng)站頁面開發(fā)技術(shù)

目前，計(jì)算機(jī)網(wǎng)站設(shè)計(jì)的頁面開發(fā)非常重要，引入的關(guān)鍵技術(shù)非常多，比如HTML5、XML、JavaScript、CSS3 和DIV 等，不僅可以提高網(wǎng)頁動態(tài)交互設(shè)計(jì)能力，還可以實(shí)現(xiàn)網(wǎng)頁跨平臺和跨終端設(shè)備設(shè)計(jì)，滿足當(dāng)前多屏幕尺寸的終端應(yīng)用需求。CSS3 技術(shù)可以為網(wǎng)頁設(shè)計(jì)提供層疊樣式表，為網(wǎng)頁設(shè)計(jì)提供信息標(biāo)記語言，準(zhǔn)確的控制網(wǎng)頁版面的布局、顏色、背景，提高了網(wǎng)頁版面的豐富多彩性，也可以觸發(fā)網(wǎng)頁設(shè)計(jì)者的靈感，確保用戶的體驗(yàn)更加簡易，增強(qiáng)人們?yōu)g覽互聯(lián)網(wǎng)的興趣。DIV 可以完成網(wǎng)頁整體布局和框架結(jié)構(gòu)設(shè)計(jì)，也可以運(yùn)用網(wǎng)頁標(biāo)記和語言等關(guān)鍵元素，為網(wǎng)頁設(shè)計(jì)提供一個(gè)系統(tǒng)化和結(jié)構(gòu)化的背景，并且形成一個(gè)整體的網(wǎng)頁定位技術(shù)，DIV 技術(shù)可以為網(wǎng)頁設(shè)計(jì)提供約束配置和控制功能，有效的保護(hù)網(wǎng)頁設(shè)計(jì)文檔?；贒IV 在網(wǎng)頁布局中的定義結(jié)構(gòu)代碼如下所述。

其中，wrapper 表示門戶網(wǎng)的主體，以便能夠與頁腳進(jìn)行區(qū)別，header 表示門戶網(wǎng)頁頭，container 表示門戶網(wǎng)的內(nèi)容；sidebar 表示側(cè)邊導(dǎo)航工具欄；maincontent 表示門戶網(wǎng)的主要功能區(qū)，可以劃分為左邊欄、右邊欄、上邊欄和下邊欄，使用DIV 可以針對主功能區(qū)進(jìn)行更加細(xì)化的、嵌套的分割，從而可以美化門戶網(wǎng)頁面布局；footer 表示門戶網(wǎng)的頁腳，可以利用DIV 設(shè)置頁腳的開始位置和結(jié)束位置。

網(wǎng)頁布局設(shè)計(jì)完畢之后，就可以利用CSS3 進(jìn)行詳細(xì)劃分，比如header 的設(shè)計(jì)包代碼如下。

網(wǎng)站開發(fā)采用DIV 和CSS 技術(shù)可以為學(xué)校網(wǎng)站提供一個(gè)更加合理的網(wǎng)頁空間布局，DIV 可以封裝網(wǎng)頁布局子模塊的內(nèi)容，這些內(nèi)容包括視頻、圖片、文字和表格，CSS 是一個(gè)層疊式的樣表，可以精確的控制網(wǎng)頁的布局、背景和其他可視化效果。網(wǎng)站開發(fā)采用DIV 和CSS 技術(shù)，可以將網(wǎng)頁中的代碼、數(shù)字和文字高效傳輸，并且可以過濾無效的和不合規(guī)范的數(shù)據(jù)信息，進(jìn)一步提高網(wǎng)站的響應(yīng)速度。

HTML5 則是最新的計(jì)算機(jī)網(wǎng)站交互技術(shù)之一，可以滿足多屏幕尺寸的自適應(yīng)功能，比如網(wǎng)頁中的圖像顯示自適應(yīng)大小代碼如下所述：“img{width:100%； -ms-interpolation-mode: bicubic；}”[3]。HTML5 還引入了本地?cái)?shù)據(jù)庫，有效地支持DOM Storage 和Web SQL Database 兩種先進(jìn)的存儲機(jī)制，可以完成本地存儲或高速緩存操作，還可以利用SQL 語法完成數(shù)據(jù)查詢和插入操作，這樣就可以提高交互式搜索的速度，提供一個(gè)緩存和索引功能，離線Web程序也可以使用，實(shí)現(xiàn)代碼如下：“if(window.applicationCache) {//支持離線應(yīng)用}”[4]。HTML5 可以利用

4 計(jì)算機(jī)網(wǎng)站數(shù)據(jù)處理技術(shù)

計(jì)算機(jī)網(wǎng)站最為關(guān)鍵的功能是實(shí)現(xiàn)數(shù)據(jù)加工和存儲，目前常用的數(shù)據(jù)庫軟件包括SQL 數(shù)據(jù)庫、Oracle 數(shù)據(jù)庫、MySQL 數(shù)據(jù)庫，這些數(shù)據(jù)庫概念強(qiáng)大，但是由于許多計(jì)算機(jī)網(wǎng)站還要適應(yīng)移動設(shè)備，因此又引入了一種輕量級的數(shù)據(jù)庫技術(shù)，也即是SQLite 數(shù)據(jù)庫技術(shù)，該技術(shù)是一種輕量級、并發(fā)性的數(shù)據(jù)庫加工軟件，其可以為數(shù)據(jù)庫插入、修改、刪除和查詢信息提供一個(gè)應(yīng)用程序接口，實(shí)現(xiàn)多種數(shù)據(jù)庫的統(tǒng)一訪問功能[5]。SQLite 數(shù)據(jù)庫還包括四個(gè)關(guān)鍵接口函數(shù)，分別是用于注冊驅(qū)動的對象DriverManager、與數(shù)據(jù)庫創(chuàng)建的連接對象Connection、數(shù)據(jù)庫操作對象Statement 和數(shù)據(jù)庫操作結(jié)果集對象ResultSet。SQLite 數(shù)據(jù)庫能夠?yàn)殚_發(fā)人員提供一個(gè)標(biāo)準(zhǔn)的應(yīng)用程序接口，可以將所有的數(shù)據(jù)庫操作語句嵌入到Java 程序中，可以為更高級的工具提供跨平臺操作技術(shù)，不需要受到應(yīng)用軟件配置數(shù)據(jù)庫不同帶來的影響。

SQLite 數(shù)據(jù)庫能夠?yàn)橛?jì)算機(jī)網(wǎng)站提供一個(gè)移動式分布計(jì)算服務(wù)，與Java 程序相互結(jié)合，更好地開發(fā)和實(shí)現(xiàn)移動設(shè)備軟件，SQLite 數(shù)據(jù)庫利用Java 遠(yuǎn)程過程調(diào)用機(jī)制，是面向?qū)ο蟮囊粋€(gè)組成部分，可以將完整的對象作為返回值或參數(shù)傳遞給系統(tǒng)，不僅僅預(yù)定義數(shù)據(jù)類型，也及時(shí)可以將哈希表這樣的復(fù)雜類型作為參數(shù)傳遞。SQLite 數(shù)據(jù)庫采用了自然的、直接的和功能全面的方法實(shí)現(xiàn)分布式計(jì)算服務(wù)，幫助程序員利用持續(xù)遞增的方式添加系統(tǒng)功能。SQLite 數(shù)據(jù)庫還具有可移動性，將屬性從客戶機(jī)移動到服務(wù)器，也可以從服務(wù)器移動到客戶機(jī)，降低客戶機(jī)或服務(wù)器的工作量，促使系統(tǒng)具備更大的靈活性。

5 結(jié)束語

計(jì)算機(jī)網(wǎng)站設(shè)計(jì)與開發(fā)是一項(xiàng)系統(tǒng)的、復(fù)雜的工作，其不僅要引入先進(jìn)的技術(shù)保障網(wǎng)站順利開發(fā)，還要保障計(jì)算機(jī)網(wǎng)站的并發(fā)性、可靠性、可移動性、自適應(yīng)性，因此人們引入了很多的先進(jìn)技術(shù)，比如基于DIV 實(shí)現(xiàn)網(wǎng)站頁面的整體布局和分割，基于CSS3 技術(shù)實(shí)現(xiàn)每一個(gè)布局的設(shè)計(jì)，并且引入HTML5 技術(shù)實(shí)現(xiàn)網(wǎng)站的自適應(yīng)和多媒體顯示，不僅可以有效規(guī)劃網(wǎng)站的整體，還可以實(shí)現(xiàn)網(wǎng)站內(nèi)容與形式的分離，精簡網(wǎng)頁設(shè)計(jì)的代碼，促使網(wǎng)頁空間結(jié)構(gòu)更加簡單和清晰，提高網(wǎng)站搜索引擎的索引效率，并且可以為未來網(wǎng)站升級提供契機(jī)，降低網(wǎng)頁開發(fā)的工作量，提高網(wǎng)站維護(hù)的效率。