Node.js编程

最新推荐文章于 2024-07-13 13:55:40 发布
最新推荐文章于 2024-07-13 13:55:40 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： dreamweaver java 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41957626/article/details/128210911
版权

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

简单点了
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Node.js编程规范
JoeySheng的专栏-移动互联网技术发展博客
08-02 897
前言    并没有一个官方的文档规定Node.js应用程序代码的风格，但Node.js代码分割有着一些“事实上的约定”，大多数项目的代码都已定程度上遵循了这一标准。作为Node.js开发新手，我认为有必要遵守这个约定，以便于今后的交流。追根溯源，这个规范发轫于Node.js核心模块的实现，而Node.js核心模块的代码很大程度上符合JavaScript代码的一贯风格。    事实上代码风格永远
这可能是全网最详细的Node.js编程
heshihu2019的博客
10-24 2047
NodeJS起步 下载安装 下载 历史版本 windows下安装过程： 此安装路径尽量不要改 对于已经装过的，重新安装就会升级 安装成功后，打开命令行，输入 node --version 或者 node -v (显示node的版本号) 表示安装成功 其他平台的安装方式： https://nodejs.org/zh-cn/download/package-manager/ R......
【前端开发-----NodeJS】nodejs快速入门教程，想要快速入门nodejs就看这一篇文章就够了，基础部分特详细，按要点整理知识点
m0_67844671的博客
09-25 9189
nodejs快速入门教程，想要快速入门nodejs就看这一篇文章就够了，特详细的保姆级教程；基础部分特详细，按要点整理知识点；内容包括文件操作，路径处理，模块化，中间件，路由，身份认证，数据库操作，数据校验等等；用express框架快速搭建自己的后端服务器。
Node.js异步编程
前端卷王小白的博客
04-26 1173
node.js异步编程,回调函数-阻塞和非阻塞,异步编程,事件发布与订阅,Promise和Deferred模式,流程控制库
Node.js---菜鸟教程
热门推荐
yitong的博客
06-18 1万+
文章目录创建第一个应用创建 Node.js 应用NPM 使用介绍使用 npm 命令安装模块本地安装使用 package.json模块的操作回调函数阻塞代码实例非阻塞代码事件循环事件驱动程序EventEmitterEventEmitter 类方法实例error 事件继承 EventEmitterBuffer（缓冲区）Buffer 与字符编码创建 Buffer 类写入缓冲区从缓冲区读取数据将 Buffer 转换为 JSON 对象缓冲区合并缓冲区比较拷贝缓冲区缓冲区裁剪缓冲区长度Stream（流）从流中读取数据写
Jpa-Node
Mr_Pmc的博客
08-12 183
1.Jpa需要的依赖-pom文件 <dependencies> <!-- hibernate 依赖 --> <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-entitymanager --> <dependency> <groupId>org.hibernate</gro.
Node.js编程资料汇总
07-22
资源名称：Node.js编程资料汇总资源目录：【】fabian_frank_nodejs_velocity【】Nodejs,脱离了浏览器的Javaｓｃｒｉｐｔ(袁锋)_files【】nodejs手册中文【】NodeJS的异步编程风格【】Oreilly.Learning.Node.Aug.2012...
Node.js高级编程.pdf
05-09
Node.js是一种主流框架，它允许你使用JavaScript快速构建具有高度可伸缩性的网络程序。可是，它有自己的学习曲线，这本较为深入的指南性图书首先介绍了Node.js平台的安装，然后重点关注：创建和加载模块；使用缓冲区...
node.js时钟案例
04-13
总结来说，"node.js时钟案例"是一个综合性的项目，涉及到Node.js服务器端编程、HTML和CSS的处理、JavaScript的执行以及前端交互设计。通过学习和实践这个案例，开发者可以加深对Node.js、前端技术和动态Web页面构建...
Java开发者结合Node.js编程入门教程
10-25
主要介绍了Java开发者结合Node.js编程入门教程,我将先向您展示如何使用Java EE创建一个简单的Rest服务来读取 MongoDB数据库。然后我会用node.js来实现相同的功能,需要的朋友可以参考下
Node.js教程（想入门就来点进来看看)
Autumn_Xiao的博客
08-24 2140
Node对前端的工程师来说还算是友好的，转Node.js也是相对较容易接受如果你是一个前端程序员，你不懂得像 PHP、Python 或 Ruby 等动态编程语言，然后你想创建自己的服务，那么 Node.js 是一个非常好的选择。Node.js 是运行在服务端的 JavaScript，如果你熟悉 Javascript，那么你将会很容易的学会 Node.js。当然，如果你是后端程序员，想部署一些高性能的服务，那么学习 Node.js 也是一个非常好的选择。相信你应该了解一些基本的计算机编程术语。
node（编写结构化程序）
m0_73495603的博客
10-18 458
编写结构化程序
node.js开发中的代码调试实战
weixin_43805705的博客
10-17 434
做为前端开发，写Node.js 的代码时候我很疑惑，这在调试代码绝对不会是这样笨拙，第一次都是通过console.log逐步推理调试代码，后来想想肯定有类似谷歌调试工具一样的工具帮助我们调试Node.js 的代码。快来一起学习下吧～
Python aiohttp代码示例
weixin_73725158的博客
10-27 379
python
node.js实训
qq_45676798的博客
07-12 618
第一天： 音乐门户网站数据采集 搜索列表数据采集 歌曲MP3地址的获取 node环境安装 node环境的安装 — node安装包下载 https://nodejs.org/en/ visual studio code 编辑器的安装 官网地址下载并直接安装即可 https://code.visualstudio.com/ node服务器搭建 桌面上新建一个文件夹 node_server_demo 终端 cd 到 新建的文件夹中 通过 npm init 指令， 将 普通文件夹 node_ser
在 JavaScript 中，??（双问号运算符）和 ?.（可选链运算符）区别
weixin_45168167的博客
07-04 402
在这个示例中，user.social?.twitter 如果 user.social 存在且具有 twitter 属性，则返回 twitter 的值。在以上示例中，如果左侧的值为 null 或 undefined，则?它的作用是为了提供一种默认值的设定，当左侧的操作数为 null 或 undefined 时，使用右侧的操作数作为默认值。. 运算符用于在链式访问属性或方法时，避免因为中间属性不存在而导致的错误，而是安全地返回 undefined。
Elsaticsearch java基本操作
最新发布
qq_62383709的博客
07-13 479
索引 基本操作 package com.orchids.elasticsearch.web.controller; import cn.hutool.core.collection.CollUtil; import cn.hutool.json.JSONUtil; import com.orchids.elasticsearch.web.po.User; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperatio
node.js编程实现文件遍历
12-30
以下是两种使用Node.js编程实现文件遍历的例子： 1. 异步方式遍历文件夹： ```javascript function travel(dir, callback, finish) { fs.readdir(dir, function (err, files) { (function next(i) { if (i ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简单点了

谢谢大佬

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值