聊聊畢業設計系列 --- 專案介紹

ShineTomorrow發表於2018-08-26

效果展示

管理系統

WebApp

github

moment-server github地址

moment github地址

moment-manage github地址

articles

聊聊畢業設計系列 --- 專案介紹

聊聊畢業設計系列 --- 系統實現

前言

本論文對在移動網際網路的大環境下,人們對閱讀的需求和存在的問題以及發展趨勢進行了深入分析研究之後,主要目的是設計一套簡約優雅風格的UI,即UserInterface(使用者介面),採用Express為Node.js的web開發框架,Mongoose模組來管理非關係型資料庫MongoDB,在前端工程中主要運用了漸進式JavaScript框架Vue.js,使用Vue-router做前端頁面路由的跳轉,使用Axios作為HTTP請求庫,同時使用Vuex負責前端全域性狀態管理,使用ElementUI作為介面基礎元件庫,使用Webpack進行模組化打包,並結合HTML5相關技術最終實現一個包含圖文類、閱讀類、影視類、音樂類和電臺類五大版塊的文藝類閱讀系統,取名為Moment,意為片刻,旨在為人們提供一個平臺,讓人們在碎片化的時間裡進行有效閱讀。將實現系統中的兩大主要部分:面向管理員和合作作者的後臺管理系統面向使用者的移動端WebApp

                                          --- 摘自本人論文

好了好了,以上純屬裝x,三流的學校三流的畢業設計,看官隨意就好。引言中做了畢業設計專案的介紹,實現一個包含圖文類、閱讀類、影視類、音樂類和電臺類五大版塊的文藝類閱讀系統,取名為Moment。主要運用到的技術棧有:

  • Node.js --- Express
  • MongoDB --- Mongoose
  • Vue
  • Vue-router
  • Axios
  • Vuex
  • ElementUI
  • Socket.io
  • ...

在專案開始之前還很激動乘還是學生的時候在騰訊雲上買了雲伺服器,註冊了第二個域名momentin.cn,到後面部署上去發現介面請求太慢了,於是乎還是放棄了,其實最重要的還是bug多多哈哈哈,效能優化還沒做好。不過後面會繼續部署上線。

系統業務分析

作為一個文藝類閱讀系統,最主要的目的就是為使用者提供優質的閱讀體驗和豐富的閱讀內容。從而,以此作為目標,本系統業務中對閱讀文章的分類又分為圖文類、閱讀類、影視類、音樂類和電臺類這五個版塊,於目於耳對文章的形式進行多樣化。又將整個文藝類閱讀系統的業務劃分為兩大部分,分別是面向管理員和合作作者的後臺管理系統和麵向使用者的移動端WebApp,系統的需求分析將圍繞這兩部分進行展開。

面向使用者的移動端WebApp

面向使用者的移動端WebApp最重要的業務是提供文章的閱讀,這個業務是面向所有可使用系統的使用者。當然考慮到使用者不僅僅滿足於閱讀,也需要以文章作為媒介進行使用者之間的社交性活動,因此係統增加了圖文廣場模組,類似於一個圈子,所有使用者都可以釋出圖文及檢視,再比如關注,互相評論等各種互動。社交性的操作後往往需要給使用者一些提醒,不然將失去意義,而且必須保證這個提醒是實時的,所以需要對使用者進行實時的訊息推送。當然使用者難免對文章本身進行操作,比如評論、點贊、收藏等操作。所有使用者都可以對文章進行閱讀,但是一旦涉及到社交性操作的話就要以使用者有登入註冊的前提。

面向管理員和合作作者的後臺管理系統

這個系統的管理,系統主要分為兩種角色進行管理。系統管理員角色可以看到移動端WebApp整體資料情況,可以對使用者進行管理包括合作作者和所有普通使用者,以及可以對圖文、閱讀、影視、音樂、電臺所有文章進行管理,並且可以對系統的其他模組進行管理,例如廣告模組、輪播圖模組、公告模組等。而作者角色的許可權就相對比較少,僅包含對文章的管理。

注: 由於時間關係 WebApp整體資料情況這塊,它的資料庫欄位是有,但是當時匆匆忙忙沒時間寫介面,目前以靜態展示。系統管理這一塊也未處理完畢。

系統設計

系統架構設計

系統架構

系統架構??這麼裝逼的詞哈哈哈哈,其實也就傳統的B/S架構,前後端分離。前端通過發起ajax介面請求,web伺服器對請求進行處理並運算元據庫伺服器,返回json格式資料到前端,前端拿到資料後,處理資料並進行渲染。

功能模組設計

功能模組

這是當初專案開始前的一個粗略功能模組設計,其中一小部分模組由於當初時間關係還未做全,不過大部分功能模組已經實現。

資料庫設計

系統資料庫的儲存主要包含了:文章資料儲存,使用者資料儲存,管理員和合作作者資料儲存,文章評論儲存,使用者間關係儲存。其中的文章資料儲存又分為圖文文章資料儲存、閱讀文章資料儲存、影視文章資料儲存、音樂文章資料儲存、電臺文章資料儲存。其中的文章評論資料儲存又分為閱讀評論資料儲存、影視評論資料儲存、音樂評論資料儲存、電臺評論資料儲存。

資料庫設計

接下來

現在我們們也對專案做了個介紹,並且對系統分析和系統設計做了大概的介紹。那麼接下來的文章會對系統的實現做介紹,會介紹到專案中主要的一些功能模組,或者說可拿出來與大家分享的模組,以及介紹這個專案之後自己的一點點思考。摸我

本人水平一般,介紹的可能也是一些基礎,見諒見諒~~

相關文章