实现博客系统1-阿里云开发者社区

一、博客系统简介

现进行登录确认身份，登录成功后进入博客列表页，在博客列表页可以选择查看全文，如果是自己写的博客也可以选择删除。

二、准备工作

创建一个maven项目，在pom.xml中引入Mysql依赖、Servlet依赖以及Jackson依赖。

<dependencies>
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.5</version>
        </dependency>
    </dependencies>

创建目录结构,并将前端页面文件添加到目录中。

web.xml文件的内容如下：

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
 
<web-app>
    <display-name>Archetype Created Web Application</display-name>
</web-app>

三、设计实现数据库

创建blog_system数据库。

create database blog_system ;

创建blog表，有blogId（博客编号）、title（博客标题）、content（博客内容）、userId（作者编号）、postTime（发布时间）这些属性。

create table blog
(
    blogId  int primary key auto_increment,
    title varchar(1024),
    content mediumtext,
    userId  int,
    postTime    datetime
);

向blog表中插入一些数据。

insert into blog values(null, '这是第一篇博客', '从今天开始, 我要认真学 Java', 1, now());
insert into blog values(null, '这是第二篇博客', '从昨天开始, 我要认真学 Java', 1, now());
insert into blog values(null, '这是第三篇博客', '从前天开始, 我要认真学 Java', 1, now());
insert into blog values(null, '这是第一篇博客', '从今天开始, 我要认真学 C++', 2, now());
insert into blog values(null, '这是第二篇博客', '从昨天开始, 我要认真学 C++', 2, now());

创建user表，有userId（用户编号）、userName（用户名）、password（密码）这些属性。

create table user(
    userId int primary key auto_increment,
    userName varchar(100) unique ,
    password varchar (100)
);

同样也向user表中插入一些数据。

insert into user values(null,'zhangyi','1234');
insert into user values(null,'zhanger','1234');
insert into user values(null,'zhangsan','1234');

四、封装数据库

创建User类和Blog类

public class Blog {
    private int blogId;
    private String title;
    private String content;
    private int userId;
    private Timestamp postTime;
 
    public Blog(int blogId, String title, String content, int userId, Timestamp postTime) {
        this.blogId = blogId;
        this.title = title;
        this.content = content;
        this.userId = userId;
        this.postTime = postTime;
    }
 
    public int getBlogId() {
        return blogId;
    }
 
    public void setBlogId(int blogId) {
        this.blogId = blogId;
    }
 
    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 getUserId() {
        return userId;
    }
 
    public void setUserId(int userId) {
        this.userId = userId;
    }
 
    public String getPostTime() {
       SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
       return simpleDateFormat.format(postTime);
    }
 
    public void setPostTime(Timestamp postTime) {
        this.postTime = postTime;
    }
}

public class User {
    private int userId;
    private String userName;
    private String password;
 
    public User(int userId, String userName, String password) {
        this.userId = userId;
        this.userName = userName;
        this.password = password;
    }
 
    public int getUserId() {
        return userId;
    }
 
    public void setUserId(int userId) {
        this.userId = userId;
    }
 
    public String getUserName() {
        return userName;
    }
 
    public void setUserName(String userName) {
        this.userName = userName;
    }
 
    public String getPassword() {
        return password;
    }
 
    public void setPassword(String password) {
        this.password = password;
    }
}

使用JDBC连接数据库

创建DBUtil连接数据库以及相关资源的关闭。

public class DBUtil {
    private static final String url = "jdbc:mysql://127.0.0.1:3306/blog_system?characterEncoding=utf8&useSSL=false";
    private static final String user = "root";
    private static final String password = "1234";
    private static volatile DataSource dataSource;
    private static  DataSource getDataSource(){
         if(dataSource == null){
             synchronized (DBUtil.class){
                 if (dataSource == null){
                     dataSource = new MysqlDataSource();
                     ((MysqlDataSource)dataSource).setURL(url);
                     ((MysqlDataSource)dataSource).setUser(user);
                     ((MysqlDataSource)dataSource).setPassword(password);
                 }
             }
         }
         return dataSource;
    }
    public static Connection getConnection() throws SQLException {
        return (Connection) getDataSource().getConnection();
    }
    public static void closeResource(Connection connection, PreparedStatement statement, ResultSet resultSet)  {
        if(connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(statement != null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(resultSet != null){
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

创建BlogDAO类操作数据库中的Blog表

public class BlogDAO {
    //获取博客表中的所有博客信息
    public List<Blog> getAllBlogs()  {
        List<Blog> list = new LinkedList<>();
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from blog order by postTime desc";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            while(resultSet.next()){
                Blog blog = new Blog();
                blog.setBlogId(resultSet.getInt("blogId"));
                String content = resultSet.getString("content");
                if(content.length() > 50){
                    content = content.substring(0,50);
                }
                blog.setContent(content);
                blog.setTitle(resultSet.getString("title"));
                blog.setUserId(resultSet.getInt("userId"));
                blog.setPostTime(resultSet.getTimestamp("postTime"));
                list.add(blog);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.closeResource(connection,statement,resultSet);
        }
        return list;
    }
    //获取指定id的博客
    public Blog getBlog(int blogId)  {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from blog where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,blogId);
            resultSet = statement.executeQuery();
            Blog blog = new Blog();
            if(resultSet.next()) {
                blog.setBlogId(resultSet.getInt("blogId"));
                blog.setContent(resultSet.getString("content"));
                blog.setTitle(resultSet.getString("title"));
                blog.setUserId(resultSet.getInt("userId"));
                blog.setPostTime(resultSet.getTimestamp("postTime"));
                return blog;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,resultSet);
        }
        return null;
    }
    //插入一篇博客
    public void addBlog(Blog blog) throws SQLException {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "insert into blog values(null,?,?,?,now())";
            statement = connection.prepareStatement(sql);
            statement.setString(1,blog.getTitle());
            statement.setString(2, blog.getContent());
            statement.setInt(3,blog.getUserId());
            statement.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,null);
        }
 
    }
    //删除一篇博客
    public void deleteBlog(int blogId) throws SQLException {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "delete from blog where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,blogId);
            statement.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,null);
        }
    }
}

创建UserDAO类操作数据库中的user表

public class UserDAO {
    //通过用户名查询用户信息
    public User getUserByName(String name){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from user where userName = ?";
            statement = connection.prepareStatement(sql);
            statement.setString(1,name);
            resultSet = statement.executeQuery();
            if(resultSet.next()){
                User user = new User();
                user.setUserId(resultSet.getInt("userId"));
                user.setUserName(resultSet.getString("userName"));
                user.setPassword(resultSet.getString("password"));
                return user;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,resultSet);
        }
        return null;
    }
    //通过id查询用户信息
    public User getUserById(int userId){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from user where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            resultSet = statement.executeQuery();
            if(resultSet.next()){
                User user = new User();
                user.setUserId(resultSet.getInt("userId"));
                user.setUserName(resultSet.getString("userName"));
                user.setPassword(resultSet.getString("password"));
                return user;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,resultSet);
        }
        return null;
    }
    //删除用户
    public void deleteUser(int userId) throws SQLException {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "delete from user where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            statement.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeResource(connection,statement,null);
        }
    }
}

五、实现具体功能

1、实现博客列表页

约定前后端交互接口

//请求
GET/blog
//响应
{
    {
        blogId:xx;
        title:xxx;
        content:xxxx;
        userId:xx;
        postTime:xxx;
    }，
    {
        blogId:xx;
        title:xxx;
        content:xxxx;
        userId:xx;
        postTime:xxx;
    }，
    ……
}

服务器端

重写doGet方法来获取数据库中的博客列表，设置响应格式为Json，字符集为utf8，先定义一个Json对象objectMapper，然后利用blogDAO对象从数据库中获取到所有的博客，并将其存到List中，然后利用Json对象将其转换成字符串，并写进响应中。

//获取数据库中的博客列表
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        //设置响应格式
        resp.setContentType("application/json;charset=utf8");
        BlogDAO blogDAO = new BlogDAO();
        List<Blog> blogs = blogDAO.getAllBlogs();
        //将blogs对象装成Json格式的字符串
        String respJson = objectMapper.writeValueAsString(blogs);
        resp.getWriter().write(respJson);
    }

客户端

页面加载的时候利用ajax访问服务器，获取到数据库中的博客列表，因为博客列表的数目不确定，就需要构造div，对body进行遍历，向div中添加各种元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog-list</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="container.css">
</head>
<body>
    <div class="nav">
        <img src="logo.jpg">
        <span class="name">博客系统</span>
        <span class="blank"></span>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
    <div class="container">
        <div class="left">
        <div class="card">
            <img class="avatar" src="x.jpg" >
            <h3>小郭同学</h3>
            <a class="gitee" href="#"> gitee地址</a>
            <div class="counter">
                <span>文章</span>
                <span>专栏</span>
            </div>
            <div class="counter">
                <span>6</span>
                <span>2</span>
            </div>
        </div>
        </div>
        <div class="right">
        <!--<div class="blog">
            <div class="title">&lt;!&ndash;第一篇博客&ndash;&gt;</div>
            <div class="time">&lt;!&ndash;2022-6-09&ndash;&gt;</div>
           <div class="desc">&lt;!&ndash; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium error esse impedit magni placeat possimus repellendus veniam, veritatis voluptas? Cum deserunt explicabo neque non placeat quaerat quam? At, blanditiis, non!&ndash;&gt;</div>
            <a  class="a" href="#">查看全文</a>
        </div>-->
        </div>
    </div>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        //在页面加载的时候，利用ajax向服务器发送请求，获取到博客列表信息后，在页面进行显示
        function getBlogList(){
            $.ajax({
                type:'get',
                url:'blog',
                success:function(body){
                    //获取到的body是JS对象的数组，因为数组大小每次可能都不一样，就需要构造div
                    let rightDiv = document.querySelector('.right');
                    for(let blog of body){
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        let postTimeDiv = document.createElement('div');
                        postTimeDiv.className = 'postTime';
                        postTimeDiv.innerHTML = blog.postTime;
                        blogDiv.appendChild(postTimeDiv);
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;
                        blogDiv.appendChild(descDiv);
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文';
                        a.href = 'blog-detail.html?blogId='+blog.blogId;
                        blogDiv.appendChild(a);
                        rightDiv.appendChild(blogDiv);
                    }
                },
                error:function(){
                    alert('获取博客列表失败')
                }
            })
        };
        getBlogList();
    </script>
</body>
</html>

2、实现博客详情页

约定前后端交互接口

//请求
GET/blog?blogId=1
//响应
HTTP/1.1 200 OK
Content-Type:application/json
 {
        blogId:xx;
        title:xxx;
        content:xxxx;
        userId:xx;
        postTime:xxx;
  }

服务器端

可以在实现博客列表详情页列表的服务器端代码进行扩充，首先查看请求参数中是否有blogId，若有则表示是指定一篇博客，就利用BlogDAO对象获取到指定的博客，然后写到响应中。

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
    //获取数据库中的博客列表
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        //设置响应格式
        resp.setContentType("application/json;charset=utf8");
        BlogDAO blogDAO = new BlogDAO();
        String result = req.getParameter("blogId");
        if(result == null){
            List<Blog> blogs = blogDAO.getAllBlogs();
            //将blogs对象装成Json格式的字符串
            String respJson = objectMapper.writeValueAsString(blogs);
            resp.getWriter().write(respJson);
        }else{
            Blog blog = blogDAO.getBlog(Integer.parseInt(result));
            String respJson = objectMapper.writeValueAsString(blog);
            resp.getWriter().write(respJson);
        }
    }
}

客户端

查看全文时就会跳转到博客详情页，利用ajax来处理响应，对于content由于在编辑博客时用的markdown字符串进行编辑的，但是展示时需要渲染后的结果,就需要利用引入editor依赖来完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog-detail</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="container.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" >
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
<div class="nav">
    <img src="logo.jpg">
    <span class="name">博客系统</span>
    <span class="blank"></span>
    <a href="#">主页</a>
    <a href="#">写博客</a>
    <a href="#">注销</a>
</div>
<div class="container">
    <div class="left">
        <div class="card">
            <img class="avatar" src="x.jpg" >
            <h3>小郭同学</h3>
            <a class="gitee" href="#"> gitee地址</a>
            <div class="counter">
                <span>文章</span>
                <span>专栏</span>
            </div>
            <div class="counter">
                <span>6</span>
                <span>2</span>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="blog">
            <h3 class="title"></h3>
            <div class="postTime"></div>
            <div id="desc">
            </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    function getBlog(){
        //在页面加载的时候，利用ajax向服务器发送请求，获取到博客列表信息后，在页面进行显示
       $.ajax({
           type:'get',
           //表示blog=blogId
           url:'blog'+location.search,
           success:function(body){
                let h3 = document.querySelector(".blog>h3");
                h3.innerHTML = body.title;
                let postTime = document.querySelector(".postTime");
                postTime.innerHTML = body.postTime;
                //由于在编辑博客时用的markdown字符串进行编辑的，但是展示时需要渲染后的结果
               // let content = document.querySelector('.desc');
               // content.innerHTML = body.content;
               editormd.markdownToHTML('desc', {
                   markdown: body.content
               });
           },
           error:function(){
               alert("查看全文失败！");
           }
       });
 
    }
    getBlog();
</script>
 
</body>
</html>

实现博客系统2：https://developer.aliyun.com/article/1521722?spm=a2c6h.13148508.setting.30.55b44f0eMfupsy

实现博客系统1

一、博客系统简介

二、准备工作

三、设计实现数据库

四、封装数据库

创建User类和Blog类

使用JDBC连接数据库

创建BlogDAO类操作数据库中的Blog表

创建UserDAO类操作数据库中的user表

五、实现具体功能

1、实现博客列表页

约定前后端交互接口

客户端

2、实现博客详情页

约定前后端交互接口

服务器端

客户端

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

实现博客系统1

一、博客系统简介

二、准备工作

三、设计实现数据库

四、封装数据库

创建User类和Blog类

使用JDBC连接数据库

创建BlogDAO类操作数据库中的Blog表

创建UserDAO类操作数据库中的user表

五、实现具体功能

1、实现博客列表页

约定前后端交互接口

客户端

2、实现博客详情页

约定前后端交互接口

服务器端

客户端

热门文章

最新文章

相关课程

相关电子书

相关实验场景