class08：静态文件与动态路由

最新推荐文章于 2024-10-17 09:40:47 发布

Laker 23

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量241

点赞数

分类专栏： # Nodejs 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_51667621/article/details/125987126

版权

Nodejs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、配置静态文件访问页面

我们在学习http模块的时候做过在后端通过配置的路径访问html文件，当有很多路径和文件时会造成混乱，虽然可以通过判断语句解决混乱，但是还是很麻烦。

学习了express之后，我们可以通过配置静态文件的方式访问页面。

express.static的API官网说明：Express 4.x - API 参考 (expressjs.com)

const express = require("express");
const app = express();
app.listen("3000", () => { console.log("3000端口启动"); });
app.use(require("cors")());

// 默认的配置一个根路由的 返回值  => 返回页面
// 中间件:配置静态文件    express.static(文件夹地址)
app.use(express.static("./public"));

public为同目录下的静态文件夹：
在这里插入图片描述

注意：如果没有配置，静态文件默认读取index.html文件，所以不能随意改名。否则报错。

css文件：

body{
    background: url("https://cdn.pixabay.com/photo/2018/04/01/19/15/fantasy-3281842_960_720.jpg");
}

html文件：

<head>
    <link rel="stylesheet" href="./app.css">
</head>
<body>
    <button id="box">get请求</button>
    <br />
    <button id="box1">post请求</button>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</body>

运行后访问http://localhost:3000/的结果：
在这里插入图片描述

二、读取本地文件

express访问数据时的返回res有一个方法： res.sendFile(绝对路径) 可以读取本地文件：

app.get("/readFile", (req, res) => {
    //读取文件 返回文件数据
    res.sendFile(__dirname + "/test.txt")
});

在这里插入图片描述

如果修改txt文档内容，在浏览器中刷新页面也可以访问到新的数据内容。

三、链式调用

可以使用多个路由进入同一请求，返回同一数据，但不推荐该用法：

app.get(["/a", "/b", "/c"], (req, res) => {
    res.send("五花马，千金裘，呼儿将出换美酒。")
});

在这里插入图片描述

四、动态路由

动态路由指的是路由可以变化，在配置请求路由时在后面加上 /:xxx 则/后面的路径可以随意变化，/前面的路由不可变。

例：

const express = require("express");
const app = express();
app.listen("3000", () => { console.log("3000端口启动"); });
app.use(require("cors")());

// 动态路由
app.get("/laker/:lebron", (req, res) => {
    res.send("与尔同销万古愁！");
});