时间戳

首页 > 解决方案 > 在 Express App pug div 类中重复 MySQL 数据

mysql - 在 Express App pug div 类中重复 MySQL 数据

问题描述

现在我正在开发我的投资组合页面的 Express-NodeJS 版本。您可以使用此链接访问静态网页

所以我把我的数据放在 MySQL Server 中。在 Pug 模板中，我想重复 div 元素以及内部元素。

你能给我一些 div 迭代的例子，以及如何将 MySQL 数据放入 pug 模板。

在注释行中我想更改它，因为我想让它成为 CRUD App。

extends layout

block content
  .container
  header.header
    .logo-container
      img.logo(src='images/logo.png')
    .profile-container
      h1.name Si Hyeong Lee
      h2.job Front-End Developer
  hr.first-hr
  article.article
    img.image-cover(src='images/coverimg.jpg')
  h2.work-title Featured Work
  .work-container
    hr.second-hr
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name React Chat App
    //-   p.project-url
    //-     a(href='https://sangumee.herokuapp.com', target='_blank') https://sangumee.herokuapp.com/
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name BlueInno2 Projects
    //-   p.project-url
    //-     a(href='https://github.com/sangumee/Blueinno2', target='_blank') https://github.com/sangumee/Blueinno2
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name Public API Projects
    //-   p.project-url
    //-     a(href='https://github.com/sangumee/Public-Data-Project', target='_blank') https://github.com/sangumee/Public-Data-Project
  footer.footer
    p Copyright © 2018 Si Hyeong Lee, sangumee

标签： mysqlnode.jsexpresspug

解决方案

在 pug 中，您可以使用它each来迭代可迭代对象。

来自官方 pug 文档的示例

   ul
      each val in [1, 2, 3, 4, 5]
       li= val

返回类似的东西

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

请在官方文档中阅读更多相关信息：https ://pugjs.org/language/iteration.html

推荐阅读