前端开发人员如何搭建数据库

前端开发人员要存储用户数据，最简单的方法是什么？如今仅关于这部分咱们来讨论下。

[搭建数据库]：

首先，要实际拥有一个数据库。能够去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