Node Express меняет цвет div в зависимости от значения MySql

Question

Я только что добавил немного кода и дамп sql внизу, очень простой, считывающий данные из базы данных.

Я хотел бы изменить цвет фона значения в таблице в зависимости от значения, получаемого из базы данных mysql. Если значение «доступно», оно будет зеленым и красным, если оно недоступно, что-то в этом роде. Я думаю, {{#if условие}} не может быть решением. Любое предложение или помощь будут высоко оценены!

Спасибо!

Это мой файл 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

Вы можете использовать мопс двигателя шаблона для достижения этой цели. Инструкции по загрузке и использованию можно найти здесь . Это довольно просто настроить с помощью экспресс.

Вы можете использовать переменные 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 вы можете установить классы 'blue' и 'red' соответственно.

Answer 2

Не вижу смысла менять ваш шаблонный движок, вот решение:

<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>

Answer 3

Вам нужно использовать 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>

Удачи!