nodejs实现服务端用户的增删改查（一）

最新推荐文章于 2024-04-05 01:34:19 发布
最新推荐文章于 2024-04-05 01:34:19 发布
阅读量1.1k 收藏 7
点赞数 4
分类专栏： 前端 文章标签： 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43534980/article/details/123974797
版权 
// 搭建网站服务器，实现客户端与服务器端的通信
// 连接数据库，创建用户集合，向集合中插入文档
// 当用户访问/list时，将所有用户信息查询出来
// 	实现路由功能
// 	呈现用户列表页面
// 	从数据库中查询用户信息 将用户信息展示在列表中
// 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
// 当用户访问/add时，呈现表单页面，并实现添加用户信息功能
// 当用户访问/modify时，呈现修改页面，并实现修改用户信息功能
// 	修改用户信息分为两大步骤
// 		1.增加页面路由 呈现页面
// 			1.在点击修改按钮的时候 将用户ID传递到当前页面
// 			2.从数据库中查询当前用户信息 将用户信息展示到页面中
// 		2.实现用户修改功能
// 			1.指定表单的提交地址以及请求方式
// 			2.接受客户端传递过来的修改信息 找到用户 将用户信息更改为最新的
// 当用户访问/delete时，实现用户删除功能

const http = require('http');

const url = require('url');
const querystring = require('querystring');

require('./model/index.js');
const User = require('./model/user');



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

// 为服务器对象添加请求事件
app.on('request', async (req, res) => {
	// 请求方式
	const method = req.method;
	// 请求地址
	const { pathname, query } = url.parse(req.url, true);

	if (method == 'GET') {
		// 呈现用户列表页面
		if (pathname == '/list') {
			// 查询用户信息
			let users = await User.find();
			// 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>
			`;

			// 对数据进行循环操作
			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') {
			// 呈现添加用户表单页面
			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') {
			let user = await User.findOne({_id: query.id});
			let hobbies = ['足球', '篮球', '橄榄球', '敲代码', '抽烟', '喝酒', '烫头', '吃饭', '睡觉', '打豆豆']
			console.log(user)
			// 呈现修改用户表单页面
			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>
			`;
			res.end(modify)
		}else if (pathname == '/remove') {
			// 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 = '';
			// 接受post参数
			req.on('data', param => {
				formData += param;
			})
			// post参数接受完毕
			req.on('end', async () => {
				let user = querystring.parse(formData)
				// 将用户提交的信息添加到数据库中
				await User.create(user);
				// 301代表重定向
				// location 跳转地址
				res.writeHead(301, {
					Location: '/list'
				});
				res.end();
			})
		}else if (pathname == '/modify') {
			// 接受用户提交的信息
			let formData = '';
			// 接受post参数
			req.on('data', param => {
				formData += param;
			})
			// post参数接受完毕
			req.on('end', async () => {
				let user = querystring.parse(formData)
				// 将用户提交的信息添加到数据库中
				await User.updateOne({_id: query.id}, user);
				// 301代表重定向
				// location 跳转地址
				res.writeHead(301, {
					Location: '/list'
				});
				res.end();
			})
		}
	}

});
// 监听端口
app.listen(3000);

那个雨季
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
node.js+express+express-art-template(模板引擎)--实现对本地json简单的--增删改查操作
ZH
04-16 628
效果如上图 入口文件app.js（运行nodemon app.js) // var template = require('art-template') // var fs = require('fs') var express = require('express'); var router = require('./router') // var cors = require("cors")...
nodejs操作mongodb的增删改查功能实例
10-19
主要介绍了nodejs操作mongodb的增删改查功能,简单分析了mongodb模块的安装并结合实例形式分析了nodejs操作mongodb数据库进行增删改查的相关实现技巧,需要的朋友可以参考下
node开发后台服务（登录注册增删改查）
qq_44741577的博客
03-06 1057
在模块中，新增 更新用户基本信息 的路由// 更新用户的基本信息在模块中，新增 更新用户基本信息 的路由// 更新用户信息的处理函数在模块中，新增 重置密码 的路由// 重置密码的路由在模块中，定义并向外共享 重置密码 的路由处理函数// 重置密码的处理函数在模块中，新增 更新用户头像的路由// 更新用户头像在模块中，定义并向外共享 更新用户头像 的路由处理函数// 更新用户头像在模块中，添加 新增文章分类 的路由// 新增文章分类的列表数据在。
Node连接MySQL数据库进行基本的增删改查操作（一看就会
最新发布
2401_83946284的博客
04-05 332
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
原生JS实现信息的增删改查
Zhang_wang_yun的博客
04-01 1838
原生JS实现信息的增删改查
nodejs参数的接收（post和get）
影子
08-29 2047
get提交和接收： routerhtml.js var http=require('http'); var url=require('url'); var router=require('../module/tuwen.js'); http.createServer(function(request,response){ if(request.url !== '/favicon.ico'){//清除第二次访问 console.log('访问'); var
nodejs 开发网页（express框架）
Young_Gao的博客
11-16 3097
原文链接：https://www.cnblogs.com/zhongweiv/p/nodejs_express.html Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架，它基于Node.js原有进行了很多Web开发所需的功能封装... 　　http://expressjs.com/ 　　https://www.npmjs.org/package/express...
（二）Nodejs实现与数据库相连，完成增删改查和信息录入
weixin_56110008的博客
12-28 2016
nodejs：设计并实现班级同学录数据库和信息查询模块，数据库中保存学生学号、姓名、班级、性别、兴趣爱好、电话、电子邮件、QQ号等信息，能够根据按姓名、按班级、按姓名和班级三种方式查询学生信息。设计并实现班级同学录数据库和信息录入模块，能够将学生学号、姓名、班级、性别、兴趣爱好、电话、电子邮件、QQ号等信息录入数据库。
nodeJs链接Mysql做增删改查的简单操作
10-20
本篇文章主要介绍了nodeJs链接Mysql做增删改查的简单操作，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nodejs+express实现增删改查
08-14
使用nodejs+express操作文件，是数据持久化，实现数据的增删改查操作！
Nodejs连接mysql并实现增、删、改、查操作的方法详解
10-18
主要介绍了Nodejs连接mysql并实现增、删、改、查操作的方法,结合实例形式详细分析了nodejs针对mysql数据库的的连接、mysql数据库的创建及nodejs针对mysql增删改查等相关操作具体实现技巧,需要的朋友可以参考下
nodejs操作mysql实现增删改查的实例
01-02
首先需要安装mysql模块：npm install mysql –save...nodejs操作mysql实现增删改查 . 标签： nodejsjavascript实例数据库mysql 2017-05-19 18:39 98人阅读 评论(0) 收藏 举报 .本文章已收录于： 分类： javascript（31
nodeJS连接数据库并进行增删改查等操作
飞翔的小白
05-26 518
1、创建一个空的文件夹执行命令 npm init 2、创建一个app.js文件 const express = require('express') const app = express() // 实例化express对象 const mysql = require('mysql') // 创建连接 const db = mysql.createConnection({ host: 'localhost', user: 'root', password: '1.
node.js连接数据库实现注册登录拼接添加到页面 （增删改查）
weixin_58020179的博客
07-15 2988
目录 注册前端页面 登录页面 登录进去的首页面 Node.js内容 注册前端页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <script src="js源文件/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script
node.js搭建简易Web服务器
Geek_ting的博客
07-24 2440
node.js搭建简易Web服务器 node.js简介 Node.js 是一个基于V8引擎的JavaScript 运行环境。 V8 是为Google Chrome 提供支持的 JavaScript 引擎。 当使用 Chrome 进行浏览时，它负责处理并执行 JavaScript。 传统意义上javaScript只能在浏览器运行，因为浏览器内核主要由两部分组成：渲染引擎和javaScript引擎，前者负责HTML+CSS的渲染，后者则负责处理并执行javaScript代码。 简单来说，node.js为广大前
js中关于数据的增删改查
Ruiqi8的博客
12-12 400
数组的push方法 split方法 map方法 foeach方法 concat方法deleate方法
node.js实现一个新闻列表页面的新增和查看
sleepwalker_1992的专栏
10-22 2497
1、设计路由 当用户请求 / 或 /index 时，显示新闻列表 - get请求 当用户请求 /detail 时，显示新闻详情 - get请求 当用户请求 /submit 时，显示添加新闻页面 - get请求 当用户请求 /add 时，将用户提交的新闻保存到 data.json 文件中 - get请求 当用户请求 /add 时，将用户提交的新闻保存到 data.json 文件中 - po...
nodejs 点击按钮更换状态
yzwdzkn的博客
08-23 1559
1.controller 里的方法 /** * 修改用户状态 */ async HorselightStatus() { try { const { id, status } = this.ctx.request.body; const user = await this.ctx.service.horselight.findById(id); const url ...
使用Node.js进行Web开发（一）
huangxunlove的博客
10-21 1608
在这篇开始，我们学习基于express框架开发一个微博网站。首先我们了解Node.js是基于MVC(模型-视图-控制器)的设计模式。 模型是对象及其数据结构的实现，通常包含数据库操作； 视图表示用户界面，在网站中通常就是HTML的组织架构； 控制器用户处理用户请求和数据流、复杂模型，将输出传递给视图。 步骤 1、 安装express nom install -g express 如果出现错误请看express无法识别 2、建立项目 express -t ejs microblog 之后发现当前目录下
nodejs写一个增删改查
05-24
好的，以下是一个基本的增删改查的示例代码： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // 假设我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值