Ajax 通俗理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是 Ajax
进入正题——新闻列表制作 👇
1.实现效果:通过请求存放数据的 url 地址来将里面的内容显示到页面上(如下图所示)
2. 用到的文件: jquery.js 和 template-web.js
3. 实现步骤:
① 先创建文件夹,引入需要的文件
② 通过css将基本的布局实现 (效果如下)
③ 再添加修改部分代码,完整的代码如下所示
css部分:
.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;
}
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./assets/news.css" />
<script src="./lib/jquery.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./js/news.js"></script>
</head>
<body>
<div id="news-list">
</div>
<script type="text/html" id="tpl-news">
{{each data}}
<div class="news-item">
<img class="thumb" src="{{'http://www.liulongbin.top:3006' + $value.img}}" alt="" />
<div class="right-box">
<h1 class="title">{{$value.title}}</h1>
<div class="tags">
{{each $value.tags}}
<span>{{$value}}</span>
{{/each}}
</div>
<div class="footer">
<div>
<span>{{$value.source}}</span>
<span>{{$value.time | dateFormat}}</span>
</div>
<span>评论数:{{$value.cmtcount}}</span>
</div>
</div>
</div>
{{/each}}
</script>
</body>
</html>
JS部分:
$(function () {
//给时间补零的函数
function padZero(n) {
return n < 10 ? '0' + n : n;
}
//定义格式化时间的过滤器
template.defaults.imports.dateFormat = function (dtStr)
{
var dt = new Date(dtStr)
var y = dt.getFullYear()
var m = padZero(dt.getMonth() + 1)
var d = padZero(dt.getDate())
var hh = padZero(dt.getHours())
var mm = padZero(dt.getMinutes())
var ss = padZero(dt.getSeconds())
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ":" + ss
}
function getNewsList() {
$.get('http://www.liulongbin.top:3006/api/news', function (res) {
if (res.status !== 200) {
return alert('获取新闻列表数据失败!')
}
for (var i = 0; i < res.data.length; i++) {
//把每一项的 tags 属性,从字符串改造成字符串的数组
res.data[i].tags = res.data[i].tags.split(',');
}
var htmlStr = template('tpl-news', res)
$('#news-list').html(htmlStr)
})
}
getNewsList()
})
用到的知识点⭐
1. $.get()
$.get()函数的语法如下:
$.get(url,[data],[callback])
后两个可选
callback 可以获取从浏览器响应回来的数据
详细说明👇
参数名 参数类型 是否必选 说明 url string 是 要请求的资源地址 data object 否 请求资源期间要携带的参数 callback function 否 请求成功时的回调函数
2. 模板引擎
模板引擎,顾名思义,它可以根据程序员指定的 模板结构 和 数据,自动生成一个完整的 HTML页面
模板引擎的好处:
① 减少了字符串的拼接操作
② 使代码结构更清晰
③ 使代码更易于阅读与维护
模板引擎有很多种,这里我介绍 其中一种:art-template
使用步骤:
① 导入 art-template
② 定义数据
③ 定义模板
④ 调用 template 函数
⑤ 渲染HTML结构对应代码👇
标准语法:
art-template 提供了 {{}} 这种语法格式,在 {{}} 内可以进行 变量输出,或 循环数组 等操作,这种 {{}}语法在 art-template 中被称为标准语法
标准语法——循环输出:
如果要实现循环输出,则可以在 {{}} 内,通过 each 语法循环数组,当前循环的索引使用 $index 进行访问,当前的循环项使用 $value 进行访问
标准语法——过滤器 :
{{value | filterName}}
template.defaults.imports.filterName = function(value){/*return处理的结果*/}
过滤器语法类似 管道操作符,它的上一个输出作为下一个输入
注意:过滤器最后一定要有 return !!!
3. split()
split() 方法用于把一个字符串分割成字符串数组
语法:stringObject.split(separator,howmany)
好了,今天的内容就是这么多啦,下去多多复习噢~