# MyBlog

**Repository Path**: summerstudy/myblog

## Basic Information

- **Project Name**: MyBlog
- **Description**: 一个基于Spring Boot的简单博客项目
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-22
- **Last Updated**: 2022-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Java, SpringBoot, MySQL, HTML, JavaScript

## README



# Spring Boot 个人博客

> ​																																	Ljd

## 1、需求与功能

### 1.1 个人博客用户故事：

角色：普通访客、管理员(我)

- 访客：可以分页查看所有的博客

- 访客：可以快速查博客最多的6个分类

- 访客：可以查看所有的分类

- 访客：可以查看某个分类下的博客列表

- 访客：可以快速查看标记博客最多的10个标签

- 访客：可以查看所有的标签

- 访客：可以查看某个标签下的博客列表

- 访客：可以根据年度时间线查看博客列表

- 访客：可以快速查看最新的推荐博客

- 访客：可以用关键字全局搜索博客

- 访客：可以查看单个博客内容

- 访客：可以对博客内容进行评论

- 访客：可以赞赏博客内容

- 访客：可以微信扫码阅读博客内容

- 访客：可以在首页扫描公众号二维码关注

- 我：可以用户名和密码登录后台进行管理

- 我：可以管理博客

    - 我：可以发布新博客

    - 我：可以对博客进行分类

    - 我：可以对博客打标签

    - 我：可以修改博客

    - 我：可以删除博客

    - 我：可以根据标题、分类、标签查询博客



- 我：可以管理博客分类

    - 我：可以新增一个分类

    - 我：可以修改一个分类

    - 我：可以删除一个分类

    - 我：可以根据分类名称查询分类



- 我：可以管理标签

    - 我：可以新增一个标签
    - 我：可以修改一个标签
    - 我：可以删除一个标签
    - 我：可以根据名称查询一个标签



### 1.2 功能规划

![image-20220208104153535](https://gitee.com/summerstudy/myblog/raw/master/Blog.assets/image-20220208104153535.png)



## 2、页面设计与开发

### 2.1 设计

前端展示：首页、详情页、分类、标签、归档、关于我

后台管理：模板页



### 2.2 页面开发



### 2.3 插件集成

[编辑器 markdown](https://pandao.github.io/editor.md/)

[内容排版](https://typo.sofi.sh/)

[动画 animate.css](http://www.dowebok.com/demo/2014/98/)

[代码高亮 prism](https://prismjs.com/)

[滚动侦测 waypoints](http://imakewebthings.com/waypoints/)

平滑滚动 jquery.scrollTo

**CDN**

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
```



[目录生成 Tocbot](http://tscanlin.github.io/tocbot/)

[二维码生成 qrcode.js](http://davidshimjs.github.io/qrcodejs/)





## 3、框架搭建

### 3.1 构建与配置

- 引入Spring Boot模块

    - web

    - Thymeleaf

        - 命名空间

          ```
          xmlns:th="http://www.thymeleaf.org"
          ```

    - JPA

    - MySQL

    - Aspects

    - DevTools

### 3.2 异常处理

- 定义错误页面

    - 404
    - 500
    - error

- 全局处理异常

    - 统一处理异常

      ```java
      @ControllerAdvice
      public class ControllerExceptionInterceptor {
          private Logger logger = LoggerFactory.getLogger(this.getClass());
          @ExceptionHandler(Exception.class)
          public ModelAndView exception(HttpServletRequest request, Exception e) throws Exception {
              ModelAndView mv = new ModelAndView();
              logger.error("Request URL : {}, Exception : {}", request.getRequestURL(), e);
      
              if (AnnotationUtils.findAnnotation(e.getClass(), ResponseStatus.class) != null) {
                  throw e;
              }
              mv.addObject("url", request.getRequestURL());
              mv.addObject("exception", e);
              mv.setViewName("error/error");
              return mv;
          }
      }
      ```

### 3.3 日志处理

- 记录日志内容

    - 请求url

    - 访问者ip

        - 问题：获取到的ip为如下

      ```text
       ip='0:0:0:0:0:0:0:1'
      ```

      原因：由于客户端和服务器是同一机器，所以会出现这个问题，访问时的url中有localhost

      改为127.0.0.1即可

      ![image-20220210175821219](https://gitee.com/summerstudy/myblog/raw/master/Blog.assets/image-20220210175821219.png)

      ![image-20220210175839062](https://gitee.com/summerstudy/myblog/raw/master/Blog.assets/image-20220210175839062.png)

    - 调用者方法classMethod

    - 参数args

    - 返回内容



- 记录日志类



### 3.4 页面处理

- 静态页面导入project

- thymeleaf布局
    - 定义fragment
    - 使用fragment布局

- 错误页面美化





## 4、设计与规范

### 4.1 实体设计

- 实体类
    - 博客Blog
    - 博客分类Type
    - 博客标签Tag
    - 博客评论Comment
    - 用户User



![image-20220211141102519](https://gitee.com/summerstudy/myblog/raw/master/Blog.assets/image-20220211141102519.png)



### 4.2 应用分层

![image-20220211141936816](https://gitee.com/summerstudy/myblog/raw/master/Blog.assets/image-20220211141936816.png)

### 4.3 命名约定

- Service/DAO层命名规范
    - 获取单个对象的方法用get做前缀
    - 获取多个对象的方法用list做前缀
    - 获取统计值的方法用count做前缀
    - 插入的方法用save或者insert做前缀
    - 删除的方法用remove或者delete做前缀
    - 修改的方法用update做前缀

## 5、后台登陆

### 5.1 登录

- 构建登陆页面和后台管理首页
- UserService和UserRepository
- LoginController实现登录
- MD5加密
- 登录拦截器



### 5.2 分类管理

- 分类管理页面
- 分类列表分页
- 分类新增、修改、删除



### 5.3 标签管理

- 标签管理页面
- 标签列表分页
- 标签新增、修改、删除





### 5.4 博客管理

- 博客分页查询
- 博客新增
- 博客修改
- 博客删除



## 6、前端展示

### 6.1、首页展示

- 博客列表
- top分类
- top标签
- 最新博客推荐
- 博客详情

markdown转html依赖

```xml
<dependency>
    <groupId>com.atlassian.commonmark</groupId>
    <artifactId>commonmark</artifactId>
    <version>0.17.0</version>
</dependency>
<dependency>
    <groupId>com.atlassian.commonmark</groupId>
    <artifactId>commonmark-ext-heading-anchor</artifactId>
    <version>0.17.0</version>
</dependency>
<dependency>
    <groupId>com.atlassian.commonmark</groupId>
    <artifactId>commonmark-ext-gfm-tables</artifactId>
    <version>0.17.0</version>
</dependency>
```



### 6.2、评论功能

- 评论信息提交与回复
- 评论信息列表展示功能
- 管理员回复评论



### 6.3、分类页

### 6.4、标签页

### 6.5、归档页

### 6.6、关于我