node-express根据mysql值更改div的颜色

x0fgdtte 于 2021-06-21 发布在 Mysql

关注(0)|答案(3)|浏览(370)

我刚刚在下面添加了一些代码和一个sql转储，非常简单，从数据库读取数据。
我想根据mysql数据库中的值来更改表中值的背景色。如果值“available”，则它将是绿色的，如果不可用则是红色的，类似于这样{{#如果条件}可能不是解决办法，我猜。任何建议或帮助将不胜感激！
谢谢您！
这是我的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;

mysql jquery JavaScript node.js express

来源：https://stackoverflow.com/questions/52348402/node-express-changing-divs-color-depending-on-mysql-value

3条答案

按热度按时间

wf82jlnq1#

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

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

赞(0）回复(0）举报 2021-06-21

pod7payv2#

您可以使用模板引擎pug来实现这一点。您可以在这里找到有关下载和使用的说明。这是相当直接得到它设置与快速。
根据值，可以使用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”类。

赞(0）回复(0）举报 2021-06-21

9q78igpj3#

你需要使用ejshttps://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');

索引.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>

祝你好运！

赞(0）回复(0）举报 2021-06-21

我来回答

node-express根据mysql值更改div的颜色

3条答案

相关问题

热门标签

最新问答