Node.js(MongoDB+Express)入門編その9

 

 

前回からの続きです。

 

 

 

左のドキュメント名を表示して、INSERT DOCUMENTからデータベースを入力してください。

(今回は、データベース名:sample,コレクション名:terachan,ドキュメント名:

user:"user1,testlive:"tokyo"とuser:"end",testlive:"nagoya"を入力しました。)

 

これで、データベースができましたので、expressを作ります。

 

フォルダ(フォルダ名mongoapp)を作って、

 

express --view=pug myapp

を実行します。

 

できたら

myappのpackage.jsonを開いて

 

ここに、

"mongodb": "^2.2.25"と

"monk": "^4.0.0"

を追加します。

 

そのあとに、

npm install

を実行します。

 

 

app.jsを修正します。

 

 

ver mongo = require('mongodb');

ver monk = require('monk');

ver db = monk('localhost:27017/sample');

 

と'/'に対するmiddlewearの

 

app.use(function(req,res,next){

req.db = db;

next();

}):

 

を挿入します。

(ver db = monk('localhost:27017/sampleのsampleはデータベース名です。)

 

 

index.js

に/userlistのhtmlを書き加えます。

 

 

router.get('/userlist'',function(req,res){

ver db = req.db;

ver collection db.get('terachan');

collection.find({},{},function(e,docs){

res.render('userlist',{

"userlist" :docs

});

});

});

を挿入します。

(ver collection db.get('terachan')のterachanはコレクション名です。)

 

 

あとは、userlistのpugを新しく作ります。

 

userlist.pug

 

 

 

プログラムを実行するには、

npm start

を実行します。

 

 

実行するときには、・・・¥mongoapp¥myappから実行してください。

 

 

localhost:3000/userlistを実行すると

 

 

 

無事にデータベースから持ってこれました。

 

 

今回、参考にさせてもらったのは、Qiitaの

1時間でNode+EXpress+MongoDBを使ったweb appを作りましょう

です。

 

これで、データベースも終わりました。

ので、Node.js入門編は終わらさせていただきます。

 

 

あとは、自分の作りたいものを作ってください。

 

 

JUGEMテーマ:プログラミング

 

 

| JavaScript | 09:44 | comments(0) | trackbacks(0) |

Node.js(MongoDB)入門編その8

 

前回からの続きです。

 

WEBプログラムでは、データを保存する場合、別途データベースを使います。

なので、まずはデータベースを作成することから始めます。

いろいろなデータベースがありますが、いま流行のMongoDBを使ってみます。

MongoDBは、NoSQLに分類され、ドキュメント指向なので、ウェブサイトには相性がいいようです。

なので、数値を使うソフトを作りたい場合は、mysqlなどを使ってください。

 

(Webプログラムを公開するとき、データベースは、サーバにはサービスのひとつとして用意されています。)

 

Mongo公式サイトから

 

 

Try Freeをクリック

 

 

Serverから目的のOSをダウンロードして、

 

インストーラに従って、インストールしてください。

(指示通りで、特に変更する場所はありません)

 

あとは、いつものようにPATHを通しておきます。(Windows)

このブログでは、何度も書いていますが、念のため再度書いておきます。

 

 

エクスプローラのPCを右クリックして、プロパティから、

 

 

システムの詳細設定の環境設定の

 

 

環境変数をクリック

 

 

Pathを編集します。

 

 

ダウンロードされた、

"C:¥Program Files¥MongoDB¥Server¥4.0¥bin"を追加します。

(¥4.0のところはバージョンなので、変わることがあります。)

 

データベースサーバを立ち上げます。

 

MongoDBの構造は、

データベース名、コレクション名(テーブル名)、ドキュメント(データ、json形式)

になっています。

(Excelでいうと、ファイル名、シート名、フィールド(行列)でしょうか?)

 

MongoDB Compass Communityというものが、いしょにダウンロードされていると思います。

 

 

 

これを、内容を変えることなく、このままconnectしてください。

 

 

 

Create Databaseボタンを押します。

 

 

 

データベース名とコレクション名を入れてCreate Databaseを押します。

 

なお、詳しくは MongoDBのGUI を見てください。

 

 

長くなりましたので、次に続きます。

 

 

JUGEMテーマ:プログラミング

| JavaScript | 17:17 | comments(0) | trackbacks(0) |

Node.js(Express)入門編その7

 

前回からの続きです。

 

もう、その7になってしまいました。

もうすぐ、WEBサービスを作れるようになれますので、頑張りましょう。

 

expressのルーティングの作成ですが、

デフォルトではhttp://localhost:3000/usersがあります。

なので、必要となったときに作成してください。

たとえば、http://localhost:3000/resultを作りたい場合、

 

app.jsに

var postRouter = require('./routes/result');

app.use('/result',postRouter);

を追加します。(下記のとおり)

 

 

(自分のルータを作らない場合は、用意されている「/users」を使ってください。)

 

この場合は、routesフォルダにresult.jsを作る必要があります。

 

 

 

今回せっかくresult.js作りますので、ここにhtmlのformのpostの処理を書いてみます。

(もちろん、users.jsを変更してもいいです。)

 

routesフォルダの

result.js(新規作成)

var express = require('express');
var router = express.Router();

router.post('/', function(req, res, next) {
  var name = req.body['userName'];
  var data = {
    title: '入力情報の確認画面',
    content: name + 'さんの入力情報が確認できました。'
  }
  res.render('result', data);
})

module.exports = router;

ポストにアクセス(http://localhost:3000/result)があったときの処理

router.post('/', function(req, res, next) {行いたい処理}

nextはプロセスを継続(プロセスを停止させない)する。

 

 

結果(レスポンス)をかえすページ、pug(html)を作成

viewsフォルダの(新規作成)

result.pug

extends layout

block content
  h1= title
  p #{content}

extends layoutは、layout.pugを継承し、block contentの部分を編集(置き換え)します。

 

 

resultのルータができたら、好きなところにpostを置きます。

今回は、index.pugに置きましたが、新規作成してもいいです。

index.pugを変更

extends layout

block content
  h1= title
  p #{content}
  form(method="post" action="/result")
    input(type="text" name="userName")
    input(type="submit" name="送信")

送信ボタンを押したときにアクセスするのアドレス(action="/result")

(http://localhost:3000/result)

 

 

それに対応するindex.jsも変更します。

index.jsを変更

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next){
  var data = {
    title: '入力情報の確認',
    content: '入力確認のため、お名前をご記入ください'
  }
  res.render('index', data);
});

module.exports = router;

ポストにアクセス(http://localhost:3000/)があったときの処理

router.get('/', function(req, res, next) {行いたい処理}

 

 

 

さっそく、実行してみます。

 

 

 

名前を入力して、送信ボタンを押すと、

 

 

 

となります。

 

このように、expressでは、getやpostが簡単にアクセスできます。

 

次回には、WEBプログラムには欠かせない

データベースについて書いてみたいと思います。

 

 

次回に続く

 

 

 

 

JUGEMテーマ:プログラミング

 

 

 

| JavaScript | 16:42 | comments(0) | trackbacks(0) |

Node.js(Express)入門編その6

 

前回からの続きです。

 

前回、expressの実行まで行いましたが、

VScode(Visual Studio Code)での実行(デバッグ)の方法を書き忘れました。

 

 

左のデバッグの印をクリックして、

上の構成がありませんの右の設定印をクリックしてください。

自動的にlaunch.jsonが作成されます。

 

 

expressのプログラムの実行は、¥¥myapp¥¥bin¥¥www"です。

なので、11行目の"program": "${workspaceFolder}¥¥myapp¥¥app.js"を

"program": "${workspaceFolder}¥¥myapp¥¥bin¥¥www"に変えてください。

(もちろん最初から"program": "${workspaceFolder}¥¥myapp¥¥bin¥¥www"になっている場合は変える必要はありません。また、「¥」はバックスラッシュ「\」のことです。)

 

 

 

EXPRESS-APPフォルダには自動的に、.vscodeフォルダとlaunch.jsonファイルが作成されます。

 

 

このことで、メニューバーのデバッグから「デバッグなしで開始」または、

CTRL+F5でプログラムを実行するとwwwが実行できます。

 

本題にもどりますが、

下のとおり、たくさんのフォルダとファイルが出来ていますが、

どこを変えたらよいかを、これから覚えておいてください。

ここまでたどり着いたプログラムの実力がある人は、だいたい予想ができると思います。

 

 

基本的には、メインプログラムのapp.jsは変えずに編集します。

まずは、index.jsとindex.pug(html)を編集してみましょう。

 

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', {
     title: 'Express' ,
     msg: "こんにちわ"
    });
});

module.exports = router;

msg: "こんにちわ"を挿入します。

 

index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}
  p= msg

p= msgを付け加えます。

 

実行してみます。

 

 

ちゃんと、「こんにちわ」が追加されていました。

 

あとは、入出力のget,postとデータベース(SQL)を使えるようになれば、

とりあえず、入門編は終了できそうです。

 

まずは、getやpostなどで使うためのルーティングで対応するhtml(pug)を増やします。

Expressでは、メインプログラムのapp.jsに追加することで簡単に行えます。

 

ここからget,post説明すると、中途半端になりそうなので、

 

 

 

次回に続きます。

 

 

JUGEMテーマ:プログラミング

| JavaScript | 09:30 | comments(0) | trackbacks(0) |

Node.js(Express)入門編その5

 

前回からの続きです。

 

ここまで、お疲れ様でした。

Webプログラムを進めていくと、どんどん覚えることが多くなります。

これまで、かなり内容を省略してきたにもかかわらず、

まだフレームワークにすら到達していません(ブログ的には、書く内容に困りまりませんが)

ですが、Webプログラムを理解すれば、世界中のweb上のデータ、APIを使うことができ、

または、各種サービスを提供できることができますので、損はありません。

もう少し、我慢してください

 

前置きが長くなりましたが、

前回のmain-app.jpの説明です。

 

 

解説:

5行目で

var url = require('url');

でurlモジュールを使えるようにします。

 

8・9行目で

var index_page = fs.readFileSync('./index.pug','utf8');
var style_css = fs.readFileSync('./style.css','utf8');

でファイルの内容を呼び込みます。

前に行ったのは、fs.readFile()でしたが、

今回はfs.readFileSync(ファイル名,文字コード)を使っています。

違いは、同期か非同期の違いです。

今回は、処理が終わるまでプロセスを待ちます。(同期)

 

14行目で

console.log('Server start');

を使っていますが、console.log(値)は、

プログラムがちゃんと動いているか確認するために、ログを表示します。

または、一時的に変数などを表示させて、バグがないか(デバッグ)などに、よく使われます。

 

18行目で

var url_p = url.parse(_req.url);

リクエストされたURLのパスを取得します。(url.parse(リクエストのURL))

 

19行目で

switch (url_p.pathname){

パスの値(url_p.pathname)によって処理を分岐します。

switch文:

switch(値){

   case '値': 処理;break;

 case '値': 処理;break;

 default:処理(上のcaseの値にない場合);break;

}

breakがないと止まりません次の命令を実行してしまいます。

ちなみに、if文を使ってもいいですが、switch文の方が見やすいです。

 

 

 

ちゃんと、外部CSS(style.css)が適応されました。

 

 

EXPRESSについて

Node.jsで一番よく使われるフレームワーク(ひな形)です。

簡単にプログラム、システムが作れます。

 

さて、ここまで来れば、expressのフレームワークを見ても理解できると思います。

 

まずは、入門編その3と同じように、フォルダを作ってください。

ここでは、フォルダー名をexpress-appとしました。

ここに、

npm install express-generator -g

でexpressのプログラム(CLI)をインストールしてください

 

 

次に

express --view=pug myapp

express オプション プログラム名

でフレームワーク(枠組み)が出来てしまいます。

 

 

作った、myappフォルダに移動します。

 

 

 

依存するモジュールをインストールします。

npm install

 

 

 

 

プログラミングの実行するには、

npm start

です。

プラウザで

http://localhost:3000/

をアクセスすれば、

 

 

と表示されます。

 

終了するときは、CTRL+Cです。

 

 

 

参考:公式サイト

GitHub-expressgenerator

 

Expressのインストールまで終了しました。

 

次回からは、やっとプログラムを書くことができます。

 

 

その6につづきます

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 09:22 | comments(0) | trackbacks(0) |

09
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM