コンテンツに基づいたWeb構築のすべての方法( II )

15829 ワード
テキストリンク
写真で

サーバー側レンダリング


SSRは90年代のCMSSへの最初のアプローチであった.SSRでは、ページがサーバーによって作成されます.要求されたときに動的にページを作成したり、あらかじめ作成したり、キャッシュに格納したりすることもできます.
単純な例を維持し、HTML、CSS＆JavaScriptから多くを逸脱しないようにする目的で、ノードを使用しましょう.サーバーのためのJS技術.ノードであるExpress.サーバーのためのJSウェブフレームワーク、そうします...ExpressがWebリクエストを扱うだけでフォーカスできるように、テンプレートエンジンを使用しましょう.Handlebarsは、良い単純なもので、急行で大きく働きます.
それを始めましょう.まず、すべてのページのメインレイアウトで作業しましょう.以下のようになります:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FruitLovers - {{ title }}</title>
    <link rel="stylesheet" href="/styles.css">
  </head>  
  <body>
    <header>
      <h1>🍋 FruitLovers</h1>
      <p>
        If life gives you lemons... 
      </p>
    </header>
    {{{ body }}}
    <footer>
      FruitLovers © 2021
    </footer>
  </body>
</html>
これはHellebarテンプレートエンジンのデフォルトテンプレートとして使われます.このテンプレートでは、ページの内容は{{{ body }}}に置き換えられます.ページのタイトルは{{ title }}に置き換えられます.

In Handlebars syntax, three curly braces won't scape HTML characters, but two will. More info here about what that means:
https://handlebarsjs.com/guide/#html-escaping


ホームページ固有のコンテンツは以下のようになります.
<h2>
  Fruits you can buy from us
</h2>
<ul>
  {{#each fruits}}
    <li>
      <a href="/products/{{name}}.html">
        {{title}}
      </a>
    </li>
  {{/each}}
</ul>
#eachと呼ばれるハンドルバー内蔵ヘルパーを使用しています.この例では、果物のリストを定義するときに役立ちます.
製品のテンプレートは非常によく似ています.
<a href="/index.html">← Home</a>
<h2>
  {{fruit.title}}
</h2>
<p>
  Today's price is: {{fruit.price}}
</p>
<img width="300" src="{{fruit.image}}">
<h2>
  Other fruits you can buy from us:
</h2>
<ul>
  {{#each restOfFruits}}
    <li>
      <a href="/products/{{name}}.html">
        {{title}}
      </a>
    </li>
  {{/each}}
</ul>
あなたが見ることができるように、それはちょうどページからデータを切り離して、あなたが必要とするものだけを引っ張ります.この例から、data.jsonにデータを収集できます.
[
  {
    "name": "lemon",
    "title": "Lemons, our classic",
    "price": "2€",
    "image": "images/lemon.jpg"
  },
  {
    "name": "strawberry",
    "title": "Strawberries, less sugar than lemons!",
    "price": "3€",
    "image": "images/strawberry.jpg"
  }
]
さあ、我々のサーバーで働きましょう:ウェブ要求を管理するプロセス.コードを理解するのにあらゆる行をコメントしています.
// Import Express and create an app
const express = require("express");
const app = express();

// Import fruits data
const fruits = require('./data.json')

// Tell express that views are in the views folder
app.set('views', 'views');
// Tell express to use handlebars template views
app.set('view engine', 'hbs');

// Serve public folder as static
app.use(express.static("public"));

// Manage requests to the index
app.get(["/","/index.html"], (request , response) => {
  // Use the index view, passing the data it needs for fruits and title
  response.render('index', { fruits, title: 'Home' });
});

// Manage requests to product pages
app.get("/products/(:product).html", (request, response) => {
  // Get requested product from URL
  const requestedProduct = request.params.product
  // Get info about the fruit which corresponds to the requested product name
  const fruit = fruits.find(({name}) => name === requestedProduct)
  // Remove the requested product from the list of fruits
  const restOfFruits = fruits.filter(({name}) => name !== requestedProduct)
  // Use the product view, passing the data it needs
  response.render('product', { fruit, restOfFruits, title: fruit.title });
});

// Start listening for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});
どうか、グリッチの最終版を見て、/viewsフォルダとpackage.jsonファイルを参照して、サーバーがどのように設定されているかを確認してください.ここから動くことなく、パンの間を切り替えるために、View SourceとView Appをクリックしてください)
< div >

Please note all of the code in this series of articles is far from production-ready. Also, not written out for performance either. What if a visitor requests the non-existing orange product? What if the price is missing in the data? Is it performant to run through all the fruits twice (as seen in our code) for every server request? Etc.


あなたがアマゾンのような何千ものページを生産する非個人のデータのトンを持っているときはいつでも、< tt > SSRは大きいです.また、特定の種類のWebサーバが必要です.p >
すべてのクリックが完全な再ロードを必要とした方法に気がつきましたか?これがウェブによるデザインですp >
人々のかなりのグループは、この経験を改善したかった.そのページ内のJavaScriptコードがクライアントのブラウザからページルートを管理し、変更するページの一部だけを読み込むかどうかp >
パート3に向かうbr/>
<> P >
< div class ="Lagagchen - chen link "

コンテンツに基づいたWeb構築のすべての方法( III )

ダニエル・ヴァーヴァー・ Jan 27・ 4分読む


< div >
[BOJ]14868. 文明.
Rubyでミンコフスキー距離