Node Express 根据 MySql 值更改 div 的颜色
Posted
技术标签:
【中文标题】Node Express 根据 MySql 值更改 div 的颜色【英文标题】：Node Express changing div's color depending on MySql value 【发布时间】：2019-02-20 05:40:58 【问题描述】：我刚刚在下面添加了一些代码和一个 sql 转储，非常简单，从数据库中读取数据。
我想根据来自 mysql 数据库的值更改表中值的背景颜色。如果值“可用”，它将是绿色和红色，如果它不可用，类似这样。 我猜 #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;
【问题讨论】：
你试过什么？您应该发布您的代码以便我们更有效地提供帮助 嘿，到目前为止还不算多。这只是一个想法，如果我可以根据数据库中的数据添加颜色，那就太好了。您对示例代码是正确的，我将准备一个简短版本的我的想法。还是谢谢！ 【参考方案1】：我认为没有理由更改您的模板引擎，这是一个解决方案：
<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>
【讨论】：
您好！这个解决方案看起来很不错，我要试一试。非常感谢您的帮助！ C'est vraiment super！ Ton solution numero un, c'est parfait pour moi。谢谢漂亮！ 很高兴我能帮上忙！ Je suis content d'avoir pu t'aider, puisque tu parles français ;-)【参考方案2】：你需要使用 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>
祝你好运！
【讨论】：
您好，我正在使用 Express-Handlebars，EJS 也是一个不错的选择。我想根据来自 mysql 数据库的值更改表中值的背景颜色。 我要写一些代码，我想这样会好很多。谢谢！【参考方案3】：您可以使用模板引擎 pug 来实现这一点。您可以找到下载和使用说明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 中你可以相应地设置“蓝色”和“红色”类。
【讨论】：
我要试试这个，但现在使用 Handlebars。谢谢！以上是关于Node Express 根据 MySql 值更改 div 的颜色的主要内容，如果未能解决你的问题，请参考以下文章
Node.js Express POST 仅更改了路由器的输入
与 react、express、axios、node 和 mysql 相关的 CORS 问题