JavaWeb 项目 --- 博客系统_mysql

文章目录 1. 创建 maven 项目2. 设计数据库3. 封装数据库的 *** 作代码3.1 创建 DBUtil 类3.2 创建类 Blog (代表一篇博客)3.3 创建类 User (代表一个用户)3.4 创建类 BlogDao (对博客表进行 *** 作)3.5 创建类 UserDao (对用户表进行 *** 作) 4. 初始化 TemplateEngine5. 实现主页界面5.1 创建网页模板5.2 创建 IndexServlet5.3 发现问题插入太多会超出文章的页面发现显示的内容每次显示的情况不一样 6. 实现详情页界面6.1 创建网页模板6.2 创建 DetailsServlet 7. 实现博客登录界面7.1 修改之前的前端代码7.2 创建 LoginServlet 8. 实现博客的注销功能8.1 创建 LogoutServlet 类 9. 实现博客的注册功能9.1 创建前端页面9.2 创建 RegisterServlet 10. 实现博客编辑界面10.1 修改之前前端代码10.2 实现 EditServlet 11. 实现博客的删除功能11.1 查看博客详情页11.2 创建 DeleteServlet 12. 改进12.1 点击每个页面的时候,判断是否登录了12.1.1 创建一个 Util类12.1.2 改进各个界面的代码 12.2 对个人资料的名字进行修改.12.3 内容没有支持markdown语法12.3.1 修改details.html的代码 12.4 在左侧动态的显示自己的文章总数 13. 添加个人主页功能13.1 创建前端代码13.2 创建 PersonServlet 14. 实现博客的编辑功能14.1 修改博客详情页的前端代码14.2 在数据中实现修改博客的 *** 作14.3 编写一个编辑的界面14.4 实现 UpdateServlet

1. 创建 maven 项目

创建必要的目录.引入需要的依赖

2. 设计数据库

本系统要存入博客文章的信息,
创建博客表.博客的id,博客的标题,博客的内容,博客的日期,博文的博主id
也要存入用户的信息,
创建用户表,用户id,用户名,用户密码

create database if not exists MyBlogSystem;

use MyBlogSystem;

drop table if exists blog;

-- 创建一个博客表
create table blog (
    blogId int primary key auto_increment,
    title varchar(1024),
    content mediumtext,
    postTime datetime,
    userId int
);

drop table if exists user;

-- 创建一个用户信息表
create table user (
    userId int primary key auto_increment,
    username varchar(128) unique,
    password varchar(128)
);

3. 封装数据库的 *** 作代码

创建包Dao用来放数据库的代码.

3.1 创建 DBUtil 类

用来连接数据库

package Dao;


import com.mysql.jdbc.jdbc2.optional.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/MyBlogSystem?characterEncoding=utf8&useSSL=true&serverTimezone=UTC";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "0000";

    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(resultSet != null){
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(statement != null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

3.2 创建类 Blog (代表一篇博客)

Blog

package Dao;

import java.sql.Timestamp;

public class Blog {
    public int blogId;
    public String title;
    public String content;
    public Timestamp postTime;
    public int userId;

    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 Timestamp getPostTime() {
        return postTime;
    }

    public void setPostTime(Timestamp postTime) {
        this.postTime = postTime;
    }

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }
}

3.3 创建类 User (代表一个用户)

package Dao;

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

3.4 创建类 BlogDao (对博客表进行 *** 作)

package Dao;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class BlogDao {
    // 1. 插入一篇博客
    public void insert(Blog blog) {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "insert into blog values(null,?,?,?,?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,blog.getTitle());
            statement.setString(2,blog.getContent());
            statement.setTimestamp(3,blog.getPostTime());
            statement.setInt(4,blog.getUserId());
            // 3. 执行 SQL 语句
            int ret = statement.executeUpdate();
            if(ret == 1){
                System.out.println("插入成功");
            }else {
                System.out.println("插入失败");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,null);
        }
    }

    // 2. 获取全部博客
    public List<Blog> selectAll() {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<Blog> list = new ArrayList<>();
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            // 这里加上order by postTime desc 就可以根据时间排序了.
            String sql = "select * from blog order by postTime desc ";
            statement = connection.prepareStatement(sql);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 遍历结果集
            while (resultSet.next()){
                Blog blog = new Blog();
                blog.setBlogId(resultSet.getInt("blogId"));
                blog.setTitle(resultSet.getString("title"));
                blog.setContent(resultSet.getString("content"));
                blog.setPostTime(resultSet.getTimestamp("postTime"));
                blog.setUserId(resultSet.getInt("userId"));
                list.add(blog);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return list;
    }

    // 3. 获取个人博客
    public List<Blog> selectAllPerson(int userId){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<Blog> list = new ArrayList<>();
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            // 这里加上order by postTime desc 就可以根据时间排序了.
            String sql = "select * from blog where userId = ? order by postTime desc ";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 遍历结果集
            while (resultSet.next()){
                Blog blog = new Blog();
                blog.setBlogId(resultSet.getInt("blogId"));
                blog.setTitle(resultSet.getString("title"));
                blog.setContent(resultSet.getString("content"));
                blog.setPostTime(resultSet.getTimestamp("postTime"));
                blog.setUserId(resultSet.getInt("userId"));
                list.add(blog);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return list;
    }

    // 4. 根据文章id获取指定博客
    public Blog selectOne(int blogId) {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            // 这里加上order by postTime desc 就可以根据时间排序了.
            String sql = "select * from blog where blogId = ? ";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,blogId);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 遍历结果集
            if (resultSet.next()){
                Blog blog = new Blog();
                blog.setBlogId(resultSet.getInt("blogId"));
                blog.setTitle(resultSet.getString("title"));
                blog.setContent(resultSet.getString("content"));
                blog.setPostTime(resultSet.getTimestamp("postTime"));
                blog.setUserId(resultSet.getInt("userId"));
                return blog;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return null;
    }

    // 5. 删除指定文章id的博客
    public void delete(int blogId) {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "delete from blog where blogId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,blogId);
            // 3. 执行 SQL 语句
            int ret = statement.executeUpdate();
            if(ret == 1){
                System.out.println("删除成功");
            }else{
                System.out.println("删除失败");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,null);
        }
    }
    // 6. 计算个人文章的总数
    public Integer selectTotal(int userId) {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "select count(userId) from blog where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 遍历结果集
            if (resultSet.next()){
                return resultSet.getInt("count(userId)");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return null;
    }

    public static void main(String[] args) {
        BlogDao blogDao = new BlogDao();
        Blog blog = new Blog();
        blog.setContent("你好");
        blog.setTitle("你好");
        blog.setUserId(1);
        blog.setPostTime(new Timestamp(System.currentTimeMillis()));
        blogDao.insert(blog);

        System.out.println(blogDao.selectAll());
    }
}

3.5 创建类 UserDao (对用户表进行 *** 作)

package Dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UserDao {
    // 注册账号
    public void insert(User user){
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "insert into user values (null,?,?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,user.getUserName());
            statement.setString(2, user.getPassWord());
            // 3. 执行 SQL 语句
            int ret = statement.executeUpdate();
            if(ret == 1){
                System.out.println("注册成功!");
            }else{
                System.out.println("注册失败!");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,null);
        }
    }
    // 通过用户名查找
    public User selectByName(String username){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "select * from user where username = ?";
            statement = connection.prepareStatement(sql);
            statement.setString(1,username);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 查找结果集
            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;
    }
    // 通过用户id查找
    public User selectById(int userId){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "select * from user where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            // 3. 执行 SQL 语句
            resultSet = statement.executeQuery();
            // 4. 遍历结果集
            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;
    }
}

4. 初始化 TemplateEngine

package View;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

@WebListener
public class ThymeleafConfig implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        ServletContext context = servletContextEvent.getServletContext();
        // 1. 创建 engine 实例
        TemplateEngine engine = new TemplateEngine();
        // 2. 创建 resolve 对象
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(context);
        resolver.setCharacterEncoding("utf-8");
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        // 3. 把 resolve 对象和 engine 关联起来
        engine.setTemplateResolver(resolver);
        // 4. 把 engine 放到 ServletContext;
        context.setAttribute("engine",engine);
    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }
}

5. 实现主页界面

观看可以看出,内容的部分是动态的,其他都是静态的.(用户个人界面暂不管)

5.1 创建网页模板

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/common.css">
head>
<body>
<div class="nav">
    <img src="image/2.png" alt="头像">
    <span class="title">我的博客系统span>
    <a href="home.html">主页a>
    <a href="edit.html">创作a>
    <a href="login.html">注销a>
div>

<div class="parent">
    <div class="left">
        <div class="card">
            <img src="image/头像.jpg">
            <span class="name">蜡笔小新span>
            <a href="#">github 地址a>
            <div class='one'>
                <span>文章span>
                <span>分类span>
            div>
            <div class='one'>
                <span>2span>
                <span>1span>
            div>
        div>
    div>
    <div class="right">
        <div class="article" th:each="blog : ${blogs}">
            <h2 class="title" th:text="${blog.title}">我的第一篇博客h2>
            <span class="date" th:text="${blog.postTime}">2022-4-17span>
            <div class="desc" th:text="${blog.content}">今天开始我要认真写博客div>
            <a th:href="${'details.html?blogId=' + blog.blogId}" class="more" >查看全文>>a>
        div>
    div>
div>

body>
html>

5.2 创建 IndexServlet

package View;

import Dao.Blog;
import Dao.BlogDao;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;

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.util.List;

@WebServlet("/index.html")
public class IndexServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        // 1.从数据库拿到所有的博客列表
        BlogDao blogDao = new BlogDao();
        List<Blog> blogs = blogDao.selectAll();
        // 2.通过模板引擎渲染页面
        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("blogs",blogs);
        engine.process("index",webContext, resp.getWriter());
    }
}

5.3 发现问题插入太多会超出文章的页面

在之前css里面加上 overflow: auto 就有一个滚动条了

发现显示的内容每次显示的情况不一样

只需更改 SelectAll()中的代码.这里的80是随便设置的

6. 实现详情页界面 6.1 创建网页模板

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="css/moreList.css">
  <link rel="stylesheet" href="css/common.css">
head>
<body>
<div class="nav">
  <img src="image/2.png" alt="头像">
  <span class="title">我的博客系统span>
  <a href="home.html">主页a>
  <a href="edit.html">创作a>
  <a href="login.html">注销a>
div>
<div class="parent">
  <div class="left">
    <div class="card">
      <img src="image/头像.jpg">
      <span class="name">蜡笔小新span>
      <a href="#">github 地址a>
      <div class='one'>
        <span>文章span>
        <span>分类span>
      div>
      <div class='one'>
        <span>2span>
        <span>1span>
      div>
    div>
  div>
  <div class="right">
    <div class="article">
      <h2 class="title" th:text="${blog.title}">我的第一篇博客h2>
      <span class="date" th:text="${blog.postTime}">2022-4-17span>
      <div class="desc" th:text="${blog.content}">1div>
    div>
  div>
div>
body>
html>

6.2 创建 DetailsServlet

package View;

import Dao.Blog;
import Dao.BlogDao;
import com.sun.xml.internal.bind.v2.schemagen.xmlschema.List;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;

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;

@WebServlet("/details.html")
public class DetailsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        String str = req.getParameter("blogId");
        if(str == null || str.length() == 0){
            resp.getWriter().write("blogId缺失!");
            return;
        }
        int blogId = Integer.parseInt(str);
        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.selectOne(blogId);
        if(blog == null){
            resp.getWriter().write("当前博客不存在!");
            return;
        }

        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("blog",blog);

        engine.process("details",webContext,resp.getWriter());
    }
}

7. 实现博客登录界面 7.1 修改之前的前端代码

7.2 创建 LoginServlet

package View;

import Dao.User;
import Dao.UserDao;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        // 1. 获取用户名密码
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        // 2. 判断用户名密码是否为空
        if(username == null || "".equals(username) || password == null || "".equals(password)){
            resp.getWriter().write("用户名或者密码为空,登录失败!");
            return;
        }
        // 3. 判断输入的用户名或者密码是否正确
        UserDao userDao = new UserDao();
        User user = userDao.selectByName(username);
        if(user == null){
            resp.getWriter().write("用户名或者密码错误,登录失败!");
            return;
        }

        if(!user.getPassWord().equals(password)){
            resp.getWriter().write("用户名或者密码错误,登录失败!");
            return;
        }
        // 4. 登陆成功,就把user存到HttpSession中
        HttpSession session = req.getSession(true);
        session.setAttribute("user",user);
        // 5. 重定向到主页
        resp.sendRedirect("index.html");
    }
}

8. 实现博客的注销功能 8.1 创建 LogoutServlet 类

package View;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        // 1. 检查当前的用户是否登录
        HttpSession session = req.getSession(false);
        if(session == null){
            resp.getWriter().write("当前未登录");
            return;
        }
        // 2. 删除user
        session.removeAttribute("user");
        // 3. 重定向到登录页面
        resp.sendRedirect("login.html");
    }
}

9. 实现博客的注册功能 9.1 创建前端页面

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
head>
<body>
<div class="nav">
    <img src="image/logo.png" alt="头像">
    <span class="title">我的博客系统span>
    <a href="index.html">主页a>
    <a href="edit.html">创作a>
    <a href="register.html">注册a>
div>
<div id="one">
    <div class="login">
        <form action="register" method="post">
            <div class="text">注册div>
            <div class="one"><span class="name">用户名span><input type="text" class="user" name="username">div>
            <div class="one"><span class="name">密码span><input type="password" class="password" name="password1">div>
            <div class="one"><span class="name">确认密码span><input type="password" class="password" name="password2">div>
            <div class="submit"><input type="submit" value="注 册" >div>
        form>
    div>
div>
body>
html>

9.2 创建 RegisterServlet

package View;

import Dao.User;
import Dao.UserDao;

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;

@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html; charset=utf-8");

        // 1. 获取输入的用户名和密码
        String username = req.getParameter("username");
        String password1 = req.getParameter("password1");
        String password2 = req.getParameter("password2");
        // 2. 如果有一个为空就注册失败
        if (username == null || password1 == null || password2 == null || "".equals(username) || "".equals(password1) || "".equals(password2)) {
            resp.getWriter().write("<h3>输入有误!注册失败!h3>");
            return;
        }
        UserDao userDao = new UserDao();
        User user = userDao.selectByName(username);
        // 如果user不为空.表示有人注册了
        if(user!=null){
            resp.getWriter().write("<h3>用户名已经被使用了h3>");
            return;
        }
        // 如果两次密码不一致注册失败
        if(!password1.equals(password2)){
            resp.getWriter().write("<h3>两次输入的密码不一致,注册失败!");
            return;
        }
        // 这里就注册成功了
        User user1 = new User();
        user1.setUserName(username);
        user1.setPassWord(password1);
        userDao.insert(user1);

        resp.sendRedirect("login.html");
    }
}

10. 实现博客编辑界面 10.1 修改之前前端代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    
    <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="image/2.png" alt="头像">
    <span class="title">我的博客系统span>
    <a href="index.html">主页a>
    <a href="edit.html">创作a>
    <a href="logout">注销a>
div>
<div class="leader">
    <form action="edit" method="post" style="height:100%">
        <div class="empOne">
            <input type="text" class="title" value="在这里写下文章标题" onblur="if(this.value == '')this.value='在这里写下文章标题';" onclick="if(this.value == '在这里写下文章标题')this.value='';" name="title">
            <input type="submit" value="发布文章" class="publish">
        div>
        <div id="editor">
            <textarea name="content" style="display:none;">textarea>
        div>
    form>
div>

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

10.2 实现 EditServlet

package View;

import Dao.Blog;
import Dao.BlogDao;

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.Timestamp;

@WebServlet("/edit")
public class EditServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        // 1. 获取参数
        String title = req.getParameter("title");
        String content = req.getParameter("content");
        // 2. 判断是否存在
        if(title==null || "".equals(title) || content==null || "".equals(content)){
            resp.getWriter().write("文章标题或者内容不存在");
            return;
        }

        // 插入到数据库中
        Blog blog = new Blog();
        blog.setContent(content);
        blog.setTitle(title);
        blog.setPostTime(new Timestamp(System.currentTimeMillis()));
        BlogDao blogDao = new BlogDao();
        blogDao.insert(blog);
        // 重定向
        resp.sendRedirect("index.html");
    }
}

11. 实现博客的删除功能 11.1 查看博客详情页

根据这里的blogId查找当前的userId,如果登录的userId等于当前的userId 就有删除按钮

前端改进

添加样式

#deleteA {
    margin: 5px;
    display: block;
    text-align: center;
    color:black;
    text-decoration: none;
}

#deleteA:hover{
    background-color: rgba(206, 144, 64, 0.8);
}

修改 DetailsServlet

11.2 创建 DeleteServlet

package View;
import Dao.BlogDao;

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;

@WebServlet("/delete")
public class DeleteServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String str = req.getParameter("blogId");
        int blogId = Integer.parseInt(str);
        BlogDao blogDao = new BlogDao();
        blogDao.delete(blogId);
        resp.sendRedirect("index.html");
    }
}

12. 改进 12.1 点击每个页面的时候,判断是否登录了 12.1.1 创建一个 Util类

package common;

import Dao.User;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

public class Util {
    public static User checkLoginStatus (HttpServletRequest req){
        // 判断是否登录了. 如果能够拿到 Session, 并且拿到 Session 里的 user对象,就认为是登录状态
        HttpSession session = req.getSession(false);
        if(session == null){
            // 没有登录的情况
            return null;
        }
        User user = (User) session.getAttribute("user");

        return user;
    }

}

12.1.2 改进各个界面的代码

12.2 对个人资料的名字进行修改.

12.3 内容没有支持markdown语法

12.3.1 修改details.html的代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="css/moreList.css">
  <link rel="stylesheet" href="css/common.css">

  
  <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="image/2.png" alt="头像">
  <span class="title">我的博客系统span>
  <a href="index.html">主页a>
  <a href="personlist.html">我的a>
  <a href="edit.html">创作a>
  <a href="logout">注销a>
div>
<div class="parent">
  <div class="left">
    <div class="card">
      <img src="image/头像.jpg">
      <span class="name" th:text="${user.username}">蜡笔小新span>
      <a href="#">github 地址a>
      <div class='one'>
        <span>文章span>
        <span>分类span>
      div>
      <div class='one'>
        <span>2span>
        <span>1span>
      div>
    div>
  div>
  <div class="right">
    <div class="article">
      <h2 class="title" th:text="${blog.title}">我的第一篇博客h2>
      <span class="date" th:text="${blog.postTime}">2022-4-17span>
      <a th:href="${'delete?blogId=' + blog.blogId}" id="deleteA" th:if="${showDelete}">删除文章a>
      <div class="desc" id="content" th:text="${blog.content}" style="background-color: transparent;">div>
    div>
  div>
div>

<script>
  function renderMD() {
      let contentDiv = document.querySelector('#content');
      let markdown = contentDiv.innerHTML;
      // 1把contentDiv清空
      contentDiv.innerHTML = '';
      editormd.markdownToHTML('content',{
          markdown: markdown
      });
  }
  renderMD();
script>
body>
html>

12.4 在左侧动态的显示自己的文章总数

13. 添加个人主页功能 13.1 创建前端代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/common.css">
head>
<body>
    <div class="nav">
        <img src="image/2.png" alt="头像">
        <span class="title">我的博客系统span>
        <a href="index.html">主页a>
        <a href="personlist.html">个人主页a>
        <a href="edit.html">创作a>
        <a href="logout">注销a>
    div>
    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="image/头像.jpg">
                <span class="name" th:text="${user.username}">蜡笔小新span>
                <a href="#">github 地址a>
                <div class='one'>
                  <span>文章span>
                  <span>分类span>
                div>
                <div class='one'>
                  <span>2span>
                  <span>1span>
                div>
              div>
        div>
        <div class="right">
            <div class="article" th:each="blog : ${blogs}">
                <h2 class="title" th:text="${blog.title}">我的第一篇博客h2>
                <span class="date" th:text="${blog.postTime}">2022-4-17span>
                <div class="desc" th:text="${blog.content}">.div>
                <a th:href="${'details.html?blogId=' + blog.blogId}" class="more">查看全文>>a>
            div>
        div>
    div>
body>
html>

13.2 创建 PersonServlet

package View;

import Dao.Blog;
import Dao.BlogDao;
import Dao.User;
import Dao.UserDao;
import common.Util;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;

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.util.List;

@WebServlet("/personlist.html")
public class PersonServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        User user = Util.checkLoginStatus(req);
        if(user == null){
            resp.sendRedirect("login.html");
            return;
        }

        BlogDao blogDao = new BlogDao();
        List<Blog> blogs = blogDao.selectAllPerson(user.getUserId());

        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("blogs",blogs);
        engine.process("personlist",webContext,resp.getWriter());
    }
}

14. 实现博客的编辑功能 14.1 修改博客详情页的前端代码

14.2 在数据中实现修改博客的 *** 作

    public void update(Blog blog){
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            // 1. 建立连接
            connection = DBUtil.getConnection();
            // 2. 拼装 SQL 语句
            String sql = "update blog set content = ? ,title = ?,postTime = ? where blogId = ?";
            statement = connection.prepareStatement(sql);
            statement.setString(1,blog.getContent());
            statement.setString(2,blog.getTitle());
            statement.setTimestamp(3,blog.getPostTime());
            statement.setInt(4,blog.getBlogId());
            // 3. 执行 SQL 语句
            int ret = statement.executeUpdate();
            if(ret == 1){
                System.out.println("编辑成功");
            }else{
                System.out.println("编辑失败");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection,statement,null);
        }
    }

14.3 编写一个编辑的界面

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/edit.css">
  
  <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="image/2.png" alt="头像">
  <span class="title">我的博客系统span>
  <a href="index.html">主页a>
  <a href="personlist.html">我的a>
  <a href="edit.html">创作a>
  <a href="logout">注销a>
div>
<div class="leader">
  <form th:action="${'update?blogId=' + blog.blogId}" method="post" style="height:100%">
    <div class="empOne">
      <input type="text" class="title" th:value="${blog.title}" name="title">
      <input type="submit" value="发布文章" class="publish">
    div>
    <div id="editor">
      <textarea name="content" style="display:none;" th:text="${blog.content}">textarea>
    div>
  form>
div>

<script>
        // 初始化编辑器
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
            width: "100%",
            // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
            height: "calc(100% - 75px)",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/",
            saveHTMLToTextarea: true
        });
    script>
body>
html>

14.4 实现 UpdateServlet

这里的 doget 请求是进入编辑页
dopost请求是提交编辑后的内容

package View;

import Dao.Blog;
import Dao.BlogDao;
import Dao.User;
import common.Util;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;

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.Timestamp;

@WebServlet("/update")
public class UpdateServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String str = req.getParameter("blogId");
        if(str==null || "".equals(str)){
            resp.getWriter().write("博客Id不存在");
            return;
        }
        int blogId = Integer.parseInt(str);

        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.selectOne(blogId);
        if(blog == null){
            resp.getWriter().write("博文不存在");
            return;
        }
        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("blog",blog);

        engine.process("alter",webContext,resp.getWriter());
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");

        User user = Util.checkLoginStatus(req);
        if(user == null){
            resp.sendRedirect("login.html");
            return;
        }

        // 1. 获取参数
        String title = req.getParameter("title");
        String content = req.getParameter("content");
        String str = req.getParameter("blogId");
        if(str==null || "".equals(str)){
            System.out.println("blogId不存在");
            return;
        }
        int blogId = Integer.parseInt(str);
        // 2. 判断是否存在
        if(title==null || "".equals(title) || content==null || "".equals(content)){
            resp.getWriter().write("文章标题或者内容不存在");
            return;
        }

        // 插入到数据库中
        Blog blog = new Blog();
        blog.setContent(content);
        blog.setTitle(title);
        blog.setPostTime(new Timestamp(System.currentTimeMillis()));
        blog.setBlogId(blogId);
        BlogDao blogDao = new BlogDao();
        blogDao.update(blog);
        // 重定向
        resp.sendRedirect("personlist.html");
    }
}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/sjk/991117.html

JavaWeb 项目 --- 博客系统

发表评论

评论列表（0条）