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

  • 前言
    最近学习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文件中:


<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)
效果如图(有些丑):
node.js实现请求成功返回静态页面的功能_第1张图片
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,浏览器请求后发现和上图的效果一样。

你可能感兴趣的:(JavaScript,node.js)