用MongoDB和浏览器尝试仅通过它们记录旅行的记录，第1部分

2 年 ago
宇, 华
3 minutes

只相信MongoDB，姑且容許JavaScript。
為這樣的你準備了這篇文章。
這是MongoDB Advent Calendar 2013的第一天貼文。

我达到这个主题所经历的思考过程。

    • 人手不足なMongoDB Advent Calendarを埋めるためにも連載ものっぽくアプリを作っていくか。

 

    • そういえば、あまり知られてなさそうなMongoDBのREST API機能を使ってみようかな。こんな時くらいしか使い道ないし。

 

    • 旅してる途中だし、MongoDBのGeo Index機能を使ってみる。こちらはけっこう使われている模様。

 

    • Backbone.jsを使いたかった。

 

    TODOアプリはいっぱいあるから位置情報使ってみる。

制作这样的应用

    • 旅を振り返って一人でニヤニヤするのが目的。

 

    • ブラウザでアクセスしたら位置情報とって記録するやつ。なんかHTML5になってGeolocation APIってのが使えるらしいじゃないですか。

 

    • Google Mapsにピンとか立つんじゃないかな、たぶん。

 

    • ピンは線でつなぐと通った道のりがわかってニヤニヤしやすいのでは。（仮説）

 

    • 合計距離を出す。

 

    • Railsとかnode.jsとかは出てこないよ。だって難しいもん。

 

    ブラウザと、MongoDBと、ほんの少しのJavaScriptさえあれば大丈夫。
Screen Shot 2013-12-01 at 8.36.26 AM.png

这只是一个形象参考。

完全不像Advent Calendar的，但我不在意。

本文通过使用MongoDB REST API来向浏览器插入和查找数据的方式进行介绍。很抱歉无法提供太多帮助。但是，唯一可以确认的是，该应用程序仅在本地运行。因为没有使用Web服务器。

环境

    • mongodb 2.4.8

 

    Mac OSX 10.9

只需3分钟便可完成MongoDB的安装。

curl -L -O http://fastdl.mongodb.org/osx/mongodb-osx-x86_64-2.4.8.tgz
tar zxfv mongodb-osx-x86_64-2.4.8.tgz
cd mongodb-osx-x86_64-2.4.8
mkdir data
mkdir log
./bin/mongod --dbpath data --logpath log/mongod.log --rest

用三分钟都不需要。

在启动时的选项说明

–dbpath是指向创建数据库文件的目录的路径。如果不指定，则会在/data/db/路径下进行查找，如果目录不存在，将会引发错误。

–logpath是指向日志文件的路径。如果没有指定，则输出到标准输出。

启用rest接口，开启开关！现在可以通过端口28017（默认设置）查看一个简单的管理界面。

这是一张总结了MongoDB配置选项的幻灯片。

创建数据库

mongo
> use adventcalendar
> db.appinfo.insert({"app_name":"MongoDB Advent Calendar 2013"});
> db.appinfo.find().pretty();
{
    "_id" : ObjectId("529a41472f3851f48958c667"),
    "app_name" : "MongoDB Advent Calendar 2013"
}

让我们从浏览器尝试一下访问吧

请访问 http://localhost:28017，如果出现以下界面，请继续进行。如果没有出现，也可以继续进行。

Screen Shot 2013-12-01 at 4.51.45 AM.png

首先，我们尝试在一个黑屏上测试REST API。

找到

curl 'http://localhost:28017/adventcalendar/appinfo/'
{
  "offset" : 0,
  "rows": [
    { "_id" : { "$oid" : "529a41472f3851f48958c667" }, "app_name" : "MongoDB Advent Calendar 2013" }
  ],

  "total_rows" : 1 ,
  "query" : {} ,
  "millis" : 0
}

插入

// insert は-dオプションでPOSTする
curl -d '{"app_version": 0.1}' 'http://localhost:28017/adventcalendar/appinfo/'
{ "ok" : true }

// find
curl 'http://localhost:28017/adventcalendar/appinfo/'
{
  "offset" : 0,
  "rows": [
    { "_id" : { "$oid" : "529a41472f3851f48958c667" }, "app_name" : "MongoDB Advent Calendar 2013" } ,
    { "_id" : { "$oid" : "529a4453f09d7587cd01b840" }, "app_version" : 0.1 }
  ],

  "total_rows" : 2 ,
  "query" : {} ,
  "millis" : 0
}

我确认了在REST中可以进行find和insert操作！

尝试从浏览器中进行

我写了这样一段代码。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>MongoDB Advent Calendar 2013</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
<!--
var find = function(option){
  $.ajax({
    url: 'http://localhost:28017/adventcalendar/appinfo/',
    type:"get",
    dataType: 'json',
    success : function(data) {
      if (option === "last") {
        for (var i=0; i < data.rows.length; i++){
          if ( i == data.rows.length -1 ) {
            $('#document').append('<li><p>' + data.rows[i].destination + '</p></li>');
          }
        }
      } else {
        for (var i=0; i < data.rows.length; i++){
          if ( typeof data.rows[i].destination !== "undefined" ) {
            $('#document').append('<li><p>' + data.rows[i].destination + '</p></li>');
          }
        }
      }
    },
    error : function(){
      alert('error');
    }
  });
};
find("all");

//insert
$(function(){
  $('#post').click(function(){
    $.ajax({
      type:"post",                
      url:"http://localhost:28017/adventcalendar/appinfo/",
      data: JSON.stringify({"destination": $("#destination").val()}),
      datatype : 'json',
      success : function(data) {
        console.log('post success');
        console.log(data);
        find("last");
      },
      error : function(){
        console.log('error');
      }
    });
  });
});


// -->
</script>

</head>
<body>
<header>
  <h1>MongoDB Advent Calendar 2013</h1>
</header>

旅行した場所を登録してね : <input type="text" id="destination" >
<button id="post">post</button>

<ul>
  <div id="document"></div>
</ul>
</body>
</html>

MongoDB运行时带有–rest选项，数据库名为adventcalendar。将上述代码保存在app.html文件中，然后在浏览器中打开即可运行！

这样的画面

使用MongoDB和浏览器记录旅行的第一步。

advent2013.gif

我也会写CSS。将它放在与HTML相同的文件夹中。

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
}

header {
  background: #333;
  color: #FFF;
}

header h1 {
  font-size: 28px;
  padding: 10px;
  text-align: center;
}

总结

    • MongoDBのREST APIを使ってみた。

 

    • MongoDBとブラウザがあれば動くよ！

 

    • たぶん、この記事の次回はGeo Indexとか使っていくんじゃないでしょうか。

 

    2日目は@naru0gaさん、よろしくお願いします！

以上，这就是MongoDB Advent Calendar的第1天。敬请期待接下来的内容。

✖
广告
将在 10 秒后关闭
bannerAds