新闻门户的前后端总结
后台页面知识点总结
注册页面
1.找到提交按钮
添加点击事件，将数据通过form表单的serialize方法获得但是应当给form表单添加name属性，name的值就是属性名
key:value = name属性值:val()，最终let data = $('.form').serialize
2.发起ajax请求
在获得表单数据之后将数据传递到数据库进行比对，如果成功就返回code=200，对response进行判断。成功之后需要二件事
1.将登录时获得token令牌保存到本地的localStorage中（setItem方法），
目的是为了方便其他页面请求数据时使用token令牌
2.通过bootstrap优化弹出的确认框。
第一步是将弹窗模块代码复制到login页面，第二步是调用modal（）方法来弹出模态框，第三步是将弹出的文字内容通过text()添加，第四步是在返回的数据code！= 200的时候还是调用modal方法但是text的内容要改变为response.msg，也就是返回的错误信息
用户页面
1.发起ajax请求获得用户数据
根据response返回的code=200判断执行语句，如果是ture，就遍历response.data对象data: { nickname: "发撒打发范德萨发", userPic: "http://localhost:8080/icon.jpg", email: "sisili@qq.com", password: "123456", username: "admin" }
msg: "获取成功"，通过
$('.' + k).val(response.data[k])
利用[k]获取到每个返回值通过val添加到输入框
2.实现图片预览功能
通过on方法使用change事件。在匿名函数内先找到图片文件的数据，将图片文件的数据转换为URL地址，URL.createObjectURL(picData)，找到用户头像元素，通过attr方法，修改URL路径，$('.user_pic').attr('src', picUrl)
3.实现修改功能
首先是阻止页面的自动跳转，然后通过FormData接口拿到所有的form表单的数据，在form表单过于复杂时不能使用serialize()方法，因为每个都需要添加name属性
什么是FormData
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
通过获取到的fd实例化对象
let fd = new FormData(document.querySelector('form'))
，将数据参数传递到服务器进行比较，并且以FormData传递的数据类型必须false两个属性
contentType: false,
processData: false,
如果修改成功通过方法success打印response的msg
后台页面-左侧导航栏和用户界面
1.拿到并且使用token令牌
将token令牌存储在jQuery中，并且在请求头之前拿到令牌
jQuery.ajaxSetup() 方法设置全局 AJAX 默认选项。
同时进行判断，如果没有拿到令牌就将页面添砖到登录页面
$.ajaxSetup({
beforeSend: function (xhr) {
//请求之前拿到令牌
xhr.setRequestHeader('Authorization', localStorage.getItem('bignews'))
},
error: function (xhr, status, error) {
if (error == 'Forbidden') {
alert('您还没有登录，请登录账户')
//判断错误是否是禁止命令，不限于断网，请求错误，没有令牌，输入错误等
window.location = './login.html'
}
}
})
2.实现退出功能
给退出元素添加点击事件，在匿名函数首先删除token令牌
localStorage.removeItem('bignews')
删除令牌之后将页面跳转到登录页面
3.实现一级导航的展开动画
找到一级导航元素添加点击事件，添加active类型，siblings('div'),这里指定兄弟元素div，排除了兄弟元素ul，给指定的兄弟元素removeClass('active')
因为“文章管理的标签”有二级导航，所以在点击“文件管理标签”时实现二级导航的滑出动画和一级导航的箭头动画
分别对应了
$('.level02').slideToggle()
$(this).find('b').toggleClass('rotate0')
这里的细节优化：在toggle切换滑动动画时，将二级当好的active属性添加到二级导航的第一个标签
$('.level02 li').eq(0).click()
4.实现二级导航的展开动画
点击二级导航的标签将active添加到点击的标签，兄弟元素的active清除掉
$('.level02 li').on('click', function () {
$(this).addClass('active').siblings().removeClass('active')
})
文章类别的实现
1.渲染页面
1.1接口地址的优化
引入https.js文件，其内部的实现原理时沙盒模式把window对象以实参的形式传入到匿名函数内部通过，通过window.BigNew = BigNew,将BigNew下中的键值对添加到window的BigNew属性中，window.BigNew获取对象的所有键值对，再通过属性名引出URL
1.2封装渲染函数
首先function一个loadData，在封装函数内部发起ajax请求，通过优化后的地址得到请求的地址
BigNew.category_list
category_list没有参数，所以直接写入成功后的回调函数
success :function(response){}
在回调函数内部
首先判断是否获取到数据
if(response.code == 200)
如果获取到数据就将文章类别的数据添加到页面
这里因为结构并不复杂并且不要迭代所以使用模板字符串
顺序：声明模板空的模板字符串，通过JQ的each方法循环遍历拿到的data，通过+=运算符将遍历赋值后的HTML结构添加到tbody当中，实现代码如下
let htmlStr = ''
$.each(response.data, function (index, value) {
htmlStr += ` <tr>
<td>${value.name}</td>
<td>${value.slug}</td>
<td class="text-center">
<a href="javascript:void(0)" data-id = "${value.id}" data-toggle="modal" data-target ="#myModal" class=" btn btn-info btn-xs">编辑</a>
<a href="javascript:void(0)" data-id = "${value.id}" class="btn btn-danger btn-del btn-xs">删除</a>
</td>
</tr> `
})
$('tbody').html(htmlStr)
因为函数不调用，就不会触发，所有在页面打开时先调用一次函数
loadData()
2.模态框显示功能
2.1配置bootstrap框架
首先找到bootstrap的模态框首行，然后添加自有的事件，同时添加事件对象e，通过判断事件对象触发的文字内容，来执行弹出的模态框的样式和内部文字，判断语句
if (e.relatedTarget.innerText == '新增分类'){//如果是新增分类，改变模态框的标题和内部文字内容$('.modal-title').text('新增分类')//改变新增按钮的样式$('#save').text('新增').addClass('btn-success')}else{//因为只有新增分类和编辑分类，所以如果在else只能编辑分类如果是编辑分类，改变模态框标题$('.modal-title').text('编辑分类')//改变编辑按钮的样式$('#save').text('').addClass('btn-info')}
2.2在弹出编辑显示框之后显示已经存在的内容
在编辑按钮显示模态框的时候，应该获取已经存在的文章类别数据，首先在请求之前先声明一个dataId获取到触发元素的data-id，自定义的属性值
发起ajax请求，根据获取的dataId发送到服务器比对，如果请求成功，将得到的name，slug，id值获取到
else{
let dataId = $(e.relatedTarget).attr('data-id')
//发起ajax请求
$.ajax({
url: BigNew.category_search,
data: {
id: dataId
},
success: function (response) {
console.log(response);
if (response.code == 200) {
$('#recipient-name').val(response.data[0].name)
$('#message-text').val(response.data[0].slug)
$('#categoryId').val(response.data[0].id)
}
}
})
}
3模态框隐藏功能
3.1添加自有方法
找到模态框的元素添加隐藏事件，并且添加事件对象，在隐藏是清空模态框的内容，因为时input框所以不能使用text(),而是使用val（''）
$('#myModal').on('hidden.bs.modal', function (e) { $('#recipient-name').val('') $('#message-text').val('') })
4.新增功能的实现
找到id为save的按钮，它同时代表了两个键，所以要进行文字的判断
首先添加点击事件，然后进行判断
$('#save').on//添加点击事件
如果点击的是新增按钮
if ($(this).text() == '新增'){
获取到name和slug的输入框的值清除空格，如果name或slug为空就停止执行事件否则就发起请求，
let name = $('#recipient-name').val().trim()
let slug = $('#message-text').val().trim()
if (name == '' || slug == '') return
}
发起请求，类型是post，上传name和slug属性，如果请求成功执行回调函数，判断回调函数返回值，response.code == 200,找到模态框添加hide方法，调用渲染页面的封装函数
$.ajax({
type: 'post',
url: BigNew.category_add,
data: {
name: name,
slug: slug
},
success: function (response) {
console.log(response);
if (response.code == 201) {
//调用模态框方法，在添加数据之后隐藏模态框
$('#myModal').modal('hide')
//隐藏模态框之后加载页面
loadData()
}
}
})
5.编辑功能的实现
5.1实现逻辑
如果对save判断后文字内容不是新增，则进入编辑的语句，在编辑时，首先应该获取到编辑之后的字符串内容，然后通过参数data上传到数据库，在成功之后通过判断返回值，隐藏模态框然后重新渲染编辑后的页面，代码实现：
let data = $('form').serialize()
//发起post请求
$.ajax({
type: 'post',
url: BigNew.category_edit,
//参数是变量
data: data,
success: function (response) {
if (response.code == 200) {
//修改数据成功之后隐藏模态框
$('#myModal').modal('hide')
//隐藏模态框之后加载页面
loadData()
}
}
})
5.2实现的注意事项
首先是serialize方法必须在form对应的input框中添加name属性，相当于添加一个key键，然后serialize方法通过name属性可以直接获取到对应的value值，将字符串获取之后在进行数据库的添加
6.删除功能的实现
首先找删除按钮，然后添加点击事件，获取自定义的id值并回收为articleId，通过参数id进行数据库的删除，成功之后返回数据的code==204，删除数据后重新渲染页面，实现代码：
let articleId = $(this).attr('data-id') $.ajax({ type: 'post', url: BigNew.category_delete, //data有参数的情况下要加括号 data: { id: articleId }, success: function (response) { if (response.code == 204) { loadData() } } })
文章列表功能的实现
1.获得文章分类的元素
首先是获取文章列表数据，因为添加内容大量重复，所以使用模板引擎，通过template方法，实现代码如下
具体的数据分类的模板引擎
<script type="text/html" id="tpl-category">
<!-- 在循环遍历之前添加所有分类，否在原生的选项会被覆盖 -->
<option value="">所有分类</option>在循环之前添加默认的选项
{{each data}}
<!-- value是从data遍历到的每个数据，data是数组 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
请求类别数据
$.ajax({
url: BigNew.category_list,
success: function (response) {
console.log(response);
let htmlStr = template('tpl-category', response)
$('#selCategory').html(htmlStr)
}
})
2.封装渲染页面的函数
2.1发起ajax请求
在发起请求之前声明一个全局变量用来保存删除功能的显示页面
let selPage = 1 function loadData(pageForm) { //设置全局变量的删除页码,在删除页码之后加载的数据页码应该还在当前的页面,不能写死loadData(1) selPage = pageForm} //伪代码
2.2渲染函数内容发起请求
发起请求获得点击的value值，通过选择组件的父元素获得
type: $('#selCategory').val(),state: $('#selStatus').val(),//文章状态
将页面参数上传
将每页数据数量上传
page: pageForm, //每页显示的几条数据 perpage: 5
通过回调函数success的response响应来判断是否获取到数据，如果获取到并且数量大于0就渲染，如果获取的数据条数小于0就清空页面数据并且给出提示信息，首先给出获取不到的代码实现
$('tbody').empty()
//提示信息
$('#pagination').text('当前类别没有数据......')
如果请求到数据就首先判断数据的两是否数量大于0，如果大于0，通过模板引擎渲染数据结构
具体的数据内容文章列表HTML模板引擎
<script type="text/html" id="tpl-list">
{{each data.data}}
<tr>
<td>{{$value.title}}</td>
<td>{{$value.author}}</td>
<td>{{$value.category}}</td>
<td class="text-center">{{$value.date}}</td>
<td class="text-center">{{$value.state}}</td>
<td class="text-center">
//在编辑和删除按钮保存一个data-id方便后面的操作
<a href="article_edit.html" data-id ="{{$value.id}}" class="btn btn-default btn-xs">编辑</a>
<a href="javascript:void(0);" data-id="{{$value.id}}" class="btn btn-danger btn-xs delete">删除</a>
</td>
</tr>
{{/each}}
</script>
2.3实现页面的页码数
$('#pagination').twbsPagination('destroy') $('#pagination').twbsPagination({ //设置总页数 totalPages: response.data.totalPage, //当前可见页数 visiblePages: 7, //启动时选中的页面应该和pageForm相同，如果不同在摧毁之前的页码之后会跳转到第一页而不是筛选后的页面 //初始页数不能写死，如果写死会导致筛选后无法进行页码的切换 startPage: pageForm, //控制初始化点击页面 initiateStartPageClick: false, first: '首页', last: '尾页', next: '下一页', prev: '上一页', //分页插件的点击事件 //event:事件对象 //page:当前被点击的页码 //点击页码事件时,获取事件对象和被点击页码,将页码作为实参传递给pageForm onPageClick: function (event, page) { loadData(page) }
3.实现筛选功能
loadData(1)
$('#btnSearch').on('click', function (e) {
e.preventDefault()
// 点击筛选按钮之后获取数据,然后页码切换到第一页,传入实参1给pageForm
//因为插件BUG页面码数只能设置一次,如果不destroy,则筛选后的页面的数量不会生效,
//如果destroy,虽然数据渲染会生效(ajax根据formData参数获得了数据),但是页面跳转后(onPageClick根据点击生效了)又会跳转到第一页(这是因为初始页面是1)--代码速度不同? 导致页面点击任何页码都会跳转到第一页,所以要修改startPage为pageForm,这样每次修改后初始的页面都是1
loadData(1)
})
//筛选功能的实现主要依靠封装的渲染函数
4.实现删除功能
$('tbody').on('click', '.delete', function () {
let delId = $(this).attr('data-id')
$.ajax({
type: 'post',
url: BigNew.article_delete,
data: {
id: delId
},
success: function (response) {
if (response.code == 204) {
//在tr大于1行,或者删除页码数为1的时候渲染页面
if ($('tbody>tr').length > 1 || selPage == 1) {
//通过全局变量获取删除页面的页码,并且渲染页面
loadData(selPage)
} else {
//在tr<1的时候,也就是当删除的是最后一条时,应该加载上一页的数据(但是第一页应该排除在外,因为插件没有第0页)
loadData(selPage - 1)
}
}
}
})
4.细节完善
4.1模板引擎
在渲染分类的选项组件时，必须将所有分类选项添加在each循环之外，否则循环后的data分类会覆盖掉默认的’所有分类‘选项
4.2选项组件的value取值问题
$('#selCategory').val(),
获取所选类别的内容，才能根据内容，上传参数获取数据渲染出对应的文章列表
state: $('#selStatus').val(),
获取所选类别的状态文字，根据状态获取上传参数获取数据渲染对应的文章列表
在select父元素没有value时，可以通过value获取子元素option的value，
所以所有的option都应该有value属性，提示性的value为空串
<select
class="selectpicker form-control" title="请选择" name="level"
id="level">
<option value="">--请选择--</option>
<option value="1">一级（厂级）</option>
<option value="2">二级（部门级）</option>
<option value="3">三级（班级）</option>
</select>
特殊情况。
option如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。
4.3筛选功能的表单问题
form表单的button按钮都默认有刷新页面的功能，必须注意submit和button的 e.preventDefault()
在筛选之后传入Formpage = 1的实参，调用渲染页面的函数
4.4删除功能的数据行数和页码问题
数据行数应该大于1，或者，删除的页面等于1时都应该渲染对应的页面
if ($('tbody>tr').length > 1 || selPage == 1) { //删除页面的页码应当注意细节问题 //通过全局变量获取删除页面的页码,并且渲染页面 loadData(selPage) }
在数据只有一页时，删除最后一条数据时应该限制最小的页数
else { //在tr<1的时候,也就是当删除的是最后一条时,应该加载上一页的数据(但是第一页应该排除在外,因为插件没有第0页) loadData(selPage - 1) }1-1=0，在判断时是false，所以不会执行totalCount>0的数据，而是执行else { //搜索倒没有的数据类型就清空页面 $('tbody').empty() //提示信息 $('#pagination').text('当前类别没有数据......') }
4.5页码的参数问题
不能写死，通过形参pageForm来解决页面的页码问题
4.6formData数据
name是请求的参数名,参数值会自动获取,并且只适用于input框
通过formData.append('属性名',属性值),可以自定义表单数据适用于不是input框的数据收集
发表文章的功能实现
1.文章列表跳转到发表文章
1.1找到release发布按钮
通过jq找到release按钮并且添加点击事件,在点击发布时,找到父页面的level中的第二个li添加点击事件,这一步的作用主要是添加类名,高亮发表文章的标签
跳转功能是通过a标签的href属性实现的
<a href="article_release.html" </a>
$('#release_btn').on('click', function () {
// 让主页(父页面)的二级菜单被选中,高亮发表文章的标签
parent.$('.level02 li').eq(1).click();
})
2.发表文章页功能的实现
2.1通过插件实现日期时间的选择
引入三个日期插件
<link rel="stylesheet" href="./libs/jedate/css/jedate.css"> <script src="./libs/jedate/js/jedate.js"></script> <script src="./libs/template-web.js"></script>
添加日期控件容器
<div class="jeinpbox"> <!-- 给input添加name属性与参数名相同,以此来保存上传数据 --> <input type="text" class="jeinput" id="testico" placeholder="YYYY-MM-DD" name="date"> <div class="icons jebtns" onclick="jeDate('#testico',{trigger:false,format: 'YYYY-MM-DD' ,zIndex:20000})"> <!-- 设置zIndex为20000,否则会被10000的富文本编辑器遮挡 --> </div> </div>
注意日期插件的zIndex要大于富文本框的10000zIndex,否则会被遮挡无法选中日期
2.2通过插件实现富文本框的实现
插件富文本框的插件
<script src="./libs/wangEditor/wangEditor.js"></script>
添加JS代码
<script script type="text/javascript">
const E = window.wangEditor
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()
</script>
添加HTML代码
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
注意这个富文本插件只能通过自有方法获取和修改文本框内容
editor.txt.html(),不输入参数是获取,输入参数是修改
2.3实现图片预览功能
找到封面输入框,添加change时间,通过files属性获得图片的数据
let picData = this.files[0]
通过URL的方法创建图片的URL地址
let picUrl = URL.creatObjectURL(picData)
通过JQ的attr方法修改现有图片的路径
$('img.article_cover').attr('src', picUrl)
2.4获取文章类别加载页面
发起get类型的ajax请求,没有参数,通过回调函数success,将模板字符串添加到选项组件中
success: function (response) { if (response.code == 200) { //空字符串声明在循环之外,否则每次循环都会清空已有数据 let htmlStr = '' $.each(response.data, function (index, value) { htmlStr += `<option value="${value.id}">${value.name}</option>` }) //通过交集选择器找到唯一的select选项组件的父元素,通过JQ的html方法渲染到页面 $('select.category').html(htmlStr) } }
2.5获取需要提交的数据
封装一个函数saveData,发起请求,获取参数,参数值
一部分通过表单的FormData的name属性获取,
//FormData是构造函数,必须使用new关键字
//将form表单作为实参传入构造函数内部
let fd = new FormData(document.queryselector('form'))
//使用FormData获取表单数据必须在input框添加name属性名,name属性名就是请求的参数名,参数值自动获取
另一部分通过FormData的append属性添加实现.两者结合最终以实例化对象fd传递参数数值,
fd.append('content',editor.txt.html()),括号里的参数分别对请求的参数名和参数值,而且editor.txt.html()这个方法是唯一修改插件富文本框内容的方法
fd.append('state',state)//左侧是参数名,右侧通过封装函数的参数获得
拿到完整的fd后,发起ajax,因为数据类型是FormData,所以
data:fd,contentType:false,perocessData:false,
在发起请求成功之后,弹出文章操作成功,跳转到文章列表页,并且给父页面的level02 li中的第一个添加点击事件,高亮第一个标签,至此封装完成函数
找到发布按钮,阻止默认的button刷新功能,同时调用savaData()封装函数
找到草稿按钮,阻止默认button刷新功能,同时调用封装函数savaData()
实现代码
$('.btn-release').on('click', function (e) {
e.preventDefault()
saveData('已发布')
})
$('.btn-draft').on('click', function (e) {
e.preventDefault()
saveData('草稿')
})
编辑页面功能的实现
首先必须获取到索要编辑的文章的id,通过设置list页面的a标签的地址获得,实现代码
<a href="article_edit.html?aeticleId={{$value.id}}" class="btn btn-default btn-xs">编辑</a>
将拿到的字符串进行切割拿到文章id
let articleId = window.location.search.split('=')[1]
split对字符串会变为伪数组,除了不能使用数组方法,可以进行读取
与发表文章功能的2.3相同,实现图片预览功能,通过URL方法创建图片URL地址修改src的值.
发起ajax请求,将文章类别通过模板字符串的方式添加到页面,与发表文章相同.
根据拿到的文章发起ajax请求,将需要编辑的文章先渲染到页面
$.ajax({
url: BigNew.article_search,
data: { id: articleId },
success: function (response) {
$('#inputTitle').val(response.data.title)
$('.article_cover').attr('src', response.data.cover)
//修改选项组件的value
$('select.category').val(response.data.categoryId)//???
$('#testico').val(response.data.date)
editor.txt.html(response.data.content)
}
})
//注意事项,修改选项时可以直接传入返回数据的id,在渲染时,select组件会根据id值选择类别
//找到富文本框通过editor.txt.html()方法修改富文本的内容,将已经存在的数据渲染到页面
//日期的修改可以直接通过val方法传入参数解决 $('#testico').val()
给修改按钮和草稿按钮添加点击事件阻止默认的刷新功能,并且调用savaData函数
$('.btn-edit').on('click', function (e) {
e.preventDefault()
saveData('已发布')
})
$('.btn-draft').on('click', function (e) {
e.preventDefault()
saveData('草稿')
})
封装saveData函数与发表文章功能相同,唯一不同的参数多一个id.所以通过append方法给FormData的实例化对象添加id键值对,而state状态的值已经通过函数的参数传递
fd.append('id', articleId)
fd.append('content', editor.txt.html())
fd.append('state', state)//state的值来自调用函数的实参
此页的插件使用详见发表文章功能
评论列表页面的操作函数封装
function changeData(state, comId) {
// 判断需要使用哪个接口
let url = '';
if (state == '批准') {
url = BigNew.comment_pass;
} else if (state == '拒绝') {
url = BigNew.comment_reject;
} else {
url = BigNew.comment_delete;
}
$.ajax(
{
type: 'post',
url: url,
data: {
id: comId
},
success: function (backData) {
if (backData.code == 200) {
alert('修改成功');
// 7. 区分当前的操作是否在最后一页/最后一条
if ($('tbody tr').length > 1 || state == '批准' || state == '拒绝' || selPage == 1) {
// 以上四种情况,对页码没有改变
loadData(selPage);
} else {
// 正在删除最后一页,最后一条,所以需要加载前一页的数据
loadData(selPage - 1);
}
}
}
}
)
}
//给a标签添加点击事件（目的是为了获取a标签的内容（批准、拒绝、删除））
//获取操作按钮的对应的文章id，用来对所选数据进行操作
$('tbody').on('click', 'a', function () {
let comId = $(this).attr('data-id');
// $(this).text()就是按钮的名字就是state
changeData($(this).text(), comId);
})
})
前台页面知识点的总结
1.index页面
1.1在index页面中主要就是模板引擎的使用
遍历/判断/索引/地址/样式 的复合使用
<script type="text/html" id="tpl-rank">
{{each data}}
<li>
<!-- 判断span的索引修改样式 -->
{{if $index == 0}}
<span class="first">
{{else if $index == 1}}
<span class="second">
{{else if $index == 2}}
<span class="third">
{{else}}
<span>
{{/if}}
<!-- 让除第1，2，3个外的span的样式统一，加1是为了从第四个开始(0,1,2都被占了，所以加1就是外后排) -->
{{$index+1}}</span>
<!-- 添加id值在跳转详情页时通过id值获取数据渲染页面 -->
<a href="./article.html?articleId = {{$value.id}}">{{$value.title}}</a>
</li>
{{/each}}
<!-- 注意模板引擎的书写格式和判断语句的表达方式 ，原文输出，标准语法{{@ value }}-->
<!-- 修改样式时只需要书写标签的一半 -->
</script>
1.2在发起请求中注意模板引擎字符串的添加位置
$.ajax({
url: BigNew.index_latest_comment,
success: function (response) {
if (response.code == 200) {
let htmlStr = template('tpl-comments', response)
$('.comment_list').html(htmlStr)
}
}
})
2.list页面封装函数
2.1封装加载页面的函数
function loadData(option) {
$.ajax({
url: BigNew.index_search,
data: {
key: option ? option.key : '',
type: option ? option.type : ''
},
success: function (response) {
if (response.code == 200) {
//判断是否存在数据
if (response.data.totalCount > 0) {
let htmlStr = template('tpl-list', response)
//不能用+=，有一个显示的顺序问题，标题在最上面
htmlStr = `
<div class="list_title">
<h3>文章列表</h3>
</div>`+ htmlStr
$('.left_con').html(htmlStr)
} else {
$('.left_con').html(`
<div class="list_title">
<h3>没有任何数据...</h3>
</div>`)
}
}
}
})
}
4.小问题
4.1插件的引入
4.2模板引擎的格式
if语句、each的循环、等式的左右空格都要严谨仔细
<!-- 一周排行 -->
<script type="text/html" id="tpl-rank">
{{each data}}
<li>
<!-- 判断span的索引修改样式 -->
{{if $index == 0}}
<span class="first">
{{else if $index == 1}}
<span class="second">
{{else if $index == 2}}
<span class="third">
{{else}}
<span>
{{/if}}
{{$index+1}}</span>
<a href="./article.html?articleId={{$value.id}}">{{$value.title}}</a>
</li>
{{/each}}
<!-- 注意模板引擎的书写格式和判断语句的表达方式 -->
</script>
4.3跳转页面携带参数
<a href="./article.html?articleId={{$value.id}}"></a>
浙公网安备 33010602011771号