JS-MongoDB简单实现数据的增删改查

news/2024/11/9 21:10:34 
// model/index.js
// 2-(1)导入mongoose
const mongoose = require('mongoose')
// 2-(2)数据库连接 27017是mongodb数据库的默认端口
mongoose
  .connect('mongodb://localhost/demo', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log('数据库连接成功'))
  .catch(() => console.log('数据库连接失败'))

// model/user.js
const mongoose = require('mongoose')
// 2-(3)创建用户集合规则
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],
})
// 2-(4)创建用户集合,返回集合构造函数
const User = mongoose.model('User', UserSchema)
module.exports = User;

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

// 1-(1)搭建网站服务器
const http = require('http')
// 5-(3)导入querystring,将字符串转换为对象形式(querystring.parse())
const querystring = require('querystring')

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

// 3-(2)导入url对地址进行处理
const url = require('url')
// 1-(2)创建服务器
const app = http.createServer()
// 1-(4)为服务器对象添加请求事件
app.on('request', async (req, res) => {
  // 3-(1)获取请求方式
  const method = req.method
  // 3-(3)获取请求地址 6-(2)设置query接受传递的参数
  const {
    pathname,
    query
  } = url.parse(req.url, true)
  // 3-(4)对请求方式进行判断
  if (method == 'GET') {
    // 3-(5)呈现用户列表页面
    if (pathname == '/list') {
      // 通过异步请求拿到users的数据
      let users = await User.find()
      // console.log(users)
      // list 里面存放的是表格的呈现形式
      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 hobbies = ['eating', 'cooking', 'singing', 'dancing', 'writing', 'running']
      //5-(1) 呈现添加用户页面
      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>
      `;
      hobbies.forEach(item => {
        add += `
        <label class="checkbox-inline">
		    	  <input type="checkbox" value="${item}" name="hobbies"> ${item}
		    	</label>
        `
      })
      add += `
      </div>
		  </div>
		  <button type="submit" class="btn btn-primary">添加用户</button>
		</form>
	</div>
</body>
</html>
      `
      res.end(add)
    } else if (pathname == '/modify') {
      // 6-(4)声明一个所有爱好都在的数组
      let hobbies = ['eating', 'cooking', 'singing', 'dancing', 'writing', 'running']
      // 6-(3)获取传递的id信息,find返回的是一个数组，findOne返回一个对象
      let user = await User.findOne({
        _id: query.id
      })
      console.log(user)
      // 6-(1)呈现修改用户的界面
      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"  name="hobbies" checked> ${item}
         </label>
           `
        } else {
          modify += `
          <label class="checkbox-inline">
          <input type="checkbox"  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') {
    //5-(2) 用户添加功能
    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()
      })
    }
    // 6-(2)用户修改功能
    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()
      })
    }
  }
})
// 1-(3)监听端口
app.listen(3000)

http://www.niftyadmin.cn/n/3388328.html

相关文章

这是什么情况

这是什么情况

阅读更多...
okhttputils几种传参方式

okhttputils几种传参方式

post&#xff0c;将参数连在路径后面传过去 .post ().url("http://im.bboss.pro/app/api/RedSettings?"para) post&#xff0c;将参数在请求体zhizhong .poststring().url().content()
阅读更多...
ps切图导出html,ps网页切图-如何用PS切图和输出网页

ps切图导出html,ps网页切图-如何用PS切图和输出网页

PS具有切图和输出网页功能&#xff0c;具体操作如下&#xff1a;一、使用工具&#xff1a;PhotoshopCS2二、操作步骤&#xff1a;1、进入PS打开要切图的图片&#xff0c;点击工具箱中的”切片“工具&#xff0c;选择切片工具&#xff0c;如图&#xff1a;2、使用切片工具对图片…
阅读更多...
node模板引擎-stufilesManangement

node模板引擎-stufilesManangement

// stu/app.js // 流程 // 1.建立项目文件夹并生成项目描述文件 // students->npm init -y ->生成package.json文件 // students->创建app.js // 2.创建网站服务器实现客户端和服务器端的通信 // 3.连接数据库并根据需求设计学员信息表 // 4.创建路由并实现页面…
阅读更多...
Could not resolve com.android.support:support-v4:23+

Could not resolve com.android.support:support-v4:23+

这个有很多种情况会造成这个问题 就说一下我解决的方法 将23换成具体的版本&#xff0c;注意&#xff0c;当你的工程里没有添加这个依赖的时候&#xff0c;可能是你的依赖工程里添加了这个&#xff0c;导致了问题 借用图片 https://blog.csdn.net/AureLeon/article/details…
阅读更多...
tornado长连接断开的处理机制

tornado长连接断开的处理机制

使用tornado的异步http调用时候&#xff0c;在继续RequestHandler的子类中&#xff0c;可以重载on_connection_close方法。 此方法在对端连接关闭&#xff0c;或者在socket上读写错误的时候被调用&#xff0c;可以让服务器做一些清理。 调用过程大概这样&#xff1a; 首先说明&…
阅读更多...
flutter 下载地址

flutter 下载地址

https://flutter.dev/docs/development/tools/sdk/releases#windows 右键得到谷歌的地址 因为墙的原因&#xff0c;将前面的域名换成 https://storage.flutter-io.cn
阅读更多...
v20超级计算机,荣耀V20和华为P20Pro哪个好

v20超级计算机,荣耀V20和华为P20Pro哪个好

荣耀V20和华为P20Pro哪个好&#xff1f;很多小伙伴们都还不知道&#xff0c;下面52z飞翔下载小编为大家整理了荣耀V20和华为P20Pro区别对比评测&#xff0c;一起来看看吧。荣耀V20和华为P20Pro哪个好荣耀V20荣耀V20采用6.4英寸魅眼全视屏&#xff0c;首创屏下摄像头技术&#x…
阅读更多...
最新文章

Copyright @ 2022~2023