简介

这是一个基于Springboot2.x，vue2.x的前后端分离的开源博客系统，提供前端界面+管理界面+后台服务的整套系统源码。响应式设计，手机、平板、PC，都有良好的视觉效果！

你可以拿它作为前端Vue2.x学习的练手教程；
你也可以把它作为springboot2.x技术的学习项目；
你也可以拿它作为当下火热的ElasticSearch和RabbitMQ的学习Demo;
你也可以将其视为一个前后端分离的项目实践；
你还可以作为SpringCloud服务化思想的学习理解；
...

使用技术

SpringBoot 2.x 后台基本框架
Vue 2.x 前端基本框架
ElementUI：后台管理页面UI库
IView：前端UI库
ElasticSearch 搜索层
RabbitMQ 消息队列
Shiro 鉴权层
Redis 缓存层
Swagger 文档
Mybaits-Plus 好用的mybatis框架
lombox getter setter插件
druid 数据库连接池
jasypt 加密
七牛云图床

站点演示

www.dblearn.cn

模块分层

后端模块

dbblog
├── dbblog-auth   # 鉴权模块：shiro
│   ├── pom.xml
│   └── src
├── dbblog-core   # 核心模块：配置文件，Entity类，mapper类，工具类，异常过滤等
│   ├── pom.xml
│   └── src
├── dbblog-manage # 后台管理界面Service
│   ├── pom.xml
│   └── src
├── dbblog-portal # 前端界面Service
│   ├── pom.xml
│   └── src
├── dbblog-search # 搜索模块：elasticSearch
│   ├── pom.xml
└── └── src

后台依赖关系

dbblog-core -> dbblog-auth -> dbblog-manage -> dbblog-portal -> dbblog-search

采用多模块的形式，便于后续SpringCloud微服务的改造升级

前端模块

后台管理页面

├── assets
├── components # 公共组件
├── element-ui
├── element-ui-theme # elementUI主题
├── icons   
├── router  # 路由
├── store   # vuex
├── utils   # js工具类
└── views   
    ├── common # 公共模块
    └── modules
        ├── article    # 文章模块
        ├── book       # 阅读模块
        ├── operation  # 运维模块
        └── sys        # 系统模块

前台页面

├── assets
├── common
├── components
│   ├── content # 页面
│   │   ├── ArticleContent.vue      # 文章详情页
│   │   ├── ArticleListContent.vue  # 文章列表页
│   │   ├── BookContent.vue         # 图书详情页
│   │   ├── BookListContent.vue     # 图书列表页
│   │   ├── BookNoteContent.vue     # 笔记详情页
│   │   ├── HomeContent.vue         # 首页
│   │   ├── SearchResult.vue        # 搜索结果页
│   │   └── TimeLineContent.vue     # 归档页
│   ├── footer
│   ├── header
│   ├── index
│   ├── utils
│   └── views # 页面组件库
│       ├── Archive 
│       ├── Article
│       ├── Book
│       ├── BookNote
│       ├── Classify
│       └── TimeLine
├── router # 路由
├── store  # Vuex
└── utils  # js工具类

项目部署

服务端

项目后端环境

JDK1.8
Mysql5.7
Redis
IDEA编译器
Lombox插件（百度一下）
ElasticSearch 6.x
RabbitMQ
IDEA编译器

部署步骤：

创建数据库dbblog，并导入dbblog-backend -> db里的所有sql文件
修改dbblog-backend -> dbblog-> dbblog-core里的application-*.yml的数据库连接、redis连接、ElasticSearch连接、RabbitMQ连接
导入项目，并且运行dbblog-backend -> dbblog-search -> BlogApplication里的main方法

前端

前端环境：

Node.js 8.0+
WebStorm编辑器

部署步骤：

导入项目，运行 npm install（如果失败，清空包后试试cnpm install）
启动项目：npm run dev
前端地址：localhost:8002 管理界面地址：localhost:8888 账号admin，密码123456

界面预览

博文图片1.png

博文图片2.png

博文图片3.png

博文图片6.png

博文图片7.png

代办

摘要为空时列表不显示

docker部署上线

后端springboot部署

0、打包项目

更改core项目中的各项yml配置，依次mvn install core、auth、、、mvn package search

1.搭建docker环境

需要linux系统必须是centOS7以上

执行一下命令：

yum install epel-release –y

yum clean all

yum list

2.安装

yum install docker-io –y

systemctl start docker

3.测试docker是否成功

docker info

出现一下信息证明成功：

········

Docker Root Dir: /var/lib/docker

Debug Mode (client): false

Debug Mode (server): false

Registry: https://index.docker.io/v1/

Insecure Registries:

127.0.0.0/8

Registries: docker.io (secure)

4.创建Dockerfile文件内容如下：

FROM java:8

MAINTAINER ysy yaosiyuanmail@163.com

VOLUME /tmp

ADD mystory-1.0.0-SNAPSHOT.jar app.jar

RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

介绍一下：

FROM ：表示使用 Jdk8 环境为基础镜像，如果镜像不是本地的会从 DockerHub 进行下载

MAINTAINER ：指定维护者的信息

VOLUME ：VOLUME 指向了一个/tmp的目录，由于 Spring Boot 使用内置的Tomcat容器，Tomcat 默认使用/tmp作为工作目录。这个命令的效果是：在宿主机的/var/lib/docker目录下创建一个临时文件并把它链接到容器中的/tmp目录

ADD ：拷贝文件并且重命名(前面是上传jar包的名字，后面是重命名)

RUN ：每条run指令在当前基础镜像执行，并且提交新镜像

ENTRYPOINT ：为了缩短 Tomcat 的启动时间，添加java.security.egd的系统属性指向/dev/urandom作为 ENTRYPOINT

5.将创建好的Dockerfile文件和jar包上传到服务器，放在同一文件夹下,进入jar包所在文件夹,执行命令

注意：后面末尾有一个空格和一个“.”，mystory是创建的镜像的名字，“.”表示当前目录

docker build -t dbblog-backend .

1567560101917

6.查看生成的镜像：

docker images

1567560169645

7.创建容器并运行jar包

docker run -d -p 8080:8080 dbblog-backend

-d表示在后台运行

-p 指定端口号第一个8080为容器内部的端口号，第二个8080为外界访问的端口号，将容器内的8080端口号映射到外部的8080端口号

如果想用域名来访问的话，需要把数据库连接改为服务器的ip+数据库端口号，并且命令改为：docker run -d -p 80:80 mystory

8.测试

外网ip+端口号访问项目

如果是用阿里的ECS需要改实例安全组开放3306端口和8080端口

9、查看springboot docker容器运行日志

docker logs -f -t --tail 行数容器名

docker logs -f -t --tail 50 demo

docker logs -f 容器名

前端vue部署

0、更改服务器ip

1567604707482

1、打包vue项目

　　在开发完的vue项目输入如下命名，打包生成dist文件夹

yarn build / npm run build

1567605667454

　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。

　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

1567605732358

2、上传代码

3 、获取nginx 镜像

　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。

　　在终端输入：

docker pull nginx

　　即可以获取到nginx镜像。

　　Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。

　在终端输入如下命令，可以看到nginx的镜像

docker image ls

　　镜像结果如下所示：

4 创建 nginx config配置文件

　　在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

　　注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 非常重要！！！

因为我们的应用是单页客户端应用，如果后台没有正确的配置，当用户在浏览器访问地址时，就会返回404。

所以需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

上面的文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

5 创建 Dockerfile 文件

# 使用Nginx
FROM nginx:1.15
# FROM hub.c.163.com/library/nginx 

# 定义作者
MAINTAINER yaosiyuan <yaosiyuanmail@163.com>

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

## 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
## 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/ 

#COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

6 基于该Dockerfile构建vue应用镜像

1567608507394

运行如下命令，注意不要少了最后的“ . ”

docker build -t dbblog-manage-frontend .

-t 是给镜像命名，test是生成镜像的名字，. 是基于当前目录的Dockerfile来构建镜像。

7 运行生成成功的镜像

docker run -p 4000:80 -d --name dbblog-manage-frontend 314e550bb5f3

1567607114439

参数讲解：

run: 创建一个新的容器并运行一个命令 -d: 后台运行容器，并返回容器ID -p: 端口映射，格式为：主机(宿主)端口:容器端口 --name="longdbvuejs": 为容器指定一个名称

34d9e8770f1b --为生成好的images_id.

7:docker ps 指令查看有哪些在运行，上图中看到longvuejs在运行。

http://47.240.17.236:3000/

结果如下：

常见问题：

o.s.a.r.c.CachingConnectionFactory : Channel shutdown

2019-09-05 09:23:07.689  INFO 1 --- [TaskExecutor-14] c.d.b.s.controller.ArticleEsController   : (Body:'dbblog-manage-saveArticle send refresh msg to ElasticSearch' MessageProperties [headers={}, contentType=text/plain, contentEncoding=UTF-8, contentLength=0, receivedDeliveryMode=PERSISTENT, priority=0, redelivered=false, receivedExchange=, receivedRoutingKey=dbblog-queue, deliveryTag=1, consumerTag=amq.ctag-vusL2uJGwBczAxSVHRYWsw, consumerQueue=dbblog-queue])
2019-09-05 09:23:07.692 ERROR 1 --- [240.17.236:5672] o.s.a.r.c.CachingConnectionFactory       : Channel shutdown: channel error; protocol method: #method<channel.close>(reply-code=406, reply-text=PRECONDITION_FAILED - unknown delivery tag 1, class-id=60, method-id=80)
2019-09-05 09:23:08.689  INFO 1 --- [TaskExecutor-14] o.s.a.r.l.SimpleMessageListenerContainer : Restarting Consumer@65e0174d: tags=[[amq.ctag-vusL2uJGwBczAxSVHRYWsw]], channel=Cached Rabbit Channel: AMQChannel(amqp://admin@47.240.17.236:5672/,4), conn: Proxy@7c1e2a2d Shared Rabbit Connection: SimpleConnection@1a67b289 [delegate=amqp://admin@47.240.17.236:5672/, localPort= 60670], acknowledgeMode=AUTO local queue size=0

交流学习：

QQ群：874514813

感谢：

本项目基于llldddbbb/dbblog