Node Express Server环境搭建

JavaScript 2017-07

Why

作为端开发者，为甚要自己搭建Server环境呢，我想大部分端开发人员都能够理解依赖接口的开发很蛋疼，而且还经常遇到C端和B端相互扯皮的麻烦。为了避免这种尴尬，C端有必要自己搞个Server，让B端一边凉快去吧(^o^)/~。那么我们如何选型呢？考虑到JS有一统天下的姿势，我们使用最容易入门和开发的Node+Express。

What

那Node+Express是什么，有必要搞清楚。

• Node.js是JS的运行时环境，话说这个是不是和Java的JVM有点像，所以下次看到Node.js，千万别说Node.js是一种JS，否则要被笑话了。附上官网上面流弊呼呼的解释如下

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

• Express Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

基本知道Node-Express以后，接下来看看如何配置环境

How

• 安装 NodeJS 环境和 npm 模块管理器

sudo apt-get install nodejs
sudo apt-get install npm

• 设置 npm 代理

打开 ～/.npmrc 文件

输入 registry = https://registry.npm.taobao.org

然后保存退出

• 安装 Express Generator

npm install express-generator -g

• 建立 Express 应用程序

express --view=pug NodeApp

看一下参数解释：

express -h
Usage: express [options] [dir]
  Options:
    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

• 解决项目依赖

我们新建的项目名称是NodeApp，所以进入到该目录，会发现package.json文件，看看文件中定义的依赖

{
  "name": "NodeApp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "express": "~4.14.1",
    "morgan": "~1.7.0",
    "pug": "~2.0.0-beta10",
    "serve-favicon": "~2.3.2"
  }
}

接下来通过命令行执行安装依赖即可。

npm intsall

• 启动Express

npm start

然后在浏览器中输入：127.0.0.1:3000

查看当前虚拟机IP，我们通过宿主IP访问（设置Host：myserver解析为虚拟机IP即可）

通过上面的设计，最简洁的Express开发环境就搭好了，不过仍然有一堆问题留给我们。

• Server主页在哪里指定的
• Server主页如何修改
• 端口号又是在哪里指定的，如何修改
• 静态页面该放到哪里，位置如何指定
• 接口该如何开发

带着上面的问题，我们来逐一解决。

• Server主页在哪里指定的
  进入刚才新建的工程NodeApp目录，找到routes目录下的index.js文件

打开这个文件

找到title为Server的主页配置了

• Server主页如何修改
  上面的问题基本回答了如何修改主页，在工程目录下新建html目录，并将index.html文件放入该目录，照猫画虎添加入上图注释掉的代码，并将原先的主页配置代码注释掉即可。

接下来ctrl+c终止server，再npm start 开启server验证一下是否成功修改主页。

• 端口号又是在哪里指定的，如何修改
  还是在工程NodeApp目录，找到bin目录的www文件

打开这个文件

看到熟悉的3000端口号了，所以在这里可以直接禁止默认提供的3000端口号即可。

前面一个问题回答了如何禁用默认端口3000，本质上也可以修改端口号，不过我们也可以通过监听扩展端口号，那么怎么扩展呢？

还是在NodeApp目录，根目录下面有个app.js文件，打开并添加监听端口即可。

然后验证一下，端口号1600是否生效。

静态文件

• 静态页面该放到哪里，位置如何指定

静态页面一般放在工程目录下的public目录下，里面一些静态images，JavaScript，cs等等

如果我们想直接放入一个Hardcode接口数据（JSON文件）那么直接将文件抛到这个文件即可，比如图所示，我们将文件如下文件放入result目录。

然后直接访问该静态JSON文件即可。

简单接口

为了简单起见，我们直接进入NodeApp工程目录下的routes目录下，新建AOPO类user.js

function User(){
   this.age;
   this.name;
   this.city;
}
module.exports = User;

然后再打开同目录下的users.js，编辑如下：

var express = require('express');
var router = express.Router();
var User = require('./user.js');
var URL = require('url');
/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
/* Add user api*/
router.get('/getUserInfo', function(req, res, next){
 var user = new User();
 var params = URL.parse(req.url, true).query;
 if(params.id == '1'){
    user.name = 'Linin';
    user.age = 20;
    user.city = 'Shanghai';
 }else{
    user.name = 'Chain';
    user.age = 18;
    user.city = 'Beijing';
 }
 var response = {status: 1, data: user};
 res.send(JSON.stringify(response));
});
module.exports = router;

接下来访问该API接口

注意到，我们是在目录users下开发的接口，那么更改到其他目录也是可以的，照猫画虎，参考一下代码（路径为NodeApp目录下的app.js即可）

高亮部分修改为：

var msgs = require('./routes/msgs'); //请新增对应的msgs.js文件，参考users.js即可
app.use('/msgs',msgs); //这么目录新增为msgs（注意是新增）

感兴趣的童鞋可以自行验证，这里不再验证了。

PS 如果想让自己的Server被外网访问，可以参考博客Ngrok 工具搭建测试环境