让我们在⽹页中实现数据库的增删改查~⽬录
在⽹页中实现数据库的增删改查
主要思路
搭建⽹站服务器，实现客户端与服务器端的通信
连接数据库, 创建⽤户集合, 向集合中插⼊⽂档
当⽤户访问 /list时，将所有⽤户信息查询出来
1.实现路由功能
1.呈现⽤户列表页⾯
1. 再点击修改按钮的时 将⽤户ID传递到当前页⾯
2. 从数据库中查询当前⽤户信息 将⽤户信息展⽰到页⾯中
2.从数据库中查询⽤户信息，将⽤户信息展⽰在列表中
1 .指定表单的提交地址以及请求⽅式
2. 接受客户端传递过来的修改信息到⽤户将⽤户信息更改为最新的
将⽤户信息和表格HTML进⾏拼接并将拼接结果响应回客户端
当⽤户访问/add时，呈现表单页⾯，并实现添加⽤户信息功能
当⽤户访问/modify时，呈现修改页⾯，并实现修改⽤户信息功能
当⽤户访问/delete时，实现⽤户删除功能
⾸先让我们链接⾃⼰的数据库 index.js
// 引⼊MongoDB
const mongoose =require('mongoose')
// 如果后⾯插⼊数据发现没有该数据库会⾃动创建
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 = del('User', userSchema)
// 将User开放出去使其他⽂件在引⼊ user.js之后就可以使⽤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="cdn.jsdelivr/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="cdn.jsdelivr/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</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 = ateServer()
require('./model/index.js')
const User =require('./model/user')
// 为服务器对象追加事件
<('request',async(req, res)=>{
// 获取请求⽅式
const method = hod
// 请求地址
const{
// query 保存了id 默认字符串类型的想要让其变为数组类型就加⼀个true
pathname,
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="cdn.jsdelivr/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>${ail}</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>`
}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="cdn.jsdelivr/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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论