Question

我有一个Express节点服务器，它可以从MySQL数据库中呈现数据。

您将如何将该输出转换为网页？截至目前，它只是JSON，如何显示fx。一个带有数据的html页面？

我知道这是一个愚蠢的问题。

app.get("/get-cars", function (req, res) {
    let sql = "SELECT * FROM cars";
    let query = db.query(sql, (err, results) => {
        if(err) throw err;
        res.send(results);
    });
});

Answer 1

如果要向客户端发送html响应而不是JSON响应，则可以使用HTML模板引擎。

让我为您展示一个Handlebars.js的例子

步骤1：运行npm install --save handlebars

第2步：在项目的根目录中创建文件cars.hbs

第3步：在您的cars.hbs文件中添加以下代码

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cars</title>
    <style>
      html {
        padding: 0;
        margin: 0;
     }

      body {
        position: relative;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        width: 100%;
        margin: 0;
      }
    </style>
    </head>


    <body>
      <table>
        <tr>
            <th>Name</th>
            <th>Year</th>
            <th>Engine Size</th>
            <th>Accelaration</th>
            <th>Top Speed</th>
            <th>Consumption</th>
            <th>Image</th>
        </tr>
        {{#each cars}}
            <tr>
                <td>{{this.name}}</td>
                <td>{{this.enginesize}}</td>
                <td>{{this.maxpower}}</td>
                <td>{{this.accelaration}}</td>
                <td>{{this.topspeed}}</td>
                <td>{{this.consumption}}</td>
            </tr>
        {{/each}}
       </table>
     </body>
   </html>

步骤4：在您的js文件（包含get/cars API）中，添加以下代码

const handlebars = require("handlebars");
const fs = require("fs");
app.get("/get-cars", function (req, res) {
   let sql = "SELECT * FROM cars";
   let query = db.query(sql, (err, results) => {
       if(err) throw err;
       const data = { cars: result };
       const template = fs.readFileSync("./cars.hbs", "utf8");
       const html = handlebars.compile(template)(data);
       res.send(html);
   });
});

第5步：打开浏览器并访问http://localhost:3000/get-cars

或者，您可以从前端调用API并使用您选择的格式在浏览器中显示数据。

Answer 2

我认为您的代码应该可以正常工作，它应该将JSON数组显示为网页

message.member.removeRoles([a, c, d])
  .then(() => message.member.addRole(b))
  .catch(console.error);

只需尝试打开网络浏览器并转到，除非您想以其他格式显示结果，请您在这里说明是什么问题？

Answer 3

您需要的被称为模板引擎。就像我们可以在php中发出html一样，模板引擎可以帮助服务器构建页面并以html格式返回。

我想向您介绍pug，它是用于表达的简单模板引擎。

npm install -S pug

创建一个名为template.pug的新文件：

doctype html
html(lang="en")
  head
    title="cars data with pug"
  body
    h1 My Cars 
    #container.col
    ul
       each val in dbResult
          li= val.name

在快递服务器内部

var pug = require("pug");

app.get("/get-cars", function (req, res) {
    const compiledFunction = pug.compileFile("template.pug");
    let sql = "SELECT * FROM cars";
    let query = db.query(sql, (err, results) => {
        if(err) throw err;
         res.send(
          compiledFunction({
           dbResult: sql
         })
    });
});

Voila！您应该会看到自己的html。我会为您省去一些乐趣，并且还会提供一些链接

Answer 4

好吧，因此，根据您的问题，我认为您非常了解后端方面，但是在熟悉前端/渲染框架方面需要一些帮助。

正如许多开发人员会告诉您的，在这种情况下，有很多方法可以杀死猫，所以我将推荐一些框架和库来帮助您入门：

建议： -Angular 4+（我个人最喜欢的）， -反应， -Vue 是非常好的前端框架，您可以开始使用它们来构建易于扩展和缩小的全面的单页应用程序。请注意，还有许多其他前端框架可供选择。

虽然必须知道如何使用Javascript，才能通过渲染从服务器获取的数据来操作DOM（如您的情况），所以我将向您提供两个示例，说明如何使用本机JS和JQuery来执行此操作。一个图书馆

1）

// initiate your request
xhr = new XMLHttpRequest();
// check if the server has responded with a status code of 200 after the request has been made
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    results = JSON.parse(xhr.response);
    // the easiest workaround is to build the html string and then inject it into the tbody
    // the best approach would be to createElements and inject them as you loop through the retuned data
    
    // using the easiest approach
    myString = "";
    for (i = 0; i < results; i++) {
      myString += "<tr><td>" + results[i].jsonElementForHeader1 + "</td><td>" + results[i].jsonElementForHeader2 + "</td></tr>";
    }
    // put the generated stuff from the request into the table body as table rows
    tbody = document.getElementById("tbody").innerHTML = myString
  }
};

// Add an event listener that checks the progress of the request once initiated
xhr.addEventListener('progress', evt => {
  if ( evt.lengthComputable ) {
    const perc = evt.loaded / evt.total * 100;
    // log the percentage to the console for monitoring (or render it the way you want)
    console.log(perc);
  }
}, false);

// specify the method and URL that you would want to query
xhr.open('POST', 'http://your.domain:port/script', true);
// important, if you are using cookies,
xhr.withCredentials = true;
// initiate the request
xhr.send(res1);

<html>
  <head>
    <title>Thingy</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>
            <label>header 1</label>
          </td>
          <td>
            <label>header 2</label>
          </td>
        </tr>
      </thead>
      <tbody id = 'theTableBody'>
      </tbody>
    </table>
  </body>
</html>

2）

// launch your request to the server
$.post('http://your.domain:port/APIHandler', {'query': 'parameter(s) JSON Style'}, function(data) {
  // looping through the returned data to handle insertion of the data
  // we will use the recommended way this time round, but generating strings
  tbody = document.getElementById('theTableBody');
  for (i = 0; i < data.length; i++) {
     element = document.createElement("tr");
     element.innerHTML = "<td>" + data[i].desiredElementName1 + "</td><td>" + data[i].desiredElementName2 + "</td>";
     tbody.appendChild(element);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title>Thingy</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>
            <label>header 1</label>
          </td>
          <td>
            <label>header 2</label>
          </td>
        </tr>
      </thead>
      <tbody id = 'theTableBody'>
      </tbody>
    </table>
  </body>
</html>

MySQL JSON输出到网页

4 个答案: