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

- 日理万妓 2022-09-28 14:23 158阅读 0赞

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

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

基本架构主要包括

后端nodejs做服务端开发

angular作为前端开发，

使用express构建rest服务

数据库使用的nosql，即mongodb

![Center][]

图一

有的同学可能问了，这么多目录都是自己创建的么，不不，这就多亏了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

[Center]: /images/20220708/80c2f27229be4d23b63fee1472a08c4b.png