元旦用SpringBoot撸了个博客网站送给大家

news/2024/5/9 10:53:07/文章来源:https://blog.csdn.net/qq_24557827/article/details/112211229

说在前面

掘金是曾经我觉得最适合写技术文章的社区，因为可以带二维码引流。我觉得这想法没问题，可是最近发现掘金也凉了，写文章连个公众号二维码都不给带，这让我觉得被白嫖了。

而且最近发现我更加偏向于写纯粹的技术文章，但阅读量实在是低的可怜，思前想后很多天，最终做了个决定，不如开始运营一个技术博客网站好了，毕竟技术博客写得好，百度等搜索引擎是会主动采集数据并进行推送，而不是像公众号一样，难做的要死。

趁着这个元旦，基于熊哥http://codebear.cn/?ADTAG=gh的客户端魔改了一个博客网站，而熊哥的网站用的是php，由于我是一个Javaer，用php开发我也不好将其改成自己喜欢的模样，因此花了点时间复刻了一版Java的版本，在公众号上记录下。

技术栈

客户端：vue

服务端：springboot+maven+jpa+docker+shell

我的博客地址：

http://myblog.lixifan.cn/
饭谈编程

或者直接点击原文跳转

目前已经部署到腾讯云上，用docker管理，可以直接访问了

效果图

看看这好看的首页

pc端首页

文章页面极简主义不错

pc端文章

支持评论

评论页面

为了阻止恶意刷，还要带拼图才可以

image-20210103224321149

分类页面，好看

pc端分类页面

归档页面，时间线是我喜欢的

pc端归档页面

同时还提供了后台

登陆页面

后台还记录了系统日志

pc端后台页面

发篇文章上传封面图，还支持截图

image-20210103224224002

随时随地进行文章管理

image-20210103224614146

还有n多功能

image-20210103224731370

后台还有草稿箱功能，写完不发表的文章可以保存到草稿箱上，还有回收站功能，删除的文章可以在回收站找到，很强大的博客网站。

博客目前实现的功能

[x] 首页（文章列表）
[x] 分类/标签列表
[x] 文章归档
[x] ‘关于’页面
[x] 友链
[x] 文章详情页
[x] 分类/标签对应的文章列表
[x] 搜索功能（按文章标题和简介搜索）
[x] 文章详情页标题目录导航
[x] 评论
[x] 简历页
[ ] 图片集

博客后台管理实现功能

[x] 登录
[x] 首页（显示文章、标签、系统日志等统计数据）
[x] 发布/编辑/删除文章
[x] 添加/编辑/删除分类
[x] 添加/编辑/删除标签
[x] 添加/编辑/删除友链
[x] 编辑‘关于’页面
[x] 编辑博客配置页面（头像、昵称等）
[x] 管理评论
[x] 简历编辑
[ ] 修改管理员密码

Java后端结构

后端结构

超级方便改，拿到源码想怎么改就怎么改，一个博客的后端就应该这么轻松改。

如何起服

看看Dockerfile

FROM maven:3.5-jdk-8
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime

看看docker-compose

version: '3'
services:myblog:container_name: myblogenvironment:- TZ=Asia/Shanghai- JAVA_OPTS=-XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=128m -Xms128m -Xmx128m -Xmn128m -Xss256k -XX:SurvivorRatio=8 -XX:+UseConcMarkSweepGCprivileged: truerestart: alwaysbuild: .working_dir: /myblogvolumes:- .:/myblog- ~/.m2:/root/.m2expose:- "8088"command: mvn clean spring-boot:run -Dspring-boot.run.profiles=dockernetworks:- default- nginx_net
networks:nginx_net:external: true

看看我的shell脚本

#!/bin/shContainer="myblog"case "$1" in
build)sudo rm -rf targetsudo cp ./conf.d/myblog.conf /home/ubuntu/proj/nginx-center/conf.d/myblog.confsudo cp -r ../myblog-front/dist /home/ubuntu/proj/nginx-center/html/myblog-front;;
start)nohup sudo docker-compose up >myblog.log 2>&1 &tail -f myblog.log;;
stop)sudo docker-compose down;;
login)docker exec -it $Container /bin/bash;;
info)docker ps -a -f name=$Container;;
port)docker port $Container;;
*)echo "Usage: build|run|init[chmod,conf]|start|stop|remove|login|info|port"exit 3;;
esac

如果是在idea上，则直接导入工程，然后起服即可。

如果想用docker容器，则流程如下：

bash ./ctrl.sh build 该步骤是将客户端代码copy到指定路径
bash ./ctrl.sh start 起服
bash ./ctrl.sh stop 关服

记录魔改的新路历程

部署后访问发现

image-20210103223336192

看后台日志

image-20210103223353958

猜测是不允许直接路由访问了，一开始看了后端日志，发现没有日志打印，可以初步认为不是后端拦截导致的，因而将问题归于vue的路由，然后用关键词：vue 部署后无法直接回车键访问查了下，虽然找到部分解答，但是无法修复，就这样搞了一上午，下午和女朋友出去唱了个k，然后就想通了，应该是nginx的路由问题，回来在nginx路由上加了处理