案例：用户信息增删改查

最新推荐文章于 2023-01-27 19:50:50 发布
最新推荐文章于 2023-01-27 19:50:50 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： MongoDB数据库 Node.js 项目 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zmongo/article/details/105142933
版权
Node.js 同时被 3 个专栏收录
31 篇文章 1 订阅
订阅专栏
项目
18 篇文章 1 订阅
订阅专栏
MongoDB数据库
10 篇文章 0 订阅
订阅专栏

在这里插入图片描述
案例截图，代码在资源里
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
向数据库中导入数据
在这里插入图片描述

//搭建网站服务器，实现客户端与服务器端的通信
const http = require('http');
//连接数据库，创建用户集合，向集合中插入文档

const mongoose = require('mongoose');
const url = require('url');
//对参数的格式进行转换
const querystring = require('querystring');

数据库链接 27017是mongodb数据库的默认端口
mongoose.connect('mongodb://localhost/playground', {useNewUrlParser: true, useUnifiedTopology: true})
	.then(() => console.log('数据库连接成功'))
	.catch(() => console.log('数据库连接失败'))

创建用户集合规则
const UserSchema = new mongoose.Schema({
	name: {
		type: String,
		required: true,
		minlength: 2,
		maxlength: 20
	},
	age: {
		type: Number,
		min: 18, 
		max: 80
	},
	password: String,
	email: String,
	hobbies: [String]
})

//创建集合 返回集合构造函数
const User = mongoose.model('User', UserSchema);


使用集合规则创建集合

创建服务器
const app = http.createServer();

为服务器对象添加请求事件
///
//当用户访问/list时，将所有用户信息查询出来
//(实现路由功能，呈现用户列表页面，从数据库中查询用户信息并将用户信息展示在列表中)
//路由功能：先获取用户的请求方式和请求地址，并对其进行判断。


//将用户信息和表格HTML进行拼接并将拼接结果相应回客户端
app.on('request', async (req, res) => {
	//请求方式
	const method = req.method;
	//对象解构，将parse获得对象下面的pathname属性获取出来
	//query保存了get请求参数，但是默认是字符窜类型，但是将parse的第二个变量改为true就会变为对象类型
	//这个对象里面保存了id属性
	const {pathname, query} = url.parse(req.url, true);

	if (method == 'GET') {
		// GET数据的请求或者页面的呈递
		// 呈现用户列表页面
		if (pathname == '/list') {
			//查询用户信息
			let users = await User.find();
			// console.log(users);
			// html字符串
			let list = `<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<h6>
			<a href="/add" class="btn btn-primary">添加用户</a>
		</h6>
		<table class="table table-striped table-bordered">
			<tr>
				<td>用户名</td>
				<td>年龄</td>
				<td>爱好</td>
				<td>邮箱</td>
				<td>操作</td>
			</tr>
		`;
		//对数组进行循环，用forEach
		users.forEach(item => {
			list +=`
<tr>
				<td>${item.name}</td>
				<td>${item.age}</td>
				<td>
				
			`;
			item.hobbies.forEach(item => {
				list += `<span>${item}</span>`
			})

			list += `
</td>
				<td>${item.email}</td>
				<td>
					<a href="/remove?id=${item._id}" class="btn btn-danger btn-xs">删除</a>
					<a href="/modify?id=${item._id}" class="btn btn-success btn-xs">修改</a>
				</td>
			</tr>
			`;
		})

		list += `
	</table>
	</div>
</body>
</html>
		`;
			res.end(list);
		} else if (pathname == '/add') {
			//将用户访问/add时，呈现表单页面，并实现添加用户信息功能
			let add = `
			<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<h3>添加用户</h3>
		<form method="post" action="/add">
		  <div class="form-group">
		    <label>用户名</label>
		    <input name="name" type="text" class="form-control" placeholder="请填写用户名">
		  </div>
		  <div class="form-group">
		    <label>密码</label>
		    <input name="password" type="password" class="form-control" placeholder="请输入密码">
		  </div>
		  <div class="form-group">
		    <label>年龄</label>
		    <input name="age" type="text" class="form-control" placeholder="请填写邮箱">
		  </div>
		  <div class="form-group">
		    <label>邮箱</label>
		    <input name="email" type="email" class="form-control" placeholder="请填写邮箱">
		  </div>
		  <div class="form-group">
		    <label>请选择爱好</label>
		    <div>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="足球" name="hobbies"> 足球
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="篮球" name="hobbies"> 篮球
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="橄榄球" name="hobbies"> 橄榄球
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="敲代码" name="hobbies"> 敲代码
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="抽烟" name="hobbies"> 抽烟
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="喝酒" name="hobbies"> 喝酒
		    	</label>
		    	<label class="checkbox-inline">
		    	  <input type="checkbox" value="烫头" name="hobbies"> 烫头
		    	</label>
		    </div>
		  </div>
		  <button type="submit" class="btn btn-primary">添加用户</button>
		</form>
	</div>
</body>
</html>`;
res.end(add)
		} else if (pathname == '/modify') {
			//当用户访问/modify时，呈现修改页面，并实现修改用户信息功能
增加页面路由 呈现页面
///     1.在点击修改按钮的时候，将用户ID传递到当前页面
///     2.从数据库中查询当前用户信息 将用户信息展示到页面中
///实现用户修改功能
///		1.指定表单的提交地址以及提交方式
///		2.接收客户端传递过来的修改信息 找到用户 将用户信息更改为最新的
			let user = await User.findOne({_id: query.id});
			let hobbies = ['足球','篮球','橄榄球','敲代码','抽烟','喝酒','烫头'];
			// console.log(user)
			//将用户访问/add时，呈现修改用户表单页面，并实现添加用户信息功能
			let modify = `
			<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head> 
<body>
	<div class="container">
		<h3>修改用户</h3>
		<form method="post" action="/modify?id=${user._id}">
		  <div class="form-group">
		    <label>用户名</label>
		    <input value="${user.name}" name="name" type="text" class="form-control" placeholder="请填写用户名">
		  </div>
		  <div class="form-group">
		    <label>密码</label>
		    <input value="${user.password}" name="password" type="password" class="form-control" placeholder="请输入密码">
		  </div>
		  <div class="form-group">
		    <label>年龄</label>
		    <input value="${user.age}" name="age" type="text" class="form-control" placeholder="请填写邮箱">
		  </div>
		  <div class="form-group">
		    <label>邮箱</label>
		    <input value="${user.email}" name="email" type="email" class="form-control" placeholder="请填写邮箱">
		  </div>
		  <div class="form-group">
		    <label>请选择爱好</label>
		    <div>
		    	
		    `;

		    hobbies.forEach(item => {
		    	//判断当前循环项是否在用户的爱好数据组里。
		    	let isHobby = user.hobbies.includes(item);
		    	if (isHobby) {
		    		modify += `<label class="checkbox-inline">
		    	  <input type="checkbox" value="${item}" name="hobbies" checked> ${item}
		    	</label>`;
		    	} else {
		    		modify += `<label class="checkbox-inline">
		    	  <input type="checkbox" value="${item}" name="hobbies"> ${item}
		    	</label>`;
		    	}
		    })

		modify += `</div>
		  </div>
		  <button type="submit" class="btn btn-primary">修改用户</button>
			</form>
			</div>
		</body>
		</html>`;
//把modify这个变量响应给客户端
res.end(modify)
		} else if (pathname == '/remove') {
			//当用户访问/delete时，实现用户删除功能
			// res.end(query.id)
			await User.findOneAndDelete({_id: query.id});
			res.writeHead(301, {
				Location: '/list'
			});
			res.end();
		}
	} else if (method == 'POST') {
		// 有一些功能
		if (pathname == '/add') {
			//接收用户提交的信息
			let formData = '';
			//接受form参数
			req.on('data', param => {
				formData += param;
			})
			//post参数接收完毕
			req.on('end', async () => {
				let user = querystring.parse(formData);
				//将信息返回到数据库中
				//create方法中的第一个变量是对象类型
				await User.create(user);
				//writeHead 通过响应头的方式跳转到其他页面
				//301代表重定向，实际上就是跳转到其他页面的意思
				//location 跳转地址
				res.writeHead(301, {
					Location: '/list'
				});
				res.end();
			})
			
		} else if (pathname == '/modify') {
			//接收用户提交的信息
			let formData = '';
			//接受form参数
			req.on('data', param => {
				formData += param;
			})
			//post参数接收完毕
			req.on('end', async () => {
				let user = querystring.parse(formData);
				//将信息返回到数据库中
				//create方法中的第一个变量是对象类型
				await User.updateOne({_id: query.id},user);
				//writeHead 通过响应头的方式跳转到其他页面
				//301代表重定向，实际上就是跳转到其他页面的意思
				//location 跳转地址
				res.writeHead(301, {
					Location: '/list'
				});
				res.end();
			})
		}
	}
});
监听端口
app.listen(3000);

以上为完整的js代码

一麻袋小猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在线购物系统 实验七 顺序图
just_a_new_life
07-03 3万+
在线购物系统一、顺序图1、 游客注册顺序图2、 用户登录顺序图3、 用户修改个人信息顺序图4、 顾客搜索商品顺序图5、 顾客查询订单顺序图6、 顾客维护购物车顺序图7、 顾客购买商品顺序图8、 顾客评价商品顺序图9、 管理员管理商品顺序图10、客服回复咨询顺序图11、管理订单顺序图12、管理评...
UML笔记
09-28
UML的十种图(类图,对象图,用例图,包图,协作图,时序图等)pdf格式
用户完善信息(时序图)
码农新锐
11-23 8816
  今天在工作中画了一个时序图，一直以来都认为写代码前一定先要想明白业务逻辑，再去写代码，画完时序图之后，我觉得先去画时序图，再去写代码会更加清晰。下面的图是我画的一个完善用户信息的时序图，还请大家多多指教。   这个图使用在线工具画的。 https://www.processon.com/  ...
UML 顺序图(时序图) sequence diagram
旧路
03-15 1万+
UML顺序图 是强调消息时间顺序的交互图。时序图描述类系统中类和类之间的交互，它将这些交互建模成消息交换。时序图是一个模型，用于描述对象间如何随着时间在某些行为方面进行协作。(强调的是消息的时间顺序)
动态顺序表——简单的增删查改
最新发布
weixin_72868952的博客
01-27 684
动态顺序表的实现之简单的增删查改。
【数据结构入门】动图解顺序表，学会顺序表的增删查改，这一篇就够了
jhao的博客
08-19 1518
线性表是最基本、最简单、也是最常用的一种数据结构。线性表（linear list）是数据结构的一种，一个线性表是n个具有相同特性的数据元素的有限序列。 线性表中数据元素之间的关系是一对一的关系，即除了第一个和最后一个数据元素之外，其它数据元素都是首尾相接的（注意，这句话只适用大部分线性表，而不是全部。比如，循环链表逻辑层次上也是一种线性表（存储层次上属于链式存储，但是把最后一个数据元素的尾指针指向了首位结点）
学生信息增删改查微信小程序案例(springboot后台).rar
04-22
该压缩包文件“学生信息增删改查微信小程序案例(springboot后台).rar”提供了一个完整的教学示例，用于展示如何使用SpringBoot技术构建微信小程序的后台管理系统，以实现学生信息的管理功能，包括添加、删除、修改和...
MongoDB增删改查操作案例-用户信息增删改查.zip
07-18
在本案例"MongoDB增删改查操作案例-用户信息增删改查.zip"中，我们将探讨如何使用MongoDB进行基本的数据操作，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）用户信息。 1. 添加操作（Add）： 在...
SpringBoot 增删改查实例Demo
10-22
在本实例中，我们将深入探讨如何使用SpringBoot框架进行数据库操作，主要集中在增删改查（CRUD）功能。SpringBoot以其简洁的配置和强大的功能，成为Java开发中广泛采用的框架，尤其在构建微服务时更为突出。下面，...
play框架的简单增删改查
12-05
本项目是针对初学者设计的一个实战教程，主要目标是展示如何在Eclipse开发环境中使用Play框架与MySQL数据库进行基本的增删改查操作。 1. **Play框架介绍** - 架构：Play采用反应式编程模型，强调异步I/O和非阻塞...
C# .net mvc 三层架构 增删改查
09-29
本项目涉及的核心知识点是“三层架构”（也称为N层架构）以及基于此架构实现的“增删改查”（CRUD）操作。三层架构是一种常见的软件设计模式，它将业务逻辑、数据访问和用户界面分离，以提高代码的可复用性和可维护...
UML之 时序图
11-01 3128
本文和大家重点讨论一下UML时序图，UML时序图中包括的建模元素主要有：对象（Actor）、生命线（Lifeline）、控制焦点（Focusofcontrol）、消息（Message）等等。 一、UML时序图简介（Briefintroduction） 时序图（SequenceDiagram）是显示对象之间交互的图，这些对象是按时间顺序排列的。顺序图中显示的是参与交互的对象及其对象之间消息交互的
03.MyBatis 源码分析之增删改查
masteryourself
10-31 690
1. Test 2. MapperProxy org.apache.ibatis.binding.MapperProxy 2.1 invoke(Object proxy, Method method, Object[] args) 如果是 Object 中定义的方法，直接执行。如 toString()，hashCode() 等 2.2 cachedMapperM...
数据增删改查之三层架构（理解三层续）
http://blog.csdn.net/lovesummerforever
01-20 1万+
首先是画的图，感觉把图画完了，工程就完成了一大半，前提是画的思路是对的。还是在理解三层。 下面是画的关于数据的增删改查这个小例子的包图、类图和时序图。   包图。   类图。 时序图。 用户注册。 用户删除。 用户查询，一个是查选全部用户，一个是查询一个用户对象。 用户修改。也就是查询、删除和增加。 用户注册的代码，如下所示： 实体层代码。
UML图之五——时序图
热门推荐
王勇霞 信息技术提高班九期
12-03 7万+
一、什么是时序图 序列图表示了系统在参与者互动执行某一个用例期间，系统内部的一群对象的协作情况。一个用例就对应一个时序图。序列图是对系统动态行为进行描述。用于用例分析和设计阶段。   二、对比 1、序列图和协作图 序列图跟协作图相似，两种图传递的意思是一样的。不同的是序列图强调的是消息的传递顺序，它将交互关系表示为一个二维图。纵向是时间轴，横轴是对象，对象的生命周期沿竖线向下延伸。而协作
记录关于 async + await 的使用
weixin_40758850的博客
04-22 217
新的改变 关于 async + await 的使用 一般是调用异步方法的时候加一个await，然后就能得到异步方法的返回值： const data = await getStatusOfUser(); await是把异步方法转成同步方法，所以调用的这句代码的行为（const data = await getStatusOfUser();）就变成异步的了，需要给外层函数加上async关键字 const func = async () => { const data = await ge
OOAD-实验四-顺序图
var Super-Yu: Coder
05-01 730
实验四: 顺序图或通信图 实验一： https://blog.csdn.net/m0_37281837/article/details/89735184 实验二： https://blog.csdn.net/m0_37281837/article/details/89735189 实验三：https://blog.csdn.net/m0_37281837/article/det...
机房收费系统之添加删除用户
陌上人如玉，公子世无双
12-19 476
看起来很难，但是今天刚看到一本书，要告诉自己，自己可以。而且真正学起来，它并不难，要和自己进行对话。所以我很淡定的告诉我自己，so easy。迷之自信有时候也是个好事~~ 一，首先流程图： 二，主页面的设计： 选择combo的内容时，将之对应的信息显示出来，但这里combo是不能手动输入的。 ①使combo不可手动输入：keypress事件
UML交互图（时序图，协作图）
努力发光呀
10-02 4332
我们用类图来描述系统的静态结构，描述类之间的静态联系，但是这些类，以及对象之间是怎么进行消息传递的呢？消息传递的先后顺序是什么呢？以及类之间传递什么样的消息才可以让系统正常运行？这些动态的行为就需要我们的时序图和协作图了来描述了。下面就做一下总结。 时序图： 时序图是按照时间顺序来描述系统元素之间的交互图。 组成元素： 对象（Object） 生命线（Lifeline） 激活（A
SpringBoot与Vue-admin-template：实现跨域增删改查实战
本文档主要介绍了如何在SpringBoot与Vue-admin-template的环境中实现一个简单的增删改查功能，并处理前端与后端之间的跨域访问问题。首先，作者提到这是一个基于Vue-admin-template的后台管理模板案例，适合有一定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值