海王捕鱼|街机海王捕鱼免费安装

返回首頁  設為首頁            資源已找到,加載中...... 請稍等!         網站地圖 | 娛樂網  | 科技吧  | google地圖  

網站首頁網絡學院站長工具網絡紅人酷站推薦左右博客網站工具虛擬世界網絡資訊熱門事件
文章 圖片
高級搜索
前端開發者設置數據庫最好的方法
前端開發者設置數據庫最好的方法
點擊數:158 更新時間:2017/11/24 18:51:21 | 【字體:

  最近有人來問我,作為前端開發人員保存用戶數據信息的最簡便的方法是什么。因此我來說明一下如何實現它。
  配置數據庫
  首先我們須要先有一個數據庫。你可以通過 mlab 獲取一個免費的。注冊之后,在 MongoDB 的部屬表中點擊 新建。 我們要用的是這個免費的沙盒數據。
  創建數據庫之后,我們需要創建一個賬戶以便于我們進行自我驗證。點擊數據庫名稱,然后點擊 用戶 , 并添加數據庫用戶 。 寫下你選擇的之后要用到的用戶名和密碼 。
  在數據庫頁面的頂部,你能夠看到一個 MongoDB URI 。這是我們數據庫的網址。這個數據庫的 URI 相當于網頁的 URL 。通常情況下,MongoDB 的 URI 如下:
  mongodb://<dbuser>:<dbpassword>@<host>:<port>/<dbname>
  例如,我的:
  mongodb://admin:[email protected]: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:[email protected]: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 方法的第一個參數類似。
  第二個參數是更新文檔請求—你能獲取更對信息從 這里 。在我們的例子中,我們告訴數據庫將用戶傳遞的數據與已存在的數據合并。
  但是要小心,因為嵌套參數將會被替換而不是合并。
  最后
  對于數據庫和后臺編程來說這只是剛剛開始,但是這足以讓你開始個人項目。
  之后我可能會寫一些關于身份驗證的文章,在此之前,請不要在里邊存儲一些比較敏感的數據。
  你可以修改這個完整的項目 在這 ,你將需要有一個自己的數據庫,如果你還不會創建,請回到 配置數據庫 部分。
  如果你覺得這篇文章還不錯,請給它一些掌聲讓更多的人看到它。謝謝! 

文章錄入:admin    責任編輯:admin 
  • 上一篇文章:

  • 下一篇文章: 沒有了
  • 【字體:
     網友評論:(只顯示最新10條。評論內容只代表網友觀點,與本站立場無關!)
     

    相關文章
    沒有相關文章
    最新推薦最新熱門
    專題欄目
       
    站長吧
    海王捕鱼 贵州11选5任三遗漏 山西福彩快乐十分前三组 吉林快三福彩开奖结果 河北体彩任选9场 欢乐升级腾讯版2018 今期开码结果开奖 26选5开奖最新结果 930彩票app下载 吉林时时网上购买火车票 香港赛马会彩票走势图