项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(1)
2017-02-02 22:11
821 查看
本章主要讲什么(一句话)?
一、前言
最近在学习研究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技术实现的多用户博客系统教程(2)》
-- -- 基于MongoDB的MyBlog数据库知识技术储备(上)
![](http://images2015.cnblogs.com/blog/162985/201702/162985-20170202204555683-2144958557.png)
相关文章推荐
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(3)
- Angular2教程_基于MEAN全栈架构的多用户博客系统(Angular2+Node+MongoDB)
- 【备忘】基于Hadoop,Spark大数据技术的推荐系统算法实战教程
- 使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统
- 基于大数据技术推荐系统算法案例实战教程
- Android实战简易教程-第二十三枪(基于Baas的用户注册和登录模块实现!)
- 嵌入式实战项目:基于嵌入式linux花卉大棚温湿度监测与调节系统的设计与实现
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
- 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程
- 超具实战意义的Python项目课程:四周实现爬虫系统 超经典的Python零基础实战化教程
- 基于大数据技术推荐系统算法案例实战教程
- Android实战简易教程-第二十四枪(基于Baas的用户表查询功能实现!)
- 以太坊开发DApp实战教程——用区块链、星际文件系统(IPFS)、Node.js和MongoDB来构建电商平台(一)
- Android实战简易教程-第二十四枪(基于Baas的用户表查询功能实现!)
- 【推荐系统实战】:C++实现基于用户的协同过滤(UserCollaborativeFilter)
- R语言实战实现基于用户的简单的推荐系统(数量较少)
- node.js高级编程|node.js 视频教程_基于node.js+Express.js+Jade+MongoDB实战开发
- 【备忘】基于Hadoop,Spark大数据技术的推荐系统算法实战教程
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件