扣丁学堂浅谈HTML5前端开发者该如何设置数据库

2018-01-03 13:19:22 560浏览

在现如今，随着互联网科技飞速的发展和进步，比如目前作为HTML5前端开发人员保存用户数据信息的最简便的方法是什么?下面我们一起来看一下吧。

配置数据库

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

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

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

mongodb://:@:/

例如，我的：

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

设置服务器

我们会在后端使用Node。你可能单击这里克隆在Glitch上的项目，省去自己设置的麻烦。

我们从server.js开始，如下：

//initproject

constexpress=require(‘express’);//thelibrarywewillusetohandlerequests

constapp=express();//instantiateexpress

app.use(require(“cors”)())//allowCross-domainrequests

app.use(require(‘body-parser’).json())//automaticallyparsesrequestdatatoJSON

//baseroute

app.get(“/”,function(request,response){

response.send(“TODO”)//alwaysrespondswiththestring“TODO”

});

//baseroute

app.post(“/”,function(request,response){

response.send(“TODO”)//alwaysrespondswiththestring“TODO”

});

app.put(“/”,function(request,response){

response.send(“TODO”)//alwaysrespondswiththestring“TODO”

});

//listenforrequests,theprocess.env.PORTisneededbecause

//weareusingglitch,otherwiseyoucouldhavewritten80orwhatever

varlistener=app.listen(process.env.PORT,function(){

console.log(‘Yourappislisteningonport‘+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。

路由

在你进行服务器开发时，你需要进行一些测试。你可以用简单的网站RESTtesttest或者Insomnia应用程序去运行一下HTTP请求。

点击显示按钮，来检查Glitch应用程序的URL。

到目前为止，我们只是用过路由/。但是如果我们想对不同的用户存储不同的信息，我们就需要给不同的用户分配一个不同的路由。

例如：/ZaninAndrea和/JohnGreen

现在有一个难点：

我们不可能对每一条路由进行编码，因为它不是一个可扩展的方法。我们需要的是路由参数。接下来我们只编码一个路由：/:user

冒号是在表达要捕捉任何以/开始的并且只包含字符数字的路由。

如下例所示：

/ZaninAndrea能够捕捉到

/Johnny45能够捕捉到

/alex/score不能捕捉到

我们可以在变量request.params.user中检索user

//baseroute

app.get(“/:user”,function(request,response){

response.send(request.params.user)

});

//baseroute

app.post(“/:user”,function(request,response){

response.send(request.params.user)

});

//baseroute

app.put(“/:user”,function(request,response){

response.send(request.params.user)

});

现在服务器可以响应每一个查询并显示查询的用户名。

向数据库增加数据

我们知道user是谁了，现在我们想存储一些关于他的信息。

为了查询数据库，我们会使用mongodb库。你可以用以下两个方法安装：

npminstallmongodb–save

或者如果你使用Glitch，你可以切换到package.json文件并点击Addpackage按钮。

我们加载mongodb库然后存储MongoDBURI到一个变量中:

constmongodb=require(‘mongodb’);//loadmongodb

consturi=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){

//baseroute

app.get(“/:user”,function(request,response){

response.send(request.params.user)

});

//baseroute

app.post(“/:user”,function(request,response){

response.send(request.params.user)

});

//baseroute

app.put(“/:user”,function(request,response){

response.send(request.params.user)

});

//listenforrequests,theprocess.env.PORTisneededbecause

//weareusingglitch,otherwiseyoucouldhavewritten80orwhatever

varlistener=app.listen(process.env.PORT,function(){

console.log(‘Yourappislisteningonport‘+listener.address().port);

});

})

数据库是按集合组织的，集合中包含文档(基本上是JSON文件)。所以让我们连接到User集合(我们第一次访问的时候会创建)。

mongodb.MongoClient.connect(uri,function(err,db){

constcollection=db.collection(‘users’)

//…

}

首先，我们先来操作一下POST路由。当我们第一次来添加用户数据时，将会用到该路由。然后我们要用PUT路由来更新数据。

app.post(“/:user”,function(request,response){

//insertsanewdocumentontheserver

collection.insertOne({…request.body,user:request.params.user},function(err,r){

if(err){

response.send(“Anerroroccured”)

}else{

response.send(“Allwell”)

}

})

});

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(“Anerroroccured”)

}else{

response.send(docs)

}

})

});

此时，第一个参数是一个过滤器，用来告诉数据库将用户的属性信息文档只发给我们。

用户信息以数组的形式保存在文档中，因为从理论上讲不止一个文档中保存着用户的属性信息。我们必须避免这种情况的发生。

文档以数组的形式返回给用户，因为理论上可以有多个具有该用户属性的文档。我们必须确保这种情况不会发生。

更新数据库数据

最后而且很重要的是用PUT方法更新已存在的用户信息。

//baseroute

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(“Anerroroccured”)

}else{

response.send(“Allwell”)

}

})

});

第一个参数是一个过滤器，与GET方法的第一个参数类似。

第二个参数是更新文档请求—你能获取更对信息从这里。在我们的例子中，我们告诉数据库将用户传递的数据与已存在的数据合并。但是要小心，因为嵌套参数将会被替换而不是合并。

以上就是关于前端开发者该如何设置数据库的详细介绍，最后想要工作不累就要不断的提升自己的技能，想要快速学习HTML5开发就到由专业老师授课的扣丁学堂学习吧。扣丁学堂还有名师录制的HTML5视频教程供学员观看学习，想要HTML5培训视频教程的小伙伴快咨询我们的专业老师索要吧。扣丁学堂H5技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>