Используя Node.js RESTful-маршруты, как я могу изменить цвет чего-либо после его редактирования? - PullRequest
Новая
       27

Используя Node.js RESTful-маршруты, как я могу изменить цвет чего-либо после его редактирования?

1 голос
/ 21 апреля 2020

Я новичок в RESTful-маршрутизации и CRUD, поэтому я не уверен, как go узнать об этом или как лучше всего это сделать. У меня есть таблица HTML, заполненная данными из коллекции MongoDB, называемой средами. Таблица заполняется циклически через коллекцию с forEach. Когда запись редактируется (1 запись = 1 строка таблицы), я использую форму для использования метода PUT и таким образом обновляю данные.

Я бы хотел указать, когда что-то был обновлен путем изменения цвета фона на желтый после его обновления (вроде подсветки). Я думал, что мог бы добавить флажок или что-то рядом с каждым вводом формы, чтобы пользователь мог проверить, когда они что-то редактируют, и тогда цвет фона ячейки таблицы будет меняться в зависимости от того, был ли установлен этот флажок ... но Я понятия не имею, как это сделать с такими маршрутами: (

Я включил то, что считаю необходимым, но если вы хотите увидеть больше кода, пожалуйста, дайте мне знать:

приложение. js маршруты: 

var express = require("express"),
    app = express(),
    mongoose = require("mongoose"),
    bodyParser = require("body-parser"),
    methodOverride = require("method-override");

mongoose.connect("mongodb://localhost:27017/epims", {
 useNewUrlParser: true,
 useUnifiedTopology: true
});

app.use(methodOverride("_method"));
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));

//EDIT ENVIRONMENT ROUTE
  app.get("/environments/:id/edit", function(req, res){
      Environment.findById(req.params.id, function(err, foundEnvironment){
          if(err){
              res.redirect("/");
          } else {
              res.render("edit", {environment: foundEnvironment});
          }
      });
  });

//UPDATE ENVIRONMENT ROUTE
app.put("/environments/:id", function(req, res){
  Environment.findByIdAndUpdate(req.params.id, req.body.environment, function(err, updatedEnvironment){
    if (err) {
      res.redirect("/environments");
    } else {
      res.redirect("/environments/" + req.params.id);
    }
  });
});

html таблица: 

  <table class="environment">
    <tr>
      <th colspan=2>ePIMS</th>
      <th colspan=2>Region</th>
      <th colspan=2>HCHC</th>
      <th colspan=2>Membership</th>
    </tr>
    <% environments.forEach(function(environment){ %>
      <tr>
        <td class="td"><%= environment.ePIMS %></td>
        <td class="td"><%= environment.region %></td>
        <td class="td"><%= environment.HCHC %></td>
        <td class="td"><%= environment.membership %></td>
    <% }); %> 
      </tr>
  </table>

форма редактирования: 

    <form action="/environments/<%= environment._id %>?_method=PUT" method="POST">
        <input class="form-control" type="text" name="environment[ePIMS]" placeholder="ePIMS" value="<%= environment.ePIMS %>" />
        <input class="form-control" type="text" name="environment[region]" placeholder="Region" value="<%= environment.region %>" />
        <input class="form-control" type="text" name="environment[HCHC]" placeholder="HCHC Instance" value="<%= environment.HCHC %>" />
        <input class="form-control" type="text" name="environment[membership]" placeholder="Membership"  value="<%= environment.membership %>" />
        <button class="btn btn-primary">Submit</button>
    </form>

1 Ответ

1 голос
/ 23 апреля 2020

Вы можете сделать что-то подобное на заднем конце:

Задний конец: 


//I am using arrow function here to make the code looks cleaner
app.get('/environments/:id/edit', (req, res) => {

    //I am using promise here to make the code looks cleaner
    Environment.findById(req.params.id)

        .then(result => {

            res.render("edit", {
                environment: foundEnvironment,

                //Maybe the color can be here
                colorHere: 'yellow'
            });

            //The error will be caught here if any. No need of if(err) anymore
         })
        .catch(err => res.redirect("/"));

});

Внешний конец: 


//I use handlebars most of the time. I am not 
//sure about the ejs syntax. But it should be
//something like this

<h1 style="color:<%=colorHere%>;">This is a Blue Heading</h1>
...