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.
注意:这里需要数据库有第一篇博文,否则会报错。感兴趣的同学请根据代码优化此处功能