Node.js编程

news2024/9/24 13:23:52

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连接帮助类。关键代码如下。

//引入mongoose
const mongoose = require('mongoose');
//定义字符串常量
const db_url = "mongodb://localhost:27017/user_db"
//1.连接数据库
mongoose.connect(db_url, { useNewUrlParser: true, useUnifiedTopology: true })
//2.连接成功
mongoose.connection.on('connected', function () {
  console.log('连接成功：', db_url);
})
//3.连接失败
mongoose.connection.on('error', function (err) {
  console.log('连接错误：', err);
})
//4.断开连接
mongoose.connection.on('disconnection', function () {
  console.log('断开连接');
})
module.exports = mongoose;

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

const mongoose = require('mongoose');

//定义UserSchema的Schema
const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,

  },
  age: {
    type: Number,
    required: true,
  }
});
// const UserModel = mongoose.model('UserModel', UserSchema)
module.exports = mongoose.model('User', UserSchema)

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

（1）list.js

//导入依赖包
const router = require("express").Router();
const User = require("../model/User")

//获取所有的user
router.get("/list", async (req, res) => {
  try {
    const users = await User.find({})
    //list页面
    var list = `
    <!DOCTYPE html>
    <html>
<head>
  <title>用户管理</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--引入bootstrap5-->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="container mb-3 mt-3">
    <a href="/add" type="button" class="btn btn-primary" >添加用户</a>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered" id="app">
        <thead>
          <tr align="center">
            <th>用户名</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>`
    users.forEach(item => {
      list +=
        ` <tr align="center">
          <td>${item.username}</td>
          <td>${item.age}</td>
          <td>         
          <a href="/remove?id=${item._id}" type="button" class="btn btn-danger btn-sm">删除</a>
          <a href="/modify?id=${item._id}" type="button" class="btn btn-success btn-sm">修改</a>
          </td>
        </tr>
        `
    })
    list += `
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>
    `
    res.end(list)
  }
  catch (err) {
    res.status(500).json(err)
  }
})
//暴露出去
module.exports = router

（2）modify.js

//导入依赖包
const router = require("express").Router();
const User = require("../model/User")
const express = require("express")

// 修改用户信息(根据_id)
router.get("/modify", async (req, res) => {
  try {
    const user = await User.findById(req.query.id)
    let html = `<!DOCTYPE html>
    <html>
    <head>
      <title>修改用户信息</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    
    </head>
    
    <body>
    
      <div class="container mt-3">
        <h2>修改用户</h2>
        <form action="/modify" method="post">
        <input type="text" class="form-control"  name="id" value=${user._id} hidden>
          <div class="mb-3 mt-3">
            <label for="name" class="form-label">用户名</label>
            <input type="text" class="form-control" id="name" placeholder="请输入用户名" name="username" value=${user.username}>
          </div>
          <div class="mb-3">
            <label for="age" class="form-label">年龄</label>
            <input type="text" class="form-control" id="age" placeholder="请输入年龄" name="age" value=${user.age}>
          </div>
    
          <button type="submit" class="btn btn-primary">修改用户</button></button>
        </form>
      </div>
    </body>
    
    </html>`
    res.end(html)
  }
  catch (err) {
    res.status(500).json(err)
  }
})
  ;
// 不添加这句话没法实现
router.use(express.urlencoded({
  extended: true
}))
router.post("/modify", async (req, res) => {
  try {
    console.log("指向")
    console.log(req.body.id)
    const updateUser = new User({
      _id: req.body.id,
      username: req.body.username,
      age: req.body.age,
    })

    const oldUser = await User.findById(req.body.id)

    await User.updateOne(oldUser, { $set: updateUser })
    // res.status(200).json(user)
    res.writeHead(301, {
      Location: '/list'
    });
    res.end();

  }
  catch (err) {
    res.status(500).json(err)
  }
})

//暴露出去
module.exports = router

（3）add.js

//导入依赖包
const router = require("express").Router();
const User = require("../model/User")
const express = require("express")

//添加user界面
router.get("/add", (req, res) => {
  let html = `<!DOCTYPE html>
  <html>
  <head>
    <title>添加用户</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
      <h2>添加用户</h2>
      <form action="/add" method="post">
        <div class="mb-3 mt-3">
          <label for="username1" class="form-label">用户名</label>
          <input type="text" class="form-control" id="username1" placeholder="请输入用户名" name="username">
        </div>
        <div class="mb-3">
          <label for="age1" class="form-label">年龄</label>
          <input type="text" class="form-control" id="age1" placeholder="请输入年龄" name="age">
        </div>
  
        <button type="submit" class="btn btn-primary">添加用户</button></button>
      </form>
    </div>
  </body>
  
  </html>`;
  res.end(html);
})
// 不添加这句话没法实现add操作
router.use(express.urlencoded({
  extended: true
}))
// 添加user
router.post("/add", async (req, res) => {
  try {

    const newUser = new User({
      username: req.body.username,
      age: req.body.age,
    })
    await newUser.save();
    res.writeHead(301, {
      Location: '/list'
    });
    res.send();

  }
  catch (err) {
    res.status(500).json(err)
  }
})


//暴露出去
module.exports = router

（4）remove.js

//导入依赖包
const router = require("express").Router();
const User = require("../model/User")

// 删除user（根据_id删除）
router.get("/remove", async (req, res) => {
  try {
    await User.deleteOne({ _id: req.query.id });
    res.writeHead(301, {
      Location: '/list'
    });
    res.end();
  }
  catch (err) {
    res.status(500).json(err)
  }
})


//暴露出去
module.exports = router

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

const express = require("express")
const app = express();
const list = require("./routes/list")
const add = require("./routes/add")
const remove = require("./routes/remove")
const modify = require("./routes/modify")
const dbHelper = require("./model/dbHelper")

app.use(express.json())
app.use("/admin", (res, req) => {
  console.log("helle")

})

app.use("/", list)
app.use("/", add)
app.use("/", remove)
app.use("/", modify)

app.listen("3000", () => {
  console.log("服务器运行！监听端口号3000！")
})

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

const express = require("express")
const app = express();
const list = require("./routes/list")
const add = require("./routes/add")
const remove = require("./routes/remove")
const modify = require("./routes/modify")
const dbHelper = require("./model/dbHelper")

app.use(express.json())
app.use("/admin", (res, req) => {
  console.log("helle")

})

app.use("/", list)
app.use("/", add)
app.use("/", remove)
app.use("/", modify)

app.listen("3000", () => {
  console.log("服务器运行！监听端口号3000！")
})

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数据库的增删改查方法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/67031.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第十章 降维与度量学习

第十章 降维与度量学习

10.1 k近邻学习 k近邻学习&#xff08;kNN&#xff09;是一种常用的监督学习方法&#xff0c;其工作机制非常简单&#xff1a;给定测试样本&#xff0c;基于某种距离度量找出训练集中与其最靠近的k个训练样本&#xff0c;然后基于这k个邻居的信息来进行预测。 k近邻学习似乎与…
阅读更多...
2022 计网复习计算题【太原理工大学】

2022 计网复习计算题【太原理工大学】

期末复习汇总&#xff0c;点这里&#xff01;https://blog.csdn.net/m0_52861684/category_12095266.html?spm1001.2014.3001.5482 三、计算题 1. 假定 1km 长的 CSMA/CD 网络的数据率为 1Gb/s&#xff0c;设信号在网络上的传播速率为 200000km/s。求能够使用此协议的最短帧长…
阅读更多...
java swing(GUI) MySQL实现的学生选课成绩管理系统源码+运行教程

java swing(GUI) MySQL实现的学生选课成绩管理系统源码+运行教程

今天给大家演示一下由Java swing mysql实现的一款学生选课成绩信息管理系统&#xff0c;主要实现的功能有&#xff1a;学生教师信息管理、年级班级信息管理、课程信息管理、选课、成绩录入功能、成绩统计功能&#xff0c;实现学生、教师、管理员三个角色的登录&#xff0c;三个…
阅读更多...
【计算机图形学入门】笔记1：图形学概述

【计算机图形学入门】笔记1：图形学概述

前言&#xff1a;今天开始开启一个新篇章的学习&#xff0c;那就是games101闫令琪老师讲的《现代计算机图形学入门》课程&#xff0c;我会根据闫老师每节课讲的内容记录重点笔记&#xff0c;每节课都会整理一篇发布出来&#xff0c;希望自己可以坚持下去&#xff0c;从图形学小…
阅读更多...
可视化音视频分析工具：好用工具大集锦，快转发给你兄弟看看丨音视频工具

可视化音视频分析工具：好用工具大集锦，快转发给你兄弟看看丨音视频工具

&#xff08;本文基本逻辑&#xff1a;音画原始数据分析工具介绍 → 编码数据分析工具介绍 → 封装格式分析工具介绍&#xff09; 工欲善其事&#xff0c;必先利其器。在音视频开发中&#xff0c;为了方便、快捷、直观的分析音视频数据&#xff0c;最好能有一些可视化的分析工…
阅读更多...
《爱在 ZStack Cube 超融合》三部曲

《爱在 ZStack Cube 超融合》三部曲

一、始于初识&#xff1a;很高兴见到你 这一天东川路最靓的仔打开了 ZStack Cube 宝盒 &#xff0c;这可能是我们的第一次相遇&#xff0c;我们相谈甚欢&#xff0c;相遇恨晚。 我的名字是 ZStack Cube&#xff0c;一个基于超融合架构的云平台。我拥有3300、5300、7300、7300…
阅读更多...
Acwing_98

Acwing_98

题目链接 考察知识点&#xff1a; 坐标变换、递归、分治。 核心问题&#xff1a;计算出点的坐标。 策略是递归算出子图形中的坐标&#xff0c;再进行平移得到当前图形中的坐标。 采用下图方式建立坐标系&#xff1a;原点在中心。 前置知识&#xff1a; (x,y)(x,y)(x,y) 逆时…
阅读更多...
ResNet18实现——MNIST手写数字识别(突破0.995)

ResNet18实现——MNIST手写数字识别(突破0.995)

1.简单CNN改进 简单的CNN实现——MNIST手写数字识别 该部分首先对我前面的工作进行了改进&#xff0c;然后以此为基础构建ResNet18去实现MNIST手写数字识别。 1.改进要点&#xff1a; 1.利用nn.Sequential&#xff08;&#xff09;自定义块结构&#xff0c;增加可读性和方便…
阅读更多...
Spring - 什么是spring?

Spring - 什么是spring?

好久没更新博客了&#xff0c;今天小更一波。 学习java已经有一段时间了&#xff0c;今天将接触Spring框架技术。 什么是Spring? spring 中文意思就是 春天&#xff0c;实际上spring 是真的给软件行业带来了春天。 使用spring的好处&#xff1f; spring可以解决企业级开发…
阅读更多...
眼内衍射透镜的设计与分析

眼内衍射透镜的设计与分析

1. 摘要 如今&#xff0c;多焦点眼内透镜移植已广泛用于白内障的治疗。作为其优势特点之一&#xff0c;衍射眼内透镜为病患提供了很好的远近景性能。这种透镜经常在Zemax OpticStudio 中采用binary2面型进行设计。在本示例中&#xff0c;我们阐述了如何将初始设计导入VirtualLa…
阅读更多...
嵌入式开发--RS-485通讯的问题

嵌入式开发--RS-485通讯的问题

嵌入式开发 RS-485通讯的问题RS-485说明接口芯片硬件连接CubeMX设置代码编写引脚定义使能串口中断函数发送数据接收数据有一个问题&#xff0c;多收了一个数数据线上的波形问题分析问题解决RS-485说明 RS-485一般简称485总线&#xff0c;是最常用的工业总线之一&#xff0c;一…
阅读更多...
LeetCode简单题之回环句

LeetCode简单题之回环句

题目 句子 是由单个空格分隔的一组单词&#xff0c;且不含前导或尾随空格。 例如&#xff0c;“Hello World”、“HELLO”、“hello world hello world” 都是符合要求的句子。 单词 仅 由大写和小写英文字母组成。且大写和小写字母会视作不同字符。 如果句子满足下述全部条…
阅读更多...
从 0 开始学习 Git + GitHub

从 0 开始学习 Git + GitHub

文章目录一、GitHub创建仓库二、安装Git客户端1、安装2、配置身份三、为Github账户设置SSH key1、生成ssh key2、GitHub 新建SSh key3、测试连接是否成功四、上传本地项目到Github方法一&#xff1a;方法二&#xff1a;master分支到main分支迁移五、Git常用命令git initgit sta…
阅读更多...
共享主机安全吗（以及如何保护它）？

共享主机安全吗（以及如何保护它）？

共享主机是在一台服务器上存储多个网站的主机。通常&#xff0c;您的资源(例如 CPU、内存、数据库和带宽)会在用户之间溢出。由于它非常适合流量低的网站&#xff0c;且因具成本效益&#xff0c;共享主机相当普遍。如果您是博主和小型企业&#xff0c;则很有可能会选择共享主机…
阅读更多...
聊聊我常用的5款动态数据可视化工具

聊聊我常用的5款动态数据可视化工具

视频当道的时代&#xff0c;数据可视化自然也要动起来。 我常用的动态可视化工具主要有Tableau、Echarts、Flourish、Python这几个&#xff0c;另外一个地图可视化神器kepler.gl&#xff0c;是技术群小伙伴的分享。 这五款可视化工具差异很大&#xff0c;在各自领域都是学霸级…
阅读更多...
Grafana 快速配置可视化面板

Grafana 快速配置可视化面板

一、如何快速搭建部署Grafana CSDNhttps://mp.csdn.net/mp_blog/creation/editor/128199952 二、快速配置可视化面板 1.新建数据源 首次新建数据源、首次新建看板 2.选择数据源类型 3.配置数据库 地址、账号、密码 备注&#xff1a;新建的数据源都可以在添加看板作为选项进…
阅读更多...
Odoo丨如何在明细行中添加复选框？

Odoo丨如何在明细行中添加复选框？

最近&#xff0c;在项目实际业务中遇到需要对明细订单添加复选框和按钮进行操作的需求。 起初在拿到需求时&#xff0c;我联想到Odoo默认tree视图是有复选框和操作按钮的功能&#xff0c;于是查看了源码&#xff0c;确认了这个想法。 因为这个是属于字段中one2many 关系属性来…
阅读更多...
【DPDK】dpdk样例源码解析之五：dpdk-rss

【DPDK】dpdk样例源码解析之五：dpdk-rss

本篇文章介绍DPDK-RSS相关的功能&#xff0c;RSS是网卡提供的分流机制&#xff0c;简单讲就是一个HASH值&#xff0c;如果使用DPDK收包&#xff0c;开启RSS后&#xff0c;会根据配置项将数据包分流到不同的收包队列&#xff0c;用来是实现负载均衡。 通过DPDK-L3FWD样例&#…
阅读更多...
关于Pytorch下载并进行部署

关于Pytorch下载并进行部署

目录 1.关于Pytorch 2.Pytorch环境部署前提条件 3.部署方法 4.测试 1.关于Pytorch PyTorch是一个开源的Python机器学习库&#xff0c;基于Torch&#xff0c;用于计算机视觉、自然语言处理等应用程序。 2017年1月&#xff0c;由Facebook人工智能研究院&#xff08;FAIR&…
阅读更多...
数据库设计 ER图

数据库设计 ER图

三个基本概念 Entity Entity Set表示一类事物&#xff0c;类似于面向对象中类的概念&#xff0c;而Entity Instance表示一个具体的事物&#xff0c;类似于对象的概念。 Entity中可以有属性(Attribute)&#xff0c;也可以与其他Entity之间存在关系(Relationship)。在设计数据库…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023