让我们在网页中实现数据库的增删改查~

在网页中实现数据库的增删改查

主要思路

搭建网站服务器，实现客户端与服务器端的通信
连接数据库, 创建用户集合, 向集合中插入文档
当用户访问 /list时,将所有用户信息查询出来
1.实现路由功能
1.呈现用户列表页面
1. 再点击修改按钮的时将用户ID传递到当前页面
2. 从数据库中查询当前用户信息将用户信息展示到页面中
2.从数据库中查询用户信息，将用户信息展示在列表中
1 .指定表单的提交地址以及请求方式
2. 接受客户端传递过来的修改信息找到用户将用户信息更改为最新的
将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
当用户访问/add时，呈现表单页面，并实现添加用户信息功能
当用户访问/modify时，呈现修改页面，并实现修改用户信息功能
当用户访问/delete时，实现用户删除功能

首先让我们链接自己的数据库 index.js

// 引入MongoDB
const mongoose = require('mongoose')
// 如果后面插入数据 发现没有该数据库 会自动创建
mongoose.connect('mongodb://localhost/playground', {useUnifiedTopology: true,useNewUrlParser: true}).then(() => console.log("数据库连接成功")).catch(() => console.log(err, '数据库连接失败'))

对数据库设定一些用户规则 user.js

// 即便是两个文件中都引入了mongoose但不会造成性能上的浪费const mongoose = require('mongoose')
// 创建用户集合规则
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)
// 将User开放出去 使其他文件 在引入 user.js之后 就可以使用User构造函数了
module.exports = User;

做一个添加数据的静态网页 add.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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 value="" name="name" type="text" class="form-control" placeholder="请填写用户名"></div><div class="form-group"><label>密码</label><input value="" 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><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>

做一个主页面 list.html


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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.html" 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><tr><td>张三</td><td>20</td><td><span>抽烟</span><span>喝酒</span><span>吃饭</span></td><td>987654@qq.com</td><td><a href="" class="btn btn-danger btn-xs">删除</a><a href="" class="btn btn-success btn-xs">修改</a></td></tr></table></div>
</body>
</html>

最最最主要的js代码


const http = require('http')
// 先从当前目录查找 其次从上一层目录查找
const url = require('url')
const querystring = require('querystring')
// 创建服务器
const app = http.createServer()require('./model/index.js')
const User = require('./model/user')// 为服务器对象追加事件
app.on('request', async (req, res) => {// 获取请求方式const method = req.method// 请求地址const {// query 保存了id 默认字符串类型的 想要让其变为数组类型就 加一个truepathname,query} = url.parse(req.url, true)if (method === 'GET') {// 呈现用户信息if (pathname == '/list') {// html字符串let users = await User.find();console.log(users)let list = `<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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 => {console.log(item);list += `<tr><td>${item.name}</td><td>${item.age}</td><td>`item.hobbies.forEach(item => {list += `<span>${item}</span>`;list += `<br>`;})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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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 value="" name="name" type="text" class="form-control" placeholder="请填写用户名"></div><div class="form-group"><label>密码</label><input value="" 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><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") {// find方法查询时 返回的都是数组 所以这里用findOne 返回的就是对象了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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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") {await User.findOneAndDelete({_id: query.id})res.writeHead(301, {Location: '/list'})res.end();}} else if (method === 'POST') {// 用户添加功能if (pathname == '/add') {// 用户添加功能let formData = '';req.on('data', param => {// 接受post参数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 = '';req.on('data', param => {// 接受post参数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-JSP中实现数据库的增删改查的操作
动态网站作业4-JSP中实现数据库的增删改查的操作用Statement向数据库中添加元素 1.创建JavaBean–UserBean package com.media.bean;public cl ...
java对数据库的增删改查_在java中对数据库进行增删改查
代码区域: package com.oracle.jdbc.demo1; import java.sql.Connection; import java.sql.DriverManager; impo ...
Android中SQLlite数据库的增删改查
MyHelper页窜见数据库和方法 public class MyHelper extends SQLiteOpenHelper {public MyHelper(Context context) { ...
在命令框(cmd)中对数据库进行“增删改查”
第一步:首先我们建立数据库dqs,并展示数据库. 输入指令:create database dqs; show databases; 第二步:进入dqs数据表中.输入指令:use dqs; 第三步:查 ...
Flask中实现数据库的增删改查
from flask_sqlalchemy import SQLAlchemy from flask import Flask,render_template,request,redirect app ...
Android SQL语句实现数据库的增删改查
本文介绍android中的数据库的增删改查复习sql语法: * 增 insert into info (name,phone) values ('wuyudong','111') * 删 delet ...
python数据库的增删改查_Python|实现数据库的增删改查
Python|实现数据库的增删改查 2020-10-05 1 前言最近在学flask网页制作,需要用到数据库相关知识,在经过初步学习后实现了用python来实现数据库的相关操作,即增删改查.2 前提条 ...
欢迎来到Jsp编程课时十二——今天实现的目标是。@1将数据库的数据发送到浏览器。@2利用浏览器实现对数据库的增删改查操作。@3理解MVC三层架构的定义。
完成项目会有以下的效果. JSP第二十课:Mvc+Mysql+Servlect+Jsp实现在浏览器上对数据库的增删改查. MVC全名是Model View Controller, 是 @@1模型(mo ...
c#web窗体实现对数据库的增删改查，学生管理信息系统~vs2010+access2010
@TOC解决方案管理器目录结构 c#web窗体实现对数据库的增删改查,学生管理信息系统~vs2010+access2010 以下是web程序课程后做的期末项目,前端以及页面逻辑结构使用vs搭建,后端服 ...
php修改数据库字段内容,php对数据库的增删改查操作
在我看来数据库是个既复杂又高深莫测的东西,但百分之八十左右的程序员都不需要去精通他,对于我们前端开发来说,只要会数据库的增删改查语句就差不多了.首先我们来说说sql的增删改查语句. 一.增删改查插入 ...