前端開發人員如何搭建數據庫

前端開發人員要存儲用戶數據，最簡單的方法是什麼？如今僅關於這部分咱們來討論下。

[搭建數據庫]：

首先，要實際擁有一個數據庫。能夠去mlab網站找一個免費的。註冊好後，在MongoDB部署（Deployments）欄裏點擊建立數據庫（create new）。建立出來的這個沙盒數據庫是不用一分錢的。因此就用這個。

建立數據庫以後，要建一個帳戶，這樣就能驗證本身的身份。點擊數據庫的名字，而後點擊用戶（users），再點添加數據庫用戶（add database user）。把選用的用戶名和密碼都寫下來，以後要用。

在數據庫頁面頂端，應該能夠看到MongoDB的地址同樣。按慣例，MongoDB地址格式以下。

 1 mongodb: 2 //<用戶名>:<密碼>@<主機>; 3 <端口>/<數據庫名稱>   

例如：

1 mongodb; 2 //admin;
3 SuperSecretPassword 4 @ds111885.mlab.com; 5 11885/medium

[搭建服務器]：

服務器後臺咱們要用Node平臺。想跳過搭建過程的話，能夠克隆我在Glitch上的項目，點擊這裏

看一下我寫的server.js啓動文件：

 1 // 初始化項目
 2 const express = require('express');  3 // 須要導入處理請求的express庫
 4 const app = express();  5  // 實例化express庫
 6 app.use(require("cors")())  7  // 容許跨域請求
 8 app.use(require('body-parser')  9  .json()) 10   // 自動解析請求數據，並轉成JSON
11 
12 // 基本路徑
13 app.get("/", 14    function (request, response) { 15   response.send("TODO") 16    // 全部的請求都以
17    一個字符串"TODO"來響應 18 }); 19 
20 // 基本路徑
21 app.post("/", 22    function (request, response) { 23   response.send("TODO") 24    // 全部的請求都以
25    一個字符串"TODO"來響應 26 }); 27 
28 app.put("/", 29     function (request, response) { 30   response.send("TODO") 31      // 全部的請求都以
32      一個字符串"TODO"來響應 33 }); 34 
35 // 由於咱們用的是glitch的網絡域，
36  因此監聽請求的端口要設成 37  process.env.PORT。 38 // 不然，端口能夠設成80或者別的什麼。
39 var listener = 
40  app.listen 41      (process.env.PORT, function () { 42  console.log 43      ('Your app is listening on port '
44       + listener.address().port); 45 });

先導入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函數原理徹底相同。固然，這兩個函數處理的不是GET方法，而是POST和PUT方法，很是合理。

[路徑]：

服務器開發時，須要作一些測試。運行HTTP請求能夠用這個網站REST test test，很方便。或者也能夠用Insomnia程序。

要查看這個Glitch網站程序的地址，點擊顯示(show)按鈕。

目前爲止，咱們都只用了/路徑。但咱們要的是把不一樣用戶的信息存儲起來，因此須要爲每一個用戶設置一個不一樣的路徑。 好比：/ZaninAndrea和/JohnGreen路徑。

那麼就產生了一個問題：不可能把全部的路徑一個個都編寫出來，這種方法擴展性太差。咱們須要的是路徑參數(route parameters)， 這樣只要寫一個路徑：/:user便可。

這裏面的冒號告訴Express庫要捕捉任何開始字符爲/，而且接下來只由數字字母組成的路徑。

[舉些例子]：

• /ZaninAndrea要捕捉

• /Johnny45 要捕捉

• /alex/score 不捕捉

而後，user的值能夠在request.params.user變量裏取得。

 1 // 基本路徑
 2 app.get  3 ("/:user", function 
 4 (request, response) {  5  response.send  6 (request.params.user)  7 });  8 
 9 // 基本路徑
10 app.post("/:user", 11 function (request, response) { 12  response. 13 send(request.params.user) 14 }); 15 
16 // 基本路徑
17 app.put("/:user", 18 function (request, response) { 19  response.send 20 (request.params.user) 21 });

如今，全部帶用戶名的查詢請求，服務器都可以以用戶名迴應了。

[爲數據庫加入數據]:

咱們知道用戶是誰了，如今要把用戶信息存儲起來。

查詢數據庫，咱們會用mongodb庫。能夠用下面兩種方法之一安裝：

 1 npm install mongodb --save 

若是用的是Glitch，也能夠去package.json文件，點擊添加軟件包(Add package)按鈕。

讓咱們加載這個庫，而後把MongoDB地址保存在一個變量裏：

 1 const mongodb = require('mongodb'); 2 // 加載mongodb庫 3 const uri = process.env.URI; 

這個地址屬於敏感信息，由於只要有了它就能訪問數據庫了。最好把這個地址放在一個.env文件裏，這樣別人就看不見了。

 1 URI=mongodb: 2 //admin: 3 PASSWORD@ds111885.mlab.com 4 :11885/medium 

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

鏈接數據庫是一種異步操做，因此咱們要把服務器搭建步驟包裹在一個回調函數裏，像這樣：

 1 mongodb.MongoClient.  2 connect(uri, function(err, db) {  3   // 基本路徑
 4   app.get("/:user",  5 function (request, response) {  6  response.send(request.  7 params.user)  8  });  9 
10   // 基本路徑
11   app.post("/:user", 12  function (request, response) { 13  response. 14  send(request.params.user) 15  }); 16 
17   // 基本路徑
18   app.put("/:user", 19   function (request, response) { 20  response.send 21  (request.params.user) 22  }); 23 
24    // 由於咱們用的是glitch的網絡域，
25  因此監聽請求的端口要設成 26  process.env.PORT。 27   // 不然，端口能夠設成80或者別的什麼。
28   var listener = 
29  app.listen(process.env.PORT, 30    function () { 31     console.log('
32    Your app is listening on port '
33     + listener.address().port); 34  }); 35 })

數據庫以集合方式組織起來，集合中又包含了文檔，文檔基本就是JSON文件。因此讓咱們鏈接到用戶user這個集合上去，第一次訪問時，這個集合會本身建立。

1 mongodb.MongoClient.connect 2 (uri, function(err, db) { 3   const collection =
4  db.collection('users') 5   // ...
6 }

首先，咱們要處理POST方法的路徑，用這個方法來把一個新用戶的數據加進去。而後，咱們要用PUT方法的路徑來更新。

 1 app.post("/:user",  2  function (request, response) {  3     // 在服務器上插入一個新的文檔
 4  collection.insertOne  5  ({ ...request.body, user  6  : request.params.user },  7   function (err, r) {  8       if (err){  9  response.send 10   ("An error occured") 11       }else{ 12         response.send("All well") 13  } 14  }) 15   });

集合的collection.insertOne插入方法能夠給集合加入一個新文檔。在咱們的例子裏，每一個用戶都有一個獨立的文檔。

{ ...request.body, user : request.params.user }參數利用展開操做符將請求主體內容中的數據與從URL獲取的用戶數據合併。

結果就是文檔保存在了集合裏。

第二個參數是一個回調函數，只是通知用戶操做的結果。

[從數據庫中獲取數據]:

既然服務器上已經有了些數據，那麼咱們就想要讀取數據。咱們用GET方法來讀取。

 1 app.get("/:user", function 
 2 (request, response) {  3  collection.find({  4  user : request.params.user })  5  .toArray(function (err, docs) {  6     if (err){  7  response  8  .send("An error occured")  9     }else{ 10  response.send(docs) 11  } 12  }) 13 });

此次，第一個參數是一個過濾器，告訴數據庫只把符合用戶屬性的文檔發回來。

返回到用戶的文檔是一個列表，由於理論上可能會不僅有一個文檔擁有那個用戶的屬性。要不要保證只返回一個，取決於咱們本身。

[更新數據庫的數據]:

最後，PUT方法能夠用來更新已經存在的用戶數據。

 1  // 基本路徑
 2   app.put("/:user",  3  function (request, response) {  4  collection.updateOne(  5  { user : request.params.user },  6  {$set:{ ...request.body, user  7  : request.params.user }},  8        function (err, r) {  9       if (err){ 10  response.send 11  ("An error occured") 12       }else{ 13      response.send("All well") 14  } 15  }) 16   });

 

第一個參數是一個過濾器，就像GET方法裏同樣使用。

第二個參數是一個更新文檔。看這裏能夠了解更多。在這個例子裏，咱們告訴數據庫要把用戶傳進來的數據與已有的數據合併。

不過要當心，由於嵌套參數將被替換，而不是合併。

來源：http://www.zcfy.cc/article/how-to-set-up-a-database-if-you-re-a-front-end-developer-4574.html