JavaWeb项目
文章目录
效果展示
1. 创建 maven 项目
2. 设计数据库
3. 封装数据库的操作代码
3.1 创建 DBUtil 类
3.2 创建类 Blog (代表一篇博客)
3.3 创建类 User (代表一个用户)
3.4 创建类 BlogDao (对博客表进行操作)
3.5 创建类 UserDao (对用户表进行操作)
4. 导入之前写好的前端代码
5. 实现博客主页界面
5.1 约定好前后端交互接口
5.2 实现 IndexServlet
5.3 实现前端代码
6. 实现博客详情界面
6.1 约定好前后端交互接口
6.2 实现 DetailsServlet
6.3 实现前端代码
7. 实现博客登录界面
7.1 约定好前后端交互接口
7.2 实现 LoginServlet
7.3 实现前端代码
8. 实现登录判定的功能
8.1 创建一个 Common类 来判定当前登录状态
8.2 在Sevlet代码中加入判定
8.3 更改前端代码
9. 实现显示用户信息的功能
9.1 约定好前后端交互接口
9.2 实现 UserServlet代码
9.3 实现前端代码
10. 实现注销功能
10.1 约定好前后端交互接口
10.2 实现 LogoutServlet
11. 实现发布博客功能
11.1 约定好前后端交互的接口
11.2 实现 EditServlet
11.3 更改前端代码
12. 实现博客的删除功能
12.1 约定好前后端交互接口
12.2 在详情页中加入删除按钮
12.3 添加 IsAuthor 字段到 Blog里
12.4 更改 DetailsServlet中的代码
12.5 更改 art.html 中的代码
12.6 实现 DeleteServlet
13. 实现对已完成的博客的修改功能
13.1 约定好前后端交互的接口
13.2 在详情页中加入删除按钮
13.3 更改 art.html 中的代码
13.4 实现编辑页(update.html)的前端代码
13.5 实现 UpdateServlet
14. 实现文章总数的展示功能
14.1 约定好前后端交互的接口
14.2 实现 TotalServlet
14.3 更改前端代码
15. 实现个人主页功能
15.1 约定好前后端交互的接口
15.2 实现 PersonServlet
15.3 创建 person.html
效果展示
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. 导入之前写好的前端代码
5. 实现博客主页界面
5.1 约定好前后端交互接口
5.2 实现 IndexServlet
package api;
import Dao.Blog;
import Dao.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;
@WebServlet("/index")
public class HomeServlet extends HttpServlet {
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
BlogDao blogDao = new BlogDao();
List<Blog> blogs = blogDao.selectAll();
String jsonString = objectMapper.writeValueAsString(blogs);
resp.getWriter().write(jsonString);
}
}
5.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>Document</title>
<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>2</span>
<span>1</span>
</div>
</div>
</div>
<div class="right">
<!--
<div class="article">
<h2 class="title">我的第一篇博客</h2>
<span class="date">2022-4-17</span>
<div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
<a href="art.html" class="more">查看全文>></a>
</div>
-->
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
// 1. 通过 ajax 来给服务器发送获取博客的请求
$.ajax({
url: 'index',
method: 'GET',
success: function(data,status) {
buildBlogs(data);
}
})
// 2. 根据响应中的 body 数据,构造HTML内容
function buildBlogs(blogs){
let rightDiv = document.querySelector('.right');
for(let blog of blogs){
let blogDiv = document.createElement('div');
blogDiv.className = 'article';
// 创建 title
let h2 = document.createElement('h2');
h2.className = 'title';
h2.innerHTML = blog.title;
blogDiv.appendChild(h2);
// 创建 postTime
let postTime = document.createElement('span');
postTime.className = 'date';
postTime.innerHTML = DateFormat(blog.postTime);
blogDiv.appendChild(postTime);
// 创建 content
let content = document.createElement('div');
content.className = 'desc';
content.innerHTML = blog.content;
blogDiv.appendChild(content);
// 创建 详情页的超链接
let detailA = document.createElement('a');
detailA.className = 'more';
detailA.href = 'art.html?blogId=' + blog.blogId;
detailA.innerHTML = '查看全文>>';
blogDiv.appendChild(detailA);
// 加入到 right 中
rightDiv.appendChild(blogDiv);
}
}
// 把毫秒级时间戳转化成格式化日期
function DateFormat(timeStampMS) {
var date = new Date(timeStampMS);
var year = date.getFullYear(),
month = date.getMonth()+1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getMinutes(),
sec = date.getSeconds();
var newTime = year + '-' +
(month < 10? '0' + month : month) + '-' +
(day < 10? '0' + day : day) + ' ' +
(hour < 10? '0' + hour : hour) + ':' +
(min < 10? '0' + min : min) + ':' +
(sec < 10? '0' + sec : sec);
return newTime;
}
</script>
</body>
</html>