个人博客项目(8) --- 查看文章详情

最新推荐文章于 2022-07-16 15:33:08 发布

满眼*星辰

最新推荐文章于 2022-07-16 15:33:08 发布

阅读量314

点赞数 1

分类专栏：个人博客项目文章标签： java js jquery ajax html

本文链接：https://blog.csdn.net/starry1441/article/details/115672415

版权

个人博客项目专栏收录该内容

10 篇文章 3 订阅

订阅专栏

查看文章详情

(一) 转换时间戳为正确时间格式

我们只要在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>
        &nbsp;&nbsp;
        发布日期：<span id="createtime"></span>
        &nbsp;&nbsp;
        阅读量：<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);
    }
}

此时我们就可以点击文章标题来查看文章详情啦！
在这里插入图片描述

在这里插入图片描述

满眼*星辰

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
个人博客项目(8) --- 查看文章详情

查看文章详情(一) 转换时间戳为正确时间格式(二) 给标题添加跳转链接(一) 转换时间戳为正确时间格式我们只要在Date的构造函数中加入时间戳，就可以自动转换成咱们想要的时间格式了，只不过这里是英文的格式我们下来就写一个函数来把时间戳转换成中文时间编写时间转换函数 //转换时间格式 function datefm(timespan) { var date = new Date(timespan); //年
复制链接

扫一扫

专栏目录