个人博客项目(3) --- 文章列表

最新推荐文章于 2022-07-03 16:03:16 发布

满眼*星辰

最新推荐文章于 2022-07-03 16:03:16 发布

阅读量442

点赞数

分类专栏：个人博客项目文章标签： java mysql ajax servlet 列表

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

版权

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

10 篇文章 3 订阅

订阅专栏

本文档详细介绍了如何设计和实现一个文章列表系统，包括创建文章表、登录后跳转文章列表页面、前端页面展示、文章列表接口设置、创建文章实体类、查询文章以及展示文章列表的Servlet。通过这些步骤，可以成功搭建一个用户个人文章展示平台。

摘要由CSDN通过智能技术生成

文章列表

文章列表

文章列表

(一) 设计数据库创建文章表

id ：文章编号
createtime ：创建时间
updatetime ：更新时间
title ：标题
content ：正文
rcount ：访问量
state ：文章状态
uid ：作者

-- 创建文章表
drop table if exists articleinfo;
create table articleinfo(
    id int primary key auto_increment,
    createtime datetime default now(),
    updatetime datetime default now(),
    title varchar(100) not null,
    content text not null,
    rcount int default 1,
    state int default 1,
    uid int not null
);

-- 插入测试数据
insert into userinfo(id,username,password) values(1,'admin','123');

insert into articleinfo(title,content,uid)
    values('学习servlet','啦啦啦',1),
    ('学习web','哈哈哈',1),
    ('星星写博客','啦啦啦',1),
    ('星星吃饭','啦啦啦',1);

(二) 登录后跳转至文章列表页面

把login.html页面中的这句话

alert("恭喜，登录成功");

替换为

location.href("myarticle.html");

使其登录后自动跳转至文章列表页面

(三) 前端文章列表页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        jQuery(function () {
            // 当页面加载完成之后在执行此方法

            // 1.去后台查询我的文章列表
            jQuery.getJSON("myarticle",{},function (data) {
                // 2.将 table 信息进行替换（替换成后台数据）
                if(data != null && data.succ == 1) {
                    // 查询成功，动态拼接 table
                    var html = "";
                    for(var i = 0; i < data.list.length; i++) {
                        var article = data.list[i];
                        html += "<tr>\n" +
                            "                <td>"+article.id+"</td>\n" +
                            "                <td>"+article.title+"</td>\n" +
                            "                <td>"+article.createtime +"</td>\n" +
                            "                <td>"+article.rcount +"</td>\n" +
                            "                <td>修改 删除</td>\n" +
                            "            </tr>";
                    }
                    jQuery("#tab").append(html);
                }else {
                    alert("操作失败：" + data.msg);
                }
            });
        });
    </script>
</head>
<body>
    <div style="margin-top: 100px;text-align: center;">
        <table id="tab" style="width: 80%" align="center" border="1">
            <tr>
                <td>编号</td>
                <td>标题</td>
                <td>发布时间</td>
                <td>访问量</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
</body>
</html>

在这里插入图片描述

(四) 文章列表接口设置

  <!--文章列表-->
  <servlet>
    <servlet-name>myarticle</servlet-name>
    <servlet-class>services.MyArticleServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>myarticle</servlet-name>
    <url-pattern>/myarticle</url-pattern>
  </servlet-mapping>

(五) 创建文章实体类

在models模型总存放文章实体类ArticleInfo

package models;

import java.util.Date;

/**
 * Created with IntelliJ IDEA.
 * Description:文章实体类
 * User: starry
 * Date: 2021 -04 -06
 * Time: 18:08
 */
public class ArticleInfo {

    private int id;
    private Date createtime;
    private Date updatetime;
    private String title;
    private String content;
    private int rcount;
    private int state;
    private int uid;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public Date getCreatetime() {
        return createtime;
    }

    public void setCreatetime(Date createtime) {
        this.createtime = createtime;
    }

    public Date getUpdatetime() {
        return updatetime;
    }

    public void setUpdatetime(Date updatetime) {
        this.updatetime = updatetime;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public int getRcount() {
        return rcount;
    }

    public void setRcount(int rcount) {
        this.rcount = rcount;
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }
}

(六) 根据id查询所有文章

在dao层下创建操作数据库文章表的类ArticleInfoDao

package dao;

import models.ArticleInfo;
import utils.DBUtils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created with IntelliJ IDEA.
 * Description:用来操作articleinfo表
 * User: starry
 * Date: 2021 -04 -06
 * Time: 18:08
 */
public class ArticleInfoDao {

    /**
     * 从数据库中根据id查询所有文章
     * @param uid
     * @return
     * @throws SQLException
     */
    public List<ArticleInfo> getListByUID(int uid) throws SQLException {
        List<ArticleInfo> list = new ArrayList<>();
        Connection connection = DBUtils.getConnection();
        String sql = "select * from articleinfo where uid=?";
        PreparedStatement statement = connection.prepareStatement(sql);
        statement.setInt(1, uid);
        // 查询数据库并返回结果
        ResultSet resultSet = statement.executeQuery();
        while (resultSet.next()) {
            ArticleInfo articleInfo = new ArticleInfo();
            articleInfo.setId(resultSet.getInt("id"));
            articleInfo.setRcount(resultSet.getInt("rcount"));
            articleInfo.setTitle(resultSet.getString("title"));
            articleInfo.setContent(resultSet.getString("Content"));
            articleInfo.setCreatetime(resultSet.getDate("createtime"));
            list.add(articleInfo);
        }
        return list;
    }

}

(七) 实现servlet用来展示我的文章列表

package services;

import dao.ArticleInfoDao;
import models.ArticleInfo;
import models.UserInfo;
import utils.ResultJSONUtils;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;

/**
 * Created with IntelliJ IDEA.
 * Description:用来展示我的文章列表
 * User: starry
 * Date: 2021 -04 -06
 * Time: 18:12
 */
public class MyArticleServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int succ = -1;
        String msg = "";
        List<ArticleInfo> list = null;
        // 1.获取参数
        HttpSession session = request.getSession(false);
        if(session == null) {
            // 用户未登录
            msg = "非法请求，请先登录！";
        }else {
            // 用户已经登录
            UserInfo userInfo = (UserInfo) session.getAttribute("userInfo");
            // 2.查询数据库
            int uid = userInfo.getId();
            ArticleInfoDao articleInfoDao = new ArticleInfoDao();
            try {
                // 查询到数据
                list = articleInfoDao.getListByUID(uid);
                succ = 1;
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        // 3.构建和返回后端结果
        HashMap<String, Object> result = new HashMap<>();
        result.put("succ", succ);
        result.put("msg", msg);
        result.put("list", list);
        ResultJSONUtils.write(response, result);
    }
}