node js 从零学习（6) express router mongodb 模拟登录注册_node express本地模拟缓存登录-优快云博客

本文链接：https://blog.youkuaiyun.com/leon_smart/article/details/88314009

本文详细介绍如何使用Node.js和Express框架构建一个简单的登录注册系统，包括数据库交互、路由设置及session管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

综合应用

之前的介绍我们了解了许多单独的模块，很多朋友不知道我们到底要做什么，这里我们使用express框架把这些模块结合起来
在此之前先介绍路由 router 说起router,我们就要立马想起五个关键词

静态路由表
分配地址
统一入口
寻址
过滤

我们可以把它看作一个模块，来分析url请求，然后分配地址来实现页面移植
这里为了结合实例我们结合express 来说后续再介绍自定义路由

npm i express -g
npm i express-generator -g（生成器）

之前有介绍过express 框架这里就不多复述，首先我们先用生成器生成一个项目目录

express -e test //(目录名称)  views文件是.ejs

然后会发现有这样一个文件夹

这里我们要看下 bin文件夹是执行文件，public文件夹是静态资源，routers文件夹是路由，views文件夹是视图，app.js是整个文件的主入口。
然后进入目录在终端继续输入

npm install //将配置文件里的中间件安装好
npm start  //进行执行文件

这是我们打开http://localhost:3000/ 会看到一个页面证明我们已经配置完毕。
现在我们来模拟登录注册操作
首先我们先写出主页登录注册的视图文件
这里我直接贴出代码在views文件夹新建index.ejs login.ejs register.ejs 具体.ejs文件语法可以自行学习

// login-----------------------------------------------------------------
<!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>Login</title>
</head>
<body>
	<form action="./users/login" method="post">
	<label for="">
		用户名:<input type="text" name="username" />
	</label>
	<label for="">
		密码：<input type="text" name="password" />
	</label>
	<label for="">
		<input type="submit" name="提交" value="提交"/>
	</label>
	</form>
</body>
</html>
// register-----------------------------------------------------------------
<!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>register</title>
</head>
<body>

	<form action="./users/register" method="get">
	<label for="">
		用户名:<input type="text" name="username" />
	</label>
	<label for="">
		密码：<input type="text" name="password" />
	</label>
	<label for="">
		<input type="submit" name="提交" value="提交"/>
	</label>
	</form>
</body>
</html>

//index-----------------------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <%if (!username) {%>
    <div>
        <input type="button" value="登录" onclick="location.href='/login'">
        <input type="button" value="注册" onclick="location.href='/register'">
    </div>
    <%}else{%>
        <div>
            你好：<%= username %>
            <input type="button" value="注销" onclick="location.href='/logout'">
            <!-登出操作 请对照index.js路由设置下的session操作->
        </div>
    <%}%>
  </body>
</html>

注意登录页面使用post 注册使用 get
此时让我们来配置路由index.js 这是初始的样子

var express = require('express');  //引入框架
var router = express.Router();    
/* GET home page. */
router.get('/', function(req, res, next) {  // '/' 只在默认地址后加个/
  res.render('index', { title: 'Express' }); 
});
module.exports = router;

此时我们可以发现我们只需要增加几个新的路由接口就好
我们先来渲染页面,因为上面的页面已经先写好了只要引入即可

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express',username:req.session.username});//传入session渲染页面
});
router.get('/login', function(req, res) {//渲染对应页面
  res.render('login', {});
});
router.get('/register', function(req, res) {//渲染对应页面
  res.render('register', {});
});
router.get('/logout', function(req, res) {//删除session 请结合后续代码看 登出操作
 // 方法一
 // req.session.username = undefined;
 // res.redirect('/');
 //方法二
 req.session.destroy(function(err){
     res.redirect('/');
 })
});
module.exports = router;

这样主页的路由设置基本完成，然后我们把用户提交的参数处理写在users 路由下下面来设置users.js

var express = require('express');
var router = express.Router();
var path = require('path');
var MongoClient = require('mongodb').MongoClient;//引入mongodb 需要npm安装
var DB_CONN_STR = 'mongodb://localhost:27017/test'; //设置mongodb数据库连接  其中27017 为默认端口 text为数据库名称
/* GET users listing. */
//注册的路由配置--------------------------
router.get('/register', function(req, res) {//get 方式对应 req.query  因为这是在users下 
//其实就是表单标签里 action 的url   '/users/register'
    MongoClient.connect(DB_CONN_STR,(err,client)=>{//mongodb 连接方法  错误前置
    	var conn =client.db().collection('user');  //在数据库下寻找集合 user 要配合你的集合名字
    	conn.save(req.query).then(data=>{//将数据存储到数据库
    		res.redirect('/login');//重定向到登录页面
    	})
    });
});
//登录的路由配置----------------------------------
router.post('/login', function(req, res) {//post 传递下  配合req.body来获取参数
    MongoClient.connect(DB_CONN_STR，(err,client)=>{//错误前置
  		var conn =client.db().collection('user');
  		conn.findOne(req.body).then(data=>{
    		if(data){//如果数据库中存在这条记录
      		req.session.username =data.username;//存入session（会话级存储）来让首页读取登录状态
      		res.redirect('/');//重定向到首页
    		}
 		})
	})
});

module.exports = router;

其中需要特殊解释就是 session 是需要安装 express-session 并在主入口 app.js下配置

//引入sessoin
var session = require('express-session');
app.use(session({//注意必须在路由模块use前使用 
	secret:'recommend 128 bytes random string',//推荐128字节的随机字符串 基本瞎写提高安全
	cookie:{ maxAge:20 *  60 * 1000}, //毫秒为单位
	resave:true, //如果来了一个新的请求，不管原来在不在，重新存储一个
	saveUninitialized:true //存储一些未初始化的session
}));