【博客系统】后台设计-阿里云开发者社区

博客系统（使用模板技术）

项目源码链接

项目访问链接

账号： lisi 密码：123

我们基于HTML、CSS、JavaScript实现了一个简单的博客系统页面

接下来我们基于博客系统的页面设计一个带服务器版本的博客程序。

准备工作

创建web项目
创建目录结构

配置pom.xml

先到网站上引入依赖网址
写配置

  <packaging>war</packaging>
    <build>
        <!-- 指定最终 war 包的名称 -->
        <finalName>BlogSystem</finalName>
    </build>

数据库设计

表设计

当前需要设计两张表，文章表和用户表

文章表

mediumtext这是mysql中一个可以表示长字符串的类型

create database if not exists zy;
use zy;
drop table if exists blog;
create table blog(
    blogId int primary key auto_increment,
    title varchar(1024),
    content mediumtext,
    userId int,
    postTime datetime
);

用户表

drop table if exists user;
create table user(
    userId int primary key auto_increment,
    username varchar(1024) unique, -- 确保名字唯一
    password varchar(1024)
);

完整`SQL`

create database if not exists zy;
use zy;
drop table if exists blog;
create table blog(
    blogId int primary key auto_increment,
    title varchar(1024),
    content mediumtext,
    userId int,
    postTime datetime
);
insert into blog values (null, "这是第一篇博客", "我要努力敲代码", 1, now());
insert into blog values (null, "这是第二篇博客", "我要努力学习编程", 2, now());
drop table if exists user;
create table user(
    userId int primary key auto_increment,
    username varchar(1024),
    password varchar(1024)
);
insert into user values (null, "lisi", "123");
insert into user values (null, "zhangsan", "123");

封装数据库操作代码

创建`DBUtil`

代码和之前版本相同，通过一个单例类来获取数据库连接

package model;
import com.mysql.cj.jdbc.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBUtil {
    private static final String URL = "jdbc:mysql://127.0.0.1:3306/zy?characterEncoding=utf8&&useSSL=false";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "123456";
    private static volatile DataSource dataSource = null;
    private static DataSource getDataSource() {
        if(dataSource == null) {
            synchronized(DBUtil.class) {
                if(dataSource == null) {
                    dataSource = new MysqlDataSource();
                    ((MysqlDataSource)dataSource).setURL(URL);
                    ((MysqlDataSource)dataSource).setUser(USERNAME);
                    ((MysqlDataSource)dataSource).setPassword(PASSWORD);
                }
            }
        }
        return dataSource;
    }
    public static Connection getConnection() throws SQLException {
        return getDataSource().getConnection();
    }
    public static void close(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();
            }
        }
    }
}

创建`Blog`类和`User`类

Blog类表示一篇博客

package model;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.logging.SimpleFormatter;
public class Blog {
    private int blogId;
    private String title;
    private String content;
    private int userId;
    private Timestamp 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 Timestamp getPostTime() {
//        return postTime;
//    }
    // 使用SimpleDateFormat可以使时间格式化显示
    public String getPostTime() {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yy-MM-dd HH:mm:ss");
        return simpleDateFormat.format(postTime);
    }
    public void setPostTime(Timestamp postTime) {
        this.postTime = postTime;
    }
}

User类表示一个用户

package model;
public class User {
    private int userId;
    private String username;
    private String 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;
    }
}

这里的变量名是根据sql设计的时候起的。

创建`BlogDao`类和`UserDao`类

理解DAO

DAO全程“data access object”，主要功能就是对某个数据库表进行增删改查

一般每张数据库表都会对应一个DAO类，这是一种给类命名的习惯做法，并不是强制要求

创建BlogDao类，针对博客表进行操作

insert：插入一个Blog对象到表blog中
selectAll:从blog中查找所有的Blog对象
selectOne:从blog中查找指定的Blog对象
delete：从blog中删除指定的Blog对象

实现`insert`

public void insert(Blog blog) {
    Connection connection = null;
    PreparedStatement statement = null;
    try {
        connection = DBUtil.getConnection();
        String sql = "insert into blog values(null, ?, ?, ?, now())";
        statement  = connection.prepareStatement(sql);
        statement.setInt(1, blog.getBlogId());
        statement.setString(2, blog.getTitle());
        statement.setString(3, blog.getContent());
        statement.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBUtil.close(connection, statement, null);
    }
}

实现`selectAll`

public List<Blog> selectAll() {
    List<Blog> blogs = new ArrayList<>();
    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"));
            blog.setTitle(resultSet.getString("title"));
            String content = resultSet.getString("content");
            if(content.length() > 50) {
                content = content.substring(0, 50);
            }
            blog.setContent(content);
            blog.setUserId(resultSet.getInt("userId"));
            blog.setPostTime(resultSet.getTimestamp("postTime"));
            blogs.add(blog);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBUtil.close(connection, statement, resultSet);
    }
    return blogs;
}

实现`selectOne`

public Blog selectOne(int userId) {
    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, userId);
        resultSet = statement.executeQuery();
        if(resultSet.next()) {
            Blog blog = new Blog();
            blog.setBlogId(resultSet.getInt("blogId"));
            blog.setTitle(resultSet.getString("title"));
            blog.setContent(resultSet.getString("content"));
            blog.setUserId(resultSet.getInt("userId"));
            blog.setPostTime(resultSet.getTimestamp("postTime"));
            return blog;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBUtil.close(connection, statement, resultSet);
    }
    return null;
}

实现`delete`

public void delete(int blogId) {
    Connection connection = null;
    PreparedStatement statement = null;
    try {
        connection = DBUtil.getConnection();
        String sql = "delete from blog where blogId = ?";
        statement = connection.prepareStatement(sql);
        statement.setInt(1, blogId);
        statement.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBUtil.close(connection, statement, null);
    }
}

创建UserDao类，实现对用户表的增删改查

注意：登录的时候需要根据用户名验证密码，因此查找用户信息也是根据用户名查找

实现`selectByName`

public User selectByName(String username) {
    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, username);
        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.close(connection, statement, resultSet);
    }
    return null;
}

实现`selectByUserId`

public User selectByUserId(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.close(connection, statement, resultSet);
    }
    return null;
}

验证数据库代码

public class TestDB {
    // 1. 验证插入
    public static void testInsert() {
        Blog blog = new Blog();
        blog.setTitle("我的第一篇博客");
        blog.setContent("这是博客的正文");
        blog.setUserId(1);
        // 基于当前的时间戳, 创建 java.sql.Date 对象
        blog.setPostTime(new Timestamp(System.currentTimeMillis()));
        BlogDao blogDao = new BlogDao();
        blogDao.insert(blog);
   }
    public static void testSelectAll() {
        BlogDao blogDao = new BlogDao();
        List<Blog> blogs = blogDao.selectAll();
        System.out.println(blogs);
   }
    public static void testSelectOne() {
        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.selectOne(1);
        System.out.println(blog);
   }
    public static void testDelete() {
        BlogDao blogDao = new BlogDao();
        blogDao.delete(1);
   }
    public static void testUserInsert() {
        User user = new User();
        user.setUsername("测试用户");
        user.setPassword("123");
        UserDao userDao = new UserDao();
        userDao.insert(user);
   }
    public static void testUserSelectByName() {
        UserDao userDao = new UserDao();
        User user = userDao.selectByName("测试用户");
        System.out.println(user);
   }
    public static void testUserSelectById() {
        UserDao userDao = new UserDao();
        User user = userDao.selectById(1);
        System.out.println(user);
   }
    public static void main(String[] args) {
 // ......
   }
}

运行程序，验证每个接口是否正确

实现博客列表页

首先最重要的就是约定前后端交互的接口。这里我们使用get请求，返回的是一个json数组。

创建网页模板

将我们之前写好的博客系统的静态页面拷贝到webapp目录当中

拷贝完成的目录结构如下：

修改blog_list.html

导航栏和个人信息部分代码不变
直接添加一个js代码即可

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
    // 在页面加载的时候，通过 ajax 给服务器发送数据，获取到博客列表页信息，并显示到界面上
    function getBlogList() {
    $.ajax({
        type: 'get', 
        url: 'blog', 
        success: function(body) {
            // 获取到的 body 就是一个 js 对象数组，每个元素就是一个 js 对象
            // 1. 先把.right 里原有的内容清空
            let rightDiv = document.querySelector('.right');
            rightDiv.innerHTML = '';
            // 2. 遍历 body 构造一个一个blogDiv
            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 dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                dateDiv.innerHTML = blog.postTime;
                blogDiv.appendChild(dateDiv);
                // 构造博客正文部分
                let descDiv = document.createElement('div');
                descDiv.className = 'desc';
                descDiv.innerHTML = blog.content;
                blogDiv.appendChild(descDiv);  
                // 构造查看全文
                let a = document.createElement('a');
                a.innerHTML = '查看全文 &gt;&gt;';
                // 告知服务器是哪个博客的详情页
                a.href = 'blog_detail.html?blogId=' + blog.blogId; 
                blogDiv.appendChild(a);
                rightDiv.appendChild(blogDiv);
            }
        }
    });
}
getBlogList();
</script>
<script src="js/common.js"></script>
<script>
    getUserInfo('blog_list.html'); 
</script>

创建`BlogServlet`

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
    private ObjectMapper mapper = new ObjectMapper();
    // 这个方法用来获取到数据库中的博客列表
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 先尝试获取到 rep 中的blogId 参数，如果参数存在，说明博客详情页
        // 如果参数不存在，说明是博客列表页
        String param = req.getParameter("blogId");
        BlogDao blogDao = new BlogDao();
        if(param == null) {
            // 从数据库中查询到博客列表，然后直接返回，转成json格式
            List<Blog> blogs = new ArrayList<>();
            blogs = blogDao.selectAll();
            // 把得到的结果返回成json格式的数据
            String respJson = mapper.writeValueAsString(blogs);
            // 以下两行代码顺序不能颠倒
            resp.setContentType("application/json;charset=utf8");
            resp.getWriter().write(respJson);
        }else {
            int blogId = Integer.parseInt(param);
            Blog blog = blogDao.selectOne(blogId);
            String respJson = mapper.writeValueAsString(blog);
            resp.setContentType("application/json;charset=utf8");
            resp.getWriter().write(respJson);
        }
    }
}

此时我们发现如果博客正文内容太长，就会比较丑陋，我们期望在博客列表页只显示摘要就可以了。

修改BlogDao.selectAll方法，对查询到的content代码进行截取（其他代码不变）

public List<Blog> selectAll() {
    // ......其他代码不变
    String content = resultSet.getString("content");
    if (content.length() > 90) {
        content = content.substring(0, 90) + "...";
   }
    blog.setContent(content);
    // ......其他代码不变
}

实现博客详情页

创建网页模板

修改blog_detail.html

导航栏和个人信息代码不变
之前使用p标签表示正文，现在需要将p标签加入到一个div当中

<script>
    function getBlogDetail() {
    $.ajax({
        type: 'get',
        url: 'blog' + location.search, 
        success: function(body) {
            let h3 = document.querySelector('.blog-content>h3');
            h3.innerHTML = body.title;
            let dateDiv = document.querySelector('.date');
            dateDiv.innerHTML = body.postTime;
            let content = document.querySelector('#content');
            // 咱们需要的是渲染后的样子
            // content.innerHTML = body.content;
            // 第一个参数对应 id = content 的html 标签，渲染后得到的 html 片段就会被放在这个标签下
            editormd.markdownToHTML('content', {
                markdown: body.content 
            });
        }
    });
}
getBlogDetail();
function getUserInfo(pageName) {
    $.ajax({
        type: 'get',
        url: 'login', 
        success: function(body) {
            if(body.userId && body.userId > 0) {
                console.log("登录成功！用户名：" + body.username);
                // 根据当前用户登录的情况， 将用户名设置到界面上
                // 在 这个函数里面来获取作者信息
                getAuthor(body);
            }else { 
                alert("当前未登录，请先登录！");
                location.assign('blog_login.html');
            }
        },
        error: function() {
            alert("当前未登录，请先登录！");
            location.assign('blog_login.html');
        }
    });
}
// 判定用户的登录状态
getUserInfo('blog_detail.html');
// 从服务器获取当前博客的作者信息，并显示到页面上
function getAuthor(user) {
    $.ajax({
        type: 'get', 
        url: 'authorInfo' + location.search,
        success: function(body) {
            if(body.username) {
                changeUserName(body.username);
                if(body.username == user.username) {
                    let navDiv = document.querySelector('.nav');
                    let a = document.createElement('a');
                    a.innerHTML = '删除';
                    a.href = 'blogDelete' + location.search;
                    navDiv.appendChild(a);
                }
                // 如果是同一个人，显示删除按钮
            }else {
                console.log("获取作者信息失败");
            }
        }
    });
}
function changeUserName(username) {
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
}
</script>

创建`BlogServlet`

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
    private ObjectMapper mapper = new ObjectMapper();
    // 这个方法用来获取到数据库中的博客列表
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 先尝试获取到 rep 中的blogId 参数，如果参数存在，说明博客详情页
        // 如果参数不存在，说明是博客列表页
        String param = req.getParameter("blogId");
        BlogDao blogDao = new BlogDao();
        if(param == null) {
            // 从数据库中查询到博客列表，然后直接返回，转成json格式
            List<Blog> blogs = new ArrayList<>();
            blogs = blogDao.selectAll();
            // 把得到的结果返回成json格式的数据
            String respJson = mapper.writeValueAsString(blogs);
            // 以下两行代码顺序不能颠倒
            resp.setContentType("application/json;charset=utf8");
            resp.getWriter().write(respJson);
        }else {
            int blogId = Integer.parseInt(param);
            Blog blog = blogDao.selectOne(blogId);
            String respJson = mapper.writeValueAsString(blog);
            resp.setContentType("application/json;charset=utf8");
            resp.getWriter().write(respJson);
        }
    }
}

实现登陆

修改`login_html`

blog_login.html中的内容不需要服务器动态渲染，但是为了和服务器端进行交互，我们需要引入form标签

在输入框和按钮外面套上一个form标签
把名户名和密码两个输入框加上name属性

<div class="login-container">
    <form action="login" method="post">
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" name="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" name="password">
            </div>
            <div class="row">
                <button>提交</button>
                <!--<input type="submit" id="submit" value="提交">-->
            </div>
        </div>
    </form>
</div>

创建`LoginServlet`

实现登陆逻辑

此处使用post请求
从form表单提取数据的时候不要忘了req.setCharacterEncoding("utf8");
根据用户提交的用户名，从数据库读取User对象，并验证密码是否正确

如果登陆成功，则把用户信息保存到HttpSession中
最后重定向到博客列表页

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 针对 utf8 格式来解析请求
        req.setCharacterEncoding("utf8");
        resp.setContentType("utf8");
        // 1. 获取请求中的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        if(username == null || "".equals(username) || password == null || "".equals(password)) {
            resp.setContentType("text/html; charset=utf8");
            resp.getWriter().write("用户名或密码为空！");
            return;
        }
        // 2. 和数据库的内容进行比较
        UserDao userDao = new UserDao();
        User user = userDao.selectByName(username);
        if(user == null || !user.getPassword().equals(password)) {
            resp.setContentType("text/html; charset=utf8");
            resp.getWriter().write("用户名或密码错误!");
            return;
        }
        // 3. 如果比较通过，就创建会话
        HttpSession session = req.getSession(true);
        session.setAttribute("user", user);
        // 4. 返回一个重定向
        resp.sendRedirect("blog_list.html");
    }
}

强制要求登陆

当用户访问博客列表页和博客详情页的时候，如果当前用户未登录，就自动跳转到登陆页面。

function getUserInfo(pageName) {
    $.ajax({
        type: 'get',
        url: 'login', 
        success: function(body) {
            if(body.userId && body.userId > 0) {
                console.log("登录成功！用户名：" + body.username);
                // 根据当前用户登录的情况， 将用户名设置到界面上
                if(pageName == 'blog_list.html') {
                    changeUserName(body.username);
                }
            }else { 
                alert("当前未登录，请先登录！");
                location.assign('blog_login.html');
            }
        },
        error: function() {
            alert("当前未登录，请先登录！");
            location.assign('blog_login.html');
        }
    });
}
function changeUserName(username) {
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
}

强制登陆这个功能，前端就可以实现。

实现显示用户信息

目前页面的用户信息是写死的：我们希望这个信息随着用户登录的改变而改变。

如果当前页面是博客列表页，则显示当前登录用户的信息

如果当前页面是博客详情页，则显示博客作者的信息

注意：当前我们只是实现了显示用户信息，没有实现显示用户的图像以及文章数量等信息

修改博客列表页

function getUserInfo(pageName) {
    $.ajax({
        type: 'get',
        url: 'login', 
        success: function(body) {
            if(body.userId && body.userId > 0) {
                console.log("登录成功！用户名：" + body.username);
                // 根据当前用户登录的情况， 将用户名设置到界面上
                if(pageName == 'blog_list.html') {
                    changeUserName(body.username);
                }
            }else { 
                alert("当前未登录，请先登录！");
                location.assign('blog_login.html');
            }
        },
        error: function() {
            alert("当前未登录，请先登录！");
            location.assign('blog_login.html');
        }
    });
}
function changeUserName(username) {
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
}

实现注销登录

@WebServlet("/logout")
public class LogOutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf8");
        // 先找到当前用户的会话
        HttpSession session = req.getSession(false);
        if(session == null) {
            resp.getWriter().write("当前用户未登录");
        }
        // 删除会话属性
        session.removeAttribute("user");
        resp.sendRedirect("blog_login.html");
    }
}

实现发布博客

给编辑页加入`form`表单

增加form标签
给form标签增加高度，防止编辑器高度不能正确展开
给标题的input加上name属性

<div class="blog-edit-container">
    <form action="blog" method="post" style="height: 100% ">
        <div class="title">
            <input type="text" placeholder="在此处输入标题" name="title" id="submit">
            <button>发布文章</button>
            <!-- <input type="submit" value="发布文章"> -->
        </div>
        <div id="editor">
            <!--为了进行 form 的提交， 此处搞一个 textarea 多行编辑，借助这个编辑框进行 form 的提交-->
            <textarea name="content" style="display:none"></textarea>
        </div>
    </form>
</div>

// 初始化编辑器
var editor = editormd("editor", {
    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
    width: "100%",
    // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
    height: "calc(100% - 50px)",
    // 编辑器中的初始内容
    markdown: "# 在这里写下一篇博客",
    // 指定 editor.md 依赖的插件路径
    path: "editor.md/lib/",
    // 加上这个属性使 编辑器 的内容能保存到用户自己添加的 textarea 中.
    saveHTMLToTextarea: true,
});

此处点击“发布文章”按钮就能发送一个POST请求

创建`BlogServlet`

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    HttpSession session = req.getSession(false);
    if(session == null) {
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("当前用户未登录");
        return;
    }
    User user = (User) session.getAttribute("user");
    if(user == null) {
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("当前用户未登录");
        return;
    }
    // 指定请求按照那种方式解析
    req.setCharacterEncoding("utf8");
    // 先从请求中取出参数（标题和正文）
    String title = req.getParameter("title");
    String content = req.getParameter("content");
    if(title == null || "".equals(title) || content == null || "".equals(content)) {
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("提交博客失败，缺少参数");
        return;
    }
    // 构造 Blog 对象，把当前的信息填进去，并插入到数据库中
    Blog blog = new Blog();
    blog.setTitle(title);
    blog.setContent(content);
    blog.setUserId(user.getUserId());
    BlogDao blogDao = new BlogDao();
    blogDao.insert(blog);
    // 重定向
    resp.sendRedirect("blog_list.html");
}

实现删除博客

进入用户详情页时，如果当前登录用户正是此作者，则在导航栏显示“删除”按钮，用户点击时则删除该文章

function getAuthor(user) {
    $.ajax({
        type: 'get', 
        url: 'authorInfo' + location.search,
        success: function(body) {
            if(body.username) {
                changeUserName(body.username);
                if(body.username == user.username) {
                    let navDiv = document.querySelector('.nav');
                    let a = document.createElement('a');
                    a.innerHTML = '删除';
                    a.href = 'blogDelete' + location.search;
                    navDiv.appendChild(a);
                }
                // 如果是同一个人，显示删除按钮
            }else {
                console.log("获取作者信息失败");
            }
        }
    });
}
function changeUserName(username) {
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
}

创建`DeleteServlet`

@WebServlet("/blogDelete")
public class BlogDeleteServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession(false);
        if(session == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前尚未登录，不能删除");
            return;
        }
        User user = (User) session.getAttribute("user");
        if(user == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        // 获取到博客id
        String param = req.getParameter("blogId");
        if(param == null || "".equals(param)) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前参数不对");
            return;
        }
        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.selectOne(Integer.parseInt(param));
        if(blog == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("要删除的博客不存在");
            return;
        }
        if(user.getUserId() != blog.getUserId()) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前登录的用户不是作者，不能删除");
            return;
        }
        blogDao.delete(Integer.parseInt(param));
        resp.sendRedirect("blog_list.html");
    }
}

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【博客系统】后台设计

博客系统（使用模板技术）

准备工作

数据库设计

表设计

文章表

用户表

完整SQL

封装数据库操作代码

创建DBUtil

创建Blog类和User类

创建BlogDao类和UserDao类

实现insert

实现selectAll

实现selectOne

实现delete

实现selectByName

实现selectByUserId

验证数据库代码

实现博客列表页

创建网页模板

创建BlogServlet

实现博客详情页

创建网页模板

创建BlogServlet

实现登陆

修改login_html

创建LoginServlet

强制要求登陆

实现显示用户信息

修改博客列表页

实现注销登录

实现发布博客

给编辑页加入form表单

创建BlogServlet

实现删除博客

创建DeleteServlet

热门文章

最新文章

相关课程

相关电子书

相关实验场景

完整`SQL`

创建`DBUtil`

创建`Blog`类和`User`类

创建`BlogDao`类和`UserDao`类

实现`insert`

实现`selectAll`

实现`selectOne`

实现`delete`

实现`selectByName`

实现`selectByUserId`

创建`BlogServlet`

创建`BlogServlet`

修改`login_html`

创建`LoginServlet`

给编辑页加入`form`表单

创建`BlogServlet`

创建`DeleteServlet`