本章主要講什么(一句話)?
《項目實戰:基于Angular2+Mongodb+Node技術實現的多用戶博客系統教程(1)》
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-- 項目簡介&界面功能效果展示
一、前言
? ? 最近在學習研究Angular2,發現Angular2較Angular1相比可謂是有了翻天覆地的變化,深深的被Angular2的typescript語法靈活和其組件式的設計所吸引。網上也搜了很多文章,發現知識點比較零碎,很難成系統,個人在學習的過程中也遇到了很多“坑”,故蒙生了做一個小項目來練手快速掌握Angular2的核心功能的想法。故本人經過幾周時間的準備,在業余時間寫了一個小系統:即《基于Angular2+MongoDB+Node技術實現的多用戶博客系統》,可謂是一個“麻雀雖小,五臟俱全”的小項目,通過這個小項目,完整了演示了Angular2結合Mongodb和Node的結合在開發中會經常涉及到的80%以上常用知識點。過程中記錄下實現的所有步驟和過程中踩過的“坑”,現特意整理出來,分享給各位熱愛前端開發的朋友們,希望會對大家有所幫助。
二、需求分析
2.1、什么是多用戶博客系統?
? ? 博客,又譯為網絡日志、部落格或部落閣等,是一種通常由個人管理、不定期張貼新的文章的網站。博客上的文章通常根據張貼時間,以倒序方式由新到舊排列。許多博客專注在特定的課題上提供評論或新聞,其他則被作為比較個人的日記。一個典型的博客結合了文字、圖像、其他博客或網站的鏈接、及其它與主題相關的媒體。能夠讓讀者以互動的方式留下意見,是許多博客的重要要素。博客是社會媒體網絡的一部分。 博客系統,是指使用計算機語言編寫,并便于用戶安裝和使用,在互聯網上建立個人博客的一整套系統。本系統主要搭建一個簡單的具有多人注冊、登錄、發表文章、登出功能的博客。
2.2、技術架構?
? ? 本系統采用的是當下最流行的Mongodb 3.x、Express 4.x、Nodejs 6.x 與Angularjs 2.x 結合的MEAN架構。
2.3、涉及到的技術?
Angular2相關:
模塊 (module)
組件 (component)
模板 (template)
元數據 (metadata)
數據綁定 (data binding)
指令 (directive)
服務 (service)
依賴注入 (dependency injection)
Node相關:
Node開發環境搭建
Node常見類庫的使用
Express快速開發框架的使用
基于Node的Web服務器的搭建
Node與MongoDB的Http交互
Node中的Session,Cookie的使用
第三方組件Mongoos的使用及注意事項
其他
MongoDB相關
MongoDB的安裝、配置、使用
MongoDB的建庫,建文檔
MongoDB的基于文檔的增、刪、改、查
MongoDB的數據導入、導出、備份、還原
其他
HTML5,CSS3,Jquery,JavaScript
三、設計實現
設計實現主要分為三個方面
MongoDB的數據庫設計實現
Node的后臺功能實現
Angular2的前臺界面與功能實現
此塊因為涉及到的內容比較多,這一篇肯定是說不完的,故這里就先總體上說了一下設計思路,接下每一篇寫具體實現,一篇一個功能,大家期待我的下一篇吧 :)
四、界面效果
4.1、主頁
主頁顯示Banner及所有用戶發表的文章,按發表的日期倒序顯示,界面如下所示:
4.2、用戶登錄功能
如果用戶點擊“登錄”或者“點擊”我的博客“,沒有登錄時,會自動跳到”登錄界面,如下所示:
4.3、用戶注冊功能
如果用戶沒用帳號,可能通過 “注冊” 功能,來注冊一個新的用戶,界面如下所示:
4.4、我的博客功能
用戶登錄成功后,會進入“我的博客”界面,在此界面上可以查看自己以前發表的文章,也可以發表新的文章,界面如下:
4.5、發表新文章
用戶登錄系統后,可以選擇發表自己的新的文章,如下圖所示:
4.6、關于我們
五、后述
? ? ? ?這里整個系統都是采用angular2.x+mongodb3.x+node6.x框架開發的。如果大家感興趣,就給我留言,以支持我寫下去的動力。我接下來就按照功能列表一篇一篇的來寫。
? ? 《基于Angular2+Mongodb+Node技術實現的多用戶博客系統》正在連載中,明天我將為大家推出【第二章:基于MongoDB的MyBlog數據庫設計篇(初級篇)】,歡迎各位繼續關注~
? ? ? 搜索并關注“風舞煙”的簡書專欄、頭條號、微信公眾號、 企鵝媒體平臺,你可以定期收到關于簡書專欄的最新動態以及IT前沿最新技術的高質量經驗文章、視頻分享。
? ? ?謝謝大家的支持,歡迎大家留言交流。