Node.js实现验证登录功能（前[html和css]后[Node.js]端交互）

╰半橙微兮° 2022-03-22 14:01 226阅读 0赞

### 说明 ###

1.  回顾一下Node.js一些模块的学习

### 我们首先写好静态页面 ###

1.  为了追求效率和美观，我们使用了bootstrap的bootstrap.css
2.  验证登录功能我们简单设置一个用户名和密码,和一个登录功能
3.  结构  
    ![静态资源][20190128080045666.png]
4.  代码

<!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构建服务器 ###

1.  利用http模块创建一个服务器
2.  使用fs和path模块来查看我们的静态页面
3.  注意表单的action，端口还有请求路径保持一致
4.  后台部分的代码

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...')
    })

1.  本地服务器查看页面效果，测试静态资源是否加载进来  
    ![这是页面效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]
2.  测试各个功能
3.  解析

*  我们使用req.url加载静态资源
 *  即使使用其它路径，也会报错

### Node.js实现验证登录功能 ###

1.  导入url模块
2.  当点击登录时，获取用户名和密码

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...')
    })

![在这里插入图片描述][20190128171743559.png]

### 总结 ###

// 1.构建web服务器  
// 2.渲染页面  
// 2.1 判断页面是否存在  
// 2.2 不是的话返回404  
// 2.3 是的话，读取文件并渲染到页面上  
// 3.登录后获取用户名和密码  
// 3.1 点击登录按钮会重新发送请求  
// 3.2 此时能拿到用户名和密码，但要处理下  
// 3.1 获取url地址的searchParams的用户名和密码  
// 4. 实现登录  
// 4.1 返回新页面

[20190128080045666.png]: /images/20220322/98185d6ecf2746a3bdbd51582a70c74b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220322/02b9b8adf0a34d56836dcfd9216207d3.png
[20190128171743559.png]: /images/20220322/27c9729ce2214673866e18952c6beb5a.png