【nodejs笔记3】Express基本用法，和路由控制，和模板渲染ejs

1. 路由控制的工作原理

//routes/index.js中的代码
//访问主页时，调用ejs模板引擎，渲染index.ejs模板文件，生成静态页面，并显示在浏览器中。
router.get('/', function(req, res) {   //捕获访问主页的GET请求
  res.render('index', { title: 'Express' });
});

官方给出的写法是在 app.js 中实现了简单的路由分配，然后再去 index.js 中找到对应的路由函数，最终实现路由功能。

我们不妨把路由控制器和实现路由功能的函数都放到 index.js 里，app.js 中只有一个总的路由接口。

修改后的app.js

 //通过require()加载express、path模块。以及routes文件夹下的index.js 和user.js路由文件
 var express = require('express');
 var path = require('path');
 var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
 //加载路由文件
 var routes = require('./routes/index');
 var users = require('./routes/users');

 var app = express();  //生成一个express实例app

 app.set('port', process.env.PORT||3000);//第一章  添加
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));//设置 views 文件夹为存放视图文件的目录, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在执行的脚本所在的目录。
 app.set('view engine', 'ejs');// 设置视图模板引擎为 ejs

 // uncomment after placing your favicon in /public
 //app.use(favicon(__dirname + '/public/favicon.ico'));   //设置/public/favicon.ico为favicon图标
 app.use(logger('dev'));//加载日志中间件
 app.use(bodyParser.json());//加载解析json的中间件
 app.use(bodyParser.urlencoded({ extended: false }));//加载解析urlencoded请求体的中间件
 app.use(cookieParser());//加载解析cookie的中间件
 app.use(express.static(path.join(__dirname, 'public')));//设置public文件夹为存放静态文件的目录

 ////路由控制器    第一章  删减
 //app.use('/', routes);
 //app.use('/users', users);

 //第一章  添加
 routes(app);
 app.listen(app.get('port'),function(){
     console.log('Express server listening on port' + app.get('port'));
 });
 
 // catch 404 and forward to error handler     捕获404错误，并转发到错误处理器。
 app.use(function(req, res, next) {
     var err = new Error('Not Found');
     err.status = 404;
     next(err);
 });

 // error handlers

 // development error handler
 // will print stacktrace
 //开发环境下的错误处理器，将错误信息渲染error模版并显示到浏览器中。
 if (app.get('env') === 'development') {
     app.use(function(err, req, res, next) {
         res.status(err.status || 500);
         res.render('error', {
             message: err.message,
             error: err
         });
     });
 }

 // production error handler
 // no stacktraces leaked to user
 //生产环境下的错误处理器，将错误信息渲染error模板并显示到浏览器中。
 app.use(function(err, req, res, next) {
     res.status(err.status || 500);
     res.render('error', {
         message: err.message,
         error: {}
     });
 });

 //module.exports = app;//导出app实例并供其它模块使用

index.js

 //var express = require('express');
 //var router = express.Router();  //创建路由实例
 //
 ///* GET home page. */
 //router.get('/', function(req, res) {   //捕获访问主页的GET请求
 //  res.render('index', { title: 'Express' });
 //});
 //
 //module.exports = router;//导出路由，并在app中以app.use('/',routes)加载

 module.exports = function(app){
   app.get('/',function(req,res){
     res.render('index',{title: 'Express'});
   });
   app.get('/test',function(req,res){
     res.send('hello world!');
   })
 };

2. 路由规则

express 封装了多种 http 请求方式，主要使用 app.get() 和app.post()

//第一个参数为请求的路径，第二个参数为回调函数（包括req和res两个参数，分别代表请求信息和响应信息）。
app.get(**,function(req,res){
    ***});

app.post(**,function(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

3.  添加路由规则

浏览器打开http://localhost:3000/ 返回“Welcome to Express”界面

打开http://localhost:3000/test, 返回 “404 Not Found”

此时，添加路由：

在index.js 中，添加响应，如下：

之后，打开http://localhost:3000/test，就可以返回“hello world！”界面了。

【上述test，看完效果还回复原代码】

4. 模板渲染ejs

 //__dirname+'/views'为存放视图文件的目录
app.set('views', __dirname + '/views'); 

//设置模板引擎为ejs
app.set('view engine', 'ejs');

ejs 的标签系统非常简单，它只有以下三种标签：

• <% code %>：JavaScript 代码。
• <%= code %>：显示替换过 HTML 特殊字符的内容。
• <%- code %>：显示原始 HTML 内容。

这里我们不使用layout进行页面布局，而是使用更为简单灵活的include。include 的简单使用如下：

<%- include a %>
hello,world!
<%- include b %>