<< Node.js(Express)入門編その5 | main | Node.js(Express)入門編その7 >>

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