• Node.js编程

    Node.js编程

    一、实验目的与要求

    实验任务

    用户信息增删改查

    1. 掌握数据库软件的安装
    2. 了解集合、文档的概念
    3. 掌握使用mongoose创建集合的方法创建集合
    4. 掌握对数据库中的数据进行增删改查操作

    二、实验任务和步骤

    实验1. 用户信息增删改查

    需求说明

    (1)搭建网站服务器，实现客户端与服务器端的通信。

    (2)连接数据库，创建用户集合。

    (3)当用户访问/list时，将所有用户信息查询出来(用户名和年龄)，如图1所示(可以无数据)。

    (4)将用户信息和表格HTML进行拼接并将拼接结果响应回客户端。

    (5)当用户访问/add时，呈现表单页面，并实现添加用户信息功能，如图2所示，添加完以后重定向回/list页面，如图3所示。

    (6)当用户访问/modify时，呈现修改页面，并实现修改用户信息功能，如图4所示，修改完以后重定向回/list页面，如图5所示。

    (7)当用户访问/delete时，实现用户删除功能，如图6所示。

     

     

    图1 用户访问/list初始页面

                                                                  

     

            

    图2 用户访问/add页面

     

    图3 添加用户后重定向回/list页面

     

      图4 用户访问/modify页面

        图5 修改用户信息后重定向回/list页面

    图6 用户信息删除

    实现思路及步骤

    1、搭建网站服务器，实现客户端与服务器端的通信

    2、连接数据库，创建用户集合，向集合中插入文档

    3、当用户访问/list时，将所有用户信息查询出来

    (1)实现路由功能

    (2)呈现用户列表页面

    (3)从数据库中查询用户信息 将用户信息展示在列表中

    4、将用户信息和表格HTML进行拼接并将拼接结果响应回客户端

    5、当用户访问/add时，呈现表单页面，并实现添加用户信息功能

    6、当用户访问/modify时，呈现修改页面，并实现修改用户信息功能

    修改用户信息分为两大步骤

    1. 增加页面路由 呈现页面

    a 在点击修改按钮的时候 将用户ID传递到当前页面

    b从数据库中查询当前用户信息 将用户信息展示到页面中

    1. 实现用户修改功能

    a 指定表单的提交地址以及请求方式

    b 接受客户端传递过来的修改信息 找到用户 将用户信息更改为最新的

    7、当用户访问/delete时，实现用户删除功能

    1. 实验步骤

    1.创建user目录

    2.按照图1所示，建立项目结构。

     

    图1 项目结构

    3.输入npm init -y，初始化项目并生成package.json文件。

    4.下载依赖包，在命令行中输入"npm install mongoose express"下载依赖包，或者使用"yarn add mongoose express"下载依赖包，我采用的是第二种方式。

    5.编写连接MongoDB的帮助类，类似Java中的jdbc连接帮助类。关键代码如下。

    1. //引入mongoose
    2. const mongoose = require('mongoose');
    3. //定义字符串常量
    4. const db_url = "mongodb://localhost:27017/user_db"
    5. //1.连接数据库
    6. mongoose.connect(db_url, { useNewUrlParser: true, useUnifiedTopology: true })
    7. //2.连接成功
    8. mongoose.connection.on('connected', function () {
    9.   console.log('连接成功：', db_url);
    10. })
    11. //3.连接失败
    12. mongoose.connection.on('error', function (err) {
    13.   console.log('连接错误：', err);
    14. })
    15. //4.断开连接
    16. mongoose.connection.on('disconnection', function () {
    17.   console.log('断开连接');
    18. })
    19. module.exports = mongoose;
    20.

    6.创建User.js，创建模型类似JPA中的Entity，关键代码如下。

    1. const mongoose = require('mongoose');
    2.  
    3. //定义UserSchema的Schema
    4. const UserSchema = new mongoose.Schema({
    5.   username: {
    6.     type: String,
    7.     required: true,
    8.  
    9.   },
    10.   age: {
    11.     type: Number,
    12.     required: true,
    13.   }
    14. });
    15. // const UserModel = mongoose.model('UserModel', UserSchema)
    16. module.exports = mongoose.model('User', UserSchema)
    17.  
    18.

    7.创建路由，主要分为list.js展示所有User的信息，add.js添加User信息，modify.js修改User信息（根据_id进行修改），remove.js删除User信息（根据_id进行删除）。四个路由的关键代码如下。

    （1）list.js

    1. //导入依赖包
    2. const router = require("express").Router();
    3. const User = require("../model/User")
    4.  
    5. //获取所有的user
    6. router.get("/list", async (req, res) => {
    7.   try {
    8.     const users = await User.find({})
    9.     //list页面
    10.     var list = `
    11.     <!DOCTYPE html>
    12.     <html>
    13. <head>
    14.   <title>用户管理</title>
    15.   <meta charset="utf-8">
    16.   <meta name="viewport" content="width=device-width, initial-scale=1">
    17.   <!--引入bootstrap5-->
    18.   <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    19.   <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    20. </head>
    21. <body>
    22.  
    23.   <div class="container">
    24.     <div class="container mb-3 mt-3">
    25.     <a href="/add" type="button" class="btn btn-primary" >添加用户</a>
    26.     </div>
    27.     <div class="table-responsive">
    28.       <table class="table table-bordered" id="app">
    29.         <thead>
    30.           <tr align="center">
    31.             <th>用户名</th>
    32.             <th>年龄</th>
    33.             <th>操作</th>
    34.           </tr>
    35.         </thead>
    36.         <tbody>`
    37.     users.forEach(item => {
    38.       list +=
    39.         ` <tr align="center">
    40.           <td>${item.username}</td>
    41.           <td>${item.age}</td>
    42.           <td>         
    43.           <a href="/remove?id=${item._id}" type="button" class="btn btn-danger btn-sm">删除</a>
    44.           <a href="/modify?id=${item._id}" type="button" class="btn btn-success btn-sm">修改</a>
    45.           </td>
    46.         </tr>
    47.         `
    48.     })
    49.     list += `
    50.         </tbody>
    51.       </table>
    52.     </div>
    53.   </div>
    54.  
    55. </body>
    56.  
    57. </html>
    58.     `
    59.     res.end(list)
    60.   }
    61.   catch (err) {
    62.     res.status(500).json(err)
    63.   }
    64. })
    65. //暴露出去
    66. module.exports = router

    （2）modify.js

    1. //导入依赖包
    2. const router = require("express").Router();
    3. const User = require("../model/User")
    4. const express = require("express")
    5.  
    6. // 修改用户信息(根据_id)
    7. router.get("/modify", async (req, res) => {
    8.   try {
    9.     const user = await User.findById(req.query.id)
    10.     let html = `<!DOCTYPE html>
    11.     <html>
    12.     <head>
    13.       <title>修改用户信息</title>
    14.       <meta charset="utf-8">
    15.       <meta name="viewport" content="width=device-width, initial-scale=1">
    16.       <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    17.       <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    18.     
    19.     </head>
    20.     
    21.     <body>
    22.     
    23.       <div class="container mt-3">
    24.         <h2>修改用户</h2>
    25.         <form action="/modify" method="post">
    26.         <input type="text" class="form-control"  name="id" value=${user._id} hidden>
    27.           <div class="mb-3 mt-3">
    28.             <label for="name" class="form-label">用户名</label>
    29.             <input type="text" class="form-control" id="name" placeholder="请输入用户名" name="username" value=${user.username}>
    30.           </div>
    31.           <div class="mb-3">
    32.             <label for="age" class="form-label">年龄</label>
    33.             <input type="text" class="form-control" id="age" placeholder="请输入年龄" name="age" value=${user.age}>
    34.           </div>
    35.     
    36.           <button type="submit" class="btn btn-primary">修改用户</button></button>
    37.         </form>
    38.       </div>
    39.     </body>
    40.     
    41.     </html>`
    42.     res.end(html)
    43.   }
    44.   catch (err) {
    45.     res.status(500).json(err)
    46.   }
    47. })
    48.   ;
    49. // 不添加这句话没法实现
    50. router.use(express.urlencoded({
    51.   extended: true
    52. }))
    53. router.post("/modify", async (req, res) => {
    54.   try {
    55.     console.log("指向")
    56.     console.log(req.body.id)
    57.     const updateUser = new User({
    58.       _id: req.body.id,
    59.       username: req.body.username,
    60.       age: req.body.age,
    61.     })
    62.  
    63.     const oldUser = await User.findById(req.body.id)
    64.  
    65.     await User.updateOne(oldUser, { $set: updateUser })
    66.     // res.status(200).json(user)
    67.     res.writeHead(301, {
    68.       Location: '/list'
    69.     });
    70.     res.end();
    71.  
    72.   }
    73.   catch (err) {
    74.     res.status(500).json(err)
    75.   }
    76. })
    77.  
    78. //暴露出去
    79. module.exports = router

    （3）add.js

    1. //导入依赖包
    2. const router = require("express").Router();
    3. const User = require("../model/User")
    4. const express = require("express")
    5.  
    6. //添加user界面
    7. router.get("/add", (req, res) => {
    8.   let html = `<!DOCTYPE html>
    9.   <html>
    10.   <head>
    11.     <title>添加用户</title>
    12.     <meta charset="utf-8">
    13.     <meta name="viewport" content="width=device-width, initial-scale=1">
    14.     <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    15.     <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    16.   </head>
    17.   <body>
    18.     <div class="container mt-3">
    19.       <h2>添加用户</h2>
    20.       <form action="/add" method="post">
    21.         <div class="mb-3 mt-3">
    22.           <label for="username1" class="form-label">用户名</label>
    23.           <input type="text" class="form-control" id="username1" placeholder="请输入用户名" name="username">
    24.         </div>
    25.         <div class="mb-3">
    26.           <label for="age1" class="form-label">年龄</label>
    27.           <input type="text" class="form-control" id="age1" placeholder="请输入年龄" name="age">
    28.         </div>
    29.   
    30.         <button type="submit" class="btn btn-primary">添加用户</button></button>
    31.       </form>
    32.     </div>
    33.   </body>
    34.   
    35.   </html>`;
    36.   res.end(html);
    37. })
    38. // 不添加这句话没法实现add操作
    39. router.use(express.urlencoded({
    40.   extended: true
    41. }))
    42. // 添加user
    43. router.post("/add", async (req, res) => {
    44.   try {
    45.  
    46.     const newUser = new User({
    47.       username: req.body.username,
    48.       age: req.body.age,
    49.     })
    50.     await newUser.save();
    51.     res.writeHead(301, {
    52.       Location: '/list'
    53.     });
    54.     res.send();
    55.  
    56.   }
    57.   catch (err) {
    58.     res.status(500).json(err)
    59.   }
    60. })
    61.  
    62.  
    63. //暴露出去
    64. module.exports = router

    （4）remove.js

    1. //导入依赖包
    2. const router = require("express").Router();
    3. const User = require("../model/User")
    4.  
    5. // 删除user（根据_id删除）
    6. router.get("/remove", async (req, res) => {
    7.   try {
    8.     await User.deleteOne({ _id: req.query.id });
    9.     res.writeHead(301, {
    10.       Location: '/list'
    11.     });
    12.     res.end();
    13.   }
    14.   catch (err) {
    15.     res.status(500).json(err)
    16.   }
    17. })
    18.  
    19.  
    20. //暴露出去
    21. module.exports = router

    8.编写入口index.js代码，设置监听端口号，设置路由。关键代码如下。

    1. const express = require("express")
    2. const app = express();
    3. const list = require("./routes/list")
    4. const add = require("./routes/add")
    5. const remove = require("./routes/remove")
    6. const modify = require("./routes/modify")
    7. const dbHelper = require("./model/dbHelper")
    8.  
    9. app.use(express.json())
    10. app.use("/admin", (res, req) => {
    11.   console.log("helle")
    12.  
    13. })
    14.  
    15. app.use("/", list)
    16. app.use("/", add)
    17. app.use("/", remove)
    18. app.use("/", modify)
    19.  
    20. app.listen("3000", () => {
    21.   console.log("服务器运行！监听端口号3000！")
    22. })

    9.编写入口index.js代码，设置监听端口号，设置路由。关键代码如下。

    1. const express = require("express")
    2. const app = express();
    3. const list = require("./routes/list")
    4. const add = require("./routes/add")
    5. const remove = require("./routes/remove")
    6. const modify = require("./routes/modify")
    7. const dbHelper = require("./model/dbHelper")
    8.  
    9. app.use(express.json())
    10. app.use("/admin", (res, req) => {
    11.   console.log("helle")
    12.  
    13. })
    14.  
    15. app.use("/", list)
    16. app.use("/", add)
    17. app.use("/", remove)
    18. app.use("/", modify)
    19.  
    20. app.listen("3000", () => {
    21.   console.log("服务器运行！监听端口号3000！")
    22. })

    10.控制台中输入"node index"启动。

     

    图2 启动服务

    11.测试界面。

    （1）用户管理

     

    图3 list界面

    （2）添加用户

     

    图4 add界面

     

    图5 添加信息后

    （3）修改用户信息

     

    图6 modify界面修改前

     

    图7 modify界面修改后

    （4）删除指定用户的信息

     

    图8 remove界面删除前

     

    图9 删除用户信息后

    （5）数据库内容

     

    图10 数据库中内容

    12.总结

    本次实验中主要用到的技术为node的Express框架和mongodb数据库的增删改查方法。

  • 相关阅读:
    低代码平台受欢迎度排行榜：揭秘市场热门之选
    vscode+cmake配置普通c++项目
    剑指 Offer 68 - 二叉树的最近公共祖先
    HMM+维特比算法
    Qt学习之旅 -信号与槽
    uniapp检测新版本
    Windows 10 没有【休眠】选项的配置操作
    LeetCode esay mid 记录
    Python编程指南：利用HTTP和HTTPS适配器实现智能路由
    【阅读笔记】概率预测之MQ-RNN(含Pytorch代码实现)
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/128210911