Node & Angular 4 学习记录（一）-- Node

Node & Angular 4 学习记录（一）-- Node

    前端技术一直只会一点Angular.js1.x。想要尝一些新的技术，技术选型选用Node.js做服务端，Angular 4做一个前端项目，前后端完全分离。这里做一下记录，不会有太基础也不会有太复杂的开发过程，只是记录一下从构建到部署的过程、遇到的坑和收获的经验。

    首先记录一下系统的架构，本章会重点记录Node.js和Express：

• node.js 6.11.1
• npm 3.10.10
• angular-cli 1.2.6
• express 4.15.3
• nginx-1.12.1

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。当然这都是官方的话，具体的很容易在网上查到，以下记录使用。

    现在我们很清楚Node其实就是一个JS的运行环境，有了Node的出现我们就可以用JS来写服务端，包括Web App，Desktop App，etc...微信项目是一个Web App，所以我们需要选用一个Node的Web框架，我们这里选用的就是Express。安装方式很简单，可以使用Npm，Yarn等很多包管理器，这里不做陈述。

项目伊始

    我们先快速做一个服务器，只需要简单的几行代码，当然也可以用合适的IDE生成一个简单的quickstart项目。

// 创建目录并进入目录
$ mkdir myapp
$ cd myapp
// 创建package.json文件，简单说就是管理项目以来的配置文件，可能有些像Maven的pom文件
$ npm init
// 设置一些文件的参数，包括程序名字，版本号，开源协议等
...
// 安装express，增加--save会在安装后也同时写进package.json配置文件中
$ npm install express --save

此时我们已经安装好了express，在接下来的开发过程中我们可能会用到很多依赖，譬如说JWT、Session、Cookie、http、log4js、etc...都是用这种方式来安装。接下来我们需要写一个Web服务器了，我们通常会写一个文件并叫它app.js。在文件中引入http等模块，监听一个端口。

/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

之后只要执行一条命令“node app”就可以启动这个服务器了，接下来我们引入Router模块，这个Router并不是只前端页面的路由，它更像是我们后端的接口。就好像Java EE的@path，Spring的@RequestMapping。我们可以单独写一个文件来接相应的http请求，遵循RestFul规范。如下：

const express = require('express');
const router = express.Router();
// REST GET
router.get('/', function(req, res){
  // do something...

});

接下来我们只需要把这个文件注册到app.js我们就可以继续写逻辑了。

    一直到这都很简单，这中间也有许多问题或者我们称之为坑。接下来是一点经验和文档链接。

• 由于国内环境，如果选用npm做包管理，建议安装淘宝的镜像，之后使用cnpm口令。
• 前端更新换代很快，别急着用最新的技术，选用稳定的版本。
• 如果一定要写ES6的语法，那么请用Babel进行转码，目前Node并不能完全支持ES6的语法规范。
• 清楚app.js的妙用，不要把代码都堆在里边，愿意的话也可以把监听服务器的设置单独提出来。
• 想要什么工具可以先去开源论坛，去npm上找，会省下很多功夫。
• Node
• Npm
• Cnpm
• Express
• ES6

下一篇会介绍Angular4。

想写一些东西分享，欢迎转载，请注明出处。
-板凳儿儿
https://www.jianshu.com/p/186f32bfed74