エクスプレスで基本的なウェブサイトを作成する.js

エクスプレスは、Webサイトを作成するために使用できることを意味軽量ウェブフレームワークとして記述されます.今日、私は非常に基本を歩きます.ウェブサイトにはいくつかの静的なページがあります.
現在のほとんどのフレームワークと同様に、Expressは独自のジェネレータを持っています.少なくとも最初は、発電機から始めるのが良いかもしれません、あなたはプロジェクトを構成する1つの方法を見ます.心の中で維持することは重要です.BoilerPlateは、特定の方法で構造化されている間、あなたは今までの方法はあなたに意味をなすあなたの急行プロジェクトを構築することができます.
このチュートリアルでは、私は非常に基本をカバーします.最後までには3ページのウェブサイトがあります.
さあ始めましょう.
プロジェクトフォルダを作成します.次に、次の2行を端末で実行します

npm init
npm install --save express

最初の行はpackage.json ファイルは基本的にプロジェクトを開始します.つ目のインストールは急行です.注意--save フラグは、パッケージを再インストールする必要があるように、パッケージファイルに対して明示的に追加します.package.json プロジェクトのニーズを知っている
今すぐ作成server.js ファイル.ここで我々はコードを書きます.
非常に基本的な構造から始めましょう.

import express from 'express';
const app = express()
app.get('/', (req, res) => {
    res.send('Hello World')
})
app.listen(5656, () => {
    console.log('http://localhost:5656')
})

そこで、私たちはlocalhostポート5656で動く基本的なウェブサイトを作成しました.
端末からポート番号を変更するオプションを指定できます.上記のコードを次のように変更することでこれを行います.

const port = process.env.PORT || 5656;
app.listen(port, () => {
    console.log(`http://localhost:${port}`)
})

それで、あなたは走ることができますPORT=8081 npm start ポート番号を変更するnpm run デフォルトはポート番号です5656
ブラウザでHTMLをレンダリングする
今までのところ、私たちのウェブサイトは地獄と退屈です.我々は、この方法でウェブサイトを作成することはできません.ブラウザーにテキストの文字列を送る代わりに(そのストリングがHTMLでありえるけれども)、代わりにむしろHTMLページをブラウザに送るでしょう.
Expressは、HTMLの代わりにテンプレートエンジンを使用するオプションを与えます.私たちがダイナミックなコンテンツを使用し始めるので、この能力は非常に役に立ちます.
そこから選択する多くのテンプレートエンジンがあります、私のお気に入りはpug . 与えられた、それは他のすべてのオプションのうち、最も初心者フレンドリーではないが、私はそれを愛する.任意のタグを開き、閉じる必要はありません.急行が我々が使うつもりであるものを知っているように、ものをセットしましょう.pug パッケージはそれ自体ですので、まず端末にインストールしましょうnpm --save pug . さあ、それが我々が使っているものであるということを知らせましょう.

app.set('view engine', 'pug');

それは、テンプレートエンジンを設定するpug . 今すぐ送る代わりにHello world を返します.レッツレンダリングpug 代わりにページ.

app.get('/', (req, res) => {
    res.render('index')
})

設定するときview engine , エクスプレスエクスプレスpug ディレクトリにあるページviews では、そのディレクトリを作成し、インデックスファイルを追加しましょう.views/index.pug . そこで、ブラウザで表示したいコードを追加します.こんにちは世界のパグバージョンをあげましょう:

    #message
        h1 Hello World 
        h3 pug's in the house

私はあなたがHTMLに変換する方法を推測することができます

    <div id="message">
        <h1>Hello World</h1>
        <h3>pug's in the house</h3>
    </div>

そして、それは基本的にそれです!Expressの基本的な使用法.

ウェブサイト
Expressの基本的な使い方を実証するために、次のウェブサイトを作成しました.それはいくつかのページのウェブサイトです.各々のページは、与えられたアーティストについて我々に何かを話します.これは、リソース(画像、CSS、JS)の反応アプリとルータの詳細な使用の中での使用を示しています.


ルーティング機能
上記のスクリーンショットから見ることができるので、このウェブサイトは3つの簡単なページを持っています.これはルートがどのように作られるかです

    app.get('/charles', (req, res) => {
        res.render('chaplin')
    })
    app.get('/marilyn', (req, res) => {
        res.render('monroe')
    })
    app.get('/jean', (req, res) => {
        res.render('jimmons')
    })

そこに我々がいる.ユーザーが/charles エーchaplin.pug テンプレートはページに表示されます.
我々のケースでは、各アーティストのための構造は全く同じであるので、ルータは同じパグテンプレートを提出するつもりです!

    app.get('/charles', (req, res) => {
        res.render('index')
    })
    app.get('/marilyn', (req, res) => {
        res.render('index')
    })
    app.get('/jean', (req, res) => {
        res.render('index')
    })

最後に、上記の構成で、ユーザーがウェブサイトのルートに移動するならば、彼らはCannot GET / ルートルータを削除したのでapp.get('/', (req, res) => {}) ). この問題を解決するために、我々はユーザーを我々が望むもう一つのページにリダイレクトすることができます.

    app.get('/', (req,res) =>{
        res.redirect('/charles')
    })

動的データの操作
私たちは能力のパスからパグテンプレートにデータを渡す必要があります.以下に例を示します:

    app.get('/charles', (req, res) => {
        res.render('index', {
            firstname: 'Charles',
            lastname: 'Chaplin',
            tag: 'The Little Tramp',
            content: '...',
            movies: [...]
        })
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', {
            firstname: 'Marilyn',
            lastname: 'Monroe',
            tag: 'Being normal is boring',
            content: '...',
            movies: [...]
        })
    })

我々はまだレンダリングを求めているindex.pug しかし、我々はまた、それにオブジェクトを渡しています.でindex.pug ページは部分的にこのように見えます

    body
        .wrap
            .profile.hide
                a(href='#').menu
                    span Movies
            .information
                .information__heading
                    span.information__heading__tag= tag
                h1.information__name 
                    small=firstname  
                    | #{lastname}
                p.information__description= content         

ルーティングで渡されたJSONからの情報の使用方法を参照してください.PUGは、1つの変数だけをレンダリングする必要がある場合、またはそのような変数をラップする必要がある場合、my name is #{name} .

リソースファイル
あらゆるウェブサイトは、スタイルとイメージを必要とします.これは、スタイルシートとフロントエンドJavaScriptをリンクした方法です.

    doctype html 
    html
        head
            title=title
            link(rel='stylesheet', href='/styles/style.css')
            meta(name='viewport' content='windth=device-width, initial-scale=1')
        body
            .wrap
                ...
        script(src='js/script.js')

たとえ/styles/style.css and js/script.js それぞれのディレクトリに正しく配置された場合、Expressは上記の設定で期待できるように使用できません.
まず、これらのファイルがどこにあるのかを表現する必要があります.または、言い換えれば、我々の静的コンテンツがどこに住んでいるかを表現する必要があります.静的コンテンツは、スタイルシート、JavaScriptファイル、ライブラリ、さらにはフォントから何かを参照します.
これを設定するには、次の行を書く必要がありますserver.js :

app.use(express.static(__dirname + '/public'));

その場で、我々はAを作成する必要がありますpublic ディレクトリとその中で/styles/style.css and js/script.js ファイル.最後に、私たちは上のパグの断片から見たようにpublic フォルダはrootからアクセスできます.public/js/script.js は/js/script.js .

JSONファイルからコンテンツを取得する
このチュートリアルの範囲外である間、これらのアーティストのための内容はデータベースに格納されて、我々が上記したようにルートの中でhardcodingされないでしょう.しかし、今日のために、我々はコンテンツを別々のJSONファイルに保存して、ルートでそれを使うことができます.これは、我々が現在やっているより少しより良いデータを管理するのを助けます.

    import data from './data/artists.json'
    ...
    app.get('/charles', (req, res) => {
        res.render('index', data.artist[0])
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', data.artist[1])
    })
    app.get('/jean', (req, res) => {
        res.render('index', data.artist[2])
    })

それぞれのルートで異なるデータが得られます.


回収する
それは、我々はルータ、テンプレートと静的ファイルをカバーしている.これは、我々がしなければならないコード全体ですserver.js . その後、残りはちょうど通常のフロントエンドのコードです.

    import express from 'express';
    import data from './data/artists.json';
    const app = express();
    app.set('view engine', 'pug');
    app.use(express.static(__dirname + '/public'));
    const port = process.env.PORT || 5656;
    app.get('/', (req,res) =>{
        res.redirect('/charles')
    })
    app.get('/charles', (req, res) => {
        res.render('index', data.artist[0])
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', data.artist[1])
    })
    app.get('/jean', (req, res) => {
        res.render('index', data.artist[2])
    })
    app.listen(port, () => {
        console.log(`http://localhost:${port}`)
    })

をチェックアウトすることができますgithub