Express的安装和初始化

我本无我O 2017-06-05

展开全文

Express

@(express)[mac|nodejs|angularjs|bootstrap|jquery]

Express简介

Express提供了一个轻量级模块，把Node.js的http模块功能封装在一个简单易用的接口中。Express也扩展了http模块的功能，使你轻松处理服务器的路由、响应、cookie和HTTP请求的状态。使用Express可以充当Web服务器。

后端初始化

安装express

找到合适的路径创建项目的文件，在终端中输入（以下都是终端命令）

mkdir projectName

进入项目

cd projectName

创建一个 npm 的 package.json 配置文件

npm init

安装 express 并将其保存到依赖列表中

npm install express --save

查看 express 的版本

express --version

快速创建Express应用骨架

使用全局方式安装 Express 应用生成器

npm install express-generator -g

在安装了 express 的文件夹中快速生成 Express 应用

express appName

生成的目录结构如下

appName/├── app.js├── bin│   └── www├── package.json├── public│   ├── images│   ├── javascripts│   └── stylesheets│       └── style.css├── routes│   ├── index.js│   └── users.js└── views    ├── error.jade    ├── index.jade    └── layout.jade

提示：public是放置静态文件的目录，routes是放置路由文件的目录，view是放置模板引擎的目录

由于 Express 中的 npm 配置文件 package.json 已经定义好了模块，如下依赖列表 dependencies

{  'name': 'appName',  'version': '0.0.0',  'private': true,  'scripts': {    'start': 'node ./bin/www'  },  'dependencies': {    'body-parser': '~1.13.2',    'cookie-parser': '~1.3.5',    'debug': '~2.2.0',    'express': '~4.13.1',    'jade': '~1.11.0',    'morgan': '~1.6.1',    'serve-favicon': '~2.3.0'  }}

使用 npm 安装这些模块

npm install

运行 Express 应用

node bin/www

在浏览器中输入 http://localhost:3000，显示如下表明运行成功

Express
Welcome to Express

同时可以在终端中，查看HTTP请求日志(该打印日志与模块morgan有关)

GET / 200 584.249 ms - 170GET /stylesheets/style.css 200 5.106 ms - 111GET /favicon.ico 404 39.354 ms - 1315GET / 304 26.731 ms - -GET /stylesheets/style.css 304 1.134 ms - -GET / 304 9.207 ms - -GET /stylesheets/style.css 304 0.644 ms - -GET / 304 12.299 ms - -GET /stylesheets/style.css 304 0.276 ms - -^Cvictor:wirelessSystem victor$ node bin/wwwGET / 304 573.628 ms - -GET /stylesheets/style.css 304 3.037 ms - -

提示：其中200表明请求被正常处理，304表明服务器允许请求访问资源

如果想要更改访问的端口号，找到目录 bin/www 修改 port 变量的端口号

var port = normalizePort(process.env.PORT || '7101');

修改之后，按住 Ctrl + C 停止运行 bin/www，重新运行 bin/www（也可以安装使用pm2、supervisor等监视程序变化）打开 Chrome 继续访问 http://localhost:7101

前端初始化

使用bower初始化前端项目目录

使用全局安装 bower

npm install -g bower

提示：Bower是一个前端技术的软件包管理器，可用于搜索、安装和卸载一些前端的网络资源，如Jquery、AngularJS、BootStrap等库文件，当然也可以安装一些自动化工具，例如Grunt等

创建一个 bower 的 bower.json 配置文件

bower init

配置文件如下所示(大同小异)

{  'name': 'appName',  'description': 'this is a bower.json',  'main': '',  'authors': [    'victor'  ],  'license': 'MIT',  'homepage': '',  'ignore': [    '**/.*',    'node_modules',    'bower_components',    'test',    'tests'  ]}