创建一个项目文件夹
$ mkdir myapp
$ cd myapp
$ npm init
安装 Express
$ npm install express --save
后端走通
新建 index.js 文件,然后开始写后端代码,配合 postman 调试
npm install nodemon --save-dev
前端安装 Angular
nam install angular —save-dev 安装的是 Angular 1.x 版本
配合mongoDB
最近刚新搭了一个博客,用的是 Angular + MongoDB + Express + Node ,为了熟悉整个流程并没有使用 MeanJS 框架,为啥现在才开始搭?主要是以前太懒了不爱写博客,现在幡然悔悟了,应该还可以亡羊补牢一下。所以其实网上教程已经非常多了,但是这边还是要记录一下。
废话不多说,先上步骤:
NodeJS + NPM + mongoDB
创建项目文件夹
安装 Express
Index.js + nodemon
安装 AngularJS
配合 mongoDB
补充说明
1.NodeJS + NPM + mongoDB
首先要在电脑里安装 NodeJS 和 NPM,去 NodeJS 的官网下载,能够顺带着也把 NPM 下载下来了,因为我很早就下过了,所以这里不提供具体操作。附上官网地址:https://nodejs.org/en/
接着要下载 mongoDB,我是用 Docker 下载到 Linux 的虚拟机里面(正确姿势是去租个服务器),这里不提供安装 Linux 以及 Docker 的具体步骤。我只需要一个 mongoDB 的镜像,附上镜像地址:https://hub.docker.com/r/tutum/mongodb/。
首先通过 ssh 连接本机和虚拟机。
本机直接运行:
docker run -d -p 27017:27017 -p 28017:28017 tutum/mongodb
就能自动 pull 镜像到 Docker 容器中,
执行 docker ps 查看容器,能够看到有一个 CONTAINER_ID 。
执行 docker logs <CONTAINER_ID> 能够看到下面的内容:
======================================================================== You can now connect to this MongoDB server using: mongo admin -u admin -p 5elsT6KtjrqV --host --port Please remember to change the above password as soon as possible! ========================================================================
其中 5elsT6KtjrqV 是待会儿要用到的密码。
与此同时,我还需要一个可以直接管理 mongoDB 的工具 MongoHub。附上下载地址:http://www.macupdate.com/app/mac/33918/mongohub
这时需要配置 MongoHub 了,左下角有一个加号,点进去看到下面这样的配置项,只需要填红色部分,下面是我已经配置好的内容,其中 Address 是虚拟机的 IP, Password 就是上面那个 5elsT6KtjrqV 。
2.创建项目文件夹
准备工作的时间可能会比较长,下面几步就简单了
创建文件夹 $ mkdir myblog
进到文件夹里 $ cd myblog
NPM 初始化 $ npm init
,初始化的时候可以设置入口文件 entry point , 我设置为 index.js
3.安装 Express
接下来需要安装 Express
$ npm install express --save
地址:http://expressjs.com/en/starter/installing.html
express项目中通常使用body-parser进行post参数的解析
下载 body-parser :
$ npm install body-parser --save
4.Index.js + nodemon
安装完成以后我们可以直接写一些后端的代码了,首先我新建一个 index.js 的文件,因为刚才 npm 初始化的时候指定了 entry point 是 index.js,这里的 index.js 是写后端代码用的,因为 Node 是这边的后端,代码如下:
// index.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('This is my blog!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
然后打开 terminal ,执行 node index.js ,此时就能通过 http://localhost:3000/ 看到 This is my blog! 字样啦。
nodemon 可以选择性安装。它是什么呢?由于每次修改代码以后都需要重启一下 node,而 nodemon 能够在代码修改了以后自动重启,省去了一些麻烦。安装过程也很简单:
npm install nodemon --save-dev
5.安装 AngularJS
用 NPM 下载 AngularJS 的安装包就好。
$ npm install angular--save-dev
6.配合 mongoDB
mongoDB 是 NoSQL 型数据库,因此存取方式和以前的 Select … From .. Where ..之类的不一样,具体办法可以参考 mongoDB 官网。简单写一下,
var MongoClient = require('mongodb').MongoClient;
MongoClient.connect('mongodb://192.168.240.1:27017/blog', function (err, db) {
app.post('/FrontEnd', function (req,res) { // 前端发送 POST 请求
//不需要预先创建 collection,如果不存在它会自动创建名称为 article 的collection
db.collection('article').insert(
{
name: "ES6",
content: "Generator",
created_time: 1464420258
}
);
res.send('Success'); // 返回 Success 到前端页面
})
});
7.补充说明
这里并没有列出任何前端代码,也没有写任何前端页面,其实只要是把这些全部搭建好,前后端走通,剩下的就是完全按照平时工作中只负责前端的部分去做就好了。
我虽然没有写前端页面,但是需要有前端的 post 请求来进行测试,我用到了 postman,不知道什么时候安装到电脑上的 = =。上手比较简单,针对刚才的代码,可以直接像下面这样配置,然后 send,如果发送成功的话,就能看到返回 Success 字样,具体就不细说了。自己折腾去吧 ~