前端开发人员要存储用户数据,最简单的方法是什么?现在仅关于这部分我们来讨论下。
[搭建数据库]:
首先,要实际拥有一个数据库。可以去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