个人博客项目

最新推荐文章于 2024-06-16 00:46:49 发布

大头0～0

最新推荐文章于 2024-06-16 00:46:49 发布

阅读量273

点赞数

分类专栏：个人博客项目

本文链接：https://blog.csdn.net/datou0_0/article/details/114195101

版权

个人博客项目专栏收录该内容

13 篇文章 2 订阅

订阅专栏

文章目录

个人博客项目

个人博客项目

一、项目技术

工具	名称
开发工具	IDEA
语言	JDK1.8、HTML、css、js
模板引擎	Themleaf
数据库	Mysql8.0
项目框架	SpringBoot、SpringSecurity
ORM	Mybatis
项目构建	Maven

二、前端页面

1、本项目前端素材采用

mrbbbbbb博主

分享的素材
在这里插入图片描述
2、采用Thymeleaf模板引擎
Thymeleaf是一个现代服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本。
注意事项：
1、导入依赖
2、插入属性

<html lang="en" xmlns:th="http://www.thymeleaf.org" >

三、数据库设计

采用MySql语言编写
在这里插入图片描述

具体实现流程：数据库设计

四、环境搭建

在这里插入图片描述

1、项目创建选择java版本spring框架以及所需工具
2、创建各种目录（config、controller…)
3、在pom.xml导入所需依赖或更改所需版本
4、修改主配置文件（application.yml)

具体流程：环境搭建

五、后台管理模块设计

1、后台登陆功能设计

采用SpringSecurity安全框架简化登陆拦截登陆认证授权功能的设计

具体实现流程：后台登陆功能设计
在这里插入图片描述

2、后台文章管理功能设计

1、根据标题、类型、是否推荐查找对应文章
2、文章编辑、删除、新增功能

具体实现流程：后台文章管理功能设计
在这里插入图片描述

3、后台分类管理功能设计

实现分类信息的编辑、删除、添加功能

具体实现流程：后台分类管理功能设计
在这里插入图片描述

4、后台用户管理功能设计

实现用户信息的罗列以及删除

具体实现流程：后台用户管理功能设计
在这里插入图片描述

5、博客编写功能设计

插入markdown编辑器实现博客编写功能

具体实现流程：博客编写功能设计
在这里插入图片描述

六、主页模块设计

在这里插入图片描述

1、导航栏用户模块设计

使用SpringSecurity+Themleaf 用户登陆前后显示不同页面
实现用户登出、密码修改功能

具体实现流程：导航栏用户模块设计
在这里插入图片描述

2、首页模块设计

罗列文章列表、分类列表、标签列表、推荐列表
点击具体博客、分类、标签进入文章详细页面

具体实现流程：首页模块设计
在这里插入图片描述

3、详细页评论功能实现

实现评论的添加、删除功能

具体实现流程：详细页评论功能实现
在这里插入图片描述

4、主页分类模块设计

罗列分类列表、文章列表
点击具体分类搜索对应的文章

具体实现流程：主页分类模块设计
在这里插入图片描述

六、其他

一、抽取前端公共部分

1、新建commoms目录以及html文件

在这里插入图片描述

2、在commons文件中编写对应公共部分并添加 th:fragment=“name” 属性

<footer th:fragment="botbar" class="ui inverted vertical segment m-padded-tb-large m-shadow-small m-opacity-mini2">

3、在所需页面添加引用

active='index’用于控制对应标签高亮

<div th:replace="~{commons/commons::topbar(active='index')}"></div>

二、整合PageHelper分页插件

1、pom.xml导入依赖

<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.12</version>
</dependency>

2、修改对应controller类

注意PageHelper.startPage(pageNum,4);语句要放在前面否则插件不生效

@RequestMapping("/")
public String index(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum, Model model) {
    PageHelper.startPage(pageNum,4);
    List<Article> articles = articleService.queryArticles();
    PageInfo<Article> pageInfo = new PageInfo<>(articles);
    model.addAttribute("pageInfo",pageInfo);
    List<Category> categories = categoryService.allCategories();
    model.addAttribute("types",categories);
    model.addAttribute("count",articleService.countArt());
    return "index";
}

3、修改对应前端页面

<div class="ui mobile reversed stackable grid" th:each="article:${pageInfo.list}">

分页按钮

<div class="ui bottom attached segment">
    <div class="ui  middle aligned three column grid">
        <div class="left aligned column">
            <a class="item ui mini teal basic button" th:href="@{/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
        </div>
        <div class="center aligned column">
            <p> <span th:text="${pageInfo.pageNum}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
        </div>
        <div class="right aligned column">
            <a class="item ui mini teal basic button" th:href="@{/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
        </div>
    </div>
</div>

二、插入markdown编辑器

1、放入所需文件

在这里插入图片描述

2、前端引用

<link rel="stylesheet" th:href="@{/lib/editormd/css/editormd.min.css}">
<div id="md-content" style="z-index: 1 !important;">
     <textarea  name="content" th:value="*{content}"style="display: none"> </textarea>
</div>
<script th:src="@{/lib/editormd/editormd.min.js}"></script>
<script>

        //初始化markdown编辑器
        var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                path    : "/lib/editormd/lib/"
            });
        });
</script>

三、页面国际化

具体实现流程：页面国际化实现

四、上传头像、背景

1、修改表单属性

注意：添加 enctype="multipart/form-data"

<form enctype="multipart/form-data" th:action="@{/addUser}" method="post" class="ui segment form">
<input type="file" name="file">

2、修改对应controller层

    private static final String UPLOADED_FOLDER = System.getProperty("user.dir");
    private static final String subPath ="/src/main/resources/static/newImgs/";
    @RequestMapping("/addUser")
    public String addUser(@RequestParam(value = "file",required=false) MultipartFile file,User user) throws IOException {

        if(!file.isEmpty()){
            this.saveFile(file);
            user.setAvatar("/newImgs/"+file.getOriginalFilename());
        }else{
            user.setAvatar("https://picsum.photos/id/1/400/300");
        }
        userService.insert(user);
        return "redirect:/logout";
    }

    private void saveFile(MultipartFile file) throws IOException {
        Path path = Paths.get(UPLOADED_FOLDER + subPath + file.getOriginalFilename());
        file.transferTo(path);
    }

五、整合缓存中间件redis

REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统，是跨平台的非关系型数据库。Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库，并提供多种语言的 API。Redis 通常被称为数据结构服务器，因为值（value）可以是字符串(String)、哈希(Hash)、列表(list)、集合(sets)和有序集合(sorted sets)等类型。

具体实现流程：整合缓存中间件redis