Node


8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

什么是Express.js

  1. Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架;
  2. Express 不对 Node.js 已有的特性进行二次抽象,只是在Node.js之上扩展了构建 Web 应用所需的基本功能。

总结什么是Express.js:是一个基于Node.js的Web开发框架。Express框架并没有覆盖或删除原生的API,而是基于原生的API,做了进一步的封装,提供了更好用的一些API,方便快速进行Web开发!
res.render、res.json、res.redirect、req.query
Node.js是Javascript的服务器端运行环境!express只是基于Node,提供了开发Web应用的框架和API。

如何创建基本的HTTP服务(新旧方式对比)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var express = require('express');
// 创建一个 app 出来
var app = express();
// 捕获 get 类型的 / 请求
app.get('/', function (req, res) {
// 支持原生的 end 方法
res.end('OK');
});
// 捕获 get 类型的 /a 请求
app.get('/a', function (req, res) {
// 通过 express 封装的 send 方法,返回内容,会自动添加响应头,更加方便便捷
res.send('<h1>你好啊</h1>');
});
// 启动 app 监听程序
app.listen(3000, function () {
console.log('App running at http://127.0.0.1:3000');
});

http模块原生end方法和 express中send方法的对比

  1. send方法中默认处理了中文乱码问题
  2. send方法默认返回的格式就是HTML类型的文本内容

根据不同的路由methodurl响应不同的文本消息

根据不同的路由methodurl响应不同的html页面

  1. res.sendFile

分别从原生和express的app.js中抽离router路由模块

Express中的路由

杂乱的问题

ES6中属性和属性值一样的话可以直接省略
forEach只要开始的话就没法停止了,所以使用数组的some方法,返回return true;即可停止循环。

创建最基本的web前端服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const express = require("require");
// 创建一个服务器
const app = express();
// 使用app.use方法,接收客户端的任何method类型的任何URL地址请求
app.use("/index", (req, res) => {
/**
* res.end("express ok");
* res.end("你好啊,皮还是你皮");
*/
res.send("<h2>皮还是你皮</h2>");
})
// 启动express服务器
app.listen(3001, () => {
console.log("express server running at http://127.0.0.1:3001");
})

根据不同的URL和method返回不同的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const express = require("express");
// 创建express的服务器实例
const app = express();
// 使用app.use可以接受所有请求
// app.use(function(req,res){});
app.get("/", (req, res) => {
res.send("<h1>express-首页</h2>");
})
app.get("/movie", (req, res) => {
res.send("<h1>express-电影</h2>");
})
app.post("/about", (req, res) => {
res.send("<h1>express-电影</h1>");
})
app.use((req, res) => {
res.send("404");
})
// 调用app.listen方法,指定端口号并启动web服务器
app.listen(3001, function () {
console.log("Express server running at http://127.0.0.1:3001");
})

返回不同的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express = require("express");
const app = express();
app.get("/", (req, res) => {
// res.render("index",{});
res.sendFile(__dirname + "/views/index.html");
})
app.get("/movie", (req, res) => {
// res.render("movie",{});
res.sendFile(__dirname + "/views/movie.html");
})
app.post("/about", (req, res) => {
// res.render("about",{});
res.sendFile(__dirname + "/views/about.html");
})
app.listen(3001, function () {
console.log("App listening on port 3001!");
})

express处理静态资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express = require("express");
// 创建express的服务器实例
const app = express();
// 问题:如果我访问图片的时候,很任性,就想在路径前面带上images
app.use("/myVirtualPath", express.static("images"));
// 1.jpg
// 注意:在使用app.use(express.static("托管的资源目录"))的时候,可以在前面挂载虚拟路径
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
})
// 调用app.listen方法,指定端口号并启动web服务器
app.listen(3001, function () {
console.log(3001, function () {
console.log("Express server running at http://127.0.0.1:3001");
})
})

中间件的处理过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 引入模块
const express = require("express");
const app = express();
app.use(function (req, res, next) {
console.log("要开始处理了");
req.name1 = "zd";
next();
})
app.use("/", (req, res, next) => {
console.log("1");
console.log(req.name1);
res.end("ok");
next();
})
app.use("/", (req, res) => {
console.log("2");
res.end("No");
})
// 注意,当前面中间件表示调用了res.end相关的方法,那么后续的中间件的res.end就没有效果了
// 在中间件中,任何对req和res的修改,都要放在next()调用之前
app.listen(3000, function () {
console.log("App listening on http://127.0.0.1:3000");
});

中间件的概念

在自来水的处理过程中,中间的每一个处理环节,可以叫做中间件!
中间件就是用来处理原材料的,那么,在自来水处理过程中,处理的原料是水;在express中,中间件处理的原料是 request 对象 和 response 对象;
自来水处理过程

概念:中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。

经过中间件的处理之后,express就向 req 和 res ,对象身上,挂在了一些好用的方法和属性
req.query
res.send()
res.json()

  • 中间件的功能包括:
    • 执行任何代码。
    • 修改请求和响应对象。
    • 终结请求-响应循环。
    • 调用堆栈中的下一个中间件。

body-parser 中间件的使用步骤

在 express 中,可以使用 body-parser 第三方中间件,去帮我们出去 post 提交过来的数据

  1. 使用 npm 安装
  2. 导入 这个第三方中间件 模块
  3. 使用 app.use()注册刚才导入的中间件,到 app身上

Express 里中间件的分类(形式上的分类)

  1. 应用级别的中间件: 所有挂载到 app 身上的方法,都叫做 “应用级别的中间件” app.get app.post app.use
  2. 路由级别的中间件: 挂载到了 router 对象上,这个 router 对象 是经过调用 express.Router() 得到了; router.get router.post router.use
  3. 错误处理中间件: 有四个参数 err, req, res, next
  4. express唯一的一个内置中间件: express.static(root, [options]) 用于托管静态资源
  5. 第三方中间件: 非Express官方提供的中间件,叫做第三方中间件

在Express中使用路由

  1. 定义路由的 router 文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var express = require('express');
    // 使用 express 的 Router() 方法,得到一个路由实例
    var router = express.Router();
    // 通过 Method 和 请求路径,分发不同的请求到不同的处理函数中
    router.get('/', function (req, res) {
    res.send('<h1>首页</h1>');
    }).get('/movie', function (req, res) {
    res.send('<h1>电影</h1>');
    });
    module.exports = router;
  2. 导入路由并注册使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var express = require('express');
    // 导入路由
    var router = require('./router');
    // 创建一个 app 出来
    var app = express();
    // 注册路由
    app.use(router);
    // 启动 app 监听程序
    app.listen(3000, function () {
    console.log('App running at http://127.0.0.1:3000');
    });
  3. express在挂载路由的时候,撤了能够分开写,也为我们提供了链式编程

1
2
3
router.get("/",(req,res)=>{
<!--渲染一个静态(只有单纯的html结构,样式,基本的js,没有动态的数据交互)的首页页面-->
})
  1. 方案总结
    • 方案1:使用fs模块读取首页文件中的字符串,然后调用res.end返回
    • 方案2:使用art-template之类的模版引擎,然后使用res.end返回
    • 方案3:使用res.sendFile渲染页面
1
2
3
res.sendFile(path.join(__dirname,"/views/index.html"));
<!--全局暴露-->
module.exports=router;
  1. 总结:针对于纯静态页面的渲染,我们不必每次监听路由请求,可以使用唯一的内置中间件express.static()来快速托管静态页面。
  2. 使用express.static()防范,除了可以托管css,js,images,还可以托管不需要使用【服务器端渲染】的静态页面。而客户端倪渲染的页面也可以使用它托管
  3. 能使用的原因是:客户端的渲染分为两步,第一步是请求页面拿到页面的html结构,第二部在页面中会有一个模版字符串的区域,接下来引用art-template.js的脚本,然后自己再写一段js代码来实现页面的渲染。所以完全可以使用express.static来渲染。

在express中使用模板引擎

ejs默认的模板文件后缀名是.ejs,如果你想让ejs模板引擎的默认后缀名是.html,需要进行相关的设置

使用ejs

  1. 运行npm安装ejs

    1
    cnpm i ejs -S
  2. 注册模板引擎:

    1
    app.set('view engine', 'ejs');
  3. 同时,也可以修改默认的模板文件存放路径:

    1
    app.set('views', __dirname + '/views');
  4. 使用ejs将模板渲染出来,同时将渲染的结果发送给客户端:

    1
    res.render('模板名称', {}); // 第一个参数是模板的名称,第二个参数是模板要渲染的数据

例如:

1
2
3
4
5
6
// node.js调用render函数
res.render('hero_index', {
username: '尼古拉斯·赵四',
hobby: ['吃饭', '唱歌', '打电话'],
isShow: false
});

html模板字符串:

1
2
3
4
5
6
7
8
9
10
11
<body>
<h1 style="color:<%= !isShow?'red':'' %>;">这是EJS的模板页面 - <%= username %></h1>
<% if(!isShow){ %>
<h3>这是一个漂亮的h3标题</h3>
<% } %>
<ul>
<% hobby.forEach(function(item, i){ %>
<li><%= item %></li>
<% }) %>
</ul>
</body>

  1. 如何修改ejs的定界符:

    1
    2
    3
    4
    5
    6
    // 导入 EJS 并修改定界符
    var ejs = require('ejs');
    ejs.delimiter = '?';
    app.engine('ejs', ejs.renderFile);
    // 设置完毕之后,在调用res.render()函数的时候,模板文件必须带后缀名
  2. 如何使用公共模板:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!--导入公共的头部-->
    <?- include('header') ?>
    <h1>ejs</h1>
    <ul>
    <? names.forEach(function(item){ ?>
    <li><?= item ?></li>
    <? }) ?>
    </ul>
    <!--导入公共的底部-->
    <?- include('footer') ?>
  3. 如何自定义ejs的模版文件后缀名

    • 导入ejs模块
    • 使用app.engine方法,自定义一个模版引擎,其中,参数1是一个字符串类型的,表示自定义的模版引擎的名称,同时这个名称,也是模版页面的后缀名
    • 参数2是一个方法的使用,表示调用该方法区域渲染模版页面
    • IDE(集成开发环境)
    • 注意:==设置默认模版引擎,如果不设置调用res.render会报错==
1
2
3
4
5
6
7
// 设置默认模版页面的存放路径
app.set("views", "./views");
app.get("/", (req, res) => {
res.render("index.html", {
title: "QQQ"
});
})

相关文章