目录

案例–评论列表

1. 渲染UI结构

2.获取评论列表 

3. 发表评论

4.html模板

案例-新闻列表

1.获取新闻列表的函数

2.定义新闻item模板

3.给时间补零函数

4.定义格式化时间的过滤器

案例–评论列表

1. 渲染UI结构

.

2 .获取评论列表 

 function getCmtList() {$.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {  if(res.status !== 200) {return alert('获取评论列表失败！')}var rows = []$.each(res.data, function (i, item) { // 循环拼接字符串rows.push('
'+ item.content +'评论时间：'+ item.time +'评论人：'+ item.username +'
')})$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构})}

3. 发表评论

 $('#formAddCmt').submit(function(e) {e.preventDefault() // 阻止表单的默认提交行为// 快速得到表单中的数据var data = $(this).serialize()$.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {if (res.status !== 201) {return alert('发表评论失败！')}// 刷新评论列表getCmtList()// 快速清空表单内容$('#formAddCmt')[0].reset()})})

4.html模板

发表评论
评论人：评论内容：发表评论
评论时间：评论人：Item 1

案例-新闻列表

 1.获取新闻列表的函数

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(',')}console.log(res)var htmlStr = template('tpl-news', res)$('#news-list').html(htmlStr)})}getNewsList()

2.定义新闻item模板

3.给时间补零函数

$(function () {// 给时间补零的函数function padZero(n) {if (n < 10) {return '0' + n} else {return n}}

4.定义格式化时间的过滤器

 // 定义格式化时间的过滤器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}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！