|
|
<%@ page import="java.util.Vector"%>
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
|
<%@ page import="com.dao.ArticleRemarkDao,com.bean.RemarkBean,java.util.*"%>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
<link rel="stylesheet" type="text/css" href="./static/css/semantic.min.css">
|
|
|
<link rel="stylesheet" href="./static/css/index.css">
|
|
|
<title>详情</title>
|
|
|
</head>
|
|
|
<script type="text/javascript">
|
|
|
function validata() {
|
|
|
var content = document.getElementById("content");
|
|
|
if (content.value == "") {
|
|
|
alert("评论不能为空！");
|
|
|
content.focus();
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
</script>
|
|
|
<body>
|
|
|
|
|
|
<!--导航-->
|
|
|
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
|
|
|
<div class="ui container">
|
|
|
<div class="ui inverted secondary stackable menu">
|
|
|
<h2 class="ui teal header item">Blog</h2>
|
|
|
<a href="index.jsp" class="m-item item m-mobile-hide">首页</a>
|
|
|
<a href="Blog.jsp" class="m-item item m-mobile-hide">博客</a>
|
|
|
<a href="types.jsp" class="m-item item m-mobile-hide">分类</a>
|
|
|
<a href="tags.jsp" class="m-item item m-mobile-hide">标签</a>
|
|
|
<!-- <a href="PersonalCenter.jsp" class="m-item item m-mobile-hide">归档</a> -->
|
|
|
<a href="MessageBoard.jsp" class="m-item item m-mobile-hide">留言板</a>
|
|
|
<a href="MyCenter.jsp" class="m-item item m-mobile-hide">我的</a>
|
|
|
<a href="PublishArticle.jsp" class="m-item item m-mobile-hide">发表博客</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<%
|
|
|
int articleId = (Integer)session.getAttribute("ArticleID");
|
|
|
ArticleRemarkDao articleremarkDao = new ArticleRemarkDao();
|
|
|
|
|
|
//List<RemarkBean> list = articleremarkDao.selectAll();
|
|
|
List<RemarkBean> list = articleremarkDao.selectByArticleId(articleId);
|
|
|
session.setAttribute("RemarkResult", list);
|
|
|
%>
|
|
|
<!--中间-->
|
|
|
|
|
|
<div class="m-container m-padded-tb-big">
|
|
|
|
|
|
<div class="ui container">
|
|
|
<!--header-->
|
|
|
<div class="ui top attached segment">
|
|
|
<div class="ui horizontal link list">
|
|
|
<div class="item">
|
|
|
|
|
|
<div class="content">
|
|
|
<a href="PersonalCenter.jsp" class="header">${BlogDetail.userID}</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
${BlogDetail.articleTime}
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
2356
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui attached padded segment">
|
|
|
<!--内容-->
|
|
|
<div class="ui right aligned basic segment">
|
|
|
<div class="ui orange basic label">原创</div>
|
|
|
</div>
|
|
|
|
|
|
<h2 class="ui center aligned header">${BlogDetail.articleTitle}</h2>
|
|
|
<div id="content" class="m-padded-lr-responsive m-padded-tb-large">
|
|
|
|
|
|
<p style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 16px; padding: 0px; color: rgb(77, 77, 77); line-height: 26px; overflow-wrap: break-word; font-family: -apple-system, " sf="" ui="" pingfang="" hiragino="" sans="" microsoft="" wenquanyi="" micro="" font-variant-ligatures:="" white-space:="" background-color:="">
|
|
|
${BlogDetail.articleContent}
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
<br/>
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--标签-->
|
|
|
<div class="m-padded-lr-responsive ">
|
|
|
<div class="ui basic teal left pointing label">${BlogDetail.type}</div>
|
|
|
</div>
|
|
|
<!--赞赏-->
|
|
|
<div class="ui center aligned basic segment">
|
|
|
<button id="payButton" class="ui orange basic circular button">赞赏</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui payQ flowing popup transition hidden">
|
|
|
<div class="ui orange basic label">
|
|
|
<div class="ui images" style="font-size: inherit !important;">
|
|
|
<div class="image">
|
|
|
<img src="./static/images/weixin.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
|
|
|
<div>支付宝支付</div>
|
|
|
</div>
|
|
|
<div class="image">
|
|
|
<img src="./static/images/weixin.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
|
|
|
<div>微信支付</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="ui attached positive message">
|
|
|
<!--博客信息-->
|
|
|
<div class="ui middle aligned grid">
|
|
|
<div class="eleven wide column">
|
|
|
<ul class="list">
|
|
|
<li>作者：${BlogDetail.userID}</li>
|
|
|
<li>发表时间：${BlogDetail.articleTime}</li>
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="five wide column">
|
|
|
<img src="./static/images/weixin.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px;">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="ui top attached padded segment">
|
|
|
<form action="ArticleRemarkServlet?articleId=${BlogDetail.articleID}" method="post" onsubmit="return validata()">
|
|
|
<!--评论-->
|
|
|
<div class="ui form">
|
|
|
<div class="field">
|
|
|
<textarea id="content" name="content" cols="30" rows="10" placeholder="请输入评论信息"></textarea>
|
|
|
</div>
|
|
|
<div class="fields">
|
|
|
<div class="field m-mobile-wide m-margin-bottom-small">
|
|
|
<div class="ui left icon input">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div >
|
|
|
<input type="submit" class="ui teal button m-mobile-wide" value="发布">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<!-- 留言区域列表 -->
|
|
|
<div class="ui teal segment">
|
|
|
<div class="ui comments">
|
|
|
<h3 class="ui dividing header">Comments</h3>
|
|
|
<!-- items 用于接收集合对象，var 定义对象接收从集合里遍历出的每一个元素。同时其会自动转型 -->
|
|
|
<c:forEach items="${RemarkResult}" var="remark">
|
|
|
<div class="comment">
|
|
|
<a class="avatar">
|
|
|
<img src="./static/images/weixin.jpg">
|
|
|
</a>
|
|
|
<div class="content">
|
|
|
<a class="author">${remark.userID}</a>
|
|
|
<div class="metadata">
|
|
|
<span class="date">${remark.remarkTime}</span>
|
|
|
</div>
|
|
|
<div class="text">
|
|
|
${remark.remarkContent}
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<a class="reply">回复</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</c:forEach>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--底部-->
|
|
|
<footer class="ui inverted vertical segment m-padded-tb-massive">
|
|
|
<div class="ui center aligned container">
|
|
|
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © IT博客欢迎您</p>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<script type="text/javascript" src="static/js/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="static/js/semantic.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
$(".m-mobile-show").click(function () {
|
|
|
$(".m-item").toggleClass("m-mobile-hide");
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
