前端开发者该如何设置数据库

最近有人来问我，作为前端开发人员保存用户数据信息的最简便的方法是什么。因此我来说明一下如何实现它。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站制作、外贸网站建设、临高网络推广、成都微信小程序、临高网络营销、临高企业策划、临高品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供临高建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

配置数据库

首先我们须要先有一个数据库。你可以通过 mlab 获取一个免费的。注册之后，在 MongoDB 的部属表中点击新建。我们要用的是这个免费的沙盒数据。

创建数据库之后，我们需要创建一个账户以便于我们进行自我验证。点击数据库名称，然后点击用户，并添加数据库用户。写下你选择的之后要用到的用户名和密码。

在数据库页面的顶部，你能够看到一个 MongoDB URI 。这是我们数据库的网址。这个数据库的 URI 相当于网页的 URL 。通常情况下，MongoDB 的 URI 如下：

 
 
 
  
  
  mongodb://:@:/

例如，我的：

 
 
 
  
  
  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 方法的***个参数类似。

第二个参数是更新文档请求—你能获取更对信息从这里。在我们的例子中，我们告诉数据库将用户传递的数据与已存在的数据合并。

但是要小心，因为嵌套参数将会被替换而不是合并。

***

对于数据库和后台编程来说这只是刚刚开始，但是这足以让你开始个人项目。

之后我可能会写一些关于身份验证的文章，在此之前，请不要在里边存储一些比较敏感的数据。

你可以修改这个完整的项目在这，你将需要有一个自己的数据库，如果你还不会创建，请回到配置数据库部分。

如果你觉得这篇文章还不错，请给它一些掌声让更多的人看到它。谢谢!

名称栏目：前端开发者该如何设置数据库
文章转载：http://www.shufengxianlan.com/qtweb/news12/141312.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容