基于移動端APP的信息發(fā)布平臺研發(fā)

郭震星 白俊鴿 四川大學(xué) 錦城學(xué)院

引言

伴隨著4G、5G的到來，移動端應(yīng)用在快步發(fā)展，手機已和人們的生活密不可分，而且手機也不僅僅局限于打電話發(fā)消息，解開這些局限的正是手機上各式各樣的APP軟件。信息發(fā)布平臺就是讓手機以時間流的形式記錄分享周圍的事，看見的事。本文主要介紹了信息發(fā)布平臺手機APP的制作過程，需要webserver，C++服務(wù)器，數(shù)據(jù)庫及所需環(huán)境。介紹了在項目中需要把前后端分離開來，在項目前期需要定義好統(tǒng)一的接口，前端負(fù)責(zé)APP的界面和一些簡單的可以由JS處理的工作，減小后端服務(wù)器的壓力，數(shù)據(jù)通過Ajax傳輸給后端，后端只需對數(shù)據(jù)處理不用考慮前端頁面的分布情況，只需處理完后返回事先定義好的值就可以。本文通過設(shè)計和研發(fā)了一款基于MUI的信息發(fā)布平臺，描述了信息發(fā)布平臺APP的具體實現(xiàn)步驟，功能特點，以及數(shù)據(jù)交互的實現(xiàn)方法。

1 選擇合適的移動端APP開發(fā)技術(shù)

1.1 主流開發(fā)技術(shù)簡介

按照開發(fā)技術(shù)分類的話，目前主流的三大移動端APP開發(fā)技術(shù)是：Native App 即 原生App開發(fā)，這種一般分發(fā)成本高、維護(hù)成本高、更新緩慢；Web App 即 網(wǎng)頁App開發(fā)，涉及到JS、CSS、和HTML，其實質(zhì)是做成了手機APP相仿樣式的網(wǎng)站；Hybrid App 即 混合型App開發(fā)，就是Native結(jié)合Web混合開發(fā)[1]。信息發(fā)布平臺主要使用到的是網(wǎng)頁App開發(fā)技術(shù)，熟悉HTML、CSS、JS網(wǎng)頁編程語言，學(xué)會調(diào)用MUI框架對手機APP進(jìn)行設(shè)計和實現(xiàn)。在選擇我們要用到的技術(shù)時，不要為了跟上主流而去選擇主流，這樣會導(dǎo)致你出現(xiàn)一些問題，比如對技術(shù)的不熟悉，出現(xiàn)報錯后不知道怎么解決。在面對技術(shù)的選擇時，最好根據(jù)自身的實際情況來考慮，有系統(tǒng)學(xué)習(xí)過的技術(shù)就盡量用系統(tǒng)學(xué)習(xí)過的技術(shù)去實現(xiàn)你的開發(fā)。如果基礎(chǔ)扎實的話，嘗試學(xué)習(xí)新的技術(shù)并去使用也是可以的，但會遇到很多的問題。在這里建議大家先從簡單的技術(shù)開始學(xué)習(xí)使用，主要是學(xué)習(xí)一個項目是如何從零開始建立起來的，對于技術(shù)的學(xué)習(xí)研究可以以后花多的時間去學(xué)習(xí)。

1.2 MUI框架的概念及使用

在MUI框架中包含了很多很多組件可以直接調(diào)用，像UI組件如折疊面板、操作表、數(shù)字角標(biāo)、復(fù)選框、消息框、進(jìn)度條等等，事件取消、事件觸發(fā)、手勢事件等等，我們在引入了CSS、JS后就可以直接使用了，這些組件就好比一個個模板，我們只需在里面添加自己所想要的內(nèi)容即可。用Ajax請求，我們就可以將數(shù)據(jù)通過jsons字符串從網(wǎng)頁前端發(fā)送到后端去。MUI框架的使用方便簡單，對于從未使用過MUI框架的開發(fā)人員來說進(jìn)入MUI官網(wǎng)可以直接查看它的在線學(xué)習(xí)手冊。有技術(shù)基礎(chǔ)的在自學(xué)過后很容易上手，花個一兩天時間學(xué)習(xí)MUI框架，對于簡單的項目就可以上手使用了。比如要實現(xiàn)一個折疊面板，就可以引入它的CSS文件：＜link href="css/mui.min.css" rel="stylesheet"/＞，然后用下面代碼實現(xiàn)：

＜ul class="mui-table-view"＞

＜li class="mui-table-view-cell mui-collapse"＞

＜a class="mui-navigate-right" href="#"＞ 面 板 1＜/a＞

＜div class="mui-collapse-content"＞

＜p＞面板1子內(nèi)容＜/p＞＜/div＞＜/li＞＜/ul＞

2 主要功能描述

打開信息發(fā)布平臺APP首先進(jìn)入未登錄時的主界面，主界面分為四部分：第一部分為右上角的登錄入口，第二部分為APP類別選擇按鈕，第三部分為APP搜索框，第四部分為消息預(yù)覽框。未登錄時消息預(yù)覽框顯示默認(rèn)類別的信息，不可點擊查看詳細(xì)內(nèi)容，若點擊則進(jìn)入登錄界面。沒有登錄時種別選擇鍵、查詢功能都可以工作，可以根據(jù)類別、賬號、標(biāo)題找尋信息。點擊登錄鍵跳入登錄注冊界面，新用戶在里面可以申請，忘記密碼能用密保問題找回密碼。登錄后的主界面會多一個顯示button，顯示自己的賬號名稱，點擊此button可以進(jìn)入個人信息界面。APP可以更換密碼和個人信息。登錄后的右上角button會變成消息發(fā)布button，通過發(fā)布button，自動獲取sessionstorage中存儲的用戶數(shù)據(jù)，連同用戶數(shù)據(jù)和表單內(nèi)容一起發(fā)送給后臺服務(wù)器進(jìn)行數(shù)據(jù)處理，發(fā)送方式為Ajax請求。信息會帶有發(fā)布者的名稱、發(fā)布time，對于他人發(fā)布的消息只能進(jìn)行評論。

3 搭建環(huán)境

安裝wampserver服務(wù)器，搭建C++服務(wù)器配置環(huán)境，安裝SQL sever數(shù)據(jù)庫并創(chuàng)建所需的表，創(chuàng)建存儲過程如數(shù)據(jù)的增加、刪除、修改、查詢等等。對于wampserver服務(wù)器需要注意的是它網(wǎng)頁跨域的問題，一般都是修改它的配置文件，在百度上可以搜索出具體的解決方法。配置好環(huán)境，在此項目中數(shù)據(jù)庫的存儲過程就用C++數(shù)據(jù)庫去觸發(fā)。在使用之前進(jìn)行測試，把所有的數(shù)據(jù)庫存儲過程用三方工具JSON Tools測試，查看數(shù)據(jù)是否能寫入數(shù)據(jù)庫，若不能找出原因，通過百度或咨詢導(dǎo)師的方式解決。成功測試后把JSON Tools換成頁面發(fā)送數(shù)據(jù)，創(chuàng)建一個js文件，通過Ajax請求發(fā)送到C++服務(wù)器處理。最后在電腦上建立服務(wù)器，把手機APP的通信地址連接到這個服務(wù)器上。

4 功能的具體實現(xiàn)

4.1 Ajax發(fā)送數(shù)據(jù)請求

由于很多的功能實現(xiàn)需要把數(shù)據(jù)信息發(fā)送到后臺C++服務(wù)器進(jìn)行處理，故可以將Ajax請求寫入一個JS文件中，通過Ajax請求把數(shù)據(jù)發(fā)送給后臺C++服務(wù)器，使用時直接調(diào)用JS里的函數(shù)即可。

4.2 登錄界面

所有屬性的值用getElementById("")[4].value來獲取，數(shù)據(jù)的判空在前端實現(xiàn)即空數(shù)據(jù)不會傳到后端服務(wù)器在前端直接判斷后提示，數(shù)據(jù)的處理即登錄驗證在后端實現(xiàn)如密碼錯誤的顯示其實是后端數(shù)據(jù)處理后返回的0值，前端根據(jù)收到的0返回值顯示對應(yīng)的錯誤信息。之后解鎖主界面更多功能。

4.3 注冊界面

注冊必須提供頭像、昵稱、賬號、密碼、確認(rèn)密碼、郵箱、身份證、姓名。數(shù)據(jù)值用getElementById("")[4].value來獲取。前端頁面需要對所有數(shù)據(jù)進(jìn)行判空用JS實現(xiàn)，密碼和確認(rèn)密碼的一致性也在前端實現(xiàn)，郵箱和身份證的字?jǐn)?shù)和格式在前端進(jìn)行判定。發(fā)送Ajax請求。后端服務(wù)器需要對昵稱、賬號、郵箱、身份證判斷是否與數(shù)據(jù)庫中的數(shù)據(jù)重復(fù)。后端數(shù)據(jù)處理后需要提供返回值，在這兒我用返回值2表示昵稱重復(fù)、3表示賬號重復(fù)、4表示郵箱重復(fù)、5表示身份證重復(fù)。當(dāng)返回值為1時，執(zhí)行前端JS函數(shù)即注冊成功函數(shù)。實現(xiàn)：

4.4 主界面

主界面分為四部分：第一部分為右上角的登錄入口，第二部分為APP類別選擇按鈕，第三部分為APP搜索框，第四部分為消息預(yù)覽框。未登錄時的主界面，只能查看到消息的簡短信息不能點擊查看詳細(xì)信息和評論。登錄之后，賬號username通過sessionstorage存儲下來，詳細(xì)查看信息功能解鎖，可以查看消息詳細(xì)信息，并可以發(fā)表評論。所有的操作會從sessionstorage中提取賬號信息。登錄之后主頁面會多幾個功能button，注銷button注銷后回到登錄界面，消息發(fā)布button點擊后進(jìn)入消息發(fā)布界面。

4.5 消息發(fā)布界面

必須包括題目、類別、消息內(nèi)容。通過發(fā)布按鈕，自動獲取sessionstorage中存儲的用戶數(shù)據(jù)，連同用戶數(shù)據(jù)和表單內(nèi)容一起發(fā)送給后臺服務(wù)器進(jìn)行數(shù)據(jù)處理，發(fā)送方式為Ajax請求。

4.6 詳細(xì)信息界面

其中涉及到一個卡片視圖，讓顯示的消息美觀，可以加載出圖片，發(fā)布人，時間，內(nèi)容，在消息下方有評論區(qū)，對于自己的消息進(jìn)行刪除、修改和回復(fù)操作都可以，對于別人的消息只能評論。實現(xiàn)：

＜div class="mui-card"＞

＜div class="mui-card-header"＞發(fā)布者信息＜/div＞

＜div class="mui-card-content"＞消息內(nèi)容＜/div＞

＜div class="mui-card-footer"＞消息評論區(qū)＜/div＞

＜/div＞

在消息的品論區(qū)會有一個下拉加載的功能，評論消息一次只能加載十條，每下拉一次動態(tài)加載十條。

4.7 修改賬戶信息界面

主界面左上角有賬號名稱button，點擊此button可以進(jìn)入個人信息界面，進(jìn)入個人信息界面會通過Ajax請求主動向后臺服務(wù)器發(fā)送通知，返回自己的個人信息，前端接受到信息后只會對其頭像、昵稱、郵箱信息進(jìn)行顯示。在個人信息界面有兩個功能按鈕，一個是實現(xiàn)修改信息，一個是實現(xiàn)修改密碼。

修改信息按鈕進(jìn)入信息修改界面，需要填寫頭像、賬號、昵稱、郵箱，信息在前端不會進(jìn)行判空，空信息默認(rèn)不修改。用getElementById(" ")[4].value來獲取數(shù)據(jù)值，通過Ajax請求發(fā)送到后臺服務(wù)器進(jìn)行處理，若數(shù)據(jù)庫沒有重復(fù)的賬號、昵稱、郵箱信息則返回1修改成功，返回跳至主界面，若出現(xiàn)返回值2表示昵稱重復(fù)、3表示賬號重復(fù)、4表示郵箱重復(fù)，需要重新填寫。

修改密碼按鈕進(jìn)入密碼修改界面，需要輸入賬號、舊密碼、新密碼，所有數(shù)據(jù)都會在前端判空，并且前端會判定新舊密碼是否一致，若一致則提示重新填寫。用getElementById(" ")[4].value來獲取數(shù)據(jù)值，通過Ajax請求發(fā)送到后臺服務(wù)器進(jìn)行處理，查表賬號和舊密碼對應(yīng)的話，則刪除舊密碼保存新密碼，修改成功后跳轉(zhuǎn)到主界面。

5 結(jié)語

本文主要介紹了一個簡單手機APP的制作過程，需要webserver，C++服務(wù)器，數(shù)據(jù)庫及所需環(huán)境。介紹了在項目中需要把前后端分離開來，在項目前期需要定義好統(tǒng)一的接口，前端負(fù)責(zé)APP的界面和一些簡單的可以由JS處理的工作，減小后端服務(wù)器的壓力，數(shù)據(jù)通過Ajax傳輸給后端，后端只需對數(shù)據(jù)處理不用考慮前端頁面的分布情況，只需處理完后返回事先定義好的值就可以。介紹了MUI框架在項目中的使用過程，如何制作一個原生APP和bootstrap，jQuery等較風(fēng)行框架的調(diào)用。