JAVA项目---实现个人博客

南星6603

已于 2024-06-19 20:03:42 修改

阅读量689

点赞数 24

分类专栏： JAVA开发文章标签： spring maven intellij-idea java-ee mybatis mvc mysql

于 2024-06-19 17:51:54 首次发布

本文链接：https://blog.csdn.net/2301_77067398/article/details/139809148

版权

JAVA开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JAVA项目---实现个人博客

1.1 实验内容

本次实验的内容是利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人博客网站，网站功能包括写博客和日记，浏览博客与日记，以及作为网站拥有者的我们对博客和日记的管理。

项目结构：

1.2 实验知识点

Spring MVC
Spring
Mybatis
CSS/JS
jQuery

1.3 实验环境

WEB IDE
Mysql
SSM 框架所需 Jar 包
MarkDown 编辑器 EditorMd
Tomcat

3.1.1 项目创建

3.1.2 Jar 包导入

3.1.3 MarkDown 编辑器

本次实验项目我们需要使用 markdown 文档编辑来实现写博客和日记的功能。我们选择的是开源的 markdown 编辑器 Editor.md 。打开终端（Terminal -> New Terminal），使用命令从内网中下载，然后解压，解压完成后，将其复制至项目的 webapp 目录下，方便之后的使用

3.1.4 图片下载

本次页面上使用的图片有两张，包括 logo 和在主页上使用的另一张图片。图片可以通过以下命令获得,然后解压，解压完成后将其同样移动到 webapp 目录下。

3.1.5 创建数据库

CREATE TABLE `blog` (

`blogid` int(20) NOT NULL AUTO_INCREMENT,

`blogtitle` varchar(50) DEFAULT NULL,

`article` varchar(10000) DEFAULT NULL,

`time` varchar(50) DEFAULT NULL,

PRIMARY KEY (`blogid`)

) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;

插入一条博客数据

insert into blog(blogtitle,article,time) values("The first article","This is the first article to be used for testing",2017-06-01);

日记表 diary

CREATE TABLE `diary` (

`diaryid` int(20) NOT NULL AUTO_INCREMENT,

`diary` varchar(10000) DEFAULT NULL,

`time` varchar(20) DEFAULT NULL,

PRIMARY KEY (`diaryid`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

3.1.6 实体类

实体类对应数据库的表，所有实体类在 com.personalblog.model 包下。

blog 实体类：

package com.personalblog.model;

public class Blog {

    private int blogid;

    private String blogtitle;

    private String article;

    private String time;

    public int getBlogid() {

        return blogid;

    }

    public void setBlogid(int blogid) {

        this.blogid = blogid;

    }

    public String getBlogtitle() {

        return blogtitle;

    }

    public void setBlogtitle(String blogtitle) {

        this.blogtitle = blogtitle;

    }



    public String getArticle() {

        return article;

    }

    public void setArticle(String article) {

        this.article = article;

    }

    public String getTime() {

        return time;

    }

    public void setTime(String time) {

        this.time = time;

    }
}

diary 实体类：

package com.personalblog.model;

public class Diary {

    private int diaryid;

    private String diary;

    private String time;

    public int getDiaryid() {

        return diaryid;

    }

    public void setDiaryid(int diaryid) {

        this.diaryid = diaryid;

    }

    public String getDiary() {

        return diary;

    }

    public void setDiary(String diary) {

        this.diary = diary;

    }

    public String getTime() {

        return time;

    }

    public void setTime(String time) {

        this.time = time;

    }

}

3.2 前端页面

3.2.1 css/js

本次课程实验项目的 css 样式文件位于 PersonalBlog/src/main/webapp 下面的 css 文件夹下，包括有 index.css、about.css、saylist.css 三个样式表。

其中 index.css 样式表具体信息如下：

其功能包括设置页面的头部导航栏、显示 logo、控制文章显示格式等。

about.css 的功能是设置博主个人相关信息页面的样式，包括字体等样式。其具体信息如下：

saylist.css 的作用是设置日记显示格式，包括日记显示框和日期显示格式等。其具体代码信息如下：

js 文件目录位于 PersonalBlog/src/main/webapp 下新建的 js 文件夹下，包括控制显示头部标签 nav 的显示格式的 nav.js、验证管理员身份的 alert.js、以及 jquery 的函数库 jquery-3.2.1.main.js ,以及渲染 markdown 的 showdown.js。

jquery 的函数库可以通过 jquery 官网下载获得，这里我们已将最新版的函数库上传到了服务器上，可以通过命令下载完成后将其复制到 js 文件夹下即可。：

3.2.2 blogindex.jsp

3.2.3 index.jsp

/home/project/PersonalBlog/src/main/webapp/index.jsp是网站主页，显示的是全部的博客文章，并且提供显示选择文章的具体信息的链接。

修改其具体代码如下：

3.2.4 blog.jsp

新建 /home/project/PersonalBlog/src/main/webapp/blog.jsp

blog.jsp 是用于显示博客文章具体信息的页面。主要作用是将 markdown 的文档转化为 html，然后通过简单的 css 将其排版显示在页面上。其具体代码信息如下：

3.2.5 saylist.jsp

新建 /home/project/PersonalBlog/src/main/webapp/saylist.jsp

saylist.jsp 是用于显示日记具体信息的页面。

3.2.6 about.jsp

新建 /home/project/PersonalBlog/src/main/webapp/about.jsp

about.jsp 是一个没有和后台有交互的页面，功能是显示关于博主的信息。其具体代码信息如下：

3.2.7 admin.jsp

新建 /home/project/PersonalBlog/src/main/webapp/admin.jsp

admin.jsp 是管理端的主页，验证管理员身份通过后会跳转到此页面（一般个人博客的管理都是隐藏起来的，但是在本次课程中将管理功能显示出来，只需要验证通过即可进行管理），其布局结构与主页相似，但是头部导航栏显示的是管理功能，其具体代码信息如下：

3.2.8 writeblog.jsp

新建 /home/project/PersonalBlog/src/main/webapp/writeblog.jsp

writeblog.jsp 是用于写博客的页面，在本页面中使用 EditorMd 插件来提供写博客的工具。其具体代码信息如下：

3.2.9 writediary.jsp

新建 /home/project/PersonalBlog/src/main/webapp/writediary.jsp

writediary.jsp 是用于写日记的页面，和 writeblog.jsp 类似，其具体代码信息如下：

3.2.10 adminblog.jsp

新建 /home/project/PersonalBlog/src/main/webapp/adminblog.jsp

adminblog.jsp 是用于管理博客的页面，管理员能管理博客文章，即删除选择的博客。页面具体代码如下所示：

3.2.11 admindiary.jsp

新建 /home/project/PersonalBlog/src/main/webapp/admindiary.jsp

admindiary.jsp 是管理日记的页面，功能和布局同 adminblog.jsp 类似，其具体代码信息如下：

3.2.12 success.jsp

新建 /home/project/PersonalBlog/src/main/webapp/success.jsp

success.jsp 的功能是弹出上传博客成功的提示框，并回到写博客页面。其具体信息如下：

3.2.13 Dsuccess.jsp

新建 /home/project/PersonalBlog/src/main/webapp/Dsuccess.jsp

Dsuccess.jsp 与 success.jsp 功能类似， Dsuccess.jsp 是提示日记上传成功的页面：

3.3 博客相关功能的实现

博客相关功能包括：存储博客的内容信息、查找博客、根据 id 查找博客、删除博客。

3.3.1 BlogController 层

新建/home/project/PersonalBlog/src/main/java/com/personalblog/controller/BlogController.java

BlogController 是 blog 相关功能的 Controller 类，位于 com.personalblog.controller 包下，其功能和实现请看下面的代码和详细注释：

3.3.2 博客 Service 层

博客功能相关的 Service 层（位于 com.personalblog.service 包下）包括接口 BlogService 和是实现类 BlogServiceImpl

新建/home/project/PersonalBlog/src/main/java/com/personalblog/service/BlogService.java

其中 BlogService 接口的具体信息如下：

新建/home/project/PersonalBlog/src/main/java/com/personalblog/service/BlogServiceImpl.java

实现类 BlogServiceImpl 的代码如下：

3.3.3 博客功能的 Mapper 层

博客功能相关的 Mapper 层中包含了 BlogMapper 接口和 BlogMapper.xml 配置文件，Mapper 层位于 com.personalblog.mapper 包下。

新建/home/project/PersonalBlog/src/main/java/com/personalblog/mapper/BlogMapper.java

接口 BlogMapper 的代码如下：

3.4 日记相关功能的实现

日记 diary 的相关功能包括写日记、显示日记和管理日记。

3.4.1 日记功能的 Controller

新建/home/project/PersonalBlog/src/main/java/com/personalblog/controller/DiaryController.java

DiaryController 是日记相关功能的 Controller 层，其具体代码和注释如下：

3.4.2 日记相关的 Service 层

包括 service 接口和 serviceImpl 实现类。

新建/home/project/PersonalBlog/src/main/java/com/personalblog/service/DiaryService.java

其中 DiaryService 接口如下:

新建/home/project/PersonalBlog/src/main/java/com/personalblog/service/DiaryServiceImpl.java

DiaryServiceImpl 实现类如下:

3.4.3 Mapper 层

Mapper 层包括 DiaryMapper 接口和 DiaryMapper.xml 文件。

新建/home/project/PersonalBlog/src/main/java/com/personalblog/mapper/DiaryMapper.java

其中 DiaryMapper 接口具体的代码如下：

3.5 xml 文件的配置

3.5.1 web.xml

web.xml 文件在PersonalBlog/src/main/webapp/WEB-INF/web.xml，

我们需要配置的东西是 SSM 框架的相关配置，包括监听器、核心加载类等等，

修改其内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app
  xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
>
  <display-name>PersonalBlog</display-name>
  <!-- 配置 Spring 核心监听器 -->
  <listener>
    <listener-class
      >org.springframework.web.context.ContextLoaderListener</listener-class
    >
  </listener>
  <!-- 指定 Spring 的配置文件 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <!-- 定义 Spring MVC 前端控制器 -->
  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class
      >org.springframework.web.servlet.DispatcherServlet</servlet-class
    >
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <!-- 为 DispatcherServlet 建立映射 -->
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <!-- 解析静态资源 -->
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
    <url-pattern>*.css</url-pattern>
    <url-pattern>*.js</url-pattern>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>
  <listener>
    <listener-class
      >org.springframework.web.util.IntrospectorCleanupListener</listener-class
    >
  </listener>
  <!-- 编码过滤器 -->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class
      >org.springframework.web.filter.CharacterEncodingFilter</filter-class
    >
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <welcome-file-list>
    <welcome-file>blogindex.jsp</welcome-file>
  </welcome-file-list>
</web-app>

3.5.2 applicationContext.xml

新建PersonalBlog/src/main/resources/applicationContext.xml

applicationContext.xml 是 spring 的核心配置文件，它整合了 Spring mvc 和 mybatis ，并配置了数据库的持久化。其具体信息如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans
  xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:tx="http://www.springframework.org/schema/tx"
  xsi:schemaLocation="
          http://www.springframework.org/schema/beans
          http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
          http://www.springframework.org/schema/context
          http://www.springframework.org/schema/context/spring-context-4.2.xsd
          http://www.springframework.org/schema/tx
          http://www.springframework.org/schema/tx/spring-tx-4.1.xsd"
>
  <!-- 自动扫描有 Spring 相关注解的类，并把这些类注册为 bean -->
  <context:component-scan base-package="com.personalblog" />
  <!-- 配置数据源 -->
  <bean
    id="dataSource"
    class="org.springframework.jdbc.datasource.DriverManagerDataSource"
  >
    <property name="driverClassName" value="com.mysql.jdbc.Driver" />
    <property
      name="url"
      value="jdbc:mysql://localhost:3306/personalblog?useUnicode=true&characterEncoding=UTF-8"
    />
    <property name="username" value="root" />
    <property name="password" value="123456" />
  </bean>
  <!-- MyBatis 的 SqlSession 的工厂，并引用数据源，扫描 MyBatis 的配置文件 -->
  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource" />
    <property name="configLocation" value="classpath:mybatis-config.xml" />
  </bean>

  <!-- MyBatis 自动扫描加载 Sql 映射文件/接口 -->
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="com.personalblog.mapper" />
    <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
  </bean>
  <!-- JDBC 事务管理器 -->
  <bean
    id="txManager"
    class="org.springframework.jdbc.datasource.DataSourceTransactionManager"
  >
    <property name="dataSource" ref="dataSource" />
  </bean>
  <!-- 启用支持 annotation 注解方式事务管理 -->
  <tx:annotation-driven transaction-manager="txManager" />
</beans>

3.5.3 mybatis-config.xml

新建PersonalBlog/src/main/resources/mybatis-config.xml

mybatis-config.xml 是加载 mapper 层的接口和 xml 文件，具体的代码信息如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
  <!-- 为JavaBean起类别名 -->
  <typeAliases>
    <package name="com.personalblog.model" />
  </typeAliases>
  <!-- 通过 mapper 接口包加载整个包的映射文件 -->
  <mappers>
    <package name="com.personalblog.mapper" />
  </mappers>
</configuration>

3.5.4 spring-mvc.xml

新建PersonalBlog/src/main/resources/spring-mvc.xml

spring-mvc.xml 配置的是配置方案和视图解析器、自动扫描并加载成 bean 等，其具体代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans
  xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-4.2.xsd
      http://www.springframework.org/schema/mvc
     http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd"
>
  <!-- 自动扫描该包，Spring MVC 会将包下用 @Controller 注解的类注册为 Spring 的 controller -->
  <context:component-scan base-package="com.personalblog.controller" />
  <!-- 设置默认配置方案 -->
  <mvc:annotation-driven />
  <!-- 视图解析器 -->
  <bean
    id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver"
  >
    <!-- 执行完action后会返回xxx，xxx会和下面的property组合，形成跳转页面的路径 -->
    <property name="prefix" value="" />
    <property name="suffix" value=".jsp" />
  </bean>
  <mvc:default-servlet-handler />
</beans>

3.5.4 log4j.properties
新建PersonalBlog/src/main/resources/log4j.properties

log4j.properties 用于设置输出日志

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

四、测试结果

在测试项目之前，我们需要做一些准备：

将 Msyql 服务启动，启动命令见开始部分。
配置Tomcat服务器，默认8080端口号。

4.1 页面展示

4.1.1主页

4.1.2 关于博主

4.1.3 日记管理

4.1.4 博客管理

4.1.5 写博客

4.1.6写日记

4.1.7验证管理员

点击 Admin ，会弹出提示框，要求输入密码，这里密码为 000000.

注意：这里需要数据库有第一篇博文，否则会报错。感兴趣的同学请根据代码优化此处功能

南星6603

关注

24
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
JAVA项目---实现个人博客

JAVA项目---实现个人博客本次实验的内容是利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人博客网站，网站功能包括写博客和日记，浏览博客与日记，以及作为网站拥有者的我们对博客和日记的管理。
复制链接

扫一扫