Node.js教程之基于Angular2+Mongodb+Node技术实现的多用户系统教程(1)
沉沙 2018-11-23 来源 : 阅读 1621 评论 0

摘要:本篇教程介绍了Node.js教程之基于Angular2+Mongodb+Node技术实现的多用户系统教程(1),希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程之基于Angular2+Mongodb+Node技术实现的多用户系统教程(1),希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

<

一、前言

    最近在学习研究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、关于我们
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注WEB前端Node.js频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 1
看完这篇文章有何感觉?已经有2人表态,50%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved