遼寧對外經貿學院 徐雪楠

微信圖文編輯網站設計

遼寧對外經貿學院 徐雪楠

隨著微信公眾號的迅速發(fā)展，簡單圖文已經無法滿足大眾的觀賞要求，在此情況下，微信圖文編輯網站應運而生，公眾平臺運營人員可利用此類網站對圖文進行編輯、美化等操作。本文闡述了圖文編輯網站的功能，并對數(shù)據(jù)庫設計，各個功能模塊的功能要點、設計思路進行了詳細的論述。

圖文編輯；網站；SQL Server

1 引言

近年來，新媒體迅速發(fā)展為新一代信息傳遞的媒介，微信公眾平臺作為新媒體的代表熱度高漲，如何在微信中寫出一篇吸引眼球的文章尤為重要。對于設計一個可以幫助公眾平臺運營人員寫出高質量文章的圖文編輯網站，本網站包括個人中心模塊、用戶社區(qū)模塊、管理模塊、圖文編輯模塊、效果預覽模塊和圖文精選模塊。運用了HTML+Java語言進行網站設計，采用B/S開發(fā)模式，Java EE架構，利用SQL Server數(shù)據(jù)庫進行站內數(shù)據(jù)設計與管理。

2 概述

2.1 網站的現(xiàn)狀

根據(jù)對現(xiàn)有的多個微信圖文編輯網站的調查和對比發(fā)現(xiàn)，各個圖文編輯網站雖然均有各自特色吸引用戶，但網站功能不夠完善，僅僅實現(xiàn)了微信圖文編輯美化的基礎功能，未能利用先進的計算機和網絡技術處理圖文編輯器的其它功能，公眾平臺運營人員有時需要使用多個同類網站才能完成一篇精美圖文的制作，極大的降低了運營人員的工作效率，并且站內用戶間的互動幾乎為零，降低了用戶活躍度。

2.2 網站的意義

微信圖文編輯網站是一個便于用戶對微信圖文進行編輯、排版、美化的在線編輯工具，具有豐富的素材，實用性強且互動性強的功能模塊和簡單易操作的界面，是“白板”用戶入門圖文排版的“橋梁”，專業(yè)運營人員的進階工具。

3 相關技術

3.1 開發(fā)工具及環(huán)境

網站使用HTML+Java語言進行程序編寫，開發(fā)工具采用Java語言的開發(fā)平臺MyEclipse。操作系統(tǒng)是64位的Windows 7，開發(fā)環(huán)境為JDK 1.6.0+MyEclipse 8.5+Tomcat 6.0，數(shù)據(jù)庫采用SQL server 2008，瀏覽器使用IE10版本。

3.2 開發(fā)技術

使用Servlet在其內部調用其他的Java資源并與多種數(shù)據(jù)庫進行交互，替代傳統(tǒng)CGI，動態(tài)的生成Web界面。采用JDBC實現(xiàn)網站與數(shù)據(jù)庫的通信。使用可重復利用的JavaBean，可視化的JavaBean實現(xiàn)控制邏輯、業(yè)務邏輯、表示層之間的分離；非可視化的JavaBean用于后臺數(shù)據(jù)處理和連接數(shù)據(jù)庫。

4 功能需求分析

個人中心：用戶管理個人信息及自定義素材的功能模塊。

用戶社區(qū)：用戶與用戶之間良性互動的交流平臺。

管理模塊：網站管理員對用戶的網絡行為進行管理及審核的功能模塊。

圖文編輯功能：用戶可通過此功能對所需排版的圖文進行編輯美化。

效果預覽功能：在頁面中插入第三方工具，查看正在被編輯的圖文在手機上的預覽效果。

圖文精選：為用戶提供優(yōu)秀圖文的實例作為參考范本。

5 網站規(guī)劃設計

5.1 模塊設計

整個網站可以劃分為6個模塊：個人中心模塊、用戶社區(qū)模塊、管理模塊、圖文編輯模塊、效果預覽模塊和圖文精選模塊。網站模塊劃分圖如圖1所示。

5.2 數(shù)據(jù)庫物理結構設計

表是數(shù)據(jù)庫核心，表的設計至關重要。根據(jù)前面對網站功能模塊的分析，可以得出網站中所用到的數(shù)據(jù)信息表基本包括：用戶信息表、文件存儲表、默認素材表、自定義素材表、精選圖文表和用戶評論表。

用戶信息表（User_info），用于存儲用戶所注冊的個人信息。

文件存儲表（User_file)，用于存儲用戶上傳保存的圖文文件信息。

默認素材表（Fodder_default），用于存儲網站所提供的素材信息，如表1所示。

圖1 網站模塊劃分

表1 默認素材表

自定義素材表（User_fodder）,用于存儲用戶上傳的自定義素材信息，如表2所示。

表2 自定義素材表

精選圖文表（image-text），用于存儲圖文精選模塊所需顯示的圖文信息。

用戶評論表（User_comment)，用于存儲用戶在用戶社區(qū)內提交的評論信息。

5.3 主要功能模塊設計

5.3.1 首頁設計

為使首頁從視覺角度更加簡潔舒適，首頁采用星空色為主色調，搭配以紅色（圖文編輯）、深藍色（個人中心）、橘黃色（用戶向導）為背景的功能模塊及簡約的輔助信息條，并采用黃金分割比例布局頁面中各個組件位置，由于背景顏色較深，頁面內字體顏色大體選用白色，給予用戶最佳的視覺效果。功能模塊通過超鏈接可跳轉至相應子頁面，并設置鼠標經過圖像及點擊音效，使得模塊按鈕跳脫死板，靈動起來。

5.3.2 個人中心

此功能模塊專為網站注冊用戶建立，普通用戶可在注冊頁面填寫用戶個人信息完成注冊，使用所注冊的用戶名及密碼進行站內登錄。此模塊通過JDBC連接數(shù)據(jù)庫，訪問用戶信息表驗證用戶信息。登錄成功后，將用戶名保存到Session中，并在文件存儲表中查詢顯示此用戶已保存的圖文信息（單頁可顯示15條結果，當用戶保存文件多于15條時分頁顯示），用戶可打開文件對其內容進行編輯，修改等操作，或將已保存的圖文上傳至圖文精選模塊。

此模塊中還具備消息通知功能，用戶可通過此功能獲取網站管理員發(fā)布的消息，以及用戶社區(qū)中的互動消息提醒等。此外，用戶可點擊頁面右上角用戶名進入個人信息界面，查看或修改個人信息，當用戶修改登錄密碼成功后（新密碼與舊密碼不同），需重新登陸后才可繼續(xù)訪問此模塊及站內其他內容。

此功能模塊新增現(xiàn)有圖文編輯網站所不具備的自定義素材功能，用戶可根據(jù)自身喜好上傳個人素材至自定義素材庫，但所上傳的素材必須符合站內規(guī)定，且素材需在網站管理員的審核通過后才可使用，審核時間一般為10-50分鐘，如果用戶上傳的素材不符合要求，不予以審核通過，并以消息形式將審核結果發(fā)送至用戶個人中心。用戶也可以下載用戶社區(qū)中其他用戶的分享素材，下載完成后即可保存至自定義素材庫。用戶可進入自定義素材管理欄目中對已上傳的素材進行重命名、刪除操作，用戶已刪除素材不可找回。

5.3.3 用戶社區(qū)

用戶社區(qū)是便于用戶與用戶之間良性互動，交流共享的信息交流平臺，可將資源，用戶和信息流整合到一起，也保證了網站與用戶之間的互動性。采用左側可隱藏式的框架設計，盡量減少對頁面的占用。導航欄中當前訪問的欄目突出顯示，給予用戶良好的“位置”感。功能模塊內設置了關鍵詞搜索、話題推薦、信息發(fā)布及用戶評論四個子模塊。其主要功能如下：

關鍵詞搜索：用戶可在搜索欄內輸入關鍵詞點擊“搜索”按鈕后查詢閱覽相關信息。話題推薦：根據(jù)用戶瀏覽習慣智能篩選出用戶可能感興趣的話題。信息發(fā)布：用戶編寫話題信息，或者將自己已通過審核的個人素材發(fā)布到用戶社區(qū)。

用戶評論：用戶可在搜索或話題推薦功能篩選出的話題中提交個人評論參與話題討論。

5.3.4 管理模塊

此功能模塊僅限網站管理員使用，網站管理員可通過對用戶站內行為的監(jiān)聽，及時發(fā)現(xiàn)具有不正當網絡行為嫌疑的用戶，獲取其個人信息，經停號審查后，如果發(fā)現(xiàn)用戶確有抄襲、不恰當言論、惡意引導等不良行為，情節(jié)較輕者處以警告處理，停號三天后可恢復使用，如果情節(jié)嚴重，管理員可對其站內賬號進行永久封號處理。

網站管理員可對用戶所上傳的自定義素材進行審核，如果素材無任何違規(guī)行為，則上傳成功，素材的相對路徑及素材信息保存至自定義素材表中，否則上傳失敗，管理員以消息通知的形式將審核結果返回到用戶個人中心。用戶所發(fā)布或評論的信息中如果含有敏感詞匯，網站管理員可對此條評論進行刪除處理，并發(fā)送警告信息至此用戶的個人中心。

5.3.5 圖文編輯功能

此功能模塊是本網站最核心的功能，分為菜單欄和工具欄、編輯欄三個部分，菜單欄位于頁面左側，用戶可點擊相應欄目名稱，顯示可使用的默認素材以及用戶的自定義素材(單頁可顯示15條結果，如果當前素材多于15條時，采用滾動條，用戶可拖動滾動條查看全部素材）。工具欄位于頁面右端偏上位置，工具欄中工具布局及組件參照office2010中word標準工具欄，增添超鏈接按鈕，用戶可點擊此按鈕，在彈出的窗體內輸入鏈接網絡圖片、動畫、音頻或視頻的地址，便可將地址所指向的多媒體文件插入到圖文的當前位置。編輯欄是用戶編輯圖文的顯示層，其主要作用為將用戶在站內的文章撰寫和排版等可視化，呈現(xiàn)出圖文的初步預覽效果。

除基礎編輯功能外，在此模塊中增加圖文保存功能，解決現(xiàn)有圖文編輯網站不具備記憶功能的問題，用戶可在圖文編輯中或者編輯完成后對其進行保存操作。當用戶點擊“保存”按鈕時，后臺獲取編輯欄中的圖文信息將其保存為.doc格式的word文檔，同時獲取用戶登錄信息，并彈出“文件命名”對話框，用戶輸入符合命名要求的文件名后，可點擊“確定”完成文件保存，所保存文件的相對路徑及信息將保存至文件存儲表中，用戶可在個人中心內查看文件。

5.3.6 效果預覽功能

此功能模塊的實現(xiàn)需要綁定第三方平臺工具。具體功能為獲取用戶正在編輯的圖文內容，模擬手機預覽效果，解決圖文可能因電腦與手機屏幕大小及分辨率不同等原因導致的預覽效果不同，出現(xiàn)排版錯亂的問題（注：不同品牌、型號的手機預覽效果存在差異，預覽效果僅供參考使用）。

5.3.7 圖文精選

圖文精選模塊的主要功能是為用戶提供圖文排版的參考范本實例，網站管理員選取現(xiàn)有公眾號所發(fā)布的優(yōu)秀圖文，經原作者授權后上傳至精選圖文庫，或者網站用戶將自己保存至個人中心的原創(chuàng)圖文上傳，經網站管理員審核并且通過后上傳至精選圖文庫。所有精選圖文分頁顯示，用戶可自由選擇每個版面可顯示圖文信息數(shù)量的分頁值，每條信息包括封面圖片、圖文標題、圖文作者、圖文摘要以及閱覽次數(shù)，更加清晰直觀的將每一篇圖文的主要內容呈現(xiàn)給用戶，便于用戶快速獲取所需信息。模塊內設有用戶評論功能，用戶可在每篇圖文的文末評論區(qū)處，點贊或寫下自己對于文章的看法和建議。

6 結語

本文闡述了一個基于Java Web技術的微信圖文編輯網站設計過程，網站適用于微信圖文的編輯和排版。以圖文編輯功能為核心，設計了可根據(jù)個人喜好自由上傳素材并共享的自定義素材功能，以及可在網站綁定的第三方工具上查看圖文排版效果的效果預覽功能，擺脫素材少而單調和圖文排版錯亂的問題。并且增加了圖文精選和用戶社區(qū)兩大模塊，便于用戶之間的互動交流，提升用戶活躍度。

[1]楊軍.基于JAVA平臺的網站內容管理系統(tǒng)設計與實現(xiàn)[J].科技創(chuàng)新與應用,2016,22:100.

[2]趙鋼.基于java Web技術的網站系統(tǒng)設計與實現(xiàn)[J].信息與電腦(理論版),2013,06:73-74.

[3]鄧麗主編.數(shù)據(jù)庫原理與技術簡明教程[M].大連:東軟電子出版社,2012:28-29.

圖5 計數(shù)、譯碼和顯示電路原理圖

2.4 計數(shù)、譯碼和顯示電路

計數(shù)由二進制可逆計數(shù)器CD4516芯片完成，譯碼采用四—十六線譯碼器CD4514完成，顯示電路由發(fā)光二極管和電阻組成，原理圖如圖5所示。

譯碼器CD4514的功能表如表2所示，當CD4516為加計數(shù)時，即外接直流電源的方向為上正下負時，譯碼器能夠從左向右依次驅動發(fā)光二極管發(fā)光。

顯示電路如圖5所示，由發(fā)光二極管和電阻組成。當發(fā)光二極管的陽極加高電平時，二極管發(fā)光；相反，發(fā)光二極管的陽極加低電平時，發(fā)光二極管不發(fā)光。

3.結論

本文介紹的直流電源方向顯示器的設計，可以鞏固數(shù)字電路的基礎知識及增強理論知識的應用能力，控制發(fā)光二極管依次發(fā)光的速度也可以用非門和電阻組成的閘門電路完成。計數(shù)和譯碼也可以采用其它的可逆計數(shù)器和譯碼器實現(xiàn)。

參考文獻

[1]卿太全,李蕭,郭明瓊.常用數(shù)字集成電路原理與應用[M].北京:人民郵電出版社,2006.

[2]秦曾煌.電工學(第六版)下冊電子技術[M].北京:高等教育出版社,2004.

[3]劉麗華,劉明輝,方超.電網頻率顯示器的設計[J].電子制作,2016(Z1): 5-7.

徐雪楠（1995—）,女，遼寧錦州人，大學本科，現(xiàn)就讀于遼寧對外經貿學院，研究方向：網站設計。