吉林时时彩大小走势图  设为首页            资源已找到,加载中...... 请稍等!         网站地图 | 娱乐网  | 科技吧  | google地图  

网站首页网络学院站长工具网络红人酷站推荐左右博客网站工具虚拟世界网络资讯热门事件
文章 图片
高级搜索
前端开发者设置数据库最好的方法
前端开发者设置数据库最好的方法
点击数:158 更新时间:2017/11/24 18:51:21 | 【字体:

  最近有人来问我,作为前端开发人员保存用户数据信息的最简便的方法是什么。因此我来说明一下如何实现它。
  配置数据库
  首先我们须要先有一个数据库。你可以通过 mlab 获取一个免费的。注册之后,在 MongoDB 的部属表中点击 新建。 我们要用的是这个免费的沙盒数据。
  创建数据库之后,我们需要创建一个账户以便于我们进行自我验证。点击数据库名称,然后点击 用户 , 并添加数据库用户 。 写下你选择的之后要用到的用户名和密码 。
  在数据库页面的顶部,你能够看到一个 MongoDB URI 。这是我们数据库的网址。这个数据库的 URI 相当于网页的 URL 。通常情况下,MongoDB 的 URI 如下:
  mongodb://<dbuser>:<dbpassword>@<host>:<port>/<dbname>
  例如,我的:
  mongodb://admin:[email protected]:11885/medium
  设置服务器
  我们会在后端使用 Node。你可能单击 这里 克隆我在 Glitch 上的项目,省去自己设置的麻烦。
  我们从 server.js 开始,如下:
  // init project
  const express = require('express'); // the library we will use to handle requests
  const app = express(); // instantiate express
  app.use(require("cors")()) // allow Cross-domain requests
  app.use(require('body-parser').json()) // automatically parses request data to JSON
  // base route
  app.get("/", function (request, response) {
  response.send("TODO") // always responds with the string "TODO"
  });
  // base route
  app.post("/", function (request, response) {
  response.send("TODO") // always responds with the string "TODO"
  });
  app.put("/", function (request, response) {
  response.send("TODO") // always responds with the string "TODO"
  });
  // listen for requests, the process.env.PORT is needed because
  // we are using glitch, otherwise you could have written 80 or whatever
  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 方向传递想要处理的路由,以及处理请求的回调。也就是说只要有人打开网站中的 / 页面,请求就会被传递给那个回调来处理。域名部分是隐含的,所以如果你的的域是 //shiny-koala.glitch.com,路由 /about 就是 //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。
  路由
  在你进行服务器开发时,你需要进行一些测试。你可以用简单的网站 REST test test 或者 Insomnia 应用程序去运行一下 HTTP 请求。
  点击 显示 按钮,来检查 Glitch 应用程序的 URL 。
  到目前为止,我们只是用过路由 / 。但是如果我们想对不同的用户存储不同的信息,我们就需要给不同的用户分配一个不同的路由。
  例如: /ZaninAndrea 和 /JohnGreen
  现在有一个难点:
  我们不可能对每一条路由进行编码,因为它不是一个可扩展的方法。我们需要的是 路由参数 。接下来我们只编码一个路由:/:user
  冒号是在表达要捕捉任何以/开始的并且只包含字符数字的路由。
  如下例所示:
  /ZaninAndrea 能够捕捉到
  /Johnny45 能够捕捉到
  /alex/score 不 能捕捉到
  我们可以在变量 request.params.user 中检索 user
  // base route
  app.get("/:user", function (request, response) {
  response.send(request.params.user)
  });
  // base route
  app.post("/:user", function (request, response) {
  response.send(request.params.user)
  });
  // base route
  app.put("/:user", function (request, response) {
  response.send(request.params.user)
  });
  现在服务器可以响应每一个查询并显示查询的用户名。
  向数据库增加数据
  我们知道 user 是谁了,现在我们想存储一些关于他的信息。
  为了查询数据库,我们会使用 mongodb 库。你可以用以下两个方法安装:
  npm install mongodb --save
  或者如果你使用 Glitch ,你可以切换到 package.json 文件并点击 Add package 按钮。
  我们加载 mongodb 库然后存储 MongoDB URI 到一个变量中:
  const mongodb = require('mongodb'); // load mongodb
  const uri = process.env.URI;
  URI 是很敏感的信息——这是访问数据库所需的一切。最好把 URI 放到一个 .env 文件中,.env 文件中的信息对于其他人是不可见的。
  URI=mongodb://admin:[email protected]:11885/medium
  Glitch 会自动从 .env 文件中加载变量到 process.env 变量。
  数据库的连接是异步的操作,所以我们需要像这样在回调中包装所有服务器设置:
  mongodb.MongoClient.connect(uri, function(err, db) {
  // base route
  app.get("/:user", function (request, response) {
  response.send(request.params.user)
  });
  // base route
  app.post("/:user", function (request, response) {
  response.send(request.params.user)
  });
  // base route
  app.put("/:user", function (request, response) {
  response.send(request.params.user)
  });
  // listen for requests, the process.env.PORT is needed because
  // we are using glitch, otherwise you could have written 80 or whatever
  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) {
  // inserts a new document on the server
  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 方法更新已存在的用户信息。
  // base route
  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 方法的第一个参数类似。
  第二个参数是更新文档请求—你能获取更对信息从 这里 。在我们的例子中,我们告诉数据库将用户传递的数据与已存在的数据合并。
  但是要小心,因为嵌套参数将会被替换而不是合并。
  最后
  对于数据库和后台编程来说这只是刚刚开始,但是这足以让你开始个人项目。
  之后我可能会写一些关于身份验证的文章,在此之前,请不要在里边存储一些比较敏感的数据。
  你可以修改这个完整的项目 在这 ,你将需要有一个自己的数据库,如果你还不会创建,请回到 配置数据库 部分。
  如果你觉得这篇文章还不错,请给它一些掌声让更多的人看到它。谢谢! 

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章: 没有了
  • 【字体:
     网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关?。?
     

    相关文章
    没有相关文章
    最新推荐最新热门
    专题栏目
       
    站长吧
  • 美国代表历史与现在,中国代表现在与未来。美国产品退出中国市场,几乎等于退出亚洲市场 2018-12-10
  • 高傲,名牌大学的人真的除了积累课本知识以外,确实啥也不懂!看:这些“高材生们”这些年来害怕艰难风险、不敢艰苦奋斗为人民,而去鼓吹资本主义现成的道路,称为胆小鬼不 2018-12-10
  • 不止消灭刘海屏 vivo NEX发布会看点汇总 2018-12-09
  • 湖南举办“公益体彩 走进社区”活动 2018-12-09
  • 创业女青年哈丽娟:世界是自己的 与他人没关系 2018-12-08
  • 湖南第六批短期援藏队联合中南大学湘雅医院在山南市开展“爱眼护眼”活动 2018-12-07
  • 任何大树都是从种子开始,掌门人揭开CES基业长青的密码 2018-12-06
  • 全新奥迪A1内饰谍照曝光 年内正式亮相 2018-12-05
  • 澳门修订《司法组织纲要法》,涉国安法案件限中国籍法官审理 2018-12-04
  • 重庆市公安局交通管理局互联网交通安全服务管理平台 2018-12-04
  • 成都:高新区知识产权服务业集聚发展试验区通过验收 2018-12-03
  • 成都一男子连撞3人 危害公共安全被刑拘 2018-12-03
  • 走进大凉山文章中国国家地理网 2018-12-02
  • 广美毕业展展现城市文化活力 2018-12-01
  • 中国农民骑行到巴西追逐奥运 2018-11-30
  • 964| 890| 951| 480| 728| 314| 604| 109| 713| 84|