注意：本项目主要利用到了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;}

实现效果：

Ajax — 新闻列表相关推荐

使用AJAX Toolkit创建新闻列表
我们很多站点上面都需要显示新闻列表,由标题和正文组成的.一般客户都希望实现这样的效果: 开始的时候只是显示标题,当点击标题的时候,再展开正文.再点击,又可缩回去. 这是典型的AJAX效果,或者说以前你 ...
一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）
前面三篇文章实现了第一个目标,即无刷新分页.本文将实现第二个目标,即预览新闻内容.有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫). 我们先用伪ajax实现新闻内容的预览. ...
[小程序项目] 使用微信开发者工具新闻小项目轮播图新闻列表页点击跳转新闻详情页登录获取用户基本信息
文章目录效果 Gitee 目录结构 app.json 首页 pages/news/news.wxml pages/news/news.wxss pages/news/news.js 配置网络请求 u ...
mui实现新闻列表和详情查看
1.新闻列表首页代码: <!doctype html> <html><head><meta charset="UTF-8">< ...
bootstrap 新闻列表_kuapingUI 2.2 版本发布，跨屏 UI-bootstrap 大组件 UI 框架
kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间.朋友圈.QQ.微信.微博等分享:联系按钮组包含了微信.QQ ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
jsp自定义图文新闻列表标签结合ssh2，带分页功能
jsp自定义图文新闻列表标签结合ssh2,带分页功能(欢迎大家讨论指点,共同进步) 1.service层 (模拟返回数据) package com.mingda.service.impl;import ...
requests库和BeautifulSoup4库爬取新闻列表
画图显示: import jieba from wordcloud import WordCloud import matplotlib.pyplot as plttxt = open("z ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...

Ajax — 新闻列表

注意：本项目主要利用到了template，模板引擎进行编写

实现效果：

Ajax — 新闻列表相关推荐

最新文章

热门文章