[Day6] Node.js利用Express实现用户注册登陆功能

最新推荐文章于 2024-01-16 19:13:16 发布

蜗牛乌龟谁跑的快

最新推荐文章于 2024-01-16 19:13:16 发布

阅读量295

点赞数 1

分类专栏： nodejs实战文章标签： node.js html javascript

本文链接：https://blog.csdn.net/zhs362625119/article/details/109192238

版权

nodejs实战专栏收录该内容

8 篇文章 0 订阅

订阅专栏

[Day6] Node.js利用Express实现用户注册登陆功能

文章目录

[Day6] Node.js利用Express实现用户注册登陆功能

要求

了解Express框架
了解node.js常用模块：express，body-parser
了解express Router
了解HTML form表单

环境

OS: Win10
Node.js: v12.19.0
Express: v4.17.1
Yarn: v1.22.10
使用VScode IDE
body-parser：1.19.0

原理

Form 表单

enctype: 表单数据提交时使用的编码类型，默认使用"application/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。enctype为form表单数据的编码格式，Content-type为Http传输的数据的编码格式

实战

index.html

新增2个page, login.html, regisster.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
		</head>
		<body>
			<a href="./register.html">注册</a>
			<a href="./login.html">登录</a>
		</body>
	</head>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
		</head>
		<body>
			<form action="/login" method="GET" >        
				<label for="">账号:</label> 
				<input name="user" type="text" placeholder="请输入账号"> 
				<br> 
				<label for="">密码:</label> 
				<input type="password" name="password" placeholder="请输入密码"> 
				<br>
				<input type="submit"  value="登录">
			</form>
		</body>
	</head>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
		</head>
		<body>
			<form action="/register" method="POST">
				<label for="">账号:</label> 
				<input name="user" type="text" placeholder="请输入账号">
				<br> 
				<label for="">密码:</label> 
				<input name="psw" type="password" placeholder="请输入密码"> 
				<br> 
				<label for="">重复密码:</label> 
				<input name="pswa" type="password" placeholder="请重复密码"> 
				<br> 
				<input type="submit" value="注册">
			</form>
		</body>
	</head>
</html>

server.js

引入body-parser

var express = require("express");
var bodyParser = require("body-parser");
var router = require("./routers");

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/', router);

module.exports = app;

Router

router/index.js

var express=require("express");

var router=express.Router();

router.get("/login", function(req,res){
    console.dir(req.query);    
    res.send(`${req.query.user}:登陆成功`);
})

router.post("/register", function(req,res){
    console.dir(req.body);    
    res.send(`${req.body.user}: 注册成功`);
})
module.exports = router;

运行index.js

node index.js

结果及演示

浏览器看效果及整个过程。
在这里插入图片描述

蜗牛乌龟谁跑的快

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Day6] Node.js利用Express实现用户注册登陆功能

[Day6] Node.js利用Express实现用户注册登陆功能文章目录[Day6] Node.js利用Express实现用户注册登陆功能要求环境原理实战index.htmllogin.htmlregister.htmlserver.jsRouter运行index.js结果及演示要求了解Express框架了解node.js常用模块：express，body-parser了解express Router了解HTML form表单环境OS: Win10Node.js: v12.19.0
复制链接

扫一扫