NodeJS + Mongo - Как я могу взаимодействовать с DOM, выбирая данные из базы данных? - PullRequest
Новая
       12

NodeJS + Mongo - Как я могу взаимодействовать с DOM, выбирая данные из базы данных?

0 голосов
/ 04 мая 2019

У меня есть небольшое приложение express + ejs, которое сохраняет данные зарегистрированных пользователей.
У каждого пользователя есть «роль», которая сохраняется в БД.
У каждого пользователя есть HTML-тег div, и я хочу, чтобы каждыйЦвет div зависит от роли пользователя.

По сути, мне нужно добавить определенный класс к каждому div с помощью функции switch / case.
Я пытался понять, как лучше всего взаимодействовать между NodeJS + Mongo + DOM, но я понятия не имею.

  • Роль, которая сохраняется в БД, не может быть равна названию его подходящего класса.

Спасибо за помощь!

1 Ответ

3 голосов
/ 04 мая 2019

создайте вспомогательную функцию с именем getColorByRole.js, например: 

module.exports =(role)=>{
    let colorClass;
    switch(role){

      case 'user':
      colorClass='bg-primary';
      break;

      case 'manager':
      colorClass='bg-warning';
      break;

      case 'admin':
      colorClass='bg-success';
      break;

      default:
      colorClass='bg-light';
      break;

    }
    return colorClass;
}

Теперь, когда пользовательский запрос вызывает эту вспомогательную функцию, отправьте 

let getColorByRole=require('./helpers/getColorByRole.js');

app.get('/dashboard',(req,res)=>{
      let colorClass=getColorByRole(req.user.role);
      res.render('/dashboard',{data:someyourdata,colorClass:colorClass});
});

теперь во внешнюю сторону, просто добавьте colorClassк вашему div, используя переменную EJS, 

<div class="<%=colorClass%>" style="width:100%;">
 Dashboard
</div>

update: если вы выбираете несколько пользователей и хотите отображать разные цвета в соответствии с ролью пользователя, тогда сделайте так: 

User.find({},(err,users)=>{
    if(!err && users){
        users.map((user)=>{
            user.colorClass=getColorByRole(user.role);
            return user;
        });
    }
});
...