nodejs 服务端渲染 

<!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.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        width: 100vw;
      }

      tr {
        width: 100%;
        display: flex;
      }

      td,
      th {
        flex: 1;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table border="1" borderSpace="0">
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>介绍</th>
        <th>价格</th>
        <th>数量</th>
      </tr>
      {{ each list }}
      <tr>
        <td>{{ $value.goods_id }}</td>
        <td>{{ $value.name }}</td>
        <td>{{ $value.intro }}</td>
        <td>{{ $value.price }}</td>
        <td>{{ $value.num }}</td>
      </tr>
      {{ /each }}
    </table>
  </body>
</html>

app.js  config

const express = require("express");

const path = require("path");

const fs = require("fs");

const template = require("art-template");

const mysql = require("mysql");
const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "24118028",
  database: "fmg",
});

const app = express();

app.engine("html", require("express-art-template"));
app.set("view engine", "html");

connection.connect();

app.get("/get_goods", async (req, res) => {
  connection.query("SELECT * FROM TB_GOODS", (error, results, fields) => {
    if (error) {
      res.send("error");
    }
    console.log(results);
    res.render("index.html", { list: results });
  });
});

app.listen(3000, () => {
  console.log("Server is running at localhost:3000");
});

app.json 文件

{
  "name": "nodejs-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "art-template": "^4.13.2",
    "express": "^4.17.2",
    "express-art-template": "^1.0.1",
    "mysql": "^2.18.1"
  }
}

结果图

 

 

posted @ 2021-12-22 09:41  深海里的星星i  阅读(313)  评论(0)    收藏  举报