后端-Node(express)连接mongodb到前端-访问接口将数据显示页面(一条龙)

2023-05-16

如果你是前端想步入全栈领域,如果你想用Node做一个接口,如果你想自己操作一下数据库连接到自己页面的冲动,本篇会大大帮助你,让你一步一步跨过阻碍,到达全栈的第一脚。

大概流程:

一:安装:mongodb数据库

       安装:Node与express

二:服务器连接数据库

三:前后端调用

一:安装

1.1Mongodb

Mongodb官网地址:https://www.mongodb.com/download-center?jmp=nav#community

1.1.1安装Mongodb


选择自己系统然后下载之后运行





1.1.2创建数据目录

MongoDB将数据目录存储在 db 目录下。但是这个数据目录不会主动创建,我们在安装完成后需要创建它【就是手动创建一个文件夹】

【注意:如果出现后面出现错误,则把数据目录应该放在根目录下((如: C:\ 或者 D:\ 等 )。

1.1.3 命令行运行MongoDB服务器

打开cmd:输入一下格式


mongodb的bin路径>mongod --dbpath 数据目录  


1.1.4 打开可视化工具连接(Robomongo)

有很多可视化工具,看自己的爱好~~


此时数据库已经完毕了~~~

其他系统安装或者更详细安装您可以在下面链接看看:

【链接一:http://www.imooc.com/article/18438】

【链接二:http://www.runoob.com/mongodb/mongodb-window-install.html】

1.2 node和express

1.2.1 node与express的安装

node安装就不说了网上一大堆,给个链接不会的看看就懂了

http://note.youdao.com/noteshareid=c1abd19bbe12e12522d61f5867751a9a&sub=0C8B4FA7214F4D1383446EDD1952374E

express安装使用npm

npm i -g express generator  //全局安装【jade模板】

安装完成之后查看是否安装成功

express  --version //查看版本号

【安装出现问题可以看看这个:https://www.jianshu.com/p/32fd5ff28678】

1.2.2 新建一个express项目

自动创建项目:express +名字

npm install 安装依赖

npm start 或者 node bin/www   启动express

浏览器打开http://localhost:3000/


此时已经express已经成功了,开心不~~~

1.2.3 express项目目录介绍


1.2.4 设置模板引擎 

看自己擅长那个,那个顺手用哪个,不过官方推荐的还是jade,多学一学没坏处的~~

默认是jade


想使用:ejs模板引擎配置

命令行安装:

npm install ejs-mate --save

app.js中修改如下代码

var engine = require('ejs-mate');//添加引用

app.set('views', path.join(__dirname, 'views'));//在app.js中找到这个行
app.set('view engine', 'ejs');//修改jade为ejs
app.engine('ejs', engine);//添加这行

此时就可以把view文件夹下的文件删除,创建自己的XX.ejs文件


想使用:HTML模板引擎配置

命令行安装:

npm install ejs --save

在app.js中修改如下代码

var ejs=require('ejs');

app.set('views', path.join(__dirname, 'views'));
app.engine('html',ejs.__express);
app.set('view engine', 'html');

此时就可以把view文件夹下面文件删除,创建自己的XX.html文件


如果想知道为什么这么做呢?你可在链接中看看【https://www.cnblogs.com/-nothing-/p/4943354.html】

二:服务器连接数据库

首先:打开自己的服务器。【必须要打开,必须要打开,必须要打开!!!

打开mongodb还记得吗?


mongodb的bin路径>mongod --dbpath 数据目录  

在自己新建的express项目目录根文件路径安装Mongoose

npm install mongoose --save

在自己刚刚创建的项目(express)文件夹根目录上,新建db.js,内容:

var mongoose = require("mongoose"); //引入mongoose
mongoose.connect('mongodb://localhost/list'); //连接到mongoDB的todo数据库
//该地址格式:mongodb://[username:password@]host:port/database[?options]
//默认port为27017 

var db = mongoose.connection;
db.on('error', function callback() { //监听是否有异常
    console.log("Connection error");
});
db.once('open', function callback() { //监听一次打开
    //在这里创建你的模式和模型
    console.log('connected!');
});
 
module.exports = mongoose;

在app.js最前面引入【就是第一句!!】

require('./db');

然后就可以试试,是否连接成功?

npm start


三:写接口、页面联调

3.1 理解mongoose的属性、模型

Schema (属性):在Mongoose里一切都是从Schema开始的,每一个Schema都会映射到MongoDB的一个collection上。Schema定义了collection里documents的模板(或者说是框架)。【一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力

var blogSchema = new Schema({ // Schema头字母大写,因为Schema是构造函数
  title:  String,
  comments: [{ body: String, date: Date }], // 对象数组
  date: { type: Date, default: Date.now }, // 通过default设置默认值
  hidden: Boolean,
  meta: { // 嵌套对象
    votes: Number,
    favs:  Number
  }
});

model (模型):为了使用定义好的Schema,我们需要把blogSchema转换成我们可以使用的model(其实是把Schema编译成model,所以对于Schema的一切定义都要在compile之前完成)。也就是说model才是我们可以进行操作的handle。

var Blog = mongoose.model('Blog', blogSchema);//编译model

这样我们就获得了一个名为Blog的model了。生成model的同时MongoDB中对应的collection也被建立了,model的名字是Blog,而collection的名字被默认是model名字的复数也就是blogs(细心的小伙伴会发现不止变复数了,而且字母全部变小写了,亲测是这样的)。【由Schema发布生成的模型,具有抽象属性和行为的数据库操作对

 Schema和model的理解

  不同于关系型数据库,MongoDB作为文档型数据库,Scheme、model、collection、document是其中的四大元素。document是MongoDB里的基本存储单位,collection是众多同类document的集合。Schema定义了一类document的模板,让这一类document在数据库中有一个具体的构成、存储模式。而Schema仅仅是定义了Document是什么样子的,至于生成document和对document进行各种操作(增删改查)则是通过相对应的model来进行的。

    需要说明的是MongoDB中实际上只有collection和document,Schema和model不过是定义和生成前二者过程中的工具而已。

3.2 自己定义属性和模型

在db.js中加入

var ListSchema = new mongoose.Schema({
    user_id: String, //定义一个属性user_id,类型为String
    content: String, //定义一个属性content,类型为String
    updated_at: Date //定义一个属性updated_at,类型为Date
});

mongoose.model('user', ListSchema); //将该Schema发布为Model,user就是集合名称

3.3 开始做出自己的接口了

首先在routes/index.js中添加引用

var mongoose = require('mongoose'); //引入对象
var TodoModel = mongoose.model('user');//引入模型
var URL = require('url'); //引入URL中间件,获取req中的参数需要

3.3.1 新增接口

修改views/index.html

  <form class="initform" method="post" accept-charset="utf-8">
            <div class="from-group">
                <label>输入内容</label>
                <input class="form-control createContent" type="text" name="content" placeholder="Enter Todo" />
            </div>
            <div class="from-group" style="margin: 10px 0px;">
                <button type="button" class="btn btn-info" οnclick="ceateItem()">新增</button>
            </div>
  </form>
<script>
        //创建数据
        function ceateItem() {
            var obj = {};
            obj.content = $('.createContent').val();
            if (obj.content != '') {
                $.post('http://localhost:3000/create', obj, function (res) {
                    console.log('新增成功');
                    searchItem();
                })
            } else {
                alert('不能为空');
            }
        }
</script>

修改routes/index.js

router.post('/create', function(req, res) {
  console.log('req.body', req.body);
  new TodoModel({ //实例化对象,新建数据
      content: req.body.content,
      updated_at: Date.now()
  }).save(function(err, todo, count) { //保存数据
      console.log('内容', todo, '数量', count); //打印保存的数据
      res.redirect('/'); //返回首页
  });
});

3.3.2 查询接口

修改views/index.html

        <button class="btn btn-default" id="btn" οnclick="searchItem()">查询全部</button>
     function searchItem() {
            $(".content").empty();
            $.get('http://localhost:3000/search', function (res) {
                console.log(res);
                for (var i = 0; i < res.length; i++) {
                    $(".content").append(`
                     <div id="lists" class="alert alert-success" click="edit(event)" style="padding: 0;height: 50px;line-height: 50px;padding-left: 10px;">
                     <p  style="width: 90%;display: inline-block;" id="${res[i]._id}" >${res[i].content}</p>
                    <p class="pdelete" title="删除该数据" style=" display: inline-block;">
                        <button type="button" class="close"><span aria-hidden="true" οnclick="deleteItem()"  nodeValue="${res[i]._id}">×</span><span class="sr-only">Close</span></button>
                    </p>
                </div>
                     `)
                }
            })
        }

修改routes/index.js

router.get('/search', function(req, res, next) {
  
  TodoModel.
  find().
  sort('updated_at').
  exec(function(err, aa, count) {
    res.send(aa);
  });
});

保存之后,此时启动服务看看效果--npm start ----http://localhost:3000/


页面网络请求如下:


数据库显示如下:


    为了好看我引入一下bootstrap,其实也页面都是很常用的ajax请求,布局怎么显示就看你怎么设计了,主要就是routes/index.js的获取请求已经处理。咱们继续一口气把编辑保存和删除写了

3.3.3 编辑保存--【先找到需要编辑的数据,然后保存】

修改routes/index.js

router.get('/edit',function(req,res){
  var params=URL.parse(req.url,true).query;
  //res.send(params);
  TodoModel.findById(params.id,function(err,todo){
   // res.redirect('edit'); //返回首页
    res.send(todo);
  })
})
router.post('/update',function(req,res){
  //res.send(req);
  console.log(req.body);
  TodoModel.findById(req.body._id,function(err,todo){
    todo.content=req.body.content;
    todo.updated_at=Date.now();
    todo.save();
  })
 res.redirect('/'); //返回首页
})

3.3.4 删除数据

router.get('/destroy',function(req,res){
  var params=URL.parse(req.url,true).query;
  console.log(params);
    //根据待办事项的id 来删除它
    TodoModel.findById(params.id, function(err, todo) {
      todo.remove(function(err, todo) {
          res.redirect('/');
      });
  });
})
我已经将源码发到GitHub里面,代码里面都写了详细注释。希望你的node之路愉快~








本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

后端-Node(express)连接mongodb到前端-访问接口将数据显示页面(一条龙) 的相关文章

  • Qt学习总结之QPushbutton详解

    一 简述 按钮 xff0c 界面中常用的控件 xff0c 默认矩形 QPushButton的子类 xff1a QCommandLinkButton父类 xff1a QAbstractButton QAbstractButton的父类是QWi
  • Ubuntu下安装ARM交叉编译工具

    一 简介 在Ubuntu下安装ARM的交叉编译工具是常用到的 xff0c 下面以arm linux gcc 4 3 2为例讲解ARM下安装交叉编译工具 二 安装步骤 拷贝压缩文件到指定路径解压配置环境变量更新环境变量并查看验证是否成功 2
  • 记:ubuntu下交叉编译arm的链接库

    以第三方库libjpeg为例 xff0c 编译所需要的三步 xff1a 1 配置 configure脚本参数 xff0c span class token punctuation span span class token operator
  • 统计案例 | 三门问题

    统计案例 三门问题 一 前言二 背景三 思路1 xff1a 直观解释四 思路2 xff1a 列出概率空间与所有事件五 思路3 xff1a 条件概率法六 思路4 xff1a Python模拟七 写在最后 一 前言 今天小编和各位小伙伴来聊一档
  • 详解远程桌面协议, Linux 和 Windows 间的远程桌面互相访问(RDP、VNC协议)

    前言 xff1a 远程协议有很多 xff0c 本文只讨论几种主要的 xff0c 另外由于Windows之间的远程桌面工具实在是太多了 xff0c 这里就不再说明 xff0c 主要以Windows和Linux之间的互相访问来说明 一 常见的远
  • SQL 2012 解析JSON字符串

    Object UserDefinedFunction dbo parseJSON Script Date 2019 12 17 11 30 01 SET ANSI NULLS ON GO SET QUOTED IDENTIFIER ON G
  • nextcloud+onlyoffice docker-compose创建私有云

    nextcloud镜像 分两种镜像 xff1a nextcloud latest nextcloud镜像默认对应的是apache web服务器版本nextcloud fpm 基于php fpm镜像 xff0c 并运行fastCGI Proc
  • 发布到IIS后,后端拒绝put和delete请求

    系统在本地没有问题 xff0c 发布到服务器上后 xff0c put和delete请求不行 报跨域的错误 原因 xff1a IIS8默认会拒绝delete和put请求 解决方法 xff1a 删除IIS模块里面的WebDAVModule
  • Linux入门之使用 ping 命令检测主机是否激活

    文档 Ping command basics for testing and troubleshooting Enable Sysadmin ping 8 Linux manual page 1 简介 ping 命令向网络主机发送 ICMP
  • Linux入门之使用 traceroute 追踪数据包传输路径

    文档 https en wikipedia org wiki Traceroute https www geeksforgeeks org traceroute command in linux with examples Ping tra
  • ubuntu16.04安装NVIDIA显卡驱动

    文章目录 1 用系统适配的方式安装显卡驱动2 用命令行的方式安装从NVIDIA官网上下载的显卡驱动2 1 下载显卡驱动2 2 卸载原有驱动2 3 禁用nouveau2 4 安装nvidia显卡驱动 参考 xff1a ubuntu操作系统下安
  • Linux入门之使用 arp 管理ARP协议缓存

    文档 arp command in Linux with examples GeeksforGeeks 1 简介 arp 命令操作系统的 ARP 缓存 它还允许完整转储 ARP 缓存 ARP 代表地址解析协议 该协议的主要功能是将系统的IP
  • Linux入门之使用 dig 查找域名

    文档 https en wikipedia org wiki Dig command dig Command in Linux with Examples GeeksforGeeks 1 简介 dig是用于查询域名系统 DNS 的网络管理
  • Linux入门之使用 dmesg 查看引导日志

    文档 https en wikipedia org wiki Dmesg dmesg 1 Linux manual page 1 简介 在许多 Linux 系统上 引导过程会生成特别密集的内核消息流 许多管理问题与引导过程中是否成功枚举所需
  • http协议入门之 SameSite cookies

    文档 SameSite cookies HTTP MDN SameSite cookies explained 1 简介 响应标头 Set Cookie 的SameSite属性允许声明 cookie 是否应限制为第一方或同一站点上下文 准确
  • cloudflare入门之 /cdn-cgi/ 端点

    1 简介 将域添加到 Cloudflare时 xff0c Cloudflare 会向该域添加一个 cdn cgi 端点 此端点由 Cloudflare 管理 它不能被修改或定制 一些使用此端点的例子包括 xff1a Cloudflare 机
  • cloudflare入门之附加 cookie

    文档 Cloudflare Cookies Cloudflare Fundamentals docs 1 简介 Cloudflare 使用 cookie 来最大化网络资源 管理流量并保护网站免受恶意流量的侵害 2 cflb 使用Cloudf
  • Linux入门之使用 ps 查看系统进程

    文档 PS Command ps command in Linux with Examples GeeksforGeeks ps 1 Linux manual page 1 简介 ps命令允许显示有关正在运行的进程的信息 它从 proc文件
  • Linux入门之使用 top 查看系统进程

    文档 Top command top command in Linux with Examples GeeksforGeeks top 1 Linux manual page 1 简介 top命令显示系统上正在运行的进程的实时列表 还显示有
  • android入门之使用 adb 进行屏幕截图

    文档 xff1a https developer android com studio command line adb screencap 1 进入shell adb shell shell 64 2 截图 在 shell 里进行截图 x

随机推荐

  • node.js实战之使用 jsdom

    文档 GitHub jsdom jsdom 1 简介 jsdom 是许多 web 标准的纯 JavaScript 实现 特别是 WHATWG DOM和HTML标准 该项目的目标是模拟足够多的 Web 浏览器子集 以用于测试和抓取真实世界的
  • CentOS-7 MySQL 5.7.20安装

    1 检查系统是否安装了mariadb rpm qa grep mariadb 发现已经安装 xff0c 卸载 rpm e nodeps mariadb libs 5 5 52 1 el7 x86 64 2 创建mysql用户组和mysql用
  • mac os入门之安装 brew

    nbsp 文档 The Missing Package Manager for macOS or Linux Homebrew 1 简介 Homebrew 安装了Apple 或 Linux 系统 不需要的东西 nbsp Homebrew 将
  • node.js入门之 mac os下安装 nvm

    1 安装 安装脚本与 linux 下一样 wget qO https raw githubusercontent com nvm sh nvm v0 39 1 install sh bash gt Downloading nvm from
  • make入门之编写 makefile

    文档 GNU make 1 简介 Makefile 包含五种内容 显式规则 隐式规则 变量定义 指令和注释 显式规则 何时及如何重新制作目标 列出了依赖的先决条件 提供创建或更新目标的配方 隐式规则 何时及如何根据文件名重新制作目标 描述如
  • 记一个 Nvidia Control Panel 打不开的问题

    1 简介 Nvidia Control Panel 打不开 xff0c 找到了应用点击没反应 2 解决 找到 NVIDIA Display Container LS 服务 xff0c 启动后 xff0c 右下角出现 NVIDIA 图标 右键
  • 记一个 Europe/Pari 时区冬令时从+2:00变成+1:00问题

    1 简介 代码里写死了时区 Europe Paris xff0c 而且时间点都是以文字时区为准 但是今天发现 xff0c 在本地对应的时间没有运行 最后发现 xff0c 之前Europe Paris 是 43 2 00 xff0c 早上10
  • android入门之 Support Library

    Use legacy support library option in android Stack Overflow https developer android com topic libraries support library
  • 记一个 react 配置路由前缀问题

    react 配置路由前缀需要注意两点 1 资源使用相对路径 默认情况下 xff0c react 编译后的资源使用根路径 xff0c 也就是长下面这样 lt script src 61 34 static js 2 dfc7d8c4 chun
  • nginx 配置SPA应用路由前缀

    1 配置 location xxx alias your directory try files uri uri xxx index html 路由匹配要使用 用 alias 改变当前目录 try files 的最后一个回退项目也必须有前缀
  • geckodriver selenium火狐浏览器驱动

    火狐浏览器驱动对浏览器版本没什么大的要求 xff0c 直接下载这个压缩包就可以 xff0c 在selenium使用中谷歌浏览器bug会很多 xff0c 并非网站反爬 xff0c 火狐或许可以解决 xff0c Releases mozilla
  • B站高清视频下载方法揭密

    有很多文章都介绍过B站的视频如何下载 xff0c 大部分介绍的都是如何通过第三方网站提供的工具下载 xff0c 使用起来有诸多不便 xff0c 也不能实现批量下载 xff0c 今天就给大家介绍一款命令行小工具 xff0c 保证让你爱不释手
  • Android 科大讯飞、语音听写集成指南

    前提说明 xff1a 讯飞SDK与appID xff08 后台申请 xff09 是一一对应的 否则就会导致初始化不成功 xff01 1 创建appID并下载SDK xff08 没有账号的先行注册 xff09 https console xf
  • MCU-51:单片机直流电机驱动(PWM)

    目录 一 直流电机介绍二 电机驱动电路三 PWM3 1 PWM介绍3 2 产生PWM方法 四 代码演示注意 xff1a 一定要看 一 直流电机介绍 直流电机是一种将电能转换为机械能的装置 一般的直流电机有两个电极 xff0c 当电极正接时
  • Java编程经验---比较两个List对象差异

    Java编程经验 比较两个List对象差异 问题引入解决问题简化模型一般的办法速度更快的方法Lambda表达式解决办法 结语 问题引入 如何比较两个List对象的差异 xff0c 这个问题来源于我最近正在开发的新系统中的一个细节 大致情况就
  • iOS UIScrollView不能响应touchBegin的解决方法

    1 新建类别 2 重写以下三个方法 void touchesBegan NSSet touches withEvent UIEvent event self nextResponder touchesBegan touches withEv
  • idea使用原生Servlet-API报错javax.servlet.http不存在

    解决方法
  • Electron安装过慢问题解决方案

    npm install save dev electron 慢到家了 虽然官方也提供了一个方案 xff0c 还是很慢 新的解决方案 修改npm的配置文件 npm config edit 添加配置 electron mirror 61 htt
  • 前端框架篇学习--选择命令式还是声明式

    命令式与声明式定义 大白话 xff1a 假期回家了 xff0c 我想吃老妈的大盘鸡 xff0c 然后老妈就去采购食材 xff0c 剁鸡块 xff0c 卤鸡肉 xff0c 切土豆 xff0c 然后爆炒起来 xff0c 想方设法给我做好吃的大盘
  • 后端-Node(express)连接mongodb到前端-访问接口将数据显示页面(一条龙)

    如果你是前端想步入全栈领域 xff0c 如果你想用Node做一个接口 xff0c 如果你想自己操作一下数据库连接到自己页面的冲动 xff0c 本篇会大大帮助你 xff0c 让你一步一步跨过阻碍 xff0c 到达全栈的第一脚 大概流程 xff