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