Nodejs+MongoDB 搭建服务( demo )

时间 2019-12-28

标签 nodejs+mongodb nodejs mongodb 搭建服务 demo 栏目 MongoDB 繁體版

原文原文链接

前言

这次使用nodejs搭建后端平台，独立完成对MongoDB数据库的增，删，改，查功能javascript

体验下做后端同窗的感jio (这是一个小小的demo)html

后端嘛，确定是先有库才有码的，这里就先讲库,Go~java

!菜鸟一枚，若是文章有什么不对的地方，欢迎各位大神指正(感谢)node

MongoDB

这里我是用的图形化管理工具对MongoDB进行管理，下面有记录ios

安装

地址 https://www.mongodb.com/download-center/communitygit

如上图所示，Download 下载安装包mongodb

推荐 Custom 自定义安装，我习惯放到D盘（看我的喜爱）数据库

Robo 3T

安装

地址 https://robomongo.org/downloadexpress

步骤npm

此处选用第二个（第一个有兴趣能够自行研究），安装很简单next就能够了，路径我选择的是D盘。

使用

链接

如上图所示，咱们点击create新创建一个链接，Save，Connect

建库

在建立的链接上右键 -> Create Database -> enter name -> create

此时建立一个User的库

建表

User库里会有什么呢? 先建立一个信息表

数据

表有了，接下来就是数据了，以下图所示

这样第一条数据就产生了，其余的库以及表须要发挥智慧去设计一下，暂时over

其余的操做代码，同窗们能够自行查找下，不是很难（我就不献丑了）

nodejs

node

安装就完事了，此处略过，不会的同窗能够自行查找 (偷偷给个下载地址: http://nodejs.cn/download/ )

项目构建

第一步，新建一个文件夹，而后用VSCode打开（git，yarn）

npm init --yes // 建立package.json
    yarn // 安装依赖
    
    yarn add express // 安装 express
    yarn add mongodb // 安装 mongodb
复制代码

第二步，建立一个后端项目启动文件 server.js 放到根目录，贴个最基础的例子

const express = require('express')
const app = express();
// 在根目录新建一个modeles文件夹，而后划分一个首页Home的文件夹，里面再具体划分首页要展现的功能
const home = require('./modules/Home/home.js');
// 配置路由
app.use('/home',home);
// 监听
app.listen(3000);
复制代码

这样根目录的server.js 就完成了，接下来就是链接到mongoDB服务器

第三步，先作到能够链接到数据库，而且查到User -> info 的数据

// 配置模块
const express = require("express");
const router = express.Router();
const MongoClient = require("mongodb").MongoClient;
const DB_URL = "mongodb://127.0.0.1:27017/";

router.get("/", function(req, res) {
  MongoClient.connect(
    DB_URL,
    { useUnifiedTopology: true, useNewUrlParser: true },
    (error, db) => {
      const User = db.db("User");
      User.collection("info")
        .find({})
        .toArray((err, result) => {
          if (err) throw err;
          console.log(result, "链接成功!");
          res.json({
              result
          });
          db.close();
        });
    }
  );
});
// 暴露路由
module.exports = router;
复制代码

本身研究了很久，这里就直接贴出来了，目录结构以下图

第四步，启动服务打开终端 node server.js 而后打开浏览器 http://localhost:3000/home

在浏览器上也能够看到数据显示在页面上

第五步，完善，既然查询搞定了，那么尝试下增删改

这里呢，通过百般尝试，总结还须要其余的插件来支持的（此处是为精华）

yarn add bodyParser // 解析json，便于nodejs 能够拿到传过来的数据
    ***跨域***  此处百度一番以下，放到 server.js 中
    app.all("*",(req,res,next) => {
        //设置容许跨域的域名，*表明容许任意域名跨域
        res.header("Access-Control-Allow-Origin","*");    
        //容许的header类型
        res.header("Access-Control-Allow-Headers","content-type");    
        //跨域容许的请求方式 
        res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");    
        if (req.method.toLowerCase() == 'options'){
            res.sendStatus(200);  //让options尝试请求快速结束
        }else{
            next();
        }
    });
复制代码

接下来就是要写对mongoDB数据库的增删改查，我先作的是查，改，增，删操做，顺便贴一下 html页面

这里穿插一下讲解(小声BB)
    
    页面是直接使用 axios ，用的过程当中发现post须要本身定义 headers，这一点是比较重要的（在解决跨域的前提下）
    axios.post('http://localhost:3000/home/updata',{ "name":"zhangsan"},{
	 headers: { 'Content-Type': 'application/json' }
    })
复制代码

**home.js**
    
    // 配置模块
    const express = require("express");
    const router = express.Router();
    const MongoClient = require("mongodb").MongoClient;
    const DB_URL = "mongodb://127.0.0.1:27017/";
    
    router.get("/", (req, res) => {
      MongoClient.connect(
        DB_URL,
        { useUnifiedTopology: true, useNewUrlParser: true },
        (error, db) => {
          const User = db.db("User");
          User.collection("info")
            .find({})
            .toArray((err, result) => {
              if (err) throw err;
              res.json({
                  result
              });
              db.close();
            });
        }
      );
    });
    
    router.post("/updata", (req, res) => {
      MongoClient.connect(
        DB_URL,
        { useUnifiedTopology: true, useNewUrlParser: true },
        (err, db) => {
          if (err) throw err;
          const User = db.db("User");
          const updateStr = {$set: { "name" : "zhangsanupdata" }};
          User.collection("info").updateOne(req.body, updateStr, (err, result) => {
              if (err) throw err;
              res.json({
                success:true
              });
              db.close();
          });
        }
      );
    });
    
    router.post("/increase", (req, res) => {
      MongoClient.connect(
        DB_URL,
        { useUnifiedTopology: true, useNewUrlParser: true },
        (err, db) => {
          if (err) throw err;
          const User = db.db("User");
          User.collection("info").insertOne(req.body, (err, result) => {
              if (err) throw err;
              res.json({
                success:true
              });
              db.close();
          });
        }
      );
    });
    
    router.post("/del", (req, res) => {
      MongoClient.connect(
        DB_URL,
        { useUnifiedTopology: true, useNewUrlParser: true },
        (err, db) => {
          if (err) throw err;
          const User = db.db("User");
          User.collection("info").deleteOne(req.body, (err, result) => {
              if (err) throw err;
              res.json({
                success:true
              });
              db.close();
          });
        }
      );
    });
    
    // 暴露路由
    module.exports = router;
复制代码

**html**
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>俺是一个页面</title>
    <script type="text/javascript" charset="UTF-8">
    	function GET(){
    	 axios.get('http://localhost:3000/home')
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	}
    </script>
    <script type="text/javascript" charset="UTF-8">
    	function UPDATA(){
    	 axios.post('http://localhost:3000/home/updata',{
    		"name":"zhangsan"
    	 },{
    		  headers: {
    			'Content-Type': 'application/json'
    		  },
    	 })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	}
    </script>
    <script type="text/javascript" charset="UTF-8">
    	function INCREASE(){
    	 axios.post('http://localhost:3000/home/increase',{
    		"name":"zhangsan"
    	 },{
    		  headers: {
    			'Content-Type': 'application/json'
    		  },
    	 })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	}
    </script>
    <script type="text/javascript" charset="UTF-8">
    	function DEL(){
    	 axios.post('http://localhost:3000/home/del',{
    		"name":"zhangsanupdata"
    	 },{
    		  headers: {
    			'Content-Type': 'application/json'
    		  },
    	 })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	}
    </script>
    </head>
    <body>
       <button onClick="GET()">GET !</button>
       <button onClick="UPDATA()">UPDATA !</button>
       <button onClick="INCREASE()">INCREASE !</button>
       <button onClick="DEL()">DEL !</button>  
    </body>
    </html>
复制代码

对于一个小白来说，也是踩了很久的坑，才弄出来，弄过以后感受也没啥总结的，惟手熟尔（滑稽）

至此，一个简单的服务demo就完成了，最后但愿你们有所收获，再会!!
复制代码

参考网址以下
    跨域：https://www.html.cn/qa/node-js/10762.html
    axios: https://www.kancloud.cn/yunye/axios/234845
    nodejs-mongodb: https://www.runoob.com/nodejs/nodejs-mongodb.html
复制代码

本篇文章是为记录小白的成长历程（主要是记性很差，记个笔记有保障，用到的时候能够拿出来瞅瞅） 2019/12/25