模拟的路径为:http://localhost:8080/register?id=3&name=zmt
- 引入url模块
- 路径上的信息在
req.url
的query
上,经过url.parse
模块解析后解析为字符串,加true
后解析为对象- 将值通过
renderFile
渲染到注册组件中
let url = require('url');
let data = require('./data.json')
let ejs=require('ejs')
module.exports = (req, res) => {
let path = url.parse(req.url).pathname;
if (path != "/favicon.ico") {
// console.log(pathname);
res.writeHead(200, { 'Content-Type': "text/html;charset=utf-8" });
if (path == '/') {
ejs.renderFile("view/index.ejs", {student:data},(err, str) => {
if (err) {
throw err;
}
res.end(str);
});
}
else if (path == '/login') {
ejs.renderFile("view/login.ejs", {student:data},(err, str) => {
if (err) {
throw err;
}
res.end(str);
});
}
//get路由传值
else if (path == '/register') {
let pathn=url.parse(req.url,true);
let getdata=pathn.query;
ejs.renderFile("view/register.ejs", {
student:data,
urldata:getdata
},(err, str) => {
if (err) {
throw err;
}
res.end(str);
});
}
else {
//"404.html"
res.end();
}
}
}
在注册组件中,将值渲染到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
注册
<%= urldata.id %>---<%= urldata.name %>
</body>
</html>
- 一般表单提交使用
post
传值- 直接使用
url
模块query
中拿不到值,所以使用req.on绑定事件监听(有数据传输data
,数据传输结束end
)- 在取得的值前加
?
(仿照get
格式),值才会在query
中- 本例是从注册界面成功后到达首页
creatserver.js:
let url = require('url');
let data = require('./data.json')
let ejs = require('ejs')
module.exports = (req, res) => {
let path = url.parse(req.url).pathname;
if (path != "/favicon.ico") {
// console.log(pathname);
res.writeHead(200, { 'Content-Type': "text/html;charset=utf-8" });
//登录界面Post传值
if (path == '/') {
let info="?";
req.on("data", (res) => {
info+=res.toString();
console.log(info);
})
req.on("end", () => {
let postinfo=url.parse(info,true).query;
ejs.renderFile("view/index.ejs", {
student: data,
postinfo: postinfo
}, (err, str) => {
if (err) {
throw err;
}
res.end(str);
});
})
}
//get路由传值
else if (path == '/register') {
var pathn = url.parse(req.url, true);
// console.log(pathn.query);
var getdata = pathn.query;
ejs.renderFile("view/register.ejs", {
student: data,
urldata: getdata
}, (err, str) => {
if (err) {
throw err;
}
res.end(str);
});
}
else {
//"404.html"
res.end();
}
}
}
注册界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
注册界面
<%= urldata.id %>---<%= urldata.name %>
<form action="/" method="POST">
<ul>
<li>用户名:<input type="text" name="username"/></li>
<li>密码:<input type="text" name="userpwd"/></li>
<li><input type="submit" value="登陆"/></li>
</ul>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
ejs首页 test
<%- include("./Component/menu.ejs",student) %>
<%= postinfo.username %>-----<%= postinfo.userpwd %>//绑定数据
</body>
</html>