发布时间：2019-11-27 分类： 电商动态
最近有人问我，作为前端开发人员保存用户数据信息的最简单方法是什么。那么让我解释一下如何实现它。
配置数据库
首先，我们需要先建立一个数据库。你可以通过mlab获得一个免费的。注册后，在MongoDB的从属表中单击“新建”。我们正在使用这个免费的沙箱数据。
创建数据库后，我们需要创建一个帐户供我们自我验证。单击数据库名称，然后单击“用户”并添加数据库用户。记下您选择后将使用的用户名和密码。
在数据库页面的顶部，您可以看到MongoDB URI。这是我们数据库的URL。此数据库的URI等同于网页的URL。一般来说，MongoDB的URI如下：
Mongodb: //< dbuser>:< dbpassword> @< host>:< port> /< dbname>
例如，我的：
Mongodb: //admin: superSecretPassword@ds111885.mlab.com: 11885/medium
设置服务器
我们将在后端使用Node。您可以单击此处在Glitch上克隆我的项目，消除了设置它的麻烦。
我们从server.js开始，如下所示：
//init项目
Const express=require（'express'）; //我们将用来处理请求的库
Const app=express（）; //实例化快递
App.use（require（'cors'）（））//允许跨域请求
App.use（require（'body-parser'）。json（））//自动将请求数据解析为JSON
//基本路线
App.get（'/'，function（request，response）{
Response.send（'TODO'）//总是以字符串'TODO'
响应}）;
//基本路线
App.post（'/'，功能（请求，响应）{
Response.send（'TODO'）//总是以字符串'TODO'
响应}）;
App.put（'/'，函数（请求，响应）{
Response.send（'TODO'）//总是以字符串'TODO'
响应}）;
//听取请求，需要process.env.PORT，因为
//我们正在使用毛刺，否则你可以写80或其他什么
Var listener=app.listen（process.env.PORT，function（）{
Console.log（'你的应用正在侦听端口'+ listener.address（）。port）;
}）;
我们先进口快递——该库用于处理发送到我们服务器的请求。
我们需要使用（require（cors））来允许跨域请求。跨域请求是从域名的代购源码网站请求另一个域名下的服务。
App.use（require（'body-parser'）。json（））为我们自动将请求数据解析为JSON。
然后我们传递我们想要在get方向处理的路由和处理请求的回调。这意味着只要有人在站点中打开/页面，请求就会传递给回调来处理它。域名部分是隐式的，因此如果您的域名为http://shiny-koala.glitch.com，则路由/约为http://shiny-koala.glitch.com/about。
确切地说，“打开页面”的意思是使用GET方法生成发送到服务的请求。 HTTP方法只是您发送给服务的请求类型，我们只使用这些：
GET方法用于从服务器获取资源。例如，当您打开Facebook时，它需要加载HTML，CSS和JavaScript。
POST方法用于在服务器上创建资源。例如，在Facebook上发布内容，通过POST请求将发布内容中写入的信息发送到服务器。
PUT方法用于更新服务器上的资源。例如，当您修改帖子时，您使用PUT请求将修改后的内容发送到Facebook服务器。
App.post和app.put的工作方式与app.get非常相似，但有足够的理由使用POST和PUT代替GET。
路由
在进行服务器开发时，需要进行一些测试。您可以使用简单的代购源码网站REST测试或Insomnia应用程序运行HTTP请求。
单击“显示”按钮以检查Glitch应用程序的URL。
到目前为止，我们只使用了routing /。但是，如果我们想为不同的用户存储不同的信息，我们需要为不同的用户分配不同的路由。
例如：/ZaninAndrea和/JohnGreen
现在有一个难点：
我们无法对每条路线进行编码，因为它不是可扩展的方法。我们需要的是路由参数。接下来我们只编写一个路由：/: user
冒号位于表达式中，用于捕获以/开头且仅包含字符编号的任何路径。
如以下示例所示：
/ZaninAndrea能够捕获
/Johnny45可以捕获
/alex /得分无法捕获
我们可以在变量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文件并单击“添加包”按钮。
我们加载mongodb库并将MongoDB URI存储到变量:
中Const mongodb=require（'mongodb'）; //加载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）{
//基本路线
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）
}）;
//听取请求，需要process.env.PORT，因为
//我们正在使用毛刺，否则你可以写80或其他什么
Var listener=app.listen（process.env.PORT，function（）{
Console.log（'你的应用正在侦听端口'+ 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）{
如果（错误）{
Response.send（'发生错误'）
}否则{
Response.send（'一切顺利'）
}
}）
}）;
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）{
如果（错误）{
Response.send（'发生错误'）
}否则{
Response.send（文档）
}
}）
}）;
此时，第一个参数是一个过滤器，它告诉数据库仅向我们发送用户的属性信息文档。
用户信息作为数组存储在文档中，因为理论上不止一个文档包含用户的属性信息。我们必须避免这种情况发生。
该文档作为数组返回给用户，因为理论上可以有多个具有此用户属性的文档。我们必须确保不会发生这种情况。
更新数据库数据
最后但并非最不重要的是，使用PUT方法更新现有用户信息。
//基本路线
App.put（'/: user'，function（request，response）{
collection.updateOne（{user: request.params.user}，
{$ set: {... request.body，user: request.params.user}}，
功能（错误，r）{
如果（错误）{
Response.send（'发生错误'）
}否则{
Response.send（'一切顺利'）
}
}）
}）;
第一个参数是一个过滤器，类似于GET方法的第一个参数。
第二个参数是更新文档请求—你可以从这里获得更多相关信息。在我们的例子中，我们告诉数据库将用户传递的数据与现有数据合并。
但要小心，因为嵌套参数将被替换而不是合并。
最后
这只是数据库和后台编程的开始，但它足以让您开始自己的项目。
之后，我可能会写一些关于身份验证的文章。在此之前，请不要在里面存储一些敏感数据。
您可以修改此完整项目。在这种情况下，您需要拥有自己的数据库。如果您尚未创建它，请返回“配置数据库”部分。
如果您认为这篇文章不错，请给予一些掌声，让更多人看到它。谢谢！
