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

问题：我怎么才能收到你们公众号平台的推送文章呢？答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。

最近有人问我，前端开发人员要存储用户数据，最简单的方法是什么。现在仅关于这部分，我来说明下怎么做。

搭建数据库

首先，要实际拥有一个数据库。可以去mlab网站找一个免费的。注册好后，在MongoDB部署(Deployments)栏里点击创建新数据库(create new)。创建出来的这个沙盒数据库是不用钱的，所以就用这个。创建数据库后，要建一个帐户，这样就能验证自己的身份。点击数据库的名字，然后点用户(users)，再点添加数据库用户(add database user)。把选用的用户名和密码写下来，之后要用。在数据库页面顶端，应该可以看到MongoDB的地址。这是数据库的页面地址，就像一个网页地址一样。按惯例，MongoDB地址格式如下：

mongodb:
//<用户名>:<密码>@<主机>:
<端口>/<数据库名称>

比如，我的数据库是：

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

搭建服务器

服务器后台我们要用Node平台。想跳过搭建过程的话，可以克隆我在Glitch上的项目，点击这里看一下我写的

server.js

启动文件：

// 初始化项目
const express = require('express');
// 需要导入处理请求的express库
const app = express();
// 实例化express库
app.use(require("cors")())
// 允许跨域请求
app.use(require('body-parser')
.json())
 // 自动解析请求数据，并转成JSON

// 基本路径
app.get("/",
  function (request, response) {
 response.send("TODO")
  // 所有的请求都以
  一个字符串"TODO"来响应
});

// 基本路径
app.post("/",
  function (request, response) {
 response.send("TODO")
  // 所有的请求都以
  一个字符串"TODO"来响应
});

app.put("/",
   function (request, response) {
 response.send("TODO")
    // 所有的请求都以
    一个字符串"TODO"来响应
});

// 因为我们用的是glitch的网络域，
    所以监听请求的端口要设成
    process.env.PORT。
// 否则，端口可以设成80或者别的什么。
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

函数原理完全相同。当然，这两个函数处理的不是GET方法，而是POST和PUT方法，非常合理。

路径

服务器开发时，需要做一些测试。运行HTTP请求可以用这个网站REST test test，很方便。或者也可以用Insomnia程序。要查看这个Glitch网站程序的地址，点击显示(show)按钮。目前为止，我们都只用了

/

路径。但我们要的是把不同用户的信息存储起来，所以需要为每个用户设置一个不同的路径。 比如：

/ZaninAndrea

和

/JohnGreen

路径。那么就产生了一个问题：不可能把所有的路径一个个都编写出来，这种方法扩展性太差。我们需要的是路径参数(route parameters)， 这样只要写一个路径：

/:user

即可。这里面的冒号告诉Express库要捕捉任何开始字符为

/

，并且接下来只由数字字母组成的路径。举些例子：

/ZaninAndrea

要捕捉

/Johnny45

 要捕捉

/alex/score

 不捕捉
然后，

user

的值可以在

request.params.user

变量里取得。

// 基本路径
app.get
("/:user", function
(request, response) {
 response.send
(request.params.user)
});

// 基本路径
app.post("/:user",
function (request, response) {
 response.
send(request.params.user)
});

// 基本路径
app.put("/:user",
function (request, response) {
 response.send
(request.params.user)
});

现在，所有带用户名的查询请求，服务器都能够以用户名回应了。

为数据库加入数据

我们知道用户是谁了，现在要把用户信息存储起来。查询数据库，我们会用

mongodb

库。可以用下面两种方法之一安装：

npm install mongodb --save

如果用的是Glitch，也可以去

package.json

文件，点击添加软件包(Add package)按钮。让我们加载这个库，然后把MongoDB地址保存在一个变量里：

const mongodb = require('mongodb');
// 加载mongodb库
const uri = process.env.URI;

这个地址属于敏感信息，因为只要有了它就能访问数据库了。最好把这个地址放在一个

.env

文件里，这样别人就看不见了。

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

Glitch会自动从

.env

文件中把这个变量加载到

process.env

变量中去。连接数据库是一种异步操作，所以我们要把服务器搭建步骤包裹在一个回调函数里，像这样：

mongodb.MongoClient.
connect(uri, function(err, db) {
 // 基本路径
 app.get("/:user",
function (request, response) {
   response.send(request.
params.user)
 });

 // 基本路径
 app.post("/:user",
function (request, response) {
   response.
send(request.params.user)
 });

 // 基本路径
 app.put("/:user",
 function (request, response) {
   response.send
 (request.params.user)
 });

  // 因为我们用的是glitch的网络域，
 所以监听请求的端口要设成
 process.env.PORT。
 // 否则，端口可以设成80或者别的什么。
 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) {
   // 在服务器上插入一个新的文档
   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

方法可以用来更新已经存在的用户数据。

 // 基本路径
 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.zcfy.cc/article/how-to-set-up-a-database-if-you-re-a-front-end-developer-4574.html广告内容


关注我们