nodejs+angular+mongodb实现论坛基本功能

本文分享了使用Node.js和Angular开发论坛系统的实践经验,包括帖子管理、用户交互等功能,并介绍了具体的开发工具、技术栈及实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习了nodejs和angular已经有一段时间了,在这期间,是边学习,边将学习付诸于实践中,断断续续的学习开发了三个多月吧,做的大概就是实现了基本的帖子发布,帖子删除,添加回复,查看帖子,添加作者,编辑作者删除作者等功能,

下面请让我一一道来,开发工具是webstorm

基本架构主要包括

后端nodejs做服务端开发

angular作为前端开发,

使用express构建rest服务

数据库使用的nosql,即mongodb


              图一

有的同学可能问了,这么多目录都是自己创建的么,不不,这就多亏了webstorm这个工具,可以帮助我们省了很多时间,有的人说这个工具不好用,但是对于我这个初学者而言已经足够啦,我们只要创建一个node项目,webstorm将自动给你创建目录

然后我们在生成的package.json中添加如下

{
  "name": "news",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "mongodb": "latest",
    "mongoose": "*",
    "ejs":"*",
    "serve-favicon": "~2.3.0"
  }
}
app.js主要用来设置静态路径,用来做基本的npm包的引入,截图部分如下:

        图二
我们在图二中看到了上面的这句代码,
app.use('/views',express.static('./views'));这个view主要存储的是我们的前端界面,主要包括基本的页面结构,以及与用户的交互,比如用户点击查看新闻的按钮,
系统将为用户从后台数据库查找新闻并返回给前台展示,那么问题来了,有很多段处理程序,什么添加新闻,什么查看作者,前端怎么知道把请求给谁来处理?后端程序处理了
怎么直达把结果返回给哪个界面?好了我们慢慢来解决这些问题
首先我们在html中可能只是个点击事件,比如某个button出发了add()事件,这个add事件在angular中定义,就是news_app.js,这个实现了angular控制器来利用$http请求获取用户
数据,图三是部分截图

图三
我们发现图二中还有这么一句
var index = require('./routes/index');这句是什么呢?
这句就是我们常说的路由了。路由的主要作用就是前台界面发出请求,路由根据你的请求告诉你应该用服务端的哪个接口来为你服务,比如我们要看下论坛的帖子列表,好了
我们前端发出请求,/news/get,然后router告诉你应该是news这个controller的getNews这个方法来解决。接着来段截图看下

图四
有的童鞋有问题了,你刚刚说的controller是什么,请看图一中的controller,中是不是有三个controller,这就是专门用来处理前端发出的请求的,类似于mvc中的controller,
我们在刚刚提到的newscontroller中找找getNews这个方法
还是截图来看

图五
图五就是具体处理前端发来的请求的,将结果返回给图三的success或者err中。
好了整体架构讲这些了
系统结果截图:

代码的git地址:
https://github.com/sunyigithub/bbs/tree/master

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值