注意：本項目主要利用到了template，模板引擎進行編寫

模板引擎代碼下載地址

 <div id="news-list"><!-- 這里放數據 --></div>

.news-item {display: flex;border: 1px solid #eee;width: 700px;padding: 10px;margin-bottom: 5px;
}.thumb {display: block;width: 230px;height: 140px;background-color: #ccc;margin-right: 10px;
}.right-box {display: flex;flex-direction: column;justify-content: space-between;font-size: 12px;flex: 1;
}.title {font-size: 20px;font-weight: normal;
}.tags span {display: block;float: left;background-color: #F0F0F0;line-height: 20px;padding: 0 10px;border-radius: 10px;margin-right: 8px;
}.footer {display: flex;justify-content: space-between;
}

  <script src="./lib/jquery.js"></script><script src="./lib/template-web.js"></script><!-- 定義模板 --><script type="text/html" id="newslist">{{each data val}}<div class="news-item"><img class="thumb" src="http://www.liulongbin.top:3006{{val.img}}" alt=""><div class="right-box"><h1 class="title">{{val.title}}</h1><div class="tags">{{each val.tags.split(',') v}}<span>{{v}}</span>{{/each}}</div><div class="footer"><div><span>{{val.source}}</span>&nbsp;&nbsp;<span>{{val.time|formatTime}}</span></div><span>評論數：{{val.cmtcount}}</span></div></div></div>{{/each}}</script>// 發送ajax請求。獲取所有的新聞列表數據$.ajax({url: 'http://www.liulongbin.top:3006/api/news',success: function (res) {// console.log(res);// 調用template函數let str = template('newslist', res);$('#news-list').html(str);}});</script>

自定義獲取系統時間函數

<script>// 過濾器函數，處理時間template.defaults.imports.formatTime = function (x) {// x 不是時間日期對象.因為服務器返回的只能是字符串，所以x是一個字符串格式的時間x = new Date(x);let year = x.getFullYear();let month = addZero(x.getMonth() + 1);let day = addZero(x.getDate());let hour = addZero(x.getHours());let minute = addZero(x.getMinutes());let second = addZero(x.getSeconds());return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;}// 定義補 0 函數function addZero (n) {return n < 10 ? '0' + n : n;}

實現效果：