说明
- 回顾一下Node.js一些模块的学习
我们首先写好静态页面
- 为了追求效率和美观,我们使用了bootstrap的bootstrap.css
- 验证登录功能我们简单设置一个用户名和密码,和一个登录功能
- 结构
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node实现登录页面</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1 class="text-center">实现验证登录</h1>
<div class="container">
<form method="get" action="http://localhost:3000/login.html">
<div class="form-group">
<label for="user1">用户</label>
<input type="text" class="form-control" id="user1" placeholder="输入用户" name="username" required>
</div>
<div class="form-group">
<label for="password1">密码</label>
<input type="password" class="form-control" id="password1" placeholder="输入密码" name="pwd" required>
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</body>
</html>
使用Node.js构建服务器
- 利用http模块创建一个服务器
- 使用fs和path模块来查看我们的静态页面
- 注意表单的action,端口还有请求路径保持一致
- 后台部分的代码
const http = require('http')
const fs = require('fs')
const path = require('path')
let server = http.createServer((req,res)=>{
// console.log(req.url.startsWith('/login'))
// true(login) false(bootstrap) false(bootstrap)
fs.readFile(path.join(__dirname,'/source',req.url),'utf8',(err,data)=>{
// 2.1 判断文件是否存在,不存在返回404
// 2.2 最好使用req.url(这样.css文件发送请求,req.url也能获取到。才会链接.css)
if(err){
res.writeHead('404',{
'Content-Type':'text/plain;charset=utf8'
})
res.end('页面不存在了')
}else{
res.end(data)
}
})
}).listen(3000,()=>{
console.log('The Server Running...')
})
- 本地服务器查看页面效果,测试静态资源是否加载进来
- 测试各个功能
- 解析
- 我们使用req.url加载静态资源
- 即使使用其它路径,也会报错
Node.js实现验证登录功能
- 导入url模块
- 当点击登录时,获取用户名和密码
const http = require('http')
const fs = require('fs')
const path = require('path')
const {URL} = require('url')
let server = http.createServer((req,res)=>{
let myURL = new URL(path.join(__dirname,req.url))
if(myURL.searchParams.get('username')){
let user = myURL.searchParams.get('username')
let pwd = myURL.searchParams.get('pwd')
res.writeHead('200',{
'Content-Type':'text/plain;charset=utf8'
})
res.end('你好,'+user)
}
fs.readFile(path.join(__dirname,'/source',req.url),'utf8',(err,data)=>{
if(err){
res.writeHead('404',{
'Content-Type':'text/plain;charset=utf8'
})
res.end('页面不存在了')
}else{
res.end(data)
}
})
}).listen(3000,()=>{
console.log('The Server Running...')
})
总结
// 1.构建web服务器
// 2.渲染页面
// 2.1 判断页面是否存在
// 2.2 不是的话返回404
// 2.3 是的话,读取文件并渲染到页面上
// 3.登录后获取用户名和密码
// 3.1 点击登录按钮会重新发送请求
// 3.2 此时能拿到用户名和密码,但要处理下
// 3.1 获取url地址的searchParams的用户名和密码
// 4. 实现登录
// 4.1 返回新页面