首页 index.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/11
Time: 21:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<link href="/css/font_1446720_ftf15in5gss.css" rel="stylesheet">
</head>
<body>
<jsp:include page="heard.jsp"></jsp:include>
<div style="margin: 80px 0px;">
<jsp:include page="content.jsp"></jsp:include>
<%-- <%@include file="content.jsp"%>--%>
</div>
<div class="fixed-bottom">
<jsp:include page="footer.jsp"></jsp:include>
</div>
</body>
</html>
头部 heard.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/11
Time: 21:10
To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<link href="/css/font_1446720_ftf15in5gss.css" rel="stylesheet">
</head>
<div class="container-fluid fixed-top" style="padding: 0px">
<div class="row no-gutters">
<div style="height: 56px" class="col-2 bg-dark text-light">
<h4 style="line-height: 56px;text-align: center;"><a style="color: white;text-decoration:none;" href="/index.jsp">博客</a></h4>
</div>
<div class="col-8 container-fluid row no-gutters">
<div class="col-2 bg-dark"></div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark col-10">
<ul class="navbar-nav">
<li style="margin-left: 20px" class="nav-item active">
<a class="nav-link" href="index.jsp">首页</a>
</li>
<li class="nav-item " style="margin-left: 20px">
<a class="nav-link" href="category.jsp">分类</a>
</li>
<li style="margin-left: 20px" class="nav-item">
<a class="nav-link" href="timeline.jsp">归档</a>
</li>
<li style="margin-left: 20px" class="nav-item">
<a class="nav-link" href="tags.jsp">标签</a>
</li>
<%-- <li style="margin-left: 20px" class="nav-item">--%>
<%-- <a class="nav-link" href="index.jsp">关于</a>--%>
<%-- </li>--%>
</ul>
<form style="margin-left: 60px" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2 search_inp" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success search_btn my-2 my-sm-0" type="button">Search</button>
</form>
</nav>
</div>
<div style="height: 56px" class="col-2 bg-dark text-light">
<%-- TODO --%>
<c:if test="${username== null}">
<button type="button" class="btn btn-dark text-light btn_login" style="margin-top: 10px">登录/注册</button>
</c:if>
<c:if test="${username != null}">
<i id="userico" role="button" data-toggle="dropdown" aria-expanded="false" class="iconfont icon-touxiang" style="font-size: 24px;position: absolute;top: 10px;left: 70px"></i>
<div class="dropdown-menu" aria-labelledby="userico">
<a class="dropdown-item" href="/userinfo.jsp">个人资料</a>
<a class="dropdown-item" href="article.jsp">文章编辑</a>
<a class="dropdown-item" href="/userArcicalList.jsp">文章管理</a>
<a class="dropdown-item login_out" href="/Login">退出</a>
</div>
</c:if>
</div>
</div>
</div>
<script>
$(".btn_login").click(function () {
window.location.href = "login.jsp";
})
$(".search_btn").click(function () {
window.location.href = "searchList.jsp?keyword="+$(".search_inp").val();
})
</script>
</html>
内容区 content.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/12
Time: 18:20
To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<link href="/css/font_1446720_ftf15in5gss.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid row no-gutters" style="padding: 0px">
<div class="col-1"></div>
<div class="col-10 container-fluid row">
<div class="col-9">
<%-- 轮播图--%>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/img/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="img/2.jpg">
</div>
<div class="carousel-item">
<img src="/img/3.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<%-- 大银幕--%>
<%--TODO--%>
<div class="cotence_middle">
</div>
</div>
<div class="col-3">
<c:if test="${username!=null}">
<div class="card" style="width: 18rem;" style="margin-top: 50px">
<img style="width: 150px;height: 150px;margin: 0 auto;border-radius: 50%"
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3101694723,748884042&fm=26&gp=0.jpg"
class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">${username}</h5>
<p></p>
<button type="button" class="btn btn-dark rizhi">
文章
<span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-success fenlei" style="margin-left: 20px">
分类
<span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-warning biaoqian" style="margin-top: 10px">
标签
<span class="badge badge-light">0</span>
</button>
</div>
</div>
</c:if>
<c:if test="${username==null}">
<div class="card" style="width: 18rem;" style="margin-top: 50px">
<img style="width: 150px;height: 150px;margin: 0 auto;border-radius: 50%"
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3101694723,748884042&fm=26&gp=0.jpg"
class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">欢迎使用博客</h5>
<p></p>
<button type="button" class="btn btn-dark rizhiAll">
文章
<span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-success fenleiAll" style="margin-left: 20px">
分类
<span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-warning biaoqianAll" style="margin-top: 10px">
标签
<span class="badge badge-light">0</span>
</button>
</div>
</div>
</c:if>
<ul class="list-group col remen" style="margin-top: 50px">
<li class="list-group-item active bg-dark text-center">热门文章</li>
</ul>
<ul class="list-group col tuijian" style="margin-top: 50px">
<li class="list-group-item active bg-dark text-center ">文章推荐</li>
</ul>
<ul class="list-group col" style="margin-top: 50px">
<li class="list-group-item active bg-dark text-center">标签</li>
<div class="list-group-item tagsli">
</div>
</ul>
<ul class="list-group col" style="margin-top: 50px">
<li class="list-group-item active bg-dark text-center">技术博客</li>
<li class="list-group-item">
<a class="btn-link text-dark" href="#" style="width: 50%">前端博客</a>
</li>
<li class="list-group-item">
<a class="btn-link text-dark" href="#" style="width: 50%">前端技术</a>
</li>
<li class="list-group-item">
<a class="btn-link text-dark" href="#" style="width: 50%">web前端开发</a>
</li>
</ul>
<ul class="list-group col" style="margin-top: 50px">
<li class="list-group-item active bg-dark text-center">站点消息</li>
<li class="list-group-item">
站点运行时间：<span id="show_time"></span>
</li>
<li class="list-group-item count">
访问量：
</li>
<a href="pre-html.jsp?id=46"></a>
</ul>
</div>
</div>
<div class="col-1"></div>
</div>
<script>
<%-- 生成标签 --%>
$.ajax({
url: "/TagsServlet",
type: "GET",
success: function (data) {
const json = JSON.parse(data);
json.forEach((elem, index) => {
$(".tagsli").append(`<span value=` + elem.id + ` class="badge badge-primary"style="min-width: 50px;padding: 5px;margin: 10px 10px 0 0">` + elem.tagName + `</span>`)
});
$(".tagsli span").each(function () {
$(this).css("background-color", Color());
});
$(".tagsli span").click(function () {
// 标签id $(this).attr("value")
// console.log("/taglist.jsp?id="+$(this).attr("value")+"&&tag="+$(this).text())
window.location.href = "/taglist.jsp?id=" + $(this).attr("value") + "&&tag=" + $(this).text()
});
}
})
$.ajax({
url: "/CountServlet",
type: "GET",
success: function (data) {
$(".count").text("访问量：" + data)
// console.log(data)
}
})
$.ajax({
url: "/ArtTagServlet",
type: "GET",
data:{username:"123"},
success: function (data) {
console.log(data)
let json = JSON.parse(data)
$(".rizhi span").text(json.articleSize)
$(".fenlei span").text(json.categorySize)
$(".biaoqian span").text(json.tagSize)
}
})
$.ajax({
url: "/BlogCount",
type: "GET",
data:{username:"123"},
success: function (data) {
console.log(data)
let json = JSON.parse(data)
$(".rizhiAll span").text(json.articleSize)
$(".fenleiAll span").text(json.categorySize)
$(".biaoqianAll span").text(json.tagSize)
}
})
$.ajax({
url: "/HotCount",
type: 'GET',
success: function (data) {
//对于获取的数据执行相关的操作，如：绑定、显示等
const json = JSON.parse(data);
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id=" + elem.id + "\">"
$(".remen").append("<li class=\"list-group-item\">" +a + elem.title+"</a></li>")
})
}
})
//获取文章
$.ajax({
url: "/articlelist",
type: 'GET',
success: function (data) {
//对于获取的数据执行相关的操作，如：绑定、显示等
const json = JSON.parse(data);
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id=" + elem.id + "\">"
if (index > 4) {
return
}
$(".tuijian").append("<li class=\"list-group-item\">" + a +elem.title+
"</a></li>")
// $(".cotence_middle").append('<div class="jumbotron" style="margin-top: 35px">' + a + '<h1 class="display-4">' + elem.title + '</h1><p class="lead">' + elem.id + '</p> </a></div>');
$(".cotence_middle").append("<div class=\"jumbotron\" style=\"margin-top: 30px\">\n" + a +
" <h1 class=\"text-center title\" style=\"font-weight: bold;color: #0a001f\">" +elem.title+
"</h1></a>\n" +
" <ol class=\"list-unstyled\">\n" +
" <li class=\"author\">\n" +
" <i class=\"iconfont icon-zuozhe\"></i>作者：<span>" +elem.author+
"</span>\n" +
" </li>\n" +
" <li class=\"score\">\n" +
" <i class=\"iconfont icon-zuozheicon-defen\"></i>文章得分：<span>" +elem.score+
"</span>\n" +
" </li>\n" +
" <li class=\"createtime\">\n" +
" <i class=\"iconfont icon-fabushijian\"></i>发布时间 <span>" +dateFormat("YYYY-mm-dd", new Date(elem.createtime))+
"</span>\n" +
" </li>\n" +
" <li class=\"updatatime\">\n" +
" <i class=\"iconfont icon-gengxinshijian\"></i>更新时间 <span>" +dateFormat("YYYY-mm-dd", new Date(elem.updatatime))+
"</span>\n" +
" </li>\n" +
" </ol>\n" +
" <div style=\"width: 100%\">"+ a+
" <button type=\"button\" class=\"btn btn-outline-dark\" style=\"margin-left: 350px;margin-top: 30px\">阅读全文</button>\n" +
" </a></div>\n" +
" </div>")
});
}
})
function Color() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var color = 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
return color;
}
function dateFormat(fmt, date) {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
}
;
}
;
return fmt;
}
</script>
<script type="text/javascript" language="javascript">
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {//计算年
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {//计算天
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {//计算时
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {//计算分
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {//计算秒
time[4] = second;
}
return time;
}
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2021, 5, 12, 0, 0, 0)).getTime() / 1000);//设置起始时间为2017年1月1日0点整，注意月份取值是0-11。
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天' + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4] + '秒';
document.getElementById("show_time").innerHTML = currentTimeHtml;
}
setInterval(setTime, 1000);
</script>
</body>
<style>
/*包含以下四种的链接*/
.cotence_middle a {
text-decoration: none;
}
/*正常的未被访问过的链接*/
.cotence_middle a:link {
text-decoration: none;
}
/*已经访问过的链接*/
.cotence_middle a:visited {
text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.cotence_middle a:hover {
text-decoration: none;
}
/* 正在点击的链接*/
.cotence_middle a:active {
text-decoration: none;
}
</style>
<style>
body {
padding: 40px;
}
#layout > header, .btns {
width: auto;
}
#sidebar {
width: 300px;
height: 100%;
position: fixed;
top: 0;
right: 0;
overflow: hidden;
background: #fff;
z-index: 100;
padding: 18px;
border: 1px solid #ddd;
border-top: none;
border-bottom: none;
}
#sidebar:hover {
overflow: auto;
}
#sidebar h1 {
font-size: 16px;
}
#custom-toc-container {
padding-left: 0;
}
#test-editormd-view, #test-editormd-view2 {
padding-left: 0;
padding-right: 430px;
margin: 0;
}
.list-unstyled {
width: 85%;
margin: 20px auto;
}
.list-unstyled li {
margin-left: 20px;
display: inline-block;
}
</style>
</html>
底部 footer.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/12
Time: 20:58
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>前端</title>
</head>
<body>
<div class="bg-dark" style="width: 100%;">
<div class="bg-dark text-light" style="margin: 0px auto;width: 50%;height: 40px;padding-top: 10px;font-size: 12px;">
</div>
</div>
</body>
</html>
分类页 category.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/14
Time: 17:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body style="background-color: #EEEEEE">
<jsp:include page="heard.jsp"></jsp:include>
<div style="position:relative;">
<img src="https://tva1.sinaimg.cn/large/7a6a15d5gy1g742fwlko4j21hc08cab6.jpg" class="img-fluid" alt="...">
<div style="position: absolute;top: 50%;left: 48%;font-size: 33px" class="text-light">文章</div>
</div>
<div class="container-fluid row no-gutters" style="padding: 0px;margin-top: 20px">
<div class="col-2"></div>
<div class="col-8 border text-center align-middle" style="background-color: white">
<div>
<ul class="cater">
<li>分类</li>
<li class="bg-info rounded-pill all">全部</li>
<%-- <li class="rounded-pill">随笔</li>--%>
<%-- <li class="rounded-pill qianduan">前端</li>--%>
<%-- <li class="rounded-pill music">音乐</li>--%>
<%-- <li class="rounded-pill shenghuo">生活</li>--%>
</ul>
</div>
<%-- <hr>--%>
<div style="margin-top: 40px">
<div class="row cat_list">
<%-- <div class="col-sm-6" >--%>
<%-- <div class="card">--%>
<%-- <div class="card-body">--%>
<%-- <h5 class="card-title">Special title treatment</h5>--%>
<%-- <p class="card-text">With supporting text below as a natural lead-in to additional--%>
<%-- content.</p>--%>
<%-- <a href="#" class="btn btn-primary">Go somewhere</a>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</body>
<style>
.cater li {
list-style: none;
display: inline-block;
width: 130px;
text-align: center;
line-height: 36px;
padding: 0px;
margin: 10px 10px 0 0;
font-weight: bold;
}
</style>
<script>
$(function () {
//获取分类标签
$.ajax({
url: "/CategoryServlet",
type: 'GET',
success: function (data) {
const json = JSON.parse(data);
json.forEach((elem, index) => {
$(".cater").append('<li class="rounded-pill" value="'+elem.id+'">' + elem.categoryName + '</li>')
});
$(".cater li").click(function () {
$(this).toggleClass("bg-info")
$(this).siblings().removeClass("bg-info")
$(".cater li:first-child").removeClass('bg-info')
if (!$(".cater li").hasClass("bg-info")) {
$(".cater li:nth-child(2)").addClass("bg-info")
all();
}
if($(this).val()>0){
getData($(this).val())
}
})
$(".cater li:nth-child(2)").click(function () {
all();
})
}
})
all();
//获取全部按钮获取全部文章
function all(){
$.ajax({
url: "/articlelist",
type: 'GET',
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id="+elem.id+"\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">'+elem.title+'</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a+ '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
});
}
})
}
function getData(id) {
$.ajax({
url: "/articlelist",
type: 'POST',
data:{id:id},
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
if (elem.status ==1){
let a = "<a style='color: black' href=\"pre-html.jsp?id="+elem.id+"\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">'+elem.title+'</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a+ '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
}
});
}
})
}
})
</script>
</html>
归档页 timeline.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/12
Time: 23:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body>
<jsp:include page="heard.jsp" flush="true"></jsp:include>
<div class="container-fluid row no-gutters">
<div class="col-4">
</div>
<div class="timeline-small col-4" style="padding-top: 80px;">
<div class="timeline-small-body">
<ul class="layui-timeline time_li" name="12">
</ul>
</div>
</div>
<div class="col-4">
</div>
</div>
</body>
<script>
$(function () {
function dateFormat(fmt, date) {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
$.ajax({
url: "/articlelist",
type: 'GET',
success: function (data) {
//对于获取的数据执行相关的操作，如：绑定、显示等
const json = JSON.parse(data);
json.forEach((elem, index) => {
let time = dateFormat("YYYY-mm-dd", new Date(elem.createtime))
// $(".time_li").append(`<li> <div class="bullet blak"></div> <div class="date">`+time+`</div> <div class="desc"> <h3>`+elem.title+`</h3> </div></li>`);
$(".time_li").append("<li class=\"layui-timeline-item \"" +
"\">\n" +
" <i class=\"layui-icon layui-timeline-axis\"></i>\n" +
" <div class=\"layui-timeline-content layui-text\">\n" +
" <h3 class=\"layui-timeline-title\">" +time+
"</h3>\n<fieldset class=\"layui-elem-field time_l layui-field-title\" name='" +elem.id+
"' style=\"margin-top: 30px;\">\n" +
" <legend>" +elem.title+
"</legend>\n" +
"</fieldset><div id=\"" +elem.id+
"\"></div>"+
" </div>\n" +
" </li>")
layui.use('rate', function(){
var rate = layui.rate;
//渲染
var ins1 =rate.render({
elem: '#'+elem.id,
readonly:true
,value: elem.score
,half: true
,theme: '#FE0000'
})
});
});
$(".time_l").click(function () {
window.location.href= "/pre-html.jsp?id="+$(this).attr("name")
})
}
})
})
</script>
</html>
标签页 tags.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/14
Time: 17:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body style="background-color: #EEEEEE">
<jsp:include page="heard.jsp"></jsp:include>
<div style="position:relative;">
<img src="https://tva1.sinaimg.cn/large/7a6a15d5gy1g742fwlko4j21hc08cab6.jpg" class="img-fluid" alt="...">
<div style="position: absolute;top: 50%;left: 48%;font-size: 33px" class="text-light">文章</div>
</div>
<div class="container-fluid row no-gutters" style="padding: 0px;margin-top: 20px">
<div class="col-2"></div>
<div class="col-8 border text-center align-middle" style="background-color: white">
<div>
<ul class="cater">
<li>标签</li>
<li class="bg-info rounded-pill all">全部</li>
</ul>
</div>
<div>
<div class="row cat_list">
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</body>
<style>
.cater li {
list-style: none;
display: inline-block;
width: 130px;
text-align: center;
line-height: 36px;
padding: 0px;
margin: 10px 10px 0 0;
font-weight: bold;
}
</style>
<script>
$(function () {
//获取标签
$.ajax({
url: "/TagsServlet",
type: 'GET',
success: function (data) {
const json = JSON.parse(data);
json.forEach((elem, index) => {
$(".cater").append('<li class="rounded-pill" value="' + elem.id + '">' + elem.tagName + '</li>')
});
$(".cater li").click(function () {
$(this).toggleClass("bg-info")
$(this).siblings().removeClass("bg-info")
$(".cater li:first-child").removeClass('bg-info')
if (!$(".cater li").hasClass("bg-info")) {
$(".cater li:nth-child(2)").addClass("bg-info")
}
if ($(this).val() > 0) {
getData($(this).val())
}
})
$(".cater li:nth-child(2)").click(function () {
all();
})
}
})
all();
//获取全部按钮获取全部文章
function all() {
$.ajax({
url: "/articlelist",
type: 'GET',
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id=" + elem.id + "\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">' + elem.title + '</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a + '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
});
}
})
}
function getData(id) {
$.ajax({
url: "/TagsServlet",
type: 'POST',
data: {id: id},
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
if (elem.status==1){
let a = "<a style='color: black' href=\"pre-html.jsp?id=" + elem.id + "\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">' + elem.title + '</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a + '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
}
});
}
})
}
})
</script>
</html>
搜索页 searchList.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/15
Time: 9:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body style="background-color: #EEEEEE">
<jsp:include page="heard.jsp"></jsp:include>
<%
String keyword =request.getParameter("keyword");
%>
<input id="message" type="hidden" value="<%= keyword %>"/>
<div style="position:relative;">
<img src="https://tva1.sinaimg.cn/large/7a6a15d5gy1g742fwlko4j21hc08cab6.jpg" class="img-fluid" alt="...">
<div style="position: absolute;top: 50%;left: 48%;font-size: 33px" class="text-light">搜索结果</div>
</div>
<div class="container-fluid row no-gutters" style="padding: 0px;margin-top: 20px">
<div class="col-2"></div>
<div class="col-8 border text-center align-middle" style="background-color: white">
<div >
<div class="row cat_list">
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</body>
<style>
.cater li {
list-style: none;
display: inline-block;
width: 130px;
text-align: center;
line-height: 36px;
padding: 0px;
margin: 10px 10px 0 0;
font-weight: bold;
}
</style>
<script>
$(function () {
let keyword = $('#message').val()
getData(keyword)
function getData(keyword) {
$.ajax({
url: "/SearchServlet",
type: 'GET',
data:{keyword:keyword},
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id="+elem.id+"\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">'+elem.title+'</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a+ '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
});
}
})
}
})
</script>
</html>
标签列表页 taglist.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/15
Time: 9:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body style="background-color: #EEEEEE">
<jsp:include page="heard.jsp"></jsp:include>
<%
String id =request.getParameter("id");
String tag =request.getParameter("tag");
%>
<input id="message" type="hidden" value="<%= id %>"/>
<div style="position:relative;">
<img src="https://tva1.sinaimg.cn/large/7a6a15d5gy1g742fwlko4j21hc08cab6.jpg" class="img-fluid" alt="...">
<div style="position: absolute;top: 50%;left: 48%;font-size: 33px" class="text-light"><%= tag %></div>
</div>
<div class="container-fluid row no-gutters" style="padding: 0px;margin-top: 20px">
<div class="col-2"></div>
<div class="col-8 border text-center align-middle" style="background-color: white">
<%-- <div>--%>
<%-- <ul class="cater">--%>
<%-- <li>标签</li>--%>
<%-- <li class="bg-info rounded-pill all">全部</li>--%>
<%-- <%– <li class="rounded-pill">随笔</li>–%>--%>
<%-- <%– <li class="rounded-pill qianduan">前端</li>–%>--%>
<%-- <%– <li class="rounded-pill music">音乐</li>–%>--%>
<%-- <%– <li class="rounded-pill shenghuo">生活</li>–%>--%>
<%-- </ul>--%>
<%-- </div>--%>
<%-- <hr>--%>
<div >
<div class="row cat_list">
<%-- <div class="col-sm-6" >--%>
<%-- <div class="card">--%>
<%-- <div class="card-body">--%>
<%-- <h5 class="card-title">Special title treatment</h5>--%>
<%-- <p class="card-text">With supporting text below as a natural lead-in to additional--%>
<%-- content.</p>--%>
<%-- <a href="#" class="btn btn-primary">Go somewhere</a>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</body>
<style>
.cater li {
list-style: none;
display: inline-block;
width: 130px;
text-align: center;
line-height: 36px;
padding: 0px;
margin: 10px 10px 0 0;
font-weight: bold;
}
</style>
<script>
$(function () {
let id = $('#message').val()
getData(id)
function getData(id) {
$.ajax({
url: "/TagsServlet",
type: 'POST',
data:{id:id},
success: function (data) {
const json = JSON.parse(data);
$(".cat_list div").remove()
json.forEach((elem, index) => {
let a = "<a style='color: black' href=\"pre-html.jsp?id="+elem.id+"\">"
$(".cat_list").append('<div class="col-sm-6" style="margin-top: 20px" >\n' +
' <div style="background-color: #afc1c7;margin: 0 10px" class="card">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title" style="font-weight: bold">'+elem.title+'</h5>\n' +
' <div class="card-text overflow-hidden" style="height: 70px;margin-top: 10px">' +
'</div>\n' + a+ '<button type="button" class="btn btn-outline-dark">阅读全文</button></a>\n' +
' </div>\n' +
' </div>\n' +
' </div>')
});
}
})
}
})
</script>
</html>
文章预览页 pre-html.jsp
<%--
Created by IntelliJ IDEA.
User: 17140
Date: 2021/6/12
Time: 13:51
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<!DOCTYPE html>--%>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="editormd/examples/css/style.css"/>
<link rel="stylesheet" href="editormd/css/editormd.preview.css"/>
<link href="/css/font_1446720_ftf15in5gss.css" rel="stylesheet">
<style>
body {
padding: 40px;
}
#layout > header, .btns {
width: auto;
}
#sidebar {
width: 300px;
height: 100%;
position: fixed;
top: 0;
right: 0;
overflow: hidden;
background: #fff;
z-index: 100;
padding: 18px;
border: 1px solid #ddd;
border-top: none;
border-bottom: none;
}
#sidebar:hover {
overflow: auto;
}
#sidebar h1 {
font-size: 16px;
}
#custom-toc-container {
padding-left: 0;
}
#test-editormd-view, #test-editormd-view2 {
padding-left: 0;
padding-right: 430px;
margin: 0;
}
.list-unstyled {
width: 60%;
margin: 0 auto;
}
.list-unstyled li {
margin-left: 20px;
display: inline-block;
}
</style>
</head>
<body>
<%
String id = request.getParameter("id");
%>
<input id="message" type="hidden" value="<%= id %>"/>
<jsp:include page="heard.jsp"></jsp:include>
<div id="layout" style="margin-top: 60px">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h1 class="text-center title" style="font-weight: bold"></h1>
<ol class="list-unstyled">
<li class="author">
<i class="iconfont icon-zuozhe"></i>作者：<span></span>
</li>
<li class="score">
<i class="iconfont icon-zuozheicon-defen"></i>文章得分：<span></span>
</li>
<li class="createtime">
<i class="iconfont icon-fabushijian"></i>发布时间 <span></span>
</li>
<li class="updatatime">
<i class="iconfont icon-gengxinshijian"></i>更新时间 <span></span>
</li>
</ol>
</div>
</div>
</div>
<div id="sidebar">
<h1>Table of Contents</h1>
<div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
</div>
<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
</div>
<script src="editormd/examples/js/jquery.min.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/lib/raphael.min.js"></script>
<script src="editormd/lib/underscore.min.js"></script>
<script src="editormd/lib/sequence-diagram.min.js"></script>
<script src="editormd/lib/flowchart.min.js"></script>
<script src="editormd/lib/jquery.flowchart.min.js"></script>
<script src="editormd/editormd.js"></script>
<script type="text/javascript">
$(function () {
var testEditormdView;
$.get("/article", {id: $('#message').val()}, function (markdown) {
let json = JSON.parse(markdown);
$(".title").text(json.title)
$(".author span").text(json.author)
$(".score span").text(json.score)
let time = dateFormat("YYYY-mm-dd", new Date(json.createtime))
$(".createtime span").text(time)
let updatatime = dateFormat("YYYY-mm-dd", new Date(json.updatatime))
$(".updatatime span").text(updatatime)
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown: json.doc,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启
htmlDecode: "style,script,iframe", // you can filter tags decode
//toc : false,
tocm: true, // Using [TOCM]
tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
});
});
function dateFormat(fmt, date) {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
}
;
}
;
return fmt;
}
});
</script>
</body>
</html>
</html>
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
