[关闭]
@linux1s1s 2017-07-19T10:54:55.000000Z 字数 3425 阅读 1106

Node Express Server环境搭建

JavaScript 2017-07


Why

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

What

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

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.

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

How

  1. sudo apt-get install nodejs
  2. sudo apt-get install npm

打开 ~/.npmrc 文件

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

然后保存退出

  1. npm install express-generator -g
  1. express --view=pug NodeApp

看一下参数解释:

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

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

  1. {
  2. "name": "NodeApp",
  3. "version": "0.0.0",
  4. "private": true,
  5. "scripts": {
  6. "start": "node ./bin/www"
  7. },
  8. "dependencies": {
  9. "body-parser": "~1.16.0",
  10. "cookie-parser": "~1.4.3",
  11. "debug": "~2.6.0",
  12. "express": "~4.14.1",
  13. "morgan": "~1.7.0",
  14. "pug": "~2.0.0-beta10",
  15. "serve-favicon": "~2.3.2"
  16. }
  17. }

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

  1. npm intsall
  1. npm start

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

此处输入图片的描述

查看当前虚拟机IP,我们通过宿主IP访问(设置Host:myserver解析为虚拟机IP即可)

此处输入图片的描述

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

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

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

此处输入图片的描述

打开这个文件
此处输入图片的描述

找到title为Server的主页配置了

此处输入图片的描述
接下来ctrl+c终止server,再npm start 开启server验证一下是否成功修改主页。

此处输入图片的描述

此处输入图片的描述

打开这个文件
此处输入图片的描述

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

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

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

此处输入图片的描述

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

此处输入图片的描述

静态文件

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

此处输入图片的描述

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

此处输入图片的描述

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

此处输入图片的描述

简单接口

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

  1. function User(){
  2. this.age;
  3. this.name;
  4. this.city;
  5. }
  6. module.exports = User;

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

  1. var express = require('express');
  2. var router = express.Router();
  3. var User = require('./user.js');
  4. var URL = require('url');
  5. /* GET users listing. */
  6. router.get('/', function(req, res, next) {
  7. res.send('respond with a resource');
  8. });
  9. /* Add user api*/
  10. router.get('/getUserInfo', function(req, res, next){
  11. var user = new User();
  12. var params = URL.parse(req.url, true).query;
  13. if(params.id == '1'){
  14. user.name = 'Linin';
  15. user.age = 20;
  16. user.city = 'Shanghai';
  17. }else{
  18. user.name = 'Chain';
  19. user.age = 18;
  20. user.city = 'Beijing';
  21. }
  22. var response = {status: 1, data: user};
  23. res.send(JSON.stringify(response));
  24. });
  25. module.exports = router;

接下来访问该API接口

此处输入图片的描述

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

此处输入图片的描述

高亮部分修改为:

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

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

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注