1 Star 1 Fork 0

清欢 / dbblog

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

简介

这是一个基于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编译器

部署步骤:

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

前端

前端环境:

  • Node.js 8.0+
  • WebStorm编辑器

部署步骤:

  1. 导入项目,运行 npm install(如果失败,清空包后试试cnpm install)
  2. 启动项目:npm run dev
  3. 前端地址:localhost:8002 管理界面地址:localhost:8888 账号admin,密码123456

界面预览

博文图片1.png

博文图片2.png

博文图片3.png

博文图片6.png

博文图片7.png

1.png

2.png

3.png

4.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、上传代码

img

3 、获取nginx 镜像

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

  在终端输入:

docker pull nginx

  即可以获取到nginx镜像。

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

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

docker image ls

  镜像结果如下所示:

img

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

img

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

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/

结果如下:

img

常见问题:

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

Comments ( 0 )

Sign in for post a comment

About

Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
1
https://gitee.com/ysygitee/dbblog.git
git@gitee.com:ysygitee/dbblog.git
ysygitee
dbblog
dbblog
master

Search

102255 3a0e046c 1850385 102255 7aaa926c 1850385