基于移動端APP的信息發布平臺研發

郭震星 白俊鴿 四川大學 錦城學院

引言

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

1 選擇合適的移動端APP開發技術

1.1 主流開發技術簡介

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

1.2 MUI框架的概念及使用

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

＜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子內容＜/p＞＜/div＞＜/li＞＜/ul＞

2 主要功能描述

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

3 搭建環境

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

4 功能的具體實現

4.1 Ajax發送數據請求

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

4.2 登錄界面

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

4.3 注冊界面

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

4.4 主界面

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

4.5 消息發布界面

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

4.6 詳細信息界面

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

＜div class="mui-card"＞

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

＜div class="mui-card-content"＞消息內容＜/div＞

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

＜/div＞

在消息的品論區會有一個下拉加載的功能，評論消息一次只能加載十條，每下拉一次動態加載十條。

4.7 修改賬戶信息界面

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

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

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

5 結語

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