最近有人來問我，作為前端開發人員保存用戶數據信息的最簡便的方法是什么。因此我來說明一下如何實現它。

配置數據庫

首先我們須要先有一個數據庫。你可以通過 mlab 獲取一個免費的。注冊之后，在 MongoDB 的部屬表中點擊 新建。 我們要用的是這個免費的沙盒數據。

創建數據庫之后，我們需要創建一個賬戶以便于我們進行自我驗證。點擊數據庫名稱，然后點擊 用戶 ， 并添加數據庫用戶 。 寫下你選擇的之后要用到的用戶名和密碼 。

[[211017]]

在數據庫頁面的頂部，你能夠看到一個 MongoDB URI 。這是我們數據庫的網址。這個數據庫的 URI 相當于網頁的 URL 。通常情況下，MongoDB 的 URI 如下：

mongodb://<dbuser>:<dbpassword>@<host>:<port>/<dbname> 

例如，我的：

mongodb://admin:superSecretPassword@ds111885.mlab.com:11885/medium 

設置服務器

我們會在后端使用 Node。你可能單擊 這里 克隆我在 Glitch 上的項目，省去自己設置的麻煩。

我們從 server.js 開始，如下：

// init project 
const express = require('express'); // the library we will use to handle requests 
const app = express(); // instantiate express 
app.use(require("cors")()) // allow Cross-domain requests  
app.use(require('body-parser').json()) // automatically parses request data to JSON 
 
// base route 
app.get("/", function (request, response) { 
  response.send("TODO") // always responds with the string "TODO" 
}); 
 
// base route 
app.post("/", function (request, response) { 
  response.send("TODO") // always responds with the string "TODO" 
}); 
 
app.put("/", function (request, response) { 
  response.send("TODO") // always responds with the string "TODO" 
}); 
 
 
// listen for requests, the process.env.PORT is needed because 
// we are using glitch, otherwise you could have written 80 or whatever 
var listener = app.listen(process.env.PORT, function () { 
  console.log('Your app is listening on port ' + listener.address().port); 
}); 

我們首先導入了 express —— 這個庫用來處理向我們的服務器送來的請求。

我們需要 use(require(cors)) 來允許跨域請求?？缬蛘埱笫菑哪硞€域名的網站去請求另一個域名下的服務。

app.use(require('body-parser').json()) 為自動為我們將請求數據解析成 JSON。

然后我們向 get 方向傳遞想要處理的路由，以及處理請求的回調。也就是說只要有人打開網站中的 / 頁面，請求就會被傳遞給那個回調來處理。域名部分是隱含的，所以如果你的的域是 http://shiny-koala.glitch.com，路由 /about 就是 http://shiny-koala.glitch.com/about。

確切地說，我說的“打開頁面”是指產生一個使用 GET 方法發送給服務的請求。HTTP 方法只是你發送給服務的請求類型，我們只會使用這些：

• GET 方法用于從服務器獲取資源。比如，打開 Facebook 的時候，它需要加載 HTML、CSS 和 JavaScript。
• POST 方法用于在服務器上創建資源。比如在 Facebook 上發布內容，寫在發布內容中的信息使用通過 POST 請求發送給服 Facebook 務器。
• PUT 方法用于更新服務器上的資源。比如，你在修改某篇發布內容的時候，就使用 PUT 請求將修改的內容發送給 Facebook 服務器。

app.post 和 app.put 的工作方式和 app.get 很像，但是有足夠合理的理由使用 POST 和 PUT 方法代替 GET。

路由

在你進行服務器開發時，你需要進行一些測試。你可以用簡單的網站 REST test test 或者 Insomnia 應用程序去運行一下 HTTP 請求。

點擊 顯示 按鈕，來檢查 Glitch 應用程序的 URL 。

到目前為止，我們只是用過路由 / 。但是如果我們想對不同的用戶存儲不同的信息，我們就需要給不同的用戶分配一個不同的路由。

例如： /ZaninAndrea 和 /JohnGreen

現在有一個難點：

我們不可能對每一條路由進行編碼，因為它不是一個可擴展的方法。我們需要的是 路由參數 。接下來我們只編碼一個路由：/:user

冒號是在表達要捕捉任何以/開始的并且只包含字符數字的路由。

如下例所示：

• /ZaninAndrea 能夠捕捉到
• /Johnny45 能夠捕捉到
• /alex/score 不 能捕捉到

我們可以在變量 request.params.user 中檢索 user

// base route 
app.get("/:user", function (request, response) { 
  response.send(request.params.user)  
}); 
 
// base route 
app.post("/:user", function (request, response) { 
  response.send(request.params.user)  
}); 
 
 
// base route 
app.put("/:user", function (request, response) { 
  response.send(request.params.user)  
}); 

現在服務器可以響應每一個查詢并顯示查詢的用戶名。

向數據庫增加數據

我們知道 user 是誰了，現在我們想存儲一些關于他的信息。

為了查詢數據庫，我們會使用 mongodb 庫。你可以用以下兩個方法安裝：

npm install mongodb --save 

或者如果你使用 Glitch ，你可以切換到 package.json 文件并點擊 Add package 按鈕。

我們加載 mongodb 庫然后存儲 MongoDB URI 到一個變量中:

const mongodb = require('mongodb'); // load mongodb 
const uri = process.env.URI; 

URI 是很敏感的信息——這是訪問數據庫所需的一切。***把 URI 放到一個 .env 文件中，.env 文件中的信息對于其他人是不可見的。

URI=mongodb://admin:PASSWORD@ds111885.mlab.com:11885/medium 

Glitch 會自動從 .env 文件中加載變量到 process.env 變量。

數據庫的連接是異步的操作，所以我們需要像這樣在回調中包裝所有服務器設置：

mongodb.MongoClient.connect(uri, function(err, db) { 
  // base route 
  app.get("/:user", function (request, response) { 
    response.send(request.params.user)  
  }); 
 
  // base route 
  app.post("/:user", function (request, response) { 
    response.send(request.params.user)  
  }); 
   
  // base route 
  app.put("/:user", function (request, response) { 
    response.send(request.params.user)  
  }); 
   
  // listen for requests, the process.env.PORT is needed because 
  // we are using glitch, otherwise you could have written 80 or whatever 
  var listener = app.listen(process.env.PORT, function () { 
    console.log('Your app is listening on port ' + listener.address().port); 
  }); 
}) 

數據庫是按集合組織的，集合中包含文檔(基本上是 JSON 文件)。所以讓我們連接到 User 集合(我們***次訪問的時候會創建)。

mongodb.MongoClient.connect(uri, function(err, db) { 
  const collection = db.collection('users') 
  // ... 
} 

首先，我們先來操作一下 POST 路由。當我們***次來添加用戶數據時，將會用到該路由。然后我們要用 PUT 路由來更新數據。

app.post("/:user", function (request, response) { 
    // inserts a new document on the server 
    collection.insertOne({ ...request.body, user : request.params.user }, function (err, r) { 
      if (err){ 
        response.send("An error occured")  
      }else{ 
        response.send("All well") 
      } 
    }) 
  }); 

collection.insertOne 方法給收集器添加了一個新的文檔。在這個例子中，每一個用戶都將會擁有他自己的文檔。

{ ...request.body, user : request.params.user } 利用 擴展操作符 合并通過請求主體和用戶通過 URL 提供的數據。

被存儲在收集器其中的文檔便是運行結果。

第二個參數是一個回調，將操作結果簡單的通知給用戶。

從數據庫獲取數據

我們在服務器上存放了一些數據，現在想從服務器上讀取這些數據。我們用 GET 方法來獲取。

app.get("/:user", function (request, response) { 
  collection.find({ user : request.params.user }).toArray(function (err, docs) { 
    if (err){ 
      response.send("An error occured")  
    }else{ 
      response.send(docs) 
    } 
  }) 
}); 

此時，***個參數是一個過濾器，用來告訴數據庫將用戶的屬性信息文檔只發給我們。

用戶信息以數組的形式保存在文檔中，因為從理論上講不止一個文檔中保存著用戶的屬性信息。我們必須避免這種情況的發生。

文檔以數組的形式返回給用戶，因為理論上可以有多個具有該用戶屬性的文檔。我們必須確保這種情況不會發生。

更新數據庫數據

***而且很重要的是用 PUT 方法更新已存在的用戶信息。

// base route 
  app.put("/:user", function (request, response) { 
    collection.updateOne({ user : request.params.user }, 
                         {$set:{ ...request.body, user : request.params.user }}, 
                         function (err, r) { 
      if (err){ 
        response.send("An error occured")  
      }else{ 
        response.send("All well") 
      } 
    }) 
  }); 

***個參數是一個過濾器，與 GET 方法的***個參數類似。

第二個參數是更新文檔請求—你能獲取更對信息從 這里 。在我們的例子中，我們告訴數據庫將用戶傳遞的數據與已存在的數據合并。

但是要小心，因為嵌套參數將會被替換而不是合并。

***

對于數據庫和后臺編程來說這只是剛剛開始，但是這足以讓你開始個人項目。

之后我可能會寫一些關于身份驗證的文章，在此之前，請不要在里邊存儲一些比較敏感的數據。

你可以修改這個完整的項目 在這 ，你將需要有一個自己的數據庫，如果你還不會創建，請回到 配置數據庫 部分。

如果你覺得這篇文章還不錯，請給它一些掌聲讓更多的人看到它。謝謝!