知识点
- 初识 Express
- Express 路由
- Express 中间件
- 使用 Express 写接口
初识 Express
什么是Express
官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
Express 的中文官网： http://www.expressjs.com.cn/
通俗的说：Express的用法和Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。
http内置模块和Express的关系就像浏览器中 Web API 和 jQuery 。后者是基于前者进一步封装出来的。
Express 能做什么
对于前端程序员来说，最常见的两种服务器，分别是：
- Web 网站服务器：专门对外提供 Web 网页资源的服务器。
- API 接口服务器：专门对外提供 API 接口的服务器。
使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器
安装Express
推荐安装版本为：4.17.1
npm i Express@4.17.1
Express基本使用
创建简单的服务器：
// 导入express
const express = require('express')
// 创建服务器
const app = express()
// 配置ip、端口
const hostname = '127.0.0.1'
const port = '3005'
// 监听客户端get请求 当客户端请求访问/index时，响应res.send('welcome visit loaclhost')
app.get('/index', (req, res) => {
// 通过res.send()方法，把处理好的内容，发送给客户端
res.send('welcome visit loaclhost');
})
// 监听post请求
app.post('/reg', (req, res) => {
// 通过res.send()方法，把处理好的内容，发送给客户端
res.send('监听到了post请求')
})
// 启动监听
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
})
获取URL中携带的参数信息
- req.query对象
// req.query获取客户端发送的查询请求
app.get('/', (req, res) => {
// req.query默认是一个空对象
// 客户端使用 ?id=1&uname=zs 这种查询字符串形式，发送到服务器的参数
// 可以通过req.query对象访问到
res.send(req.query);
})
// 返回的是{ id: 1, uname: 'zs'}
- req.params对象
// req.params获取动态参数
// 用户访问127.0.0.1:3005/index/1/zs
app.get('/index/:id/:uname', (req, res) => {
// req.params默认也是一个空对象
// 通过:匹配动态参数
res.send(req.params)
})
// 返回的是{id: 1, uname: 'zs'}
托管静态资源
express.static()
express 提供了一个非常好用的函数，叫做 express.static()，通过它，我们可以非常方便地创建一个静态资源服务器，
例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：
const express = require('express')
const app = express()
app.use(express.static('file'))
通过托管静态资源后就可以访问file目录下的所有文件了
注意
如果要托管多个静态资源目录，请多次调用express.static()函数
app.use(express.static('public'))
app.use(express.static('file'))
挂载路径前缀
如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：
app.use('/file',express.static('file'))
这样就能通过带有/file前缀的地址来访问file目录下的文件了
安装nodemon模块
# 安装
npm i nodemon -g
# 使用
nodemon app.js
使用nodemon来开启服务器，会在每次修改保存代码后自动重启服务器，就不用手动关闭再启动了
扩展：在node.js中使用art-template模板引擎
思路：
1.下载art-template
2.导入art-template
3.引用模板引擎
4.输出页面
使用vs code开发，在setting(JSON)中配置识别html代码
art快速生成html结构的配置：
ctrl+shift+p ----> setting---->open setting (JSON)---->
"files.associations": {
"*.art": "html"
}
第一步下载art-template
第二部搭建简单的服务器，并引用模板
// 导入相关模块
const express = require('express');
const app = express();
const path = require('path');
const template = require('art-template');
app.use('/asstes', express.static('asstes'));
var data = {
name: '张三'
};
// 配置ip端口
const hostname = '127.0.0.1';
const port = 3005;
// 监听客户端get请求
app.get('/', (req, res) => {
// 引入模板引擎
let html = template(path.join(__dirname, './index.art'), data);
res.send(html);
});
// 启用监听
app.listen(port, hostname, () => {
console.log(`express server running at http://${hostname}:${port}/`);
});
使用art-template定义模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="asstes/app.css">
</head>
<body>
<p>欢迎<span>{{name}}</span>登录</p>
</body>
</html>
效果如下：
效果
网友评论