SpringBoot搭建个人博客-页面展示和所用的技术栈（一）

SpringBoot搭建个人博客-页面展示和所用的技术栈（一）

更多详细的内容可以访问我的个人博客时莫如初
话不多说先上图，后面会介绍所用的技术栈快速跳转

快速跳转源码领取

前端页面

1.主页

2.分类页面

3. 文章归档页面

4. 友情链接页面

5. 照片墙

点击可放大，左右可以切换照片

6.关于我页面

7. 博客详情页面

技术栈

1. 前端

   • JQuery
   • layer Web弹层组件
   • Bootstrap4
   • Markdown编辑器
   • 代码高亮，行号显示，语言支持
   • 动画效果
   • 目录生成
   • 照片墙
   • 平滑跳转

2. 后端

   • SpringBoot
   • jdk11
   • Maven3
   • Mybatis-plus
   • Thymeleaf
   • 运行环境:阿里云Ubuntu16.04
   • MySQL8.x

3. 建表语句

create table blog
(
    id              bigint auto_increment
        primary key,
    title           varchar(100)     null,
    content         longtext         null,
    description     varchar(200)     null,
    photo           varchar(300)     null,
    author          varchar(100)     null,
    views           int              null,
    flag            varchar(30)      null,
    word_number     int              null,
    stated          varchar(30)      null,
    share_statement bit              null,
    commentable     bit              null,
    recommend       bit              null,
    is_private      bit default b'0' null,
    create_time     datetime(6)      null,
    update_time     datetime(6)      null,
    user_id         bigint           null,
    deleted         int default 0    null
);

create table blog_category
(
    blog_id     bigint null,
    category_id bigint null
);

create table category
(
    id   bigint auto_increment
        primary key,
    name varchar(100) null
);

create table comment
(
    id                bigint auto_increment
        primary key,
    qq                varchar(20)      null,
    nickname          varchar(100)     null,
    email             varchar(100)     null,
    content           varchar(200)     not null,
    head              varchar(100)     null,
    admin_comment     bit              null,
    create_time       datetime         null,
    blog_id           bigint           null,
    parent_comment_id bigint           null,
    pass              bit default b'0' null
);

create table link
(
    id          bigint auto_increment
        primary key,
    name        varchar(100)     null,
    address     varchar(100)     null,
    head        varchar(100)     null,
    description varchar(100)     null,
    create_time datetime         null,
    pass        bit default b'0' null
);

create table photo
(
    id                bigint auto_increment
        primary key,
    name              varchar(100) null,
    nickname          varchar(100) null,
    url               varchar(100) null,
    classification_id int          null,
    create_time       datetime     null,
    shooting_time     datetime     null,
    shooting_location varchar(100) null
);

create table photo_classification
(
    id      int auto_increment
        primary key,
    name    varchar(100) null,
    EN_name varchar(100) null
);

create table user
(
    id          bigint auto_increment
        primary key,
    username    varchar(100) null,
    nickname    varchar(100) null,
    password    varchar(200) null,
    admin       bit          null,
    head        varchar(100) null,
    create_time datetime     null
);

源码目录结构

.
├── 项目架构文件 
├── logs //项目日志目录
└── src //后台源码
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── li
    │   │           ├── aspect //日志切面
    │   │           ├── bean //数据实体对象
    │   │           ├── config //配置类
    │   │           ├── contorller //控制器
    │   │           ├── dao // 与数据库的接口
    │   │           ├── handler // 控制层异常处理器
    │   │           ├── interceptor //登录过滤
    │   │           ├── service //服务层
    │   │           ├── util //工具包
    │   │           └── vo // 方便前端显示的数据实体对象
    │   └── resources
    │       ├── mapper //mapper接口
    │       ├── static //静态资源文件
    │       │   ├── css //样式文件
    │       │   ├── fonts //字体
    │       │   ├── images // 图片
    │       │   ├── js // 引用的js脚本
    │       │   ├── layer // Web弹层组件
    │       │   ├── lib
    │       │   │   ├── animating //动画
    │       │   │   ├── editormd // markdown编辑器
    │       │   │   ├── picture //照片页依赖
    │       │   │   ├── prism // 代码高亮行号显示语言支持等
    │       │   │   ├── Swiper // 动画
    │       │   │   ├── tocbot //目录生成
    │       │   │   └── waypoints // 平滑跳转插件
    │       │   └── u_files //关于我页面的相关样式和js
    │       └── templates
    │           ├── admin //后台管理页面
    │           └── error //前台显示页面
    └── test //测试

源码领取方式

gitee点击即可下载