express+mongod实现登录注册(未封装方法)

这是文件目录
新建一个js文件,在Node.js连接MongoDB | 菜鸟教程官网中找到教程。先安装mongoDB,然后创建一个 MongoClient 对象,配置好数据库指定的URL和端口号。

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/【数据库名称】";

再引入解析post的解析器

const bodyParser = require("body-parser")
var urlencodedParser = bodyParser.urlencoded({ extended: false})

导入express

const express=require("express")
const app=express()

访问静态文件

//访问注册页面
app.use('/register',express.static("www/shop/register.html"))

//访问登陆页面,已进入网页就是登录页面
app.use('/',express.static("www/shop/"))

//访问商品列表页面
app.use('/shopmsg',express.static("www/shop/shopmsg.html"))

//访问用户信息列表页面
app.use('/usermsg',express.static("www/shop/usermsg.html"))

用户注册,也就是增加用户信息
在html文件里编写好页面布局

<section>
	<h1>注册</h1>
	<!-- form用来实现表单提交,点击submit自动触发 method提交方式 get post -->
	<form action="http://localhost:8989/register/submit" method="get">
		<input type="text" name="user" placeholder="请输入帐号" /><br><br>
		<input type="password" name="password" placeholder="请输入密码" /><br><br>
		<input type="submit" value="注册" onclick="aa()" />
	</form>
</section>

js文件内容

app.get('/register/submit',(req,resp)=>{
	// 连接数据库
	MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
		if (err) throw err;
		// 选择数据库
		var dbo = db.db("shop");
		var myobj = { user: req.query.user, password: req.query.password };
		// 插入数据
		dbo.collection("user").insertOne(myobj, function(err, res) {
			// 数据插入成功
			if (err) throw err;
			console.log("注册成功");
			db.close();
			//重定向
			resp.redirect('http://localhost:8989/');
			// resp.send(req.query.user+",恭喜你!注册成功")
		});
	});
})

用户登录,先查询数据库中是否有该用户,有的话就重定向到指定页面,就实现了登录
html页面布局

<section>
	<h1>登录</h1>
	<!-- form用来实现表单提交,点击submit自动触发 method提交方式 get post -->
	<form action="http://localhost:8989/usermsg" method="post">
		<input type="text" name="user" placeholder="请输入帐号" /><br><br>
		<input type="password" name="password" placeholder="请输入密码" /><br><br>
		<input type="submit" value="登录" onclick="aa()" /><br><br>
	</form>
	<a href="/register">注册</a>
</section>

js文件

app.post('/usermsg',urlencodedParser,(req,resp)=>{
	// 连接数据文件
	MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
		if (err) throw err;
		var dbo = db.db("shop");
		 var whereStr = { user: req.body.user, password: req.body.password };  // 查询条件
		dbo.collection("user").find(whereStr).toArray(function(err, result) {
			if (err) throw err;
			console.log(result)
			console.log(result.length)
			if(result.length==1){
				console.log("登录成功");
				db.close();
				//重定向
				resp.redirect('http://localhost:8989/usermsg');
				// resp.send(req.body.user+",欢迎回来!")
			}else{
				console.log("登录失败");
				db.close();
				resp.send("用户不存在或密码错误")
			}
		});
	});
})

登录后重定向的页面显示所有的用户信息
html页面布局

<section>
	<h1>用户信息</h1>
	<table>
		<thead class="head">
			<td>姓名</td>
			<td>密码</td>
		</thead>
	</table>
	
	<br><br>
	<a href="/shopmsg">商品列表</a>
</section>

js文件

app.get('/userList',urlencodedParser,(req,resp)=>{
	MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
		if (err) throw err;
		var dbo = db.db("shop");
		dbo.collection("user").find({}).toArray(function(err, result) { // 返回集合中所有数据
			if (err) throw err;
			console.log(result);
			db.close();
			// resp.json(result);
			resp.send(result)
		});
	});
})

html文件要获取数据库查询的结果

<script>
	$.ajax({
		url:'http://localhost:8989/userList',
		type:'GET',
		dataType:'json',
		success:function(resp){
			console.log(resp)
			resp.forEach((item)=>{
				let tag=$('<tr></tr>')
				tag.html(`<td>${item.user}</td>
						<td>${item.password}</td>`)
				$('table').append(tag)
			})
		}
	})
</script>

以上就是用express+mongodb实现登录注册的方法
首先要把该定义的、该导入的模块都先搞定
然后更加思路一一将登录注册功能实现

  • 在网址中输入http://localhost:8989/就会跳转到登录页面
    登录页面
  • 有帐号的话,就登录。登录成功后跳转到重定向页面
    用户信息页面
  • 没有帐号的话,就点击注册
    注册页面
    注册成功就会跳转到登录页面

连接数据库的,进行增加、查询功能的代码在官网都有
Node.js连接MongoDB | 菜鸟教程

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值