<< Node.js(Express)入門編その6 | main | Node.js(MongoDB)入門編その8 >>

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) |
Comment









Trackback
url: トラックバック機能は終了しました。

06
--
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