Memo

Express
>mkdir express-app
>cd express-app
>npm init
>npm install --save express


※「express」というフォルダ名にすると、expressインストール時に
  「Refusing to install package with name "express" under a package npm ERR! also called "express".」
  というエラーになる。

C:\Users\refirio\Node\express-app\index.js
var express = require('express');
var app = express();

app.get('/', (req, res) => {
    res.send('Welcome to Express!');
});

app.listen(3000, () => {
    console.log('Started server port: 3000');
});
>node index.js


ブラウザで以下にアクセスすると「Welcome to Express!」と表示される。Ctrl+C で終了できる。
http://localhost:3000/■EJSを使う>npm install --save ejs


C:\Users\refirio\Node\express-app\index.js
var express = require('express');
var ejs = require('ejs');

var app = express();
app.engine('ejs', ejs.renderFile);
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index.ejs', {
        title: 'トップページ',
        content: 'これはExpressによるトップページです。'
    });
});

app.get('/other', (req, res) => {
    res.render('other.ejs', {
        title: 'サブページ',
        content: 'これはExpressによるサブページです。'
    });
});

app.listen(3000, () => {
    console.log('Started server port: 3000');
});


C:\Users\refirio\Node\express-app\views\index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
<ul>
  <li><a href="/other">/other</a></li>
</ul>
</body>
</html>


C:\Users\refirio\Node\express-app\views\other.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
<a href="/">戻る</a>
</body>
</html>


C:\Users\refirio\Node\express-app\public\style.css
h1 {
  color: #FF4500;
}
■Express Generator を使う>npm install -g express-generator
>cd C:\Users\refirio\Node
>express -e ex-gen-app
>cd ex-gen-app
>npm install
>npm start


ブラウザで以下にアクセスすると「Welcome to Express!」と表示される。Ctrl+C で終了できる。
なお「npm start」の代わりに「node bin\www」としても起動できる。
http://localhost:3000/
Memo

Advertisement
