node.js实现请求成功返回静态页面的功能

最新推荐文章于 2024-05-13 15:49:53 发布

Dolary

最新推荐文章于 2024-05-13 15:49:53 发布

阅读量1.5w

点赞数 2

分类专栏： JavaScript node.js

本文链接：https://blog.csdn.net/kiddingstreet/article/details/80112303

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

node.js

2 篇文章 0 订阅

订阅专栏

前言
最近学习node.js，这个问题困惑了一段时间，今天有幸了解了一些，特此分享。
实现方法
1. 用node系统模块实现：
  这种方式用到了文件的操作，通过读取文件并返回文件内容实现。
  核心代码：

ceshi.js文件中：

app.use('/index.html',function(req,res){
    var fileName="./index.html";
    fs.readFile(fileName,function(err,data){
        if(err)
            console.log("对不起，您所访问的路径出错");
        else{
            res.write(data);
        }
    })
})

注：如果我们想访问其他的页面，只需要改动fileName变量，通常会用到url解析，此处不再赘述。这里也用到了fs模块（不要忘记引入）。
index.html文件中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width:100px;
                height:100px;
                background:pink;
            }
        </style>
    </head>
    <body>
        <div>
            这是一个盒子
        </div>
        <form action="http://localhost:8080" method="POST">
            姓名：<input type="text" name="name"/><br/>
            密码：<input type="text" name="password"/><br/>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

cd到文件指定目录，终端运行node ceshi.js
浏览器请求localhost:8000/index.html(此处我监听的端口号为8000)
效果如图（有些丑）：
返回的静态页面
2. 利用express中间件express-static（相对于上一中更加的方便）
首先在终端到达项目文件下后，输入命令：npm install express-static

然后就可以使用了，ceshi.js中的内容如下：

var express=require("express");
var app=express();
var exStatic=require("express-static");
app.use(exStatic('./'));//这一句中的'./'是静态页面的相对路径。
app.listen(8000);

在实际开发中我们可以将所需要用到的静态页面放入同一个文件夹（如：www）下，然后在exStatic的参数中写入’/www’即可。
终端运行node ceshi.js，浏览器请求后发现和上图的效果一样。

Dolary

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
node.js实现请求成功返回静态页面的功能

前言最近学习node.js，这个问题困惑了一段时间，今天有幸了解了一些，特此分享。实现方法用node系统模块实现：这种方式用到了文件的操作，通过读取文件并返回文件内容实现。核心代码：ceshi.js文件中：app.use('/index.html',function(req,res){ var fileName="./index.html"; fs...
复制链接

扫一扫