博客系统 —— Servlet 实现（前后端分离）（详细+整体代码+效果图）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
一、项目效果展示
二、创建 Servlet 项目
整个项目的目录
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>blog_system</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<dependencies>
<!-- 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.12.6.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
</dependencies>
</project>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>
三、编写数据库的操作代码
1、创建数据库/表结构数据库设计Model
mysql里unique + not null = primary key又要求一个表里只能有一个 primary key。
-- 编写建库建表的 sql
-- 建库
create database if not exists blogsystem;
use BlogSystem;
-- 创建一个博客表
-- 包括博客ID博客标题博客内容博客作者博客发布时间
drop table if exists blog;
create table blog (
blogId int primary key auto_increment,
title varchar(1024),
content mediumtext,
userId int,
postTime datetime
);
-- 创建一个用户表
-- 包括用户ID用户名用户密码
drop table if exists user;
create table user (
userId int primary key auto_increment,
username varchar(128) unique, -- 后续会使用用户名进行登录因此用户名是不可以重复的。
password varchar(128)
);
-- 向表中添加数据测试。
-- now() 返回的是一个时间戳需要将时间戳转化成格式化时间
-- 这个转化可以在前端来做也可以在后端做。
-- 这里选择在 Blog类中进行转换。修改 getter 方法
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,'这是第 1 篇博客','从今天开始我要认真学习咯',2,now()) ;
insert into blog values(null,'这是第 2 篇博客','从昨天 开始我要认真学习咯',2,now());
insert into blog values(null,'这是第 3 博客','# 一级标题\n ### 三级标题\n > 这是引用内容',2,now());
insert into blog values(null,'这是第 四 博客','# 一级标题\n',1,now());
insert into user values(null,'zhangsan','123');
insert into user values(null,'www','1234');
2、封装数据库操作Model
1先创建 DBUtil 封装数据库连接的操作。
package Model;
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;
/**
* Created with IntelliJ IDEA.
* Description:
* User: WangWZ
* Date: 2023-05-07
* Time: 15:11
*/
public class DBUtil {
private static String URL = "jdbc:mysql://127.0.0.1:3306/blogsystem?characterEncoding=utf8&useSSL=false";
private static String USERNAME = "root";
private static String PASSWORD = "12345";
//创建一个数据源对象
private volatile static 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 preparedStatement, ResultSet resultSet) {
if (connection != null) {
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (preparedStatement != null) {
try {
preparedStatement.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (resultSet != null) {
try {
resultSet.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
2创建实体类。使用实体类表示数据库中的一条记录
此处 主要创建了 Blog 类 和 User 类。
package Model;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
/**
* Created with IntelliJ IDEA.
* Description:
* User: WangWZ
* Date: 2023-05-07
* Time: 17:22
*/
public class Blog {
private int blogId;
private String title;
private String content;
private int uesrId;
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 getUesrId() {
return uesrId;
}
public void setUesrId(int uesrId) {
this.uesrId = uesrId;
}
// public Timestamp getPostTime() {
// return postTime;
// }
public String getPostTime() {
//使用 SimpleDataFormat 来完成时间戳到格式化时间的转换
//这个方法需要指定转化的格式然后调用 format 来进行转换
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
return simpleDateFormat.format(postTime);
}
public void setPostTime(Timestamp postTime) {
this.postTime = postTime;
}
}
package Model;
/**
* Created with IntelliJ IDEA.
* Description:
* User: WangWZ
* Date: 2023-05-07
* Time: 17:32
*/
public class User {
private int userId = 0;
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;
}
}
3封装针对数据的增删改查。
提供了增删改查这样的类称为 DAO。
package Model;
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: 这个类用于封装 博客表 的基本操作没有改的操作
* 1往博客表里插入博客
* 2从博客表里根据 博客ID 删除博客
* 3查询所有的博客用于博客列表页
* 4根据 博客ID 查询博客内容用于博客详情页
*
* 每个方法都要实现 JDBC 基本代码
* 1和数据库建立连接
* 2构造 SQL 语句
* 3执行 SQL 语句
* 4关闭连接释放资源
* User: WangWZ
* Date: 2023-05-07
* Time: 17:34
*/
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,?,?,?,now())";
statement = connection.prepareStatement(sql);
statement.setString(1,blog.getTitle());
statement.setString(2,blog.getContent());
statement.setInt(3,blog.getUesrId());
//3.执行 SQL
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(connection,statement,null);
}
}
//2、从 博客表 中根据 博客ID 删除博客
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);
}
}
//3、查询所有博客用于博客列表页注意这里不一定会获取到完整的正文
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"));
//获取博客内容的时候要进行截取
//自定义只显示前 50 行
// blog.setContent(resultSet.getString("content"));
String content = resultSet.getString("content");
if(content.length() > 50) {
content = content.substring(0,50) + ".....";
}
blog.setContent(content);
blog.setUesrId(resultSet.getInt("userId"));
blog.setPostTime(resultSet.getTimestamp("postTime"));
blogs.add(blog);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(connection,statement,resultSet);
}
return blogs;
}
//4、根据 博客ID 查询到博客内容用于博客详情页
public Blog selectOne(int blogId) {
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
try {
connection = DBUtil.getConnection();
String sql = "select * from blog where blogId = ?";
statement = connection.prepareStatement(sql);
statement.setInt(1,blogId);
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.setUesrId(resultSet.getInt("userId"));
blog.setPostTime(resultSet.getTimestamp("postTime"));
return blog;
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(connection,statement,resultSet);
}
return null;
}
}
package Model;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* Created with IntelliJ IDEA.
* Description: 用户类 的基本操作
* 这里实现的博客系统不涉及用户的注册和注销操作。因此只有在数据库中进行查找的相关操作。
* 1根据 用户ID 查找用户信息用于博客详情页可以根据 用户ID 来查询作者的名字并进行显示
* 2根据 用户名 查找用户信息用于登录页面
*
* User: WangWZ
* Date: 2023-05-07
* Time: 19:05
*/
public class UserDao {
//1.根据 用户ID 查找用户信息用于博客详情页可以根据 用户ID 来查询作者的名字并进行显示
public User selectById(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;
}
//2.根据 用户名 查找用户信息用于登录页面
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;
}
}
四、编写代码
根据前端的四个页面分别 “约定前后端交互接口”、“编写服务器代码”、“编写客户端代码”。
1、博客列表页
展示出数据库中的博客的列表。
1约定前后端接口
获取博客列表。
请求
GET /blog
响应使用json格式json数组每一个元素又是一个json对象。
[
{
blogId1
title' 这是第一篇博客 '
content' 博客正文摘要 ',
userId1,
postTimer' 2023-05-7 20:00:00 '
},
{
blogId2
title' 这是第二篇博客 '
content' 博客正文摘要 ',
userId1,
postTimer' 2023-05-7 20:01:00 '
},
......
]
摘要如果正文太长就只截取一小部分。
2编写服务器代码
这里的代码会更新。
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
resp.setContentType("application/json; charset=utf-8");
BlogDao blogDao = new BlogDao();
List<Blog> blogs = blogDao.selectAll();
String jsonString = objectMapper.writeValueAsString(blogs);
resp.getWriter().write(jsonString);
}3编写客户端代码
在页面加载的时候让页面通过 ajax 访问服务器获取到数据库中的博客数据并且填到页面中。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 在页面加载的时候就通过调用函数 getBlogList 来通过 ajax 给服务器发送数据获取博客列表信息并且显示在界面上
function getBlogList() {
$.ajax({
type: 'get',
url: 'blog',
success: function(body) {
//获取到的 body 就是一个 js 数组。ajax 自动帮我们转换了
//每个元素就是一个 js 对象根据这个对象构造 div
//1、先把之前的 div 里的内容清空。
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 = '查看全文 >>';
//此处希望点击之后能跳转到 博客详情页
//跳转的过程中需要告诉服务器是哪个博客的详情页
a.href = "blog_detail.html?blogId=" + blog.blogId;
blogDiv.appendChild(a);
//最后把 blogDiv 挂到 dom 树上
rightDiv.appendChild(blogDiv);
}
}
})
}
getBlogList();
</script>2、博客详情页
在 blog_detail.html 页面加载的时候触发 ajax 请求来访问服务器获取到博客内容再次填充到博客详情页里。
1约定前后端交互接口
请求
GET /blog?blogId=1
响应这里的响应结果不是数组而是单一的对象
HTTP/1.1 200 OK
Content-Typeapplication/json
{
blogId1
title' 第一篇博客 '
content' 正文 ',
userId1,
postTimer' 2023-05-7 20:00:00 '
}
2实现服务器端代码
因为上面传的url还是blog下所以依旧在 BlogServlet 类中写。
注意这里都是GET请求但是只有一个doGet
一个是 GET /blog 一个是GET /blog?blogId=1参数不同我们就可以实现不同的参数实现不同的功能。
package Controller;
import Model.Blog;
import Model.BlogDao;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
/**
* Created with IntelliJ IDEA.
* Description: 通过这个类处理 blog 路径对应的请求
* 用于 博客列表页
* User: WangWZ
* Date: 2023-05-07
* Time: 19:20
*/
@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BlogDao blogDao = new BlogDao();
resp.setContentType("application/json;charset=utf8");
//判断传过来的参数中是否有 blogId 的参数
//1.先尝试获取 req 中的blogId 参数如果参数存在说明是要请求博客详情的。
//如果参数不存在说明是请求博客的列表。
String param = req.getParameter("blogId");
if (param == null) {
//不存在参数 blogId说明要请求博客列表。
//从数据库中查询到博客列表转成 JSON 格式然后直接返回即可
List<Blog> blogs = blogDao.selectAll();
//把 blog 对象转成 JSON 格式
String respJson = objectMapper.writeValueAsString(blogs);
resp.getWriter().write(respJson);
} else {
//存在参数 blogId说明要请求博客的详情
//这里要赋值 blogId但是我们使用 req.getParameter 获取的是 String类型的值
//因此使用 Integer.parseInt(),将 String 类型转为 int类型。
int blogId = Integer.parseInt(param);
Blog blog = blogDao.selectOne(blogId);
//把 blog 对象转成 json 对象格式
String respJson = objectMapper.writeValueAsString(blog);
resp.getWriter().write(respJson);
}
}
}
3实现前端代码
修改 blog_detail.html让这个页面加载的时候能够调用上述接口来从服务器获取到博客数据。
在前端代码中要想构造一个请求获取博客详情就得知道当前用户点击的博客的ID而这个ID 已经包含在当前的 blog_detail.html 页面的 url 里了。通过 location.search 可以进行获取获取后在 ajax 中的 url 后面一加就可以了。
<script>
function getBlogDetail() {
$.ajax({
type: 'get',
// 注意
//① 这里的 blog 相对路径; /blog 绝对路径
//② loction.search 拿到了形如 '?blog=1' 这样的一段内容
url: 'blog' + location.search,
success:function(body) {
//请求成功对于服务器返回来的 body 进行页面的构造
//1.构造博客标题
let h3 = document.querySelector(".blog-content>h3");
h3.innerHTML = body.title;
//2.构造博客发布时间
let date = document.querySelector('.date');
date.innerHTML = body.postTime;
//3.构造正文
// 注意我们写的博客是用 merkdown 写的因此如果直接把 content 设为 innerHTML 此时展示在界面上的内容是原始的 Markdown 字符串
// 而我们这里需要的是渲染后的带有格式的效果的正文。
//因此这里还要导入 Markdown的依赖利用里面提供的方法进行转换。
//第一个参数对应 id=content 的 html 标签渲染后得到的 html 片段就会被放到这个标签下。
editormd.markdownToHTML('content',{
markdown: body.content
});
}
});
}
getBlogDetail();
</script>3、博客登录页
实现用户登录功能。
1约定前后端交互接口
请求
POST /login
Content-Typeapplication/x-www-form-urlencoded
username=zhangsan&password=123
这里的逻辑可以直接使用 form表单 来进行提交没必要非得用 ajax使用 ajax 也可以。要使用表单就需要把按钮改成 input type= " submit "
响应
HTTP/1.1 302
Locationblog_list.html
2实现客户端代码
修改 blog_login.html。
套上 form 标签
给 input 加上 name 属性是后续提交数据的键值对的key
把 button 按钮换成 input 标签submit
注意页面样式是否会改变css/js
<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>代码中约定的路径是/login因此创建一个新的 Servlet。
3实现服务器端代码
LoginServlet.java。
为了避免Servlet解析请求数据时汉字出现乱码
req.setCharacterEncoding("utf8"); 针对请求进行设置使用utf8格式来解析请求。
resp.setCharacterEncoding("utf8"); 针对响应进行设置构造的数据要按照utf8构造。
//1.获取到请求中的参数
//2.和数据库中的进行比较
//3.如果比较通过就创建会话
//4.返回一个重定向报文跳转到博客列表页
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//考虑当我们的用户名有中文时Servlet汉字解析编码不是utf8所以我们要进行规定。
req.setCharacterEncoding("utf8");
resp.setCharacterEncoding("utf8");
//1.获取到请求中的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
//2.和数据库中的进行比较
//特殊情况
if(username == null || "".equals(username) || password == null || "".equals(password)) {
//请求的内容缺失登录失败
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("当前用户登录用户名或密码为空");
return;
}
//在数据库中找
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");
}4、检测用户登录状态
调整博客列表页和博客详情页让这两个页面必须登录后才能访问。在进入博客列表页/博客详情页的时候先检查一下用户的登录状态如果用户当前已经是登录状态才能继续使用。如果是未登录状态则强制跳转到 login 页面。
在博客列表页和博客详情页加载的时候通过 ajax 访问一下服务器获取当前的登录状态。如果获取到了就说明当前已经登录了可以留在这个页面。如果没有获取到说明未登录跳转到登录页面。
1约定前后端交互接口
请求
GET /login
响应
HTTP/1.1 200 OK
Content-Typeapplication/json
{
userId1
username' zhangsan '
}
登录了就直接返回当前登录的用户信息
没登录则返回一个 userId 为 0 的对象。也可以用其他方式来约定403表示未登录...
{
userId0
username' '
}
2实现服务端代码
在LoginServlet.java中添加doGet方法。
//用这个方法来让前端检测当前的登录状态
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//在服务器这边拿到了 session,并且也拿到了里面的 user。视为是登录成功。
//如果登陆成功的话服务器会给客户端返回 session浏览器就会保存这个 session。下次请求的事就就会带上这个 id
//服务器拿到 sessionId 就可以去 hash 表里查看就知道了当前的 session 对象是谁。
resp.setContentType("application/json;charset=utf8");
HttpSession session = req.getSession(false);
//因为当用户存在在数据库时才创建了会话所以先判断会话是否存在
//若不存在说明一定未登录
if (session == null) {
User user = new User();
String respJson = objectMapper.writeValueAsString(user);
resp.getWriter().write(respJson);
return;
}
//存在会话继续判断
User user = (User)session.getAttribute("user");
if (user == null) {
//有会话但是会话里没有 User 对象也视为未登录
user = new User();
String respJson = objectMapper.writeValueAsString(user);
resp.getWriter().write(respJson);
return;
}
//剩下情况就是登录了的情况
//注意不要把密码返回给前端
user.setPassword("");
String respJson = objectMapper.writeValueAsString(user);
resp.getWriter().write(respJson);
}3实现客户端代码
在blog_list.html 和 blog_detail.html 中添加如下代码。
<script>
function getUserInfo(pageName) {
$.ajax({
type: 'get',
url: 'login',
success:function(body) {
//判定此处的 body 是不是一个有效的 user 对象userId 是否非0
if(body.userId && body.userId > 0) {
//登陆成功不作处理
consloe.log("当前用户登录成功用户名 " + body.username);
//在 getUserInfo 的回调函数中用来调用获取作者信息
// getAuthorInfo(body);
} else {
//登录失败
//让前端页面跳转到 login.html
alert("当前您尚未登录请登录后再访问博客列表");
//这个方法是在前端页面进行跳转的方式。
location.assign('blog_login.html');
}
},
error: function() {
alert("当前您尚未登录请登录后再访问博客列表");
location.assign('blog_login.html');
}
});
}
//判定用户的登录状态
getUserInfo("blog_detail.html");
</script>5、显示用户信息
- 在博客列表页显示当前登录的用户。
- 在博客详情页显示当前作者的信息。
1针对博客列表页
其实前面一斤处理过了检测用户登录状态的时候。调整前端代码即可。
在 common.js 中。
// 这个文件里放一些公共代码
// 加上一个逻辑通过 GET /login 这个接口来获取到当前的登录状态
function getUserInfo() {
$.ajax({
type: 'get',
url: 'login',
success:function(body){
//判定此处的 body 是不是一个有效的 user 对象userId是否非0
if(body.userId && body.userId > 0) {
//登录成功不做处理
console.log("当前用户登录成功用户名" + body.username);
//根据当前用户登录的情况把当前用户名设置到界面上博客列表页的左边信息部分
changeUserName(body.username);
} else {
//登录失败
//让前端页面跳转到哦 login.html
alert("当前您尚未登录请登录后自访问博客列表");
location.assign('blog_login.html');
}
},
error:function() {
alert("当前您尚未登录请登录后再访问博客列表");
location.assign('blog_login.html');
}
});
}
getUserInfo();
//修改用户名填入列表页的登录用户信息区域的名字里
function changeUserName(username) {
// .card>h3通过类名 card 找到card再找到里面的h3标签。再用innerHTML放入
let h3 = document.querySelector('.card>h3');
h3.innerHTML = username;
}blog_list.html
<!-- 因为下面的代码要重复使用博客列表页和博客详情页所以写在一个新的文件里直接引入文件即可 -->
<!-- 在这里引入 js 代码就可以执行到里面的代码也就实现了登录状态的检测了 -->
<script src="js/common.js"></script>注意这里的头像、github、文章的统计没有设置在数据库中所以这里没有完全实现显示不同用户的全部信息。逻辑上没有区别
2针对博客详情页
对上面的 html 继续进行修改。让博客列表页用户和博客详情页作者显示不同的内容。
让服务器提供一个新的接口这个接口可以让客户端指定 blogId获取到指定的blogId的作者信息。
请求
GET /authorInfo? blogId=6
响应
{
userId6
username' wwz'
}
然后就在博客详情页给服务器发送这个接口来获取到当前的数据。另外对于博客详情页的 html 来说也需要进行修改不能设置名字了。
common.js
// 这个文件里放一些公共代码
// 加上一个逻辑通过 GET /login 这个接口来获取到当前的登录状态
function getUserInfo(pageName) {
$.ajax({
type: 'get',
url: 'login',
success:function(body){
//判定此处的 body 是不是一个有效的 user 对象userId是否非0
if(body.userId && body.userId > 0) {
//登录成功不做处理
console.log("当前用户登录成功用户名" + body.username);
//根据当前用户登录的情况把当前用户名设置到界面上博客列表页的左边信息部分
//博客详情页通过其他的API来进行设定页面中的用户信息
if(pageName == 'blog_list.html') {
changeUserName(body.username);
}
changeUserName(body.username);
} else {
//登录失败
//让前端页面跳转到哦 login.html
alert("当前您尚未登录请登录后自访问博客列表");
location.assign('blog_login.html');
}
},
error:function() {
alert("当前您尚未登录请登录后再访问博客列表");
location.assign('blog_login.html');
}
});
}
//修改用户名填入列表页的登录用户信息区域的名字里
function changeUserName(username) {
// .card>h3通过类名 card 找到card再找到里面的h3标签。再用innerHTML放入
let h3 = document.querySelector('.card>h3');
h3.innerHTML = username;
}
blog_list.html
<!-- 因为下面的代码要重复使用博客列表页和博客详情页所以写在一个新的文件里直接引入文件即可 -->
<!-- 在这里引入 js 代码就可以执行到里面的代码也就实现了登录状态的检测了 -->
<script src="js/common.js"></script>
<script>
//针对博客列表页调用的时候传入参数
getUserInfo('blog_list.html');
</script>blog_detail.html
function getUserInfo(pageName) {
$.ajax({
type: 'get',
url: 'login',
success:function(body) {
//判定此处的 body 是不是一个有效的 user 对象userId 是否非0
if(body.userId && body.userId > 0) {
//登陆成功不作处理
consloe.log("当前用户登录成功用户名 " + body.username);
//在 getUserInfo 的回调函数中用来调用获取作者信息
// getAuthorInfo(body);
} else {
//登录失败
//让前端页面跳转到 login.html
alert("当前您尚未登录请登录后再访问博客列表");
//这个方法是在前端页面进行跳转的方式。
location.assign('blog_login.html');
}
},
error: function() {
alert("当前您尚未登录请登录后再访问博客列表");
location.assign('blog_login.html');
}
});
}
//判定用户的登录状态
getUserInfo("blog_detail.html");创建新类 AuthorServlet 来获取指定博客的作者信息。
package Controller;
import Model.Blog;
import Model.BlogDao;
import Model.User;
import Model.UserDao;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
/**
* Created with IntelliJ IDEA.
* Description:
* User: WangWZ
* Date: 2023-05-09
* Time: 9:02
*/
@WebServlet("/authorInfo")
public class AuthorServlet extends HttpServlet {
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过这个方法来获取到指定博客作者的信息
resp.setContentType("application/json;charset=utf8");
String param = req.getParameter("blogId");
if (param == null || "".equals(param)) {
//blogId 不存在 或 为0
resp.getWriter().write("{ \"ok\": false, \"reason\": \"参数缺失!\" }");
return;
}
//根据当前的 blogId 在数据库中进行查找找到 blog 对象再根据 blog 对象找到作者信息
BlogDao blogDao = new BlogDao();
Blog blog = blogDao.selectOne(Integer.parseInt(param));
if (blog == null) {
//数据库中没有要查找的博客
resp.getWriter().write("{ \"ok\": false, \"reason\": \"要查询的博客不存在\" }");
return;
}
//根据 blog 对象找到作者信息
UserDao userDao = new UserDao();
User author = userDao.selectById(blog.getUesrId());
if (author == null) {
//数据库中没有要查找的用户信息
resp.getWriter().write("{ \"ok\": false, \"reason\": \"要查找的用户不存在\" }");
return;
}
//找到作者信息了进行返回
//注意直接返回会返回用户密码所以要读密码进行覆盖。
author.setPassword("");
//注意把 author Java对象转成 Json字符串再进行传输
resp.getWriter().write(objectMapper.writeValueAsString(author));
}
}
并且在 blog_detail.html 中添加逻辑发送 ajax 请求获取当前博客的作者信息并让作者信息进行显示。
// 从服务器获取一下当前博客的作者信息并显示到界面上
function getAuthorInfo() {
$.ajax({
type:'get',
url:'authorInfo' + location.search,
success:function(body) {
//此处的 body就是服务器返回的 User 对象
if(body.username) {
//如果响应中的 username 存在就把这个值设置到界面上
changeUserName(body.username);
} else {
console.log("获取作者信息失败" + body.reason);
}
}
});
}
getAuthorInfo();1、博客列表页显示登录的用户信息在检测用户是否登录的接口中就已经拿到了。只用把拿到的用户信息进行显示即可。直接在前端代码中修改
2、博客详情页提供了一个新的 API让客户端传一个 博客id过去然后再服务器这里查询当前的用互信息。查到后返回给页面。
6、注销功能
退出当前登录的状态。在导航栏中设置一个注销按钮用户点击后就取消登录状态并跳转到登录页面。
1约定前后端交互接口
点击注销后给服务器发送一个请求实现注销。即把会话中的信息删除。
请求
GET /logout
响应
HTTP/1.1 302
Locationlogin.html
2实现服务器代码
创建 LogoutServlet 进行处理这个请求。
登录用户有一个session 同时 session 有一个 user 属性两者同时具备才是登录状态。
注销只要破坏上面的任意一个条件就行。这里把 user 属性从 session 中删除。
package Controller;
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;
/**
* Created with IntelliJ IDEA.
* Description:
* User: WangWZ
* Date: 2023-05-09
* Time: 9:59
*/
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过这个方法实现注销即从会话中删除 user 属性。
HttpSession session = req.getSession();
if (session == null) {
//没有会话说明用户没有登录谈不上注销
resp.getWriter().write("当前用户尚未登录无法注销");
return;
}
//有会话在会话中将 user 属性删除。
session.removeAttribute("user");
//删除后注销了跳转到登录页面
resp.sendRedirect("blog_login.html");
}
}
2实现客户端代码
只用修改注销中的 href 即可。除了登录页面没有注销按钮其他页面都要添加
<a href="logout">注销</a>7、发布博客功能
在写博客的页面里点击发布文章按钮进行博客发布。
1约定前后端交互接口
点击发布后将博客数据提交到服务器由服务器存储到数据库中。
请求
POST /blog
Content-Typeapplication/x-www-form-urlencode
title=这是标题&content=这是正文
内容都是需要 urlencode 的浏览器自己自动进行编码实现
响应
HTTP/1.1 302
Locationblog_list.html
2实现服务器端代码
在 blogServlet 代码中添加 doPost 方法来处理这个 POST 请求。
//通过这个方法实现发布博客
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//读取请求中的标题和正文构造 blog 对象并插入数据库。最后跳转到博客列表页
HttpSession session = req.getSession(false);
if (session == 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 || content == null || "".equals(title) || "".equals(content)) {
//直接告诉客户端请求参数不对
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("提交博客失败缺少必要的参数");
return;
}
//数据正常构造blog 对象进行插入数据库
Blog blog = new Blog();
blog.setTitle(title);
blog.setContent(content);
//这里还需要插入博客作者的 id而这个id 存放在session 中因此再使用 session 来获取 user属性中的 userId
User user =(User)session.getAttribute("user");
if (user == null) {
//说明当前用户未登录不能提交博客。
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("当前用户未登录不能提交博客");
return;
}
blog.setUesrId(user.getUserId());
//将 blog 对象插入数据库
BlogDao blogDao = new BlogDao();
blogDao.insert(blog);
//发布完成重定向到博客列表页
resp.sendRedirect("blog_list.html");
}3实现客户端代码
使用 form表单把这里的内容套上。
① 添加 form 表单把之前的输入框等部分进行包裹
② 添加 name 属性
③发布按钮改成input标签
④创建隐藏的 textarea为了后续的提交
⑤在初始化编辑器部分添加设置标志位使当前的输入框的内容能自动保存到 textarea 中。
⑥更改发布按钮的样式。以为父元素改变设置新父元素的高度。
<!-- 包裹整个博客编辑页内容的顶级容器 -->
<div class="blog-edit-container">
<form action="blog" method="post" style="height: 100%;">
<div class="title">
<input type="text" placeholder="在此处输入标题" name="title">
<!-- <button>发布文章</button> -->
<input type="submit" value="发布文章" id="submit">
</div>
<!-- 放置 md 编辑器 -->
<div id="editor" >
<!-- 为了进行 form 的提交此处使用一个 textarea 多行编辑框借助这个编辑框来实现表单的提交 -->
<!-- 可以设置 editor.md让编辑器把 markdown 内容也同步的保存到这个隐藏的 textarea 中从而可以进行 form 提交 -->
<textarea name="content" style="display: none;"></textarea>
</div>
</form>
</div>
<script>
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/",
// 注意要加上这个选项有了这个选项editor.md就会自动把用户在编辑器输入的内容同步保存到隐藏的 textarea 中了
saveHTMLTOTextarea: true,
});
</script>css中的样式将 button 改为#submit。
8、删除博客功能
前提只有自己能删除自己的博客不能删除别人的博客。
界面上博客详情页中判断当前登录用户是否是该博客的作者如果是显示一个删除按钮如果不是就不显示。
在博客详情页中两个 ajax 是异步并发的关系。 第一个 ajax 发出后不等响应回来就已经发了第二个 ajax。如果这两个响应到达的顺序不确定就不好进行判定了因此必须手动的调整这两个方法按照一定的顺序来进行发送。
若想先发UserInfo后发AuthorInfo。在第一个 ajax 中执行第二个 ajax才能保证两个 ajax 之间获取数据的顺序先后
function getUserInfo(pageName) {
$.ajax({
type: 'get',
url: 'login',
success:function(body) {
//判定此处的 body 是不是一个有效的 user 对象userId 是否非0
if(body.userId && body.userId > 0) {
//登陆成功不作处理
consloe.log("当前用户登录成功用户名 " + body.username);
//在 getUserInfo 的回调函数中用来调用获取作者信息
getAuthorInfo(body);
} else {
//登录失败
//让前端页面跳转到 login.html
alert("当前您尚未登录请登录后再访问博客列表");
//这个方法是在前端页面进行跳转的方式。
location.assign('blog_login.html');
}
},
error: function() {
alert("当前您尚未登录请登录后再访问博客列表");
location.assign('blog_login.html');
}
});
} // 从服务器获取一下当前博客的作者信息并显示到界面上
// 参数 user 就是刚才从服务器拿到的当前登录用户的信息。
function getAuthorInfo(user) {
$.ajax({
type:'get',
url:'authorInfo' + location.search,
success:function(body) {
//此处的 body就是服务器返回的 User 对象是文章的作者信息
if(body.username) {
//如果响应中的 username 存在就把这个值设置到界面上
changeUserName(body.username);
if(body.username == user.username) {
//作者和登录的用户是一个人则显示 “删除按钮”
let navDiv = document.querySelector('.nav');
let a = document.createElement('a');
a.innerHTML = '删除';
//期望点击删除构造一个形如 blogDelete?blogId=6 这样的请求
a.href = 'blogDelete' + location.search;
navDiv.appendChild(a);
}
} else {
console.log("获取作者信息失败" + body.reason);
}
}
});
}
1约定前后端交互接口
服务器上用户点击删除按钮就发送一个 HTTP 请求让服务器删除指定的博客服务器收到请求后就将该博客从数据库中删除。
请求
GET /blogDelete?blogId=4
响应
直接跳转到博客列表页即可。
1实现服务器代码
package Controller;
import Model.Blog;
import Model.BlogDao;
import Model.User;
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;
/**
* Created with IntelliJ IDEA.
* Description:
*1.检查当前用户是否登录
*2.获取到参数中的 blogId
*3.获取要删除的博客信息
*4.再次校验当前用户是否就是博客的作者
*5.确认无误开始删除
*6.重定向到博客列表
* User: WangWZ
* Date: 2023-05-09
* Time: 14:49
*/
@WebServlet("/blogDelete")
public class BlogDeleteServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过这个方法来删除博客
//1.检查当前用户是否登录
HttpSession session = req.getSession();
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;
}
//2.获取到参数中的 blogId
String blogId = req.getParameter("blogId");
if (blogId == null || "".equals(blogId)) {
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("当前博客Id参数不对");
return;
}
//3.获取要删除的博客信息
BlogDao blogDao = new BlogDao();
Blog blog = blogDao.selectOne(Integer.parseInt(blogId));
if (blog == null) {
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("要删除的博客不存在");
return;
}
//4.再次校验当前用户是否就是博客的作者
if (user.getUserId() != blog.getUesrId()) {
//这里虽然在前端已经判断过了此处再校验一次
resp.setContentType("text/html;charset=utf8");
resp.getWriter().write("当前登录的用户不是作者没有权限进行删除");
return;
}
//5.确认无误开始删除
blogDao.delete(Integer.parseInt(blogId));
//6.重定向到博客列表
resp.sendRedirect("blog_list.html");
}
}