如何使用javascript或jquery在卡片ui中顯示數據庫中的數據

Question

大家好，我是網絡開發的新手，所以你能幫我解決以下問題嗎

需要解決的問題

1) 建議我最好的 UI 設計在 web 中實現，如上圖所示。

2）從數據庫中，我需要使用任何一種腳本語言JavaScript和Jquery在html中顯示如上圖所示的數據。 如果有任何其他腳本語言可用於優化性能，請向我建議代碼

提前致謝。

Answer 1

您可以使用 css：

 .card { background-color: #f4f4f4; border: 1px solid #c1c1c1; width: 430px; height: 95px; position: relative; } .card img { width: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; float: left; margin: 23px 19px; } .card h2 { color: #333; margin: 30px 0 12px 0; } .card h3 { color: #4e4e4e; margin-top: 0; font-weight: normal; } .card h2, .card h3, .card .time { font-family: Arial, sans-serif; font-size: 16px; } .card .time { position: absolute; right: 20px; top: 30px; color: #676767; }

 <div class="card"> <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png"/> <h2>Trevor Hansen</h2> <h3>So tasty!</h3> <div class="time">1d</div> </div>

Answer 2

也許，您可以使用 underscore.js 或 mustache.js。 您可以擁有一個使用 mustache.js 模板化的卡片 ui，並通過 json 文件將數據填充到卡片中。 該 json 文件所在的位置取決於您。 大多數情況下，它可以運行您的服務器，然后您可以對數據進行 ajax 調用。

https://mustache.github.io/

看演示： https : //mustache.github.io/#demo

// 小胡子 + HTML

    <h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

//JSON
{
"header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": false
}