基于Android的城市青年驛站app的設(shè)計(jì)與實(shí)現(xiàn)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1引言...............................................................................................................................1

1.1項(xiàng)目開發(fā)背景....................................................................................................1

1.2開發(fā)技術(shù)簡(jiǎn)介....................................................................................................1

1.2.1HBuilderX簡(jiǎn)介........................................................................................1

1.2.2uni-App簡(jiǎn)介..............................................................................................2

1.2.3uView簡(jiǎn)介.................................................................................................2

1.2.4城市青年驛站系統(tǒng)運(yùn)行原理...................................................................2

1.2.5城市青年驛站系統(tǒng)頁(yè)面的組成...............................................................2

1.3開發(fā)工具簡(jiǎn)介....................................................................................................2

2需求分析.......................................................................................................................3

2.1功能需求描述....................................................................................................3

2.2非功能需求描述................................................................................................3

2.3需求用例建模....................................................................................................4

2.3.1用戶登錄功能...........................................................................................4

2.3.2新聞功能...................................................................................................6

2.3.3青年驛站功能...........................................................................................8

2.3.4用戶信息功能...........................................................................................9

3系統(tǒng)概要設(shè)計(jì).............................................................................................................11

3.1系統(tǒng)設(shè)計(jì)原則..................................................................................................11

3.2系統(tǒng)框架設(shè)計(jì)..................................................................................................11

3.3系統(tǒng)功能設(shè)計(jì)..................................................................................................12

3.3.1用戶登錄功能設(shè)計(jì).................................................................................13

3.3.2新聞功能設(shè)計(jì).........................................................................................14

3.3.3青年驛站功能設(shè)計(jì).................................................................................15

3.3.4用戶信息功能設(shè)計(jì).................................................................................15

3.4數(shù)據(jù)庫(kù)設(shè)計(jì)......................................................................................................16

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.4.1設(shè)計(jì)原則.................................................................................................17

3.4.2概念設(shè)計(jì).................................................................................................17

3.4.3邏輯設(shè)計(jì).................................................................................................18

3.4.4數(shù)據(jù)字典.................................................................................................18

4系統(tǒng)詳細(xì)設(shè)計(jì).............................................................................................................19

4.1新聞功能設(shè)計(jì)..................................................................................................20

4.1.1新聞功能說(shuō)明..........................................................................................20

4.1.2新聞功能詳細(xì)設(shè)計(jì).................................................................................20

4.2登錄子功能設(shè)計(jì)..............................................................................................21

4.2.1登錄子功能說(shuō)明.....................................................................................21

4.2.2登錄子功能詳細(xì)設(shè)計(jì).............................................................................21

4.3青年驛站功能設(shè)計(jì)..........................................................................................23

4.3.1青年驛站功能說(shuō)明.................................................................................23

4.3.2青年驛站功能詳細(xì)設(shè)計(jì).........................................................................23

4.4個(gè)人信息功能設(shè)計(jì)..........................................................................................24

4.4.1個(gè)人信息子功能說(shuō)明..............................................................................24

4.4.2個(gè)人信息子功能詳細(xì)設(shè)計(jì)......................................................................24

5系統(tǒng)實(shí)現(xiàn).....................................................................................................................26

5.1用戶登錄功能實(shí)現(xiàn)..........................................................................................26

5.1.1新聞模塊界面設(shè)計(jì).................................................................................26

5.1.2登錄模塊核心代碼實(shí)現(xiàn)：.....................................................................27

5.2新聞功能實(shí)現(xiàn)..................................................................................................28

5.2.1新聞模塊界面設(shè)計(jì).................................................................................28

5.2.2新聞模塊核心代碼實(shí)現(xiàn)：.....................................................................29

5.3青年驛站功能實(shí)現(xiàn)..........................................................................................30

5.3.1青年驛站模塊界面設(shè)計(jì).........................................................................30

5.3.2青年驛站模塊核心代碼實(shí)現(xiàn)：.............................................................31

5.4個(gè)人信息功能實(shí)現(xiàn)..........................................................................................32

III

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

5.4.1個(gè)人信息界面設(shè)計(jì).................................................................................32

5.4.2個(gè)人中心模塊核心代碼實(shí)現(xiàn)：.............................................................33

6系統(tǒng)測(cè)試.....................................................................................................................35

6.1登錄功能測(cè)試..................................................................................................35

6.2新聞功能測(cè)試..................................................................................................36

6.3青年驛站功能測(cè)試..........................................................................................36

6.4個(gè)人中心功能測(cè)試..........................................................................................37

7設(shè)計(jì)小結(jié).....................................................................................................................38

參考資料.........................................................................................................................40

IV

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

城市青年驛站app的設(shè)計(jì)與實(shí)現(xiàn)

1引言

隨著時(shí)代的互聯(lián)網(wǎng)的不斷發(fā)展，越來(lái)越多的用戶已經(jīng)習(xí)慣了每天使用手機(jī),

由于手機(jī)和平板的普及,所以我們可以將電腦的許多功能在手機(jī)上實(shí)現(xiàn)。移動(dòng)設(shè)

備的優(yōu)點(diǎn)也有很多,比如:靈活、高效、便捷深受人們的喜歡,越來(lái)越多的人開始

依賴手機(jī)了,比如:支付、購(gòu)物、發(fā)通知等這些反應(yīng)了人們的生活質(zhì)量.現(xiàn)代的手

機(jī)需要的是一個(gè)功能強(qiáng)大的小程序，能能夠幫助人們快速的上手學(xué)會(huì)使用。同

時(shí)人們的生活方式也在隨著發(fā)生改變，一個(gè)好的功能能夠更好的為人們服務(wù)。

1.1項(xiàng)目開發(fā)背景

隨著時(shí)代的發(fā)展，HBuilderX技術(shù)的不斷發(fā)展完善，網(wǎng)絡(luò)進(jìn)程的加快，傳

統(tǒng)的電腦也越來(lái)越不能滿足人們快節(jié)奏的生活需求，而手機(jī)和平板的的優(yōu)勢(shì)也

越來(lái)越明顯,不僅方便還便捷,已經(jīng)有很多人認(rèn)識(shí)到了移動(dòng)端的優(yōu)勢(shì),不斷有新

的app出現(xiàn)而簡(jiǎn)單容易上手的小程序的更讓人容易接受小程序就是在這樣一個(gè)

背景下產(chǎn)生發(fā)展起來(lái)的。而我想開發(fā)一個(gè)服務(wù)于人們的小程序,希望使用者的生

活更加的便捷。所以我的畢業(yè)設(shè)計(jì)也就正是一個(gè)android的開發(fā)---城市青年驛

站管理信息系統(tǒng)。

1.2開發(fā)技術(shù)簡(jiǎn)介

此系統(tǒng)采用HBuilderX作為開發(fā)調(diào)試工具,采用uView和uni-App設(shè)計(jì)界

面,組件豐富,使用起來(lái)非常方便,界面簡(jiǎn)潔功能強(qiáng)大。

1.2.1HBuilderX簡(jiǎn)介

HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。[

1]HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java

編寫。

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.2.2uni-App簡(jiǎn)介

uni-app（uni，讀youni，是統(tǒng)一的意思）[2]是一個(gè)使用Vue.js開發(fā)

所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響

應(yīng)式）、以及各種小程序等多個(gè)平臺(tái)。

1.2.3uView簡(jiǎn)介

uni-app2018年初發(fā)布以來(lái)，一直蓬勃發(fā)展，一派欣欣向榮，社區(qū)也是人聲

鼎沸，眾望所歸。因此，uView應(yīng)運(yùn)而生，uView的目標(biāo)是成為uni-app生態(tài)最

優(yōu)秀的UI框架。

1.2.4城市青年驛站系統(tǒng)運(yùn)行原理

在手機(jī)或平板下載城市青年驛站app,打開app進(jìn)入引導(dǎo)頁(yè),劃到最后一個(gè)

引導(dǎo)頁(yè),點(diǎn)擊立即體驗(yàn)進(jìn)入登錄頁(yè),輸入賬號(hào)和密碼進(jìn)入首頁(yè),首頁(yè)有輪播圖和

熱門推薦以及該城市的一些熱門新聞,可以選擇感興趣的新聞點(diǎn)擊查看,還會(huì)有

一些熱門推薦應(yīng)用入口,點(diǎn)擊進(jìn)入應(yīng)用的頁(yè)面,比如:看電影、青年驛站、數(shù)據(jù)分

析等

1.2.5城市青年驛站系統(tǒng)頁(yè)面的組成

首頁(yè)面主要是使用uni-App和uview的強(qiáng)大組件,進(jìn)行頁(yè)面布局,在使用一些css的樣式

進(jìn)行美化,數(shù)據(jù)分析的圖形使用了uCharts進(jìn)行。

1.3開發(fā)工具簡(jiǎn)介

工具的使用：采用HBuilderX+uni-App+uView+Android

HBuilderX:C++架構(gòu)，啟動(dòng)速度、大文檔打開速度、編碼提示，都極速響應(yīng)。

uni-App:加載新頁(yè)面速度更快、自動(dòng)diff更新數(shù)據(jù)。App端支持原生渲染，

可支撐更流暢的用戶體驗(yàn)。

uView:眾多組件覆蓋開發(fā)過(guò)程的各個(gè)需求，組件功能豐富，多端兼容。讓

您快速集成，開箱即用

Android:安卓（Android）是一種基于Linux內(nèi)核（不包含GNU組件）的自

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

由及開放源代碼的操作系統(tǒng)。

2需求分析

2.1功能需求描述

基于app的登錄、看電影、新聞、個(gè)人信息等子系統(tǒng)功能的智能化信息系

統(tǒng)。

（1）登錄系統(tǒng):首先需要設(shè)置IP網(wǎng)絡(luò)設(shè)置,然后才可以進(jìn)入登錄頁(yè),登錄頁(yè)

有賬號(hào)和密碼驗(yàn)證,不能輸入空賬號(hào)和密碼,會(huì)提示賬號(hào)和密碼不能為空,其次

需要輸入正確的賬號(hào)和密碼,驗(yàn)證成功后進(jìn)入主頁(yè)。

（2）新聞系統(tǒng):新聞系統(tǒng)就是首頁(yè)進(jìn)來(lái)最先看到的,有輪播圖、推薦功能入

口、推薦新聞、新聞列表、新聞分類、新聞查詢、點(diǎn)擊新聞入新聞詳情頁(yè)。

（3）看電影:可以查看最近電影院上映的電影,可以看到電影名字、電影簡(jiǎn)

介、電影評(píng)分,點(diǎn)擊電影可以查看電影的詳情頁(yè)。

（3）個(gè)人信息:點(diǎn)擊個(gè)人信息獲取用戶的信息,用戶可以選擇個(gè)人信息修改,

修改注冊(cè)過(guò)的信息,也可以選擇密碼修改,修改密碼,還可以查看個(gè)人訂單,查看

當(dāng)前賬號(hào)的訂單,還可以選擇意見反饋,對(duì)該app進(jìn)行合理的意見反饋。

2.2非功能需求描述

（1）高效性：該App能夠滿足人們?cè)谌粘Ｋ枰私獾氖虑?用戶可以隨時(shí)

進(jìn)入App關(guān)注今天新聞,也可以隨時(shí)觀看最近新上映的電影。

（2）安全性：該App需要進(jìn)行安全認(rèn)證,也就是登錄正確的用戶賬號(hào)和密碼

才能進(jìn)入主頁(yè),否則無(wú)法獲取數(shù)據(jù),保證了安全性。

（3）可擴(kuò)展性：當(dāng)用戶需要新的功能的時(shí)候可以在短時(shí)間完成功能的實(shí)現(xiàn),

和系統(tǒng)的部署。

2.3需求用例建模

通過(guò)對(duì)功能需求的分析，創(chuàng)建以下總體用例模型，如圖2-1所示。

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖2-1智慧城市青年驛站系統(tǒng)的總體用例模型

用戶首先需要進(jìn)行賬號(hào)和密碼登錄,輸入正確的賬號(hào)和密碼認(rèn)證成功才能

進(jìn)入首頁(yè),首頁(yè)會(huì)有新聞?shì)啿D和新聞推薦,以及一些熱門新聞推薦,還會(huì)有熱

門入口,可以點(diǎn)擊進(jìn)入對(duì)應(yīng)的功能,可以查看最近上映的電影評(píng)分和簡(jiǎn)介,也可

以進(jìn)入青年驛站查看每個(gè)區(qū)的人才政策和人才政策詳情,以及一些驛站的簡(jiǎn)介,

還可以修改自己的信息,比如:頭像、昵稱、手機(jī)號(hào)等。

2.3.1用戶登錄功能

用戶進(jìn)入App,進(jìn)入引導(dǎo)頁(yè)滑動(dòng)引導(dǎo)頁(yè),進(jìn)入最后一頁(yè),點(diǎn)擊立即體驗(yàn),進(jìn)入

登錄頁(yè),具體流程如下圖2-2所示。

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖2-2用戶登錄用例圖

通過(guò)對(duì)用例的細(xì)化，使用活動(dòng)圖針對(duì)系統(tǒng)動(dòng)態(tài)行為進(jìn)行建模。模塊1活動(dòng)

圖如圖2-3所示。

圖2-3用戶登錄活動(dòng)圖

通過(guò)對(duì)圖2-2用例圖及圖2-3活動(dòng)圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

描述表。用戶登錄模塊用例描述如表2-1所示，可以進(jìn)行登錄等操作。

表2-1登錄模塊用例描述

項(xiàng)目描述

用例名稱用戶登錄

用例標(biāo)識(shí)號(hào)01

參與者用戶

用戶輸入用戶名、密碼，系統(tǒng)進(jìn)行驗(yàn)證后合法者登錄系

簡(jiǎn)要說(shuō)明

統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開App,進(jìn)入登錄頁(yè)

1.用戶在賬號(hào)輸入框里輸入賬號(hào)

2.在密碼框里輸入密碼

基本事件流4.用戶按登錄后，系統(tǒng)驗(yàn)證用戶輸入的有效性。

5.有效則進(jìn)入系統(tǒng)的主界面。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶。

6.用例終止

在按“登錄”按鈕之前，用戶可以隨按“取消”或“關(guān)閉”

其他事件流

按鈕。

異常事件流提示用戶輸入正確賬號(hào)或密碼

后置條件進(jìn)入首頁(yè)

2.3.2新聞功能

用戶輸入正確的賬號(hào)和密碼,通過(guò)了驗(yàn)證,進(jìn)入首頁(yè)頁(yè),首頁(yè)顯示輪播圖和

熱門新聞推薦,新聞數(shù)據(jù)等,如圖2-4所示。

圖2-4新聞功能用例圖

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

通過(guò)對(duì)用例的細(xì)化，使用活動(dòng)圖針對(duì)系統(tǒng)動(dòng)態(tài)行為進(jìn)行建模。模塊2活動(dòng)

圖如圖2-5所示。

圖2-5新聞功能活動(dòng)圖

通過(guò)對(duì)圖2-4用例圖及圖2-5活動(dòng)圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的

描述表。新聞模塊用例描述如表2-2所示，可以進(jìn)行查看新聞等操作。

表2-2新聞功能用例描述

項(xiàng)目描述

用例名稱新聞信息

用例標(biāo)識(shí)號(hào)02

參與者用戶

用戶進(jìn)入首頁(yè),首頁(yè)展示新聞信息,點(diǎn)擊新聞信息,進(jìn)入新

簡(jiǎn)要說(shuō)明

聞詳情頁(yè)

前置條件用戶進(jìn)入首頁(yè)

1.點(diǎn)擊輪播圖進(jìn)入詳情詳情頁(yè)

2.點(diǎn)擊熱門推薦新聞進(jìn)入詳情頁(yè)

基本事件流4.點(diǎn)擊新聞列表進(jìn)入詳情頁(yè)

5.點(diǎn)擊新聞分類可查看對(duì)應(yīng)的新聞列表

6.用例終止

其他事件流可以點(diǎn)擊新聞分類,查看自己感興趣的新聞

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

后置條件數(shù)據(jù)渲染頁(yè)面

2.3.3青年驛站功能

用戶進(jìn)入首頁(yè),點(diǎn)擊熱門推薦入口中的青年驛站,進(jìn)入驛站頁(yè)面,青年驛站

首頁(yè)展示所有驛站,驛站包括簡(jiǎn)介、剩余床量,還可以點(diǎn)擊推薦的當(dāng)?shù)亟ㄖ?進(jìn)

入當(dāng)?shù)氐娜瞬耪唔?yè),點(diǎn)擊政策進(jìn)入政策詳情頁(yè),如圖2-6所示。

圖2-6青年驛站功能用例圖

通過(guò)對(duì)用例的細(xì)化，使用活動(dòng)圖針對(duì)系統(tǒng)動(dòng)態(tài)行為進(jìn)行建模。青年驛站功

能活動(dòng)圖如圖2-7所示。

圖2-7青年驛站功能活動(dòng)圖

通過(guò)對(duì)圖2-6用例圖及圖2-7活動(dòng)圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的

描述表。青年驛站模塊用例描述如表2-3所示，可以進(jìn)行用登錄等操作。

表2-3青年驛站功能用例描述

項(xiàng)目描述

用例名稱青年驛站

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

用例標(biāo)識(shí)號(hào)03

參與者用戶

用戶進(jìn)入首頁(yè),點(diǎn)擊首頁(yè)推薦欄的青年驛站進(jìn)入功能頁(yè)面,

簡(jiǎn)要說(shuō)明頁(yè)面顯示所有驛站的信息,還有各地的標(biāo)志物,點(diǎn)擊標(biāo)志物

進(jìn)對(duì)應(yīng)的當(dāng)?shù)厝瞬耪唔?yè),點(diǎn)擊政策進(jìn)入詳情頁(yè)

前置條件已進(jìn)入首頁(yè)

1.顯示所有驛站

2.點(diǎn)擊驛站進(jìn)入驛站詳情頁(yè)

基本事件流

3.點(diǎn)擊推薦的標(biāo)志物,進(jìn)入標(biāo)志物當(dāng)?shù)氐娜瞬彭?yè)面

4.點(diǎn)擊人才頁(yè)的政策,進(jìn)入人才政策的詳情頁(yè)

其他事件流可以查看自己感興趣的驛站

異常事件流未登錄,無(wú)法獲取數(shù)據(jù)

后置條件數(shù)據(jù)渲染頁(yè)面

2.3.4用戶信息功能

用戶進(jìn)入首頁(yè),點(diǎn)擊個(gè)人頁(yè)面進(jìn)入個(gè)人信息頁(yè)面,個(gè)人頁(yè)面有信息修改和密

碼修改以及意見反饋,用戶可以根據(jù)自己的需求進(jìn)行點(diǎn)擊,還有可以點(diǎn)擊退出登

錄,退出賬號(hào),如圖2-8所示。

圖2-8用戶信息功能用例圖

通過(guò)對(duì)用例的細(xì)化，使用活動(dòng)圖針對(duì)系統(tǒng)動(dòng)態(tài)行為進(jìn)行建模。用戶信息功

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

能活動(dòng)圖如圖2-9所示。

圖2-9用戶信息功能活動(dòng)圖

通過(guò)對(duì)圖2-8用例圖及圖2-9活動(dòng)圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的

描述表。個(gè)人信息模塊用例描述如表2-4所示，可以進(jìn)行用登錄等操作。

表2-4用戶信息功能用例描述

項(xiàng)目描述

用例名稱個(gè)人信息

用例標(biāo)識(shí)號(hào)04

參與者用戶

用戶進(jìn)入首頁(yè),點(diǎn)擊首頁(yè)下方導(dǎo)航欄進(jìn)入個(gè)人信息頁(yè),可以

簡(jiǎn)要說(shuō)明點(diǎn)擊個(gè)人信息,進(jìn)行個(gè)人信息的修改,也可以點(diǎn)擊密碼修改,

對(duì)以前的密碼進(jìn)行修改

前置條件已進(jìn)入首頁(yè)

1.顯示用戶頭像和用戶昵稱

2.點(diǎn)擊個(gè)人信息,進(jìn)入個(gè)人信息修改頁(yè)面

基本事件流

3.點(diǎn)擊密碼修改,進(jìn)入密碼修改頁(yè)面

4.點(diǎn)擊退出賬號(hào),回到登錄頁(yè)

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

其他事件流用戶可以根據(jù)自己的需求進(jìn)行操作

異常事件流未登錄,無(wú)法獲取數(shù)據(jù)

后置條件數(shù)據(jù)渲染頁(yè)面

3系統(tǒng)概要設(shè)計(jì)

3.1系統(tǒng)設(shè)計(jì)原則

(1)完備性

完備性主要是指系統(tǒng)的功能齊全、完備，能夠滿足用戶的需要，系統(tǒng)要具

備數(shù)據(jù)采集、管理、處理、查詢、編輯、顯示、分析及輸出等功能。

(2)系統(tǒng)性

運(yùn)用GIS軟件開發(fā)的系統(tǒng)，空間數(shù)據(jù)和屬性數(shù)據(jù)必須能夠有機(jī)地結(jié)合為一

體，各種參數(shù)可以互相進(jìn)行傳輸。

(3)可靠性

系統(tǒng)的可靠性包括兩個(gè)方面，一是系統(tǒng)運(yùn)行的安全性，系統(tǒng)必須保證能夠

長(zhǎng)期安全可靠穩(wěn)定的運(yùn)行;二是運(yùn)用GIS軟件進(jìn)行開發(fā)采集數(shù)據(jù)精度的可靠性

和符號(hào)內(nèi)容的完整性。

3.2系統(tǒng)框架設(shè)計(jì)

根據(jù)系統(tǒng)的需求分析、用例建模分析結(jié)合開發(fā)平臺(tái)的特點(diǎn)設(shè)計(jì)智慧城市青

年驛站系統(tǒng)的系統(tǒng)架構(gòu)模型，如圖3-1所示。

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-1智慧城市青年驛站系統(tǒng)整體架構(gòu)圖

3.3系統(tǒng)功能設(shè)計(jì)

系智慧城市青年驛站App根據(jù)需求用例分析,確定了該系統(tǒng)的功能,共分為

四個(gè)功能模塊,登錄模塊、青年驛站模塊、新聞模塊、個(gè)人信息模塊,智慧管理

系統(tǒng)的結(jié)構(gòu)如圖3-2所示,本系統(tǒng)共有四大功能模塊。

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-2智慧城市青年驛站系統(tǒng)功能結(jié)構(gòu)圖

3.3.1用戶登錄功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

功能描述使用功能流程圖描述，如下圖3-3。

圖3-3用戶登錄功能流程圖

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.3.2新聞功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

功能描述使用功能流程圖描述，如下圖3-4。

圖3-4新聞功能流程圖

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.3.3青年驛站功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

功能描述使用功能流程圖描述，如下圖3-5。

圖3-5青年驛站功能流程圖

3.3.4用戶信息功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

功能描述使用功能流程圖描述，如下圖3-6。

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-6用戶信息功能流程圖

3.4數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)設(shè)計(jì)往往是系統(tǒng)設(shè)計(jì)中最為核心的一個(gè)步驟。其設(shè)計(jì)的優(yōu)良程度直

接影響系統(tǒng)的性能以及執(zhí)行效率。

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.4.1設(shè)計(jì)原則

為取得較好的設(shè)計(jì)效果，進(jìn)行數(shù)據(jù)庫(kù)設(shè)計(jì)需要遵從以下原則：

1．標(biāo)準(zhǔn)化原則

數(shù)據(jù)庫(kù)設(shè)計(jì)務(wù)必要遵照統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)與命名規(guī)范。具備統(tǒng)一設(shè)計(jì)分類與

編碼規(guī)范的數(shù)據(jù)庫(kù)不僅設(shè)計(jì)清晰直觀,更有利于后期數(shù)據(jù)庫(kù)及程序的維護(hù)，為以

后項(xiàng)目可擴(kuò)展性提供條件。

2．冗余原則

以往數(shù)據(jù)庫(kù)的設(shè)計(jì)要求不允許有冗余，要盡可能的滿足3NF。然而，在系

統(tǒng)運(yùn)行過(guò)程中，滿足3NF的數(shù)據(jù)庫(kù)設(shè)計(jì)并不能高效運(yùn)行。復(fù)雜的表間關(guān)系，會(huì)

降低訪問數(shù)據(jù)庫(kù)執(zhí)行的效率；過(guò)低的范式標(biāo)準(zhǔn)，又會(huì)導(dǎo)致數(shù)據(jù)庫(kù)數(shù)據(jù)。所以，

在數(shù)據(jù)庫(kù)設(shè)計(jì)中，適當(dāng)?shù)娜哂嘣O(shè)計(jì)（允許派生性冗余設(shè)計(jì)，杜絕重復(fù)性冗余設(shè)

計(jì)），找到冗余與數(shù)據(jù)處理速度的平衡點(diǎn)，常?？梢约忍岣咚俣?，又能。

3.4.2概念設(shè)計(jì)

在數(shù)據(jù)庫(kù)概念設(shè)計(jì)的過(guò)程中，采用E-R圖來(lái)描述概念設(shè)計(jì)的結(jié)果。本系統(tǒng)

的E_R如下圖3-7所示。

圖3-7智慧城市青年驛站系統(tǒng)E-R圖

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.4.3邏輯設(shè)計(jì)

針對(duì)ER模型，通過(guò)數(shù)據(jù)實(shí)體屬性、實(shí)體間關(guān)系的全面分析，結(jié)合智慧城市

青年驛站系統(tǒng)的實(shí)際需求，根據(jù)E-R圖轉(zhuǎn)化為關(guān)系模式的轉(zhuǎn)換方法，建立起了

本系統(tǒng)的關(guān)系模式，具體轉(zhuǎn)化后的關(guān)系模式如下：

用戶表（ID、賬號(hào)、用戶名、昵稱、性別、電話號(hào)碼）

新聞表（ID、新聞標(biāo)題、新聞內(nèi)容、新聞詳情、新聞點(diǎn)贊數(shù)、新聞評(píng)論數(shù)、

總記錄數(shù)、新聞封面圖片、發(fā)布日期）

用戶表（ID、用戶頭像、賬戶昵稱、郵箱、手機(jī)號(hào)、性別、用戶名）

青年驛站表（ID、驛站封面圖、驛站照片、驛站地址、驛站剩余床位、電

話、入住時(shí)間、公寓介紹）

3.4.4數(shù)據(jù)字典

登錄表結(jié)構(gòu)如表3-1所示，該表主要用于記錄用戶登錄信息，主要字段

為ID、用戶名、密碼。

表3-1登錄表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

userIDvarchar用戶id主鍵是

usernamevarchar賬號(hào)否是

passwordvarchar密碼否是

新聞表的表結(jié)構(gòu)如表3-2所示，該表主要用于記錄新聞信息，主要字段為

新聞內(nèi)容、新聞圖片、新聞id、新聞發(fā)布日期、閱讀數(shù)、標(biāo)題、點(diǎn)贊數(shù)。

表3-2新聞表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

contentvarchar新聞內(nèi)容否是

covervarchar新聞圖片否是

idvarchar新聞id主鍵是

publishDatevarchar新聞發(fā)布日期否是

readNumvarchar閱讀數(shù)否是

titlevarchar標(biāo)題否是

likeNumvarchar點(diǎn)贊數(shù)否是

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

新聞表的表結(jié)構(gòu)如表3-3所示，該表主要用于記錄驛站信息，主要字段為

驛站id、驛站圖片、驛站剩余床位、驛站地址、電話、辦理入住時(shí)間段。

表3-3青年驛站表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

idvarchar驛站id主鍵是

coverImgUrlvarchar驛站圖片否是

bedsCountvarchar驛站剩余床位否是

addressvarchar驛站地址否是

phonevarchar電話否是

workTimevarchar辦理入住時(shí)間段否是

新聞表的表結(jié)構(gòu)如表3-4所示，該表主要用于記錄個(gè)人信息，主要字段為

用戶頭像、郵箱、身份證、用戶昵稱、手機(jī)號(hào)、性別。

表3-4用戶表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

avatarvarchar用戶頭像否是

emailvarchar郵箱否是

idCardvarchar身份證否是

nickNamevarchar用戶昵稱否是

phonenumbervarchar手機(jī)號(hào)否是

sexvarchar性別否是

IDvarcharID主鍵是

數(shù)據(jù)庫(kù)設(shè)計(jì)總結(jié)：根據(jù)智慧城市青年驛站的需求分析和用例建模分析，本

文確定了智慧城市青年驛站系統(tǒng)的主要功能模塊，包括登錄管理、新聞管理、

驛站管理和個(gè)人信息管理等。智慧城市青年驛站管理系統(tǒng)的功能結(jié)構(gòu)圖根據(jù)智

慧城的需求分析和用例建模分析，本文確定了智慧城市青年驛站系統(tǒng)的主要功

能模塊。

4系統(tǒng)詳細(xì)設(shè)計(jì)

經(jīng)過(guò)對(duì)智慧城市青年驛站的分析，了解到智慧城市青年驛站還存在一些系

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

統(tǒng)的問題，希望通過(guò)系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)開展完善問題的溝通，了解智慧城市青年驛

站的系統(tǒng)的問題，希望通過(guò)系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.1新聞功能設(shè)計(jì)

4.1.1新聞功能說(shuō)明

用戶進(jìn)入App就可以看到今日新聞和新聞推薦,這是了解這個(gè)城市的一種

體現(xiàn),我們可以每天進(jìn)入首頁(yè)查看新聞,滿足了用戶每天學(xué)習(xí)新聞看新聞的一種

體現(xiàn)。

4.1.2新聞功能詳細(xì)設(shè)計(jì)

使用序列圖對(duì)新聞進(jìn)行分析和設(shè)計(jì),如下圖4-1所示,新聞子功能時(shí)序圖。

圖4-1新聞系統(tǒng)的時(shí)序圖

通過(guò)需求分析、概要設(shè)計(jì)對(duì)各個(gè)子功能進(jìn)行分析與設(shè)計(jì),得到了新聞子功能

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

的靜態(tài)結(jié)構(gòu)類圖,如圖4-2所示。

圖4-2新聞系統(tǒng)的類圖

針對(duì)類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-1所示。

表4-1新聞管理子功能模塊相關(guān)類及方法描述表

類名新聞

描述渲染新聞數(shù)據(jù)

Content、cover、id、cover、publicDate、

屬性

readNum、title、likeNum

方法List()、ListType(Stringtype)、getById(intid)

4.2登錄子功能設(shè)計(jì)

4.2.1登錄子功能說(shuō)明

用戶開打App,進(jìn)入引導(dǎo)頁(yè),點(diǎn)擊立即體驗(yàn)之后,進(jìn)入登錄頁(yè),登錄頁(yè)需要用

戶輸入賬號(hào)和密碼,驗(yàn)證成功之后進(jìn)入首頁(yè)

4.2.2登錄子功能詳細(xì)設(shè)計(jì)

使用序列圖對(duì)登錄進(jìn)行分析和設(shè)計(jì),如下圖4-2-2-1所示,新聞子功能時(shí)序圖。

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖4-2登錄系統(tǒng)的時(shí)序圖

通過(guò)需求分析、概要設(shè)計(jì)對(duì)各個(gè)子功能進(jìn)行分析與設(shè)計(jì),得到了新聞子功能

的靜態(tài)結(jié)構(gòu)類圖,如圖4-2所示。

圖4-3登錄系統(tǒng)的類圖

針對(duì)類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-2-2-3所示。

表4-3登錄管理子功能模塊相關(guān)類及方法描述表

類名新聞

描述驗(yàn)證用戶輸入的賬號(hào)和密碼是否有誤

屬性u(píng)sername、password

方法Login(Stringuser,Stringpassword)

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

4.3青年驛站功能設(shè)計(jì)

4.3.1青年驛站功能說(shuō)明

用戶輸入正確的賬號(hào)和密碼,進(jìn)入首頁(yè),點(diǎn)擊首頁(yè)推薦青年驛站進(jìn)入青年驛

站頁(yè),青年驛站功能包括驛站信息、驛站地址、驛站入住時(shí)間、驛站聯(lián)系電話

4.3.2青年驛站功能詳細(xì)設(shè)計(jì)

使用序列圖對(duì)新聞進(jìn)行分析和設(shè)計(jì),如下圖4-4所示,青年驛站子功能時(shí)序圖。

圖4-4青年驛站系統(tǒng)時(shí)序圖

通過(guò)需求分析、概要設(shè)計(jì)對(duì)各個(gè)子功能進(jìn)行分析與設(shè)計(jì),得到了青年驛站子

功能的靜態(tài)結(jié)構(gòu)類圖,如圖4-5所示。

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖4-5青年驛站系統(tǒng)的類圖

針對(duì)類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-4所示。

表4-4新聞管理子功能模塊相關(guān)類及方法描述表

類名新聞

描述渲染新聞數(shù)據(jù)

coverImgUrl、bedsCount、id、address、phone、

屬性

workTime

方法getById(intid)

4.4個(gè)人信息功能設(shè)計(jì)

4.4.1個(gè)人信息子功能說(shuō)明

用戶輸入正確的賬號(hào)和密碼,進(jìn)入首頁(yè),點(diǎn)擊首頁(yè)下方導(dǎo)航欄的個(gè)人中心,

進(jìn)入個(gè)人中心頁(yè),個(gè)人中心頁(yè)的功能有:個(gè)人信息設(shè)置、密碼修改、意見反饋、

查看我的訂單、退出登錄等功能

4.4.2個(gè)人信息子功能詳細(xì)設(shè)計(jì)

使用序列圖對(duì)個(gè)人信息進(jìn)行分析和設(shè)計(jì),如下圖4-5所示,個(gè)人信息功能時(shí)序

圖。

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖4-5新聞系統(tǒng)的時(shí)序圖

通過(guò)需求分析、概要設(shè)計(jì)對(duì)各個(gè)子功能進(jìn)行分析與設(shè)計(jì),得到了新聞子功能

的靜態(tài)結(jié)構(gòu)類圖,如圖4-4-2-2所示。

圖4-6個(gè)人信息系統(tǒng)的類圖

針對(duì)類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-7所示。

表4-7個(gè)人信息管理子功能模塊相關(guān)類及方法描述表

類名新聞

描述渲染新聞數(shù)據(jù)

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

avatar、email、id、idCard、nickName、

屬性

phonenumber、sex

Update(Useruser)、UpdatePassword(String

方法newPassword,StringPassword)、

Postyijian(Stringtitle,Stringneir)

5系統(tǒng)實(shí)現(xiàn)

5.1用戶登錄功能實(shí)現(xiàn)

5.1.1新聞模塊界面設(shè)計(jì)

用戶登錄頁(yè),如下圖5-1所示:該界面包括一個(gè)賬號(hào)框和一個(gè)密碼框,以及一

個(gè)登錄按鈕,用戶不輸入賬號(hào)或密碼會(huì)提示用戶輸入賬號(hào)和密碼,輸入輸入錯(cuò)誤

的賬號(hào)和密碼會(huì)提示用戶親輸入正確的賬號(hào)和密碼。

圖5-1登入界面

26

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

5.1.2登錄模塊核心代碼實(shí)現(xiàn)：

步驟1：輸入賬號(hào)和密碼

<view>

<uni-group>

<imagesrc="../../image/logo.png"mode="widthFix"style="width:300rpx;margin:

auto;display:block;padding:20rpx;"></image>

<u-fieldlabel="賬號(hào):"v-model="user"placeholder="請(qǐng)輸入賬號(hào)"></u-field>

<u-fieldlabel="密碼:"passwordv-model="password"placeholder="請(qǐng)輸入密碼

"></u-field>

</uni-group>

<buttontype="primary"style="margin:20rpx;"@click="submit">登錄</button>

</view>