案例:加载静态信息(如图片,网页等),post提交方式获取数据,path截取后缀名
默认界面 index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>欢迎来到课工场</h2>
<a href="./login.html">登录</a>
<a href="./zhuce.html">注册</a>
</body>
</html>
登录界面login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<!--post提交方式-->
<h2>登录</h2>
<form action="http//localhost:3000/login" method="post">
用户名:<input type="text" name="name"/><br>
密码:<input type="password" name="pass"/><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>
注册界面zhuce.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<form action="http//localhost:3000/zhuce" method="post">
注册的用户名:<input type="text" name="name"/><br>
注册的密码:<input type="password" name="pass"/><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>
错误提示页面404.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>报错哦!没有找到该页面</h1>
<form action="http://localhost:3000" enctype="multipart/form-data" >
上传图片:<input type="file"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
work1.js:
var fs = require("fs");
var http = require("http");
var url = require("url");
var path = require("path");
http.createServer(function (req, res) {
res.writeHead(200, {"Content-type": "text/plain;charset=UTF-8", "Access-Control-Allow-Origin": "*"});//浏览器兼容问题
if (req.url == "/favicon.ico") {
return;
}
var pathname = url.parse(req.url).pathname;
/* console.log(pathname);*/
if (pathname == "/") {//设置默认页面
pathname = "/index.html";
}
//加载静态信息
fs.readFile("./static" + pathname,
function (err, data) {
if (err) {//错误方法
console.log("错误");
fs.readFile("./static/404.html", function (err, data) {
if (err) {//错误呀页面没有找到
console.log("404都没有");
} else {//给于错误提示
res.writeHead(404, {"Content-type": "text/html;charset=UTF-8"});
res.end(data);
}
})
} else {//正确方法
console.log("正确");
var extname = path.extname(pathname);//截取后缀名
console.log(extname);
var mine = getMine(extname);//根据后缀名进行编辑
res.writeHead(200, {"Content-type": mine});//不同文件名编码不一样
res.end(data);
}
});
//判断来自哪一个页面,并且获取用户post形式输入的信息
var dz = url.parse(req.url, true);
console.log(dz);
if (req.method.toLowerCase() == "post"&&dz.pathname == "/http//localhost:3000/login") {
console.log("来自登录的页面");
console.log("进入post验证");
var allData = "";
req.on("data", function (chunk) {
allData += chunk;
});
req.on("end", function () {
var dataString = allData.toString();
res.write("用户登录的信息如下:");
res.end(dataString);
});
}
if (req.method.toLowerCase() == "post"&&dz.pathname == "/http//localhost:3000/zhuce") {
console.log("来自注册的页面");
console.log("进入post验证");
var allData = "";
req.on("data", function (chunk) {
allData += chunk;
});
req.on("end", function () {
var dataString = allData.toString();
res.write("用户注册的信息如下:");
res.end(dataString);
});
}
}).listen(3000, "localhost");
function getMine(extname) {
switch (extname) {
case '.html':
return "text/html;charset=UTF-8";
case ".css":
return "text/css";
case ".jpg":
return "image/jpg";
break;
}
}