新建一个工程
express -e blog
配置入口文件
打开项目内的app.js ,在倒数第二行写入如下代码：
app.listen('3000', function () {
console.log('server is running in 3000')
})
这样就让服务运行在了3000端口
检查
打开终端输入：
node app
在打开浏览器访问127.0.0.1:3000
运行成功
了解工程结构
此时blog目录下的文件大概是这样的
这些文件的用处有这些：
- app.js:启动文件，或者说入口文件
- package.json: 储存着工程的信息以及模块依赖，当在dependencies中添加依赖的模块时，运行 npm install ,npm就会检查当前目录下的package.json,并自动安装所有指定的模块。
- node_modules:存放package.json 中安装的模块，当在package.json中添加依赖的模块并安装后，该模块会存放在这个文件夹下。
- public：存放image、css、js等文件
- routes: 存放路由文件
- views：存放视图文件，或者说模板文件
打开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();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 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');
});
app.listen('3000', function () {
console.log('server is running in 3000')
})
module.exports = app;
它通过require导入了 http-errors express path cookie-parser morgan等模块，以及./routes/index ./routes/users两个本地文件。
app.set('views', path.join(__dirname, 'views'));
这行代码让views文件夹设置为存放视图文件的目录（存放模板文件的地方），__dirname是指当前文件所在的目录。
app.set(’ ‘, ’ ‘);是设置express.js所使用的render engine。
app.set('view engine', 'ejs');
这里是用了很多use方法连接了很多内置的中间件：
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
这个是托管静态页面的中间件：
app.use(express.static(path.join(__dirname, 'public')));
目录被设为了public文件夹。
app.use('/', indexRouter);
app.use('/users', usersRouter);
配置了两个路由一个是/ 一个是/users 也就是routes目录下的两个文件
index.js:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
这段的意思是使用ejs模板引擎 ， 解析 index.ejs 文件（也就是前面设置的views目录下的index.ejs）。
传入了一个对象{title:‘Express’} ,这个对象只有一个title属性，意思是用title的值Express替换index.ejs中所有的title变量，这也就是渲染视图的过程。
users.js:
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
如果访问/ 就会由index.js 来处理 如果访问/users 就会由users.js来处理。
路由规则
express封装了多种http请求方式，我们主要使用get 和 post两种，即app.get()和app.post()。
app.get()和app.post()的第一个参数都为请求路径，第二个参数为处理请求的回调函数，回调函数有两个参数req和res，代表请求信息和响应信息。路径请求以及对应的获取路径有以下几种形式：
- req.query 处理get请求，获取get请求参数
- req.params 处理 /:xxx 形式的get和post请求，获取请求参数。
- req.body 处理post请求，获取post请求体
- req.param() 处理get和post请求，但查找优先级由高到低而req.params -> req,body -> req.query
添加路由规则
当我们访问127.0.0.1:3000 或者localhost:3000时是这样的页面：
如果访问不在路由配置中的地址就会报错：
这是因为不存在 /xiaofu 的路由规则，同时它也不是一个public目录下的文件，所以返回了错误页面。
在index.js中的函数内加一段以下代码：
router.get('/xiaofu', function (req, res, next) {
res.send('Hello Im XiaoFu!')
})
重启服务 再次访问
页面就渲染上了一样一句话
这就是路由的配置。
模板引擎
模板引擎是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。
在这个工程中，我们用的是ejs模板引擎。
前面我们也设置过了模板文件的位置以及它们使用的模板引擎：
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
打开index.ejs,它的内容是这样的：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
当我们在路由配置时 配置这行语句时：
res.render('index', { title: 'Express' });
模板引擎就会把
< title><%= title %></t itle>
渲染为Express
渲染之后的页面代码：
<!DOCTYPE html>
<html>
<head>
<title> Express </title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1> Express</h1>
<p>Welcome to Express</p>
</body>
</html>
注意：
因为前面我们把静态文件目录 设置为了public目录，所以这里的href的值可以不写相对或绝对路径 之间写 ‘/stylesheets/style.css’
ejs标签系统
<% code %> => JavaScript代码
<%=code %> => 显示替换过的HTML特殊字符的内容
<%-code %> => 显示原始HTML内容