个人博客系统(附源码)

article/2025/10/3 4:56:09

前面学习了那么多的理论知识,一直比较枯燥,今天就做个小项目,来检验一下前面的学习成果吧!有需要源代码的小伙伴可以来看看:个人博客系统;这个小项目主要是模仿CSDN做的,但是功能还是比较少的,只是写出了一些主要的功能,下面就一起来看看吧!🎨🎨🎨

在这里插入图片描述

目录

  • 🍌 一.准备工作
    • 🍓1.创建maven项目
    • 🍓2.引入各种依赖
    • 🍓3.创建必要的目录
    • 🍓4.编写代码
    • 🍓5.打包部署(基于smart Tomcat)
    • 🍓6.验证
  • 🍌 二.编写前端代码
  • 🍌 三.数据库相关代码
  • 🍌 四.具体的功能
    • 🍓1.查询博客列表页功能
    • 🍓2.查询博客详情页功能
    • 🍓3.登录功能
    • 🍓4.检验当前页面登录状态功能
    • 🍓5.显示用户信息到页面功能
    • 🍓6.注销功能
    • 🍓7.发布博客功能
    • 🍓8.删除博客功能
  • 🍌 五.总结与思考


🍌 一.准备工作

这里的准备工作主要就是测试一下环境是否正常,编写一些简单的代码来验证页面是否可以顺利访问!

🍓1.创建maven项目

在这里插入图片描述

🍓2.引入各种依赖

这里主要引入需要用到的各种依赖包:

<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>

全部放在dependencies标签里面

🍓3.创建必要的目录

在这里插入图片描述
在webapp目录下就可以放置所编写好的前端页面了,切记不是放在WEB-INF目录下!!!

🍓4.编写代码

这里写简单的代码进行测试环境


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("/hello")
public class HelloServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().write("Hello world");}
}

🍓5.打包部署(基于smart Tomcat)

使用smart Tomcat一键打包部署
在这里插入图片描述

🍓6.验证

在这里插入图片描述
这样环境就没有问题了,就可以进行下面的一系列代码的编写了!


在这里插入图片描述

🍌 二.编写前端代码

前端页面就直接演示成果了:
登录页面:
在这里插入图片描述
博客列表页面:
在这里插入图片描述
博客详情页面:
在这里插入图片描述
博客编辑页面:
在这里插入图片描述


🍌 三.数据库相关代码

数据库相关的代码就需要根据需求来确定其如何编写:而要完成博客项目最主要的两个点就是用户和博文因此就需要创建两个表:用户表和博客表,然后再完成各种增删改查之类的操作
就使用用户表举个例子:
首先就需要在数据库中创建相关的表,才可以进行加下来的操作:

drop table if exists user;
create table user(userId int primary key auto_increment,username varchar(128) unique,     -- 后续会使用这个用户名进行登录,用户名不能重复password varchar(128)
);

然后再进行数据库连接(JDBC)的操作:

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/my_blog?characterEncoding=utf8&useSSL=false";private static final String USERNAME = "root";private static final String PASSWORD = "123";//设计懒汉单例模式 需要时再进行连接,需要注意线程安全问题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 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();}}}
}

然后可以通过用户id来查找信息:

 public User selectById(int userId){Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;try {connection = DBUtil.getConnection();//sql语句String sql = "select * from user where userId = ?";statement = connection.prepareStatement(sql);statement.setInt(1,userId);//执行sql语句resultSet = statement.executeQuery();//遍历结果 由于这里是主键,因此也是使用if而不是whileif(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.查询博客列表页功能

通过查询可以直接查询到数据库内的所有博客信息,然后就可以列举在博客详情页面了(按照发布时间的先后顺序):
在这里插入图片描述
前后端交互接口:

请求:
GET /blog
响应:
[{blogId: 1,title: '这是第一篇博客',content: '这是博客正文(缩写版)',userId: 1,postTime: '2022-06-04 21:21:00'},{blogId: 2,title: '这是第二篇博客',content: '这是博客正文(缩写版)',userId: 2,postTime: '2022-06-04 21:21:00'}
]

然后根据约定好的接口进行各自处理:
请求:

//页面加载的时候,使用ajax给服务器发送请求,获取到相应的响应function getBlogList(){$.ajax({type: 'get',url: 'blog',success: function(body){//此时的body就是一个js对象数组(这里的转换是原生就转换好的),每一个元素就是js对象,然后这里就需要把这些js对象构造成形如上面的类型//1.先把right里面的内容进行清空操作,然后再进行插入操作let rightDiv = document.querySelector(".right");//将里面的内容进行清空rightDiv.innerHTML = '';//然后再遍历整个js数组,往right里面插入元素for(let blog of body){//先构造一个blogDiv,然后往里面插入对应的元素,然后再将这个blogDiv插入到right里面就可以l//这里都是createElement不是querySelector....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.innerHTML = blog.content;descDiv.className = 'desc';blogDiv.appendChild(descDiv);//查看全文链接let a = document.createElement('a');a.innerHTML = "查看全文 &gt;&gt;";//设置a.href点击这个连接之后可以进行跳转到博客详情页面//这个跳转就需要告知服务器要访问的是哪个博客的详情页a.href = "blog_detail.html?blogId=" + blog.blogId;blogDiv.appendChild(a);//最后需要把整个blogDiv插入到完整的rightDiv中去rightDiv.appendChild(blogDiv);}},error: function(){//console.log("获取博客列表失败");alert("获取博客列表失败!");}});           }//调用这个方法getBlogList();

服务器返回的响应:

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//这里就需要把数据库中的数据查询出来,然后转换成JSON格式,输出就可以了//通过封装数据库操作的类来进行查询BlogDao blogDao = new BlogDao();//防止乱码,这个和下面的顺序不能颠倒,先设置字符,再输出resp.setContentType("application/json;charset=utf8");//表示没有参数,就是获取博客列表内容//把查询的结果放到一个数组中List<Blog> blogs = blogDao.selectAll();//然后通过objectMapper把这个转换成JSON格式,再进行输出String respJson = objectMapper.writeValueAsString(blogs);//然后输出就可以了resp.getWriter().write(respJson);}}

这样的前后端分离,也使得前端和后端的程序员互不影响,也是方便了很多!

🍓2.查询博客详情页功能

在博客列表页的时候,有一个查看全文的按钮,通过这个按键就可以发送请求,然后查询到该篇博客的具体内容了:
在这里插入图片描述

🍓3.登录功能

输入正确的用户名和密码即可进行登录:
在这里插入图片描述
在这里插入图片描述

🍓4.检验当前页面登录状态功能

如果尚未登录就会出现提示登录的弹框,然后会跳转到登录页面:
在这里插入图片描述
在这里插入图片描述

🍓5.显示用户信息到页面功能

在这里插入图片描述

🍓6.注销功能

点击注销即可即可退出登录,跳转到博客登录页面
在这里插入图片描述
在这里插入图片描述

🍓7.发布博客功能

在这里插入图片描述
当博客正文和标题都写完之后点击发布,即可完成发布,然后在博客列表页就可以看到此文章!

🍓8.删除博客功能

在博客详情页,当你是这篇博客的作者的时候,便会出现一个删除博客按键,点击即可进行删除,而不是此博客的作者的话,就不会有这个按钮:
在这里插入图片描述

在这里插入图片描述


🍌 五.总结与思考

从这个小项目中可以深切的体会到前后端分离的好处,每一次前端和后端的交互都只需要看前后端约定好的交互接口就完全可以实现自己的东西了,这也很大程度上提高了开发的效率,不至于让前端和后端的程序员"无事可做",而且也不需要程序员全干,只需要做自己的事情就可以了!!!
另外这个小项目所涉及到的功能也是不完善的,像注册,删除用户信息,修改博客之类的很多功能,并没有体现出来,但是这些实现起来和上面的实现是查不了多少的,而我在这里就不体现了,需要的朋友可以自行实现一下,和上面的是差不多的,另外上面也是写了很多重复的代码,这些对于我们聪明的程序员来说是非常不友好的,因此后面我会再基于框架将这个小项目重新完成,使用起来框架就会发现简单了很多!这个就后面再谈吧!!!

在这里插入图片描述


http://chatgpt.dhexx.cn/article/N5HTJgNC.shtml

相关文章

使用halo和hexo+github两种方式免费搭建个人博客网站

hexo 简介 Hexo是一款基于Node.js的静态博客框架&#xff0c;依赖少易于安装使用&#xff0c;可以方便的生成静态网页托管在GitHub和Heroku上&#xff0c;是搭建博客的首选框架。 hexo搭建步骤 安装Git安装Node.js安装HexoGitHub创建个人仓库生成SSH添加到GitHub将hexo部署到…

使用hexo+github搭建免费个人博客详细教程

前言 使用github pages服务搭建博客的好处有&#xff1a; 全是静态文件&#xff0c;访问速度快&#xff1b;免费方便&#xff0c;不用花一分钱就可以搭建一个自由的个人博客&#xff0c;不需要服务器不需要后台&#xff1b;可以随意绑定自己的域名&#xff0c;不仔细看的话根本…

2021 年 35+ 最佳免费 WordPress 博客主题

毫无疑问&#xff0c;WordPress 最好的事情之一就是它是开源的&#xff0c;因此可以免费使用。一个聪明、足智多谋的网站所有者创建一个独特的、功能齐全的、有吸引力的网站所需要的只是一个注册域名和一个服务器&#xff0c;从而降低每月的总成本。 当然&#xff0c;为了让 W…

如何拥有个人博客?

汇总做博客的方法 大家好&#xff0c;我是鱼皮&#xff0c;最近买了个不错的域名&#xff0c;为了不浪费它呢&#xff0c;我心血来潮打算做个博客网站。 在动手做之前&#xff0c;我先梳理了一下目前常用的搭建个人博客的方法&#xff0c;并简单分析了它们的优缺点&#xff0c…

搭建个人博客详细教程

基于giteehexo搭建个人博客 由于国外的github page访问总是非常慢的&#xff0c;本文选择国内开源代码托管平台码云&#xff0c;因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客&#xff0c;首先感谢木千之博主的详细教程&#xff0c;给了清…

树莓派搭建个人博客

树莓派搭建 【优雅の博客】 一、安装基本环境 1.1 安装树莓派系统&#xff08;这里推荐Raspberry&#xff09; 官网地址&#xff1a;https://www.raspberrypi.org/software/ 新手推荐这个带桌面的版本。 由于某些众所周知的原因&#xff0c;如果不能可能上网&#xff0c;那…

2021年58个最佳个人WordPress博客主题

在这里&#xff0c;您可以找到适用于任何类别的最佳WordPress博客主题&#xff0c;从简单的个人WordPress博客一直到任何类别的多作者博客主题。 WordPress 是互联网上最受欢迎的博客平台和CMS&#xff0c;主要是因为它的灵活性和强大的功能。其中之一是它的主题&#xff0c;…

开源的个人博客网站

想要免费搭建一个个人博客吗&#xff1f;如果答案是肯定的话&#xff0c;那么你来对了地方。&#x1f447; 介绍 我的个人网站&#xff0c;是从年初建立的&#xff0c;已经快一年了&#xff0c;博客端、后台管理及服务端都是自己一行一行手撸出来的&#xff0c;期间技术栈和界…

WordPress个人博客美化

WordPress个人博客美化 个人博客&#xff1a;https://www.xiaohuangyr.top/ 有兴趣可以访问一下 以下截图是电脑端访问的效果&#xff0c;和手机差很多 一、基本概念 1、起因 双十一的时候&#xff0c;因为阿里云折扣力度很大&#xff0c;就购买了三年的ECS云服务器。 又在阿…

php版个人博客管理系统源码(文末有下载方式)

大家好&#xff0c; 我是程序猿零壹。 给大家分享一款个人博客管理系统&#xff0c;该系统使用phpmysql开发&#xff0c;分为前台和后台两部分。前台实现了博客展示、友情链接、热门标签、快捷搜索、关于作者等功能&#xff1b;后台实现了博客管理、轮播管理、友链管理、标签管…

Vercel部署个人博客

原文链接&#xff1a;Vercel部署个人博客 vercel 部署静态资源网站极其方便简单&#xff0c;并且有可观的访问速度&#xff0c;最主要的是免费部署。 如果你还没有尝试的话&#xff0c;强烈建议去使用一下。 vercel 介绍 注册账号 进入Vercel官网&#xff0c;先去注册一个账号…

制作自己的个人博客网站

拥有一个私人的博客是一件很酷的事情&#xff0c;私以为有想法的同学都应该有个博客&#xff0c;就像日记一样&#xff0c;写写自己的经历&#xff0c;感悟等。我也在B站上花费了好多时间&#xff0c;终于找到了一个特别简单易行的&#xff0c;感谢up主爱生活的逍遥君。 现在&…

html简洁风格的个人博客网站模板(源码)

文章目录 1.设计来源1.1 博客首界面1.2 个人简介界面1.3 日常记录界面1.4 文章列表界面1.5 文章信息界面 2.结构源码2.1 目录结构2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/128288153 html简洁…

Hexo-免费个人博客搭建框架使用

Hexo-免费博客搭建使用讲解 初识hexo就给人以眼前一亮的感觉, 查看资料到自己搭建个人博客, 简直是给人”带你装B,带你F”的快感,简单的博客生成操作, 多样化美观的主题选择, 功能强大的插件定制,关键是这些都是免费开源的,作为一个程序员,没有什么比遇到这种好使的软件更加给…

5分钟 搭建免费个人博客

五分钟倒数已经可以计时了。 三步完成免费个人博客搭建&#xff0c; 这是一篇小白也能看懂的文章&#xff0c;本文主要针对mac OS &#xff0c;Windows 除了软件安装方式和命令有些区别&#xff08;装了git bash也一样&#xff09;&#xff0c;其他基本一样。 你可能会经常看到…

适合个人博客搭建的WordPress免费开源主题汇总

WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的&#xff0c;而且价格还不便宜&#xff0c;这导致了不少的新手朋友们很为难。而有时我们仅仅根据个人的爱好来搭建一个博客&#xff0c;所以也没有必要去支付高额的费用来购买Wordpress主…

个人博客系统+源码

&#x1f345; 作者简介&#xff1a;CSDN特邀作者✌、博客专家✌、java领域优质创作者&#x1f4aa; &#x1f345;关注公众号【猿码仓库】 简历模板、学习资料、面试题库等都给你&#x1f4aa; 前言 猿码仓库 猿码仓库 20 收录于话题 #个人博客系统1个 #SSM1个 #SpringBoo…

Windows下搭建免费个人博客

三步完成免费个人博客搭建&#xff0c;本文主要针对Windows系统我的是WIN10&#xff0c;OS X请参考 5分钟 搭建免费个人博客 1.创建Github 域名和空间 1.1注册 首先需要注册一个Github账号&#xff0c;如果你已经有请跳过此步直接看1.2创建仓库&#xff0c;注意username&am…

个人博客系统

目 录 摘 要 ABSTRACT 目 录 第1章 绪论 1.1背景及意义 1.2 研究现状 2 1.3 研究意义 3 第2章 相关技术 4 2.1 系统开发平台 5 2.2 平台开发相关技术 6 第3章 系统分析 7 3.1 系统目标 8 3.2系统流程和逻辑 9 第4章系统概要设计 4.1 4.1 概述 4.2 系统…

java 搭建个人博客_5分钟 教大家搭建免费个人博客

五分钟倒数已经可以计时了。 三步完成免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对mac OS ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。 你可能会经常看到类似于这样的博客: vno 这是打酱油的 在4分50秒以后你也能够有一个…