161 lines
4.8 KiB
HTML
Executable File
161 lines
4.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>留言-闲言轻博客</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
{{template "shares/link.html".}}
|
||
</head>
|
||
<body class="lay-blog">
|
||
{{template "shares/header.html".}}
|
||
<div class="container-wrap">
|
||
<div class="container container-message">
|
||
<div class="contar-wrap" id="contar-wrap">
|
||
<form class="layui-form" action="">
|
||
<div class="layui-form-item layui-form-text">
|
||
<textarea name="content" class="layui-textarea" id="LAY-msg-content" style="resize:none"></textarea>
|
||
</div>
|
||
</form>
|
||
<div class="item-btn">
|
||
<button type="button" class="layui-btn layui-btn-normal" id="message-item-btn">提交</button>
|
||
</div>
|
||
|
||
<div id="LAY-msg-box">
|
||
<div class="info-box">
|
||
<div class="info-item">
|
||
<img class="info-img" src="/static/images/info-img.png" alt="">
|
||
<div class="info-text">
|
||
<p class="title count">
|
||
<span class="name">一片空白</span>
|
||
<span class="info-img like"><i class="layui-icon layui-icon-praise"></i>5.8万</span>
|
||
</p>
|
||
<p class="info-intr">父爱如山，不善表达。回想十多年前，总记得父亲有个宽厚的肩膀，小小的自己跨坐在上面，越过人山人海去看更广阔的天空，那个时候期望自己有一双翅膀，能够像鸟儿一样飞得高，看得远。虽然父亲有时会和自己开玩笑，但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="test1" class="paging"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{template "shares/footer.html".}}
|
||
{{str2html `
|
||
<script id="LAY-msg-tpl" type="text/html">
|
||
<div class="info-box">
|
||
<div class="info-item">
|
||
<img class="info-img" src="{{ d.avatar }}" alt="">
|
||
<div class="info-text">
|
||
<p class="title">
|
||
<span class="name">{{ d.username }}</span>
|
||
<span class="info-img">
|
||
<i class="layui-icon layui-icon-praise"></i>
|
||
{{ d.praise }}
|
||
</span>
|
||
</p>
|
||
<p class="info-intr">
|
||
{{ d.content }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
`}}
|
||
|
||
<script>
|
||
|
||
layui.use(['form',"jquery","layer"],function () {
|
||
var element = layui.element
|
||
, form = layui.form
|
||
, laypage = layui.laypage
|
||
, $ = layui.jquery
|
||
, laytpl = layui.laytpl;
|
||
function drawMessage(message) {
|
||
var view = $('#LAY-msg-tpl').html()
|
||
//模拟数据
|
||
,data = {
|
||
username: message.user.name
|
||
,avatar: message.user.avatar||'/static/images/info-img.png'
|
||
,praise: message.praise
|
||
,content: message.content
|
||
,key :message.key
|
||
};
|
||
//模板渲染
|
||
return layui.laytpl(view).render(data);
|
||
}
|
||
|
||
|
||
$('#message-item-btn').on('click', function(){
|
||
var elemCont = $('#LAY-msg-content')
|
||
,content = elemCont.val();
|
||
if(content.replace(/\s/g, '') == ""){
|
||
layer.msg('请先输入留言');
|
||
return elemCont.focus();
|
||
}
|
||
// 发送post请求
|
||
$.post("/message/create",{content: content},function (ret) {
|
||
if(ret.code==0){
|
||
|
||
var html = drawMessage(ret.data);
|
||
$('#LAY-msg-box').prepend(html);
|
||
elemCont.val('');
|
||
layer.msg('留言成功', {
|
||
icon: 1
|
||
})
|
||
}else{
|
||
layer.msg(ret.msg);
|
||
}
|
||
}).error(function () {
|
||
layer.msg("网络异常");
|
||
})
|
||
});
|
||
|
||
if($("#test1").size()>0) {
|
||
var count = 0;
|
||
$.ajax({
|
||
url: "message/count",
|
||
type: "GET",
|
||
async: false,//不是异步，是同步请求，等执行这段代码才能必须下面的代码
|
||
success: function (ret) {
|
||
count = ret.count;
|
||
},
|
||
error: function () {
|
||
layer.msg("网络异常")
|
||
}
|
||
});
|
||
console.log(count)
|
||
laypage.render({
|
||
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
|
||
, count: count //数据总数，从服务端得到
|
||
, theme: '#1e9fff'
|
||
, limit: 5
|
||
, jump: function (obj, first) {
|
||
//obj包含了当前分页的所有参数，比如：
|
||
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
|
||
console.log(obj.limit); //得到每页显示的条数
|
||
//查询留言的路径为：/message/query
|
||
$.get("/message/query", {pageno: obj.curr, pagesize: obj.limit}, function (ret) {
|
||
if (ret.code == 0) {
|
||
// 循环后台返回的留言列表，拼出html页面
|
||
var datas = ret.data;
|
||
var html = "";
|
||
for (var i = 0; i < datas.length; i++) {
|
||
//拼页面
|
||
html += drawMessage(datas[i]);
|
||
}
|
||
var $html = $(html);
|
||
$("#LAY-msg-box").html($html);
|
||
} else {
|
||
layer.msg(ret.msg);
|
||
}
|
||
}).error(function () {
|
||
layer.msg("网络异常！")
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
})
|
||
</script>
|
||
</body>
|