(以下操作在windows环境下)
全局安装
首先,你需要下载express-generator。
npm install -s -g express express-generator
然后生成express框架。在想要保存服务器的地方打开cmd,然后输入:
express myProject
这样就会自动生成一个myProject文件夹,里面保存着一个express服务器的基础架构及常用模块和路由。
(或者)本地安装
本人有洁癖,除非是常用模块,否则不会全局安装,像express-generator这种一次性的工具,能局部安装就局部安装。
npm install -s express express-generator
这时,生成框架的命令也要改变,因为没有了全局express指令,我们必须手动执行express-generator:
node node_modules/express-generator/bin/express-cli myProject
下一步
注意这里有警告“express将使用默认的渲染引擎”,实际上在执行express命令时可以设置参数更改一些设定,读者可以输入“express --help”自行阅读。
这样我们就生成了一个express框架,并且使用jade作为前端编译方式(express的默认设置,2019年12月)。但是项目的依赖依然不完整,需要继续执行:
cd myProjcet
npm install
这样框架就完整了,之后再执行 :
npm start
一个完整的示例项目就会在本地运行了!
![](/qrcode.jpg)
拓展1:为什么要额外安装“express-generator”?
如上文所说,我这个人比较有洁癖,希望npm install的软件包越少越好。然后问题就来了,根据其他人的教程,我们生成架构的时候输入的是“express myProject”而不是“express-generator myProject”,那么我们为什么还要安装“express-generator”呢?
首先我们只安装express而不安装generator试试。
npm install -s express
node node_modules\express\lib\express myProject
果然不负众望,什么也没有发生。
那么我们去看看express的源码吧。
// 以下为express源码的部分截取
exports = module.exports = createApplication;
function createApplication() {
var app = function(req, res, next) {
app.handle(req, res, next);
};
mixin(app, EventEmitter.prototype, false);
mixin(app, proto, false);
// expose the prototype that will get set on requests
app.request = Object.create(req, {
app: { configurable: true, enumerable: true, writable: true, value: app }
})
// expose the prototype that will get set on responses
app.response = Object.create(res, {
app: { configurable: true, enumerable: true, writable: true, value: app }
})
app.init();
return app;
}
显然,express执行完成之后输出的是一个叫做“app”的服务器对象,所以单纯的执行express将会产生一个未被保存的对象,其结果什么也没有。
下面我们再安装express-generator。
npm install express-generator
再执行express源码。
node node_modules\express\lib\express myProject
依然什么都没有发生!再看express源码,没有任何变化。实际上,真正要搭建express框架则是要执行express-generator下的js文件:
node node_modules\express-generator\bin\express-cli myProject
这里我们就会意识到,也许在系统PATH中注册的express相关路径指向的不是真正的express,而是express-cli!
于是我们将express安装到全局去。
npm install -s -g express
注意,npm安装的包如果会注册全局PATH的话,要到系统的“环境变量”选项中查看。在计算机->右键打开属性->高级系统设置->打开“环境变量”选项。一般来说会安装在当前用户的环境变量中,双击查看Path的参数。里面会有这么一条路径:
C:\Users\你的用户名\AppData\Roaming\npm
这就是npm安装的可执行文件的存储地址。打开该文件夹,比如说我的文件夹内容如下:
可以看到所有我曾经安装的可以直接执行的npm指令都在这里,例如用于生成react框架的create-react-app,以及用于编译scss的node-sass。
并且我们注意到,全局安装express并不会添加express指令!
那么我们继续全局安装express-generator:
npm install -s -g express-generator
果不其然,文件夹中多了三个文件:
都到门口了,不进去看看吗?
用记事本打开express.cmd
@ECHO off
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
"%_prog%" "%dp0%\node_modules\express-generator\bin\express-cli.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b
原来express指令其实是指向了当前路径下的express-cli.js文件!不愧是大神写的程序,早就想到我们这些小白真正需要的不是express,而是express-generator,一键生成,简单明了。
这就是我们真正执行的express指令的来源。
拓展2:默认的express服务器有哪些功能?
要想真正的搭建一个后端服务器,就必须了如指掌,可不能随便的把别人的东西拿来用。所以我们看一下“express-generator”到底都帮我们做了什么。
打开app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// 引用路由
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 生成基础服务器对象
var app = express();
// 渲染引擎设置,默认jade,默认放在views文件夹
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// 设置环境为开发模式
app.use(logger('dev'));
// 如果Content-Type不是json,则设置为text/plain
app.use(express.json());
// 处理和转换post请求的body
app.use(express.urlencoded({ extended: false }));
// 处理和设置cookie
app.use(cookieParser());
// 静态文件托管路径
app.use(express.static(path.join(__dirname, 'public')));
// 设置路由
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 404处理
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// 报错处理
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
这样我们就知道我们的基础架构有什么,可以进行进一步完善了。