基于Node.js、MongoDB数据库的简单前后端交互界面

最新推荐文章于 2022-04-26 00:02:19 发布
最新推荐文章于 2022-04-26 00:02:19 发布
阅读量735 收藏 5
点赞数 3
分类专栏： 前后端交互 数据库 node.js 文章标签： node.js mongodb 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_lzx/article/details/109552494
版权

1. 效果展示：

（1）启动MongoDB数据库服务
在这里插入图片描述

（2）Node环境环境中运行app.js

在这里插入图片描述
（3）浏览器地址栏输入http://localhost:3000/list进入 list 界面
在这里插入图片描述
（4）可进行简单的增、删、改、查操作
在这里插入图片描述
（5）可通过 MongoDB Compass 可视化软件看到数据库的内容
在这里插入图片描述

源代码：

（1）各文件相对位置
在这里插入图片描述
（2）list.html

<!DOCTYPE html>
<html lang="Zh">

<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.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>zhangsan@itcast.cn</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>

（3）add.html

<!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>
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="请填写用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label>年龄</label>
                <input type="text" class="form-control" placeholder="请填写年龄">
            </div>
            <div class="form-group">
                <label>邮箱</label>
                <input type="email" class="form-control" placeholder="请填写邮箱">
            </div>
            <div class="form-group">
                <label>请选择爱好</label>
                <div>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="足球"> 足球
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="篮球"> 篮球
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="羽毛球"> 羽毛球
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="阅读"> 阅读
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="旅游"> 旅游
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="观影"> 观影
		    	</label>
                    <label class="checkbox-inline">
		    	  <input type="checkbox" value="逛街"> 逛街
		    	</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">添加用户</button>
        </form>
    </div>
</body>

</html>

（4）index.js

const mongoose = require('mongoose');

// 数据库连接  27017是MongoDB数据库的默认端口
// { useNewUrlParser: true, useUnifiedTopology: true }是根据警告信息添加上的参数
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('数据库连接成功！'))
    .catch(() => console.log('数据库连接失败'));

（5）user.js

const mongoose = require('mongoose');

// 创建用户集合规则
const UserSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 20
    },
    age: {
        type: Number,
        min: 1,
        max: 120
    },
    password: String,
    email: String,
    // 爱好是以数组形式保存，但可以不只有一个
    hobbies: [String]
});

// 创建集合，返回集合构造函数
const User = mongoose.model('User', UserSchema);

module.exports = User;

（6）app.js

const http = require('http');
const url = require('url');
const querystring = require('querystring');

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

// 创建服务器
const app = http.createServer();

// 为服务器对象添加请求事件
app.on('request', async(req, res) => {
    // 获取请求方式
    const method = req.method; // req.method返回的方式都是大写的
    // 对象解构 获取请求地址; query里保存了ID,true：query字符串转化为对象
    const { pathname, query } = url.parse(req.url, true); // url.parse(req.url) 返回一个对象
    if (method == 'GET') {
        // 呈现添加用户列表页面
        if (pathname == '/list') {
            // 查询用户信息 users是一个数组
            let users = await User.find();

            // list页面内容存放在模版字符串``中
            // 存放静态部分1
            let list = `
            <!DOCTYPE html>
            <html lang="Zh">
            
            <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>
            `;
            // 对数据进行循环拼接,这里的item是每个对象
            users.forEach(item => {
                list += `
                <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>`;
                // item.hobbies是个数组
                item.hobbies.forEach(item => {
                    // 这里的item是数组中的值
                    list += `<span>${item}&nbsp;&nbsp;</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>`;
            });
            // 存放静态部分1
            list += `
            </table>
            </div>
        </body>
        
        </html>
            `;
            res.end(list);
        } else if (pathname == '/add') {
            // 呈现用户列表页面
            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>
                            <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>
            `;
            res.end(add);
        } else if (pathname == '/modify') {

            let user = await User.findOne({ _id: query.id });
            let hobbies = ['足球', '篮球', '羽毛球', '阅读', '旅游', '观影', '逛街'];
            // console.log(user);
            // 呈现修改用户列表页面
            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 => {
                // 判断当前循环项是否在用户的爱好数组里
                if (user.hobbies.includes(item)) {
                    modify += `
                    <label class="checkbox-inline">
                    <input type="checkbox" value="${item}" name="hobbies" checked> ${item}
                  </label>
                    `;
                } else {
                    modify += `
                    <label class="checkbox-inline">
                    <input type="checkbox" value="${item}" 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') {
        // 添加用户功能
        if (pathname == '/add') {
            // 接受用户提交的信息
            // 拼接post参数，一步一步接收
            let formData = '';
            req.on('data', param => {
                formData += param;
            });
            // post参数接收完毕
            req.on('end', async() => {
                // console.log(querystring.parse(formData));
                // 将字符串转化为对象的形式
                let user = querystring.parse(formData);
                // 将用户提交的信息添加到数据库中
                await User.create(user);
                // 301代表重定向，提交成功后跳转页面
                // Location: 跳转的地址
                res.writeHead(301, {
                    Location: '/list'
                });
                res.end();
            });
        } else if (pathname == '/modify') {
            // 接受用户提交的信息
            // 拼接post参数，一步一步接收
            let formData = '';
            req.on('data', param => {
                formData += param;
            });
            // post参数接收完毕
            req.on('end', async() => {
                // console.log(querystring.parse(formData));
                // 将字符串转化为对象的形式
                let user = querystring.parse(formData);
                // 将用户修改的信息添加到数据库中
                await User.updateOne({ _id: query.id }, user);
                // 301代表重定向，提交成功后跳转页面
                // Location: 跳转的地址
                res.writeHead(301, {
                    Location: '/list'
                });
                res.end();
            });
        }
    }

});

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功...');
火星飞鸟
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
MongoDB的使用以及和python的交互
Huangqingmeng的博客
06-23 822
什么是MongoDB ? https://www.runoob.com/mongodb/mongodb-intro.html 菜鸟教程
JS-MongoDB简单实现数据的增删改查
rfalcon的博客
09-27 799
// 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('数据库连
MongoDB及其可视化界面安装以及与python的交互
liuzuoping的博客
08-28 1316
MongoDB的安装教程 MongoDB可视化界面安装 MongoDB与python的交互 MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统，简单来说，MongoDB就是数据库，是NoSQL类型的数据库。MongoDB是一款轻量级的键值型数据库 MongoDB的安装教程 进入MongoDB官网https://www.mongodb.com/ 点击右上角try free 根...
基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战
11-27
基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战
MongoDB可视化图形界面
10-13
Mongodb 可视化工具 mongochef ，解压后双击打开快速安装
基于Vue.js-Node.js-Mongodb 的本人本科毕业设计.zip
10-05
综上所述，这个本科毕业设计项目利用Vue.js创建了用户友好的前端界面，通过Node.js搭建了能够处理请求并与数据库交互的后端服务器，同时利用MongoDB作为数据存储平台。这样的组合展示了现代Web开发中的前后端分离...
基于 node.js + Mongodb 构建的后台系统.zip
05-05
在这个基于Node.js和MongoDB的后台系统中，开发者可能会使用Mongoose作为ORM（对象关系映射）工具，以简化与MongoDB数据库的交互。Mongoose提供了一种结构化的方式来定义数据模型，并能自动处理与MongoDB的通信，...
cnjs是基于Node.js+MongoDB打造的中文JavaScript社区系统.zip
08-03
【描述】：这个项目是一个采用Node.js后端技术和MongoDB数据库构建的中文JavaScript社区平台。它旨在为JavaScript开发者提供一个交流、分享知识和代码的环境，促进技术讨论与合作。 【标签】： 1. 毕设：这表明此...
Node.js-一个前后端分离的案例前端vuejs后端express数据库mongodb
08-10
在本项目中，我们探索的是一个基于Node.js的前后端分离的应用实例，它结合了Vue.js作为前端框架，Express作为后端服务器，以及MongoDB作为数据存储。这种架构模式是现代Web开发中的常见实践，旨在提高开发效率和应用...
基于vue+node.js+mongodb写的一个图书管理系统源码+数据库
最新发布
04-03
**Node.js** 是一个基于Chrome V8引擎的JavaScript运行环境，用于构建服务器端应用。在图书管理系统中，Node.js可能是后端服务的基石，负责处理HTTP请求，与数据库交互，提供API接口给前端调用。开发者可能使用了...
nodejs + express + ejs + mongodb 一个非常简单的前后端开发的实例
06-04
nodejs + express + ejs + mongodb 一个非常简单的前后端开发的实例
Node（express）连接mongodb到前端-访问接口将数据显示页面
星星点灯的博客
10-27 1699
如果你是前端想步入全栈领域，如果你想用Node做一个接口，如果你想自己操作一下数据库连接到自己页面的冲动，本篇会大大帮助你，让你一步一步跨过阻碍，到达全栈的第一脚。 1、安装 node和express node安装就不说了网上一大堆，给个链接不会的看看就懂了 http://note.youdao.com/noteshareid=c1abd19bbe12e12522d61f5867751a9a&sub=0C8B4FA7214F4D1383446EDD1952374E express安装使用npm np
Node.js+Express+MongoDB实现简单登录注册功能
热门推荐
Coder_py的博客
07-15 1万+
Node.js+Express+MongoDB实现简单登录注册功能 Mongoose操作MongoDB 名词解释 Schema ： 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力 Model ： 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对 工程目录： 数据库表： 连接数据库connect.js
前后端分离的注册登录（连接了数据库，含有页面跳转，判断等）
qq_41716608的博客
02-27 2325
代码结构如下： register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
MERN技术栈实现CRUD的小项目（万字长文；使用React、Express、Mongodb、node实现前后端结合的增删查改）
sunshine_kevin的博客
05-19 1581
预期效果 使用React、Express、Mongodb、node 可以前后端交互，实现增删查改 成品 实施过程 1. 创建项目 前端部分的创建 前端依然使用 react-create-app 来创建。 这次用到的依赖有如下的 "classnames": "^2.2.5", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", "red...
nodejs 访问 mongodb
weixin_43932214的博客
10-30 155
1、安装mongodb模块 npm install mongodb 2、连接mongodb 2.1 文档 mongodb api 文档：http://mongodb.github.io/node-mongodb-native/2.0/api/ 2.2 代码 const MongoClient = require('mongodb').MongoClient; # 异步方法采用 async await 的方式实现 const options = { useNewUrlParser: true, u
Node.js 连接MongoDB，并实现浏览器GET请求加参数
また明日ね
08-29 1141
前言最近学习了Node.js，并且接触了MongoDB,因此想做一个浏览器访问一个http地址获取数据库里的数据的例子，本文使用的是Node.js作为接口具体内容Node.js要准备的东西express模块，可以参考http://www.runoob.com/nodejs/nodejs-express-framework.html获取 mongodb模块，可以参考http://www.runoob
nodejs 和 mongodb 交互
jingkai0714的博客
05-16 171
自己的学习笔记 内容待商榷 欢迎在评论区提出宝贵意见 mongodb数据库相关 1.引入模板 连接到本地数据库 如果没有数据库会建立 mongoose.connect会返回promise对象 所以能使用 .then .catch 方法 const mongoose=require('mongoose') mongoose.connect('mongodb://localhost/playground') .then(()=>{console.log('数据库连接成功')}) .catch(.
Node.js连接MongoDB数据库实现页面渲染
qq_33274031的博客
04-26 2650
Nodejs+MongoDB+前台页面渲染
基于Node.js、Express、MongoDB、Vue、Element-ui的后台管理系统项目功能实现原理
06-03
非常高兴为您介绍基于Node.js、Express、MongoDB、Vue、Element-ui的后台管理系统项目功能实现原理。 该项目主要分为前端和后端两部分，前端主要负责用户界面的展示和交互，后端主要负责数据的处理和存储。下面将从用户管理、商品管理、订单管理、数据统计等几个模块来介绍该项目的功能实现原理。 ### 1. 用户管理模块 用户管理模块主要包括用户列表展示、用户信息添加、修改和删除等功能。前端通过Vue.js框架实现页面的展示和交互，通过axios组件向后端发送请求。后端通过Express框架处理请求，通过MongoDB数据库存储和管理用户信息。 具体实现原理如下： 1. 用户列表展示：前端通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，查询出用户信息并返回给前端，前端通过Vue.js框架渲染出用户列表。 2. 用户信息添加：前端通过表单提交用户信息，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将用户信息存储到数据库中。 3. 用户信息修改：前端通过点击编辑按钮，弹出用户信息修改模态框，通过表单提交修改后的用户信息，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将修改后的用户信息更新到数据库中。 4. 用户信息删除：前端通过点击删除按钮，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将指定的用户信息从数据库中删除。 ### 2. 商品管理模块 商品管理模块主要包括商品列表展示、商品信息添加、修改和删除等功能。前端通过Vue.js框架实现页面的展示和交互，通过axios组件向后端发送请求。后端通过Express框架处理请求，通过MongoDB数据库存储和管理商品信息。 具体实现原理如下： 1. 商品列表展示：前端通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，查询出商品信息并返回给前端，前端通过Vue.js框架渲染出商品列表。 2. 商品信息添加：前端通过表单提交商品信息，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将商品信息存储到数据库中。 3. 商品信息修改：前端通过点击编辑按钮，弹出商品信息修改模态框，通过表单提交修改后的商品信息，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将修改后的商品信息更新到数据库中。 4. 商品信息删除：前端通过点击删除按钮，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，将指定的商品信息从数据库中删除。 ### 3. 订单管理模块 订单管理模块主要包括订单列表展示和订单详情查看功能。前端通过Vue.js框架实现页面的展示和交互，通过axios组件向后端发送请求。后端通过Express框架处理请求，通过MongoDB数据库存储和管理订单信息。 具体实现原理如下： 1. 订单列表展示：前端通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，查询出订单信息并返回给前端，前端通过Vue.js框架渲染出订单列表。 2. 订单详情查看：前端通过点击查看按钮，通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，查询出指定订单的详情信息并返回给前端，前端通过Vue.js框架渲染出订单详情页面。 ### 4. 数据统计模块 数据统计模块主要包括业务数据的展示和分析功能。前端通过Vue.js框架实现页面的展示和交互，通过axios组件向后端发送请求。后端通过Express框架处理请求，通过MongoDB数据库查询出相应的业务数据，并通过echarts组件生成图表展示在前端页面上。 具体实现原理如下： 1. 业务数据查询：前端通过axios组件向后端发送请求，后端通过mongoose模块连接MongoDB数据库，查询出相应的业务数据并返回给前端。 2. 业务数据展示：前端通过echarts组件生成图表，展示查询出来的业务数据。 以上是基于Node.js、Express、MongoDB、Vue、Element-ui的后台管理系统项目功能实现原理的介绍，希望能对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

火星飞鸟

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值