学习了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