- 前言
最近学习node.js,这个问题困惑了一段时间,今天有幸了解了一些,特此分享。 - 实现方法
- 用node系统模块实现:
这种方式用到了文件的操作,通过读取文件并返回文件内容实现。
核心代码:
- 用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,浏览器请求后发现和上图的效果一样。