Question

我刚刚在下面添加了一些代码和一个sql转储，非常简单，从数据库中读取数据。

我想根据来自mysql数据库的值来更改表中值的背景颜色。如果值“ available”将为绿色，如果不可用则为红色，类似这样。我想{{#if condition}}可能不是解决方案。任何建议或帮助将不胜感激！

谢谢！

这是我的server.js文件，正在读取数据库：

app.get('/', function(req,res){
  conn.query('SELECT * FROM example_datas LIMIT 10 OFFSET 0', (err, 
   rows) => {
    if(err) throw err;
    sample = rows;
    console.log(sample);
    res.render('sample', {
      sample: sample
    });
  });
});

并在sample.hbs文件中：

<div class="container">
  <br><br>
  <div class="container col-lg-10">
    <table class="table table-bordered">
      <tr>
          <th>Id</th>
          <th>State</th>
          <th>Description</th>
      </tr>

  {{#each sample}}
  <tr>

<!-- Here I would like to color the <td> tags, green background-color
     if it is available and red if it is not.
     I have tried {{# if condition}} but I have no idea yet so far.
   -->

    <td> {{this.id}}</td>
    <td> {{this.state}}</td>
    <td> {{this.description}}</td>

  </tr>
  {{/each}}

  </table>
  </div>
</div>

示例数据库的Sql转储：

-- phpMyAdmin SQL Dump
-- version 4.7.7
-- https://www.phpmyadmin.net/
--
-- Hôte : localhost:8889
-- Généré le :  sam. 15 sep. 2018 à 22:04
-- Version du serveur :  5.6.38
-- Version de PHP :  7.2.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Base de données :  `mydatas`
--

-- --------------------------------------------------------

--
-- Structure de la table `example_datas`
--

CREATE TABLE `example_datas` (
  `id` int(11) NOT NULL,
  `state` varchar(25) NOT NULL,
  `description` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Déchargement des données de la table `example_datas`
--

INSERT INTO `example_datas` (`id`, `state`, `description`) VALUES
(1, 'available', 'This item is on stock'),
(2, 'unavailable', 'Out of stock');

--
-- Index pour les tables déchargées
--

--
-- Index pour la table `example_datas`
--
ALTER TABLE `example_datas`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT pour les tables déchargées
--

--
-- AUTO_INCREMENT pour la table `example_datas`
--
ALTER TABLE `example_datas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

Answer 1

您需要使用ejs https://www.npmjs.com/package/ejs

// server.js
// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page 
app.get('/', function(req, res) {
    res.render('pages/index', { foo: 'bar' });
});

// about page 
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

index.ejs

<!-- views/pages/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body class="container">

<header>
    <% include ../partials/header %>
</header>

<main>
<%if (foo === 'bar') { %>
 <div class="jumbotron">
        <h1>This is great</h1>
        <p>Welcome to templating using EJS</p>
    </div>
<% } %>

</main>

<footer>
    <% include ../partials/footer %>
</footer>

祝你好运！

Answer 2

您可以使用模板引擎哈巴狗来实现此目的。您可以找到有关下载和使用here的说明。使用express进行设置非常简单。

您可以使用pug变量根据值来赋予元素类：

// For each loop to loop through sql results
each value in sqlArray
// - escapes html and creates a pug variable
// declare variable with no value 
- var colourClass;
If value == ‘blue’
  - colourClass = ‘blue’
else
    - ColourClass = ‘red’
// the colour of the div will be blue or red depending on the value
// using a class name with no quotes references pug variable
div(class=colourClass)
    | #{value.arraryItem}

然后在CSS中，您可以相应地设置“蓝色”和“红色”类。

Answer 3

我认为没有理由更改您的模板引擎，这是一个解决方案：

<div class="container">
  <br><br>
  <div class="container col-lg-10">
    <table class="table table-bordered">
      <tr>
          <th>Id</th>
          <th>State</th>
          <th>Description</th>
      </tr>

  {{#each sample}}
  <tr>

<!-- Here I would like to color the <td> tags, green background-color
     if it is available and red if it is not.
     I have tried {{# if condition}} but I have no idea yet so far.
   -->

    <td> {{this.id}}</td>
    <td
      class="{{sample.state}}"
    > {{this.state}}</td>
    <td> {{this.description}}</td>

  </tr>
  {{/each}}

  </table>
  </div>
</div>

以及您的CSS代码中的某处：

.available {
  background-color: 'green';
}

.unavailable {
  background-color: 'red';
}

另一个解决方案是：

<td
  style="background-color: {{sample.state === 'available' ? 'green' : 'red'}}"
> {{this.state}}</td>

Node Express根据MySql值更改div的颜色

3 个答案: