(一) 转换时间戳为正确时间格式
我们只要在Date的构造函数中加入时间戳,就可以自动转换成咱们想要的时间格式了,只不过这里是英文的格式
我们下来就写一个函数来把时间戳转换成中文时间
- 编写时间转换函数
//转换时间格式
function datefm(timespan) {
var date = new Date(timespan);
//年
var y = date.getFullYear();
//月
var m = date.getMonth()+1;
//日
var d = date.getDate();
return y+"-"+m+"-"+d;
}
- 给createtime包裹函数
datefm(art.createtime)
此时就已经转换成我们想要的时间格式了
(二) 给标题添加跳转链接
在list.html 展示的标题那里添加跳转链接
"<td> <a href='detail.html?id='"+art.id+">"+art.title+"</a></td>\n"
(三) 写文章详情前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章详情</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
//转换时间格式
function datefm(timespan) {
var date = new Date(timespan);
//年
var y = date.getFullYear();
//月
var m = date.getMonth()+1;
//日
var d = date.getDate();
return y+"-"+m+"-"+d;
}
jQuery(function () {
var param = location.search;
var id = parseInt(param.split("=")[1]);
jQuery.getJSON("init",{
"id":id
},function (data) {
if(data != null && data.succ == 1) {
jQuery("#title").html(data.art.title);
jQuery("#content").html(data.art.content);
jQuery("#username").html(data.art.username);
jQuery("#createtime").html(datefm(data.art.createtime));
jQuery("#rcount").html(data.art.rcount);
}else {
alert("获取失败:"+data.msg);
}
});
});
</script>
</head>
<body>
<div style="margin-top: 50px;">
<h1 id="title">标题</h1>
<div id="content"></div>
<hr>
<div style="text-align: right">
作者:<span id="username"></span>
发布日期:<span id="createtime"></span>
阅读量:<span id="rcount"></span>
</div>
</div>
</body>
</html>
(四) 操作数据库来获取文章详情信息
因为我们之前写过根据文章id来获取信息的方法getArtById,但我们这次不仅仅是获取文章的标题和内容了,还有作者,创建时间,访问量,所以我们要将此方法扩充。
由于作者不在文章表中,所以我们用userinfo实体类改为userinfoVO扩展类。
/**
* 通过文章号查询文章标题和内容
* @param id
* @return
* @throws SQLException
*/
public ArticleInfoVO getArtById(int id) throws SQLException {
ArticleInfoVO art = new ArticleInfoVO();
Connection connection = DBUtils.getConnection();
String sql = "select a.*,u.username from articleinfo a,userinfo u where a.uid=u.id and a.id=?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setInt(1,id);
ResultSet resultSet = statement.executeQuery();
if(resultSet.next()) {
art.setTitle(resultSet.getString("title"));
art.setContent(resultSet.getString("content"));
art.setUsername(resultSet.getString("username"));
art.setCreatetime(resultSet.getDate("createtime"));
art.setRcount(resultSet.getInt("rcount"));
}
DBUtils.close(resultSet,statement,connection);
return art;
}
(五) 修改路由为Init的Servlet
之前的接口也写过,我们进行相应的扩展
package services;
import dao.ArticleInfoDao;
import models.vo.ArticleInfoVO;
import utils.ResultJSONUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
/**
* Created with IntelliJ IDEA.
* Description:根据id查询文章标题和内容
* User: starry
* Date: 2021 -04 -11
* Time: 21:00
*/
@WebServlet("/init")
public class InitServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int succ = -1; // succ=1 表示操作成功
String msg = ""; // 错误说明信息
// 1.从前端获取参数
int id = Integer.parseInt(request.getParameter("id"));
// 2.调用数据库执行相应的业务逻辑
ArticleInfoVO art = null;
if(id > 0) {
ArticleInfoDao dao = new ArticleInfoDao();
try {
art = dao.getArtById(id);
succ = 1;
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}else {
msg = "非法登录,请先登录";
}
// 3.将上一步操作的结果返回给前端
HashMap<String, Object> result = new HashMap<>();
result.put("succ", succ);
result.put("msg", msg);
result.put("art",art);
ResultJSONUtils.write(response, result);
}
}
此时我们就可以点击文章标题来查看文章详情啦!