# blog

**Repository Path**: openfs/blog

## Basic Information

- **Project Name**: blog
- **Description**: 博客系统，这是一个 SpringBoot + Vue2 + Vue3 的产物，支持移动端自适应，配有完备的前台和后台管理功能。
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-20
- **Last Updated**: 2024-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## POETIZE
POETIZE：作诗，有诗意地描写。

![首页](poetize_picture/首页.png)

## Star
ps: 虽然我知道，大部分人都是来了直接下载源代码后就潇洒的离开。

虽然我知道现实就是如此的残酷，但我还是要以我萤虫之力对各位到来的同仁发出一声诚挚的嘶吼：`Star`，`Star`，`Star`。

相信各位同仁看到下面的项目介绍一定会心动的，心想`怎么没有早点遇到这么漂亮的博客项目`。在搭建这个美丽的网站同时，何不`Star`，为这个项目点赞呢！

## 技术栈
这是一个 SpringBoot + Vue2 + Vue3 的产物，支持移动端自适应，配有完备的前台和后台管理功能。

前端技术：Vue2（博客系统），Vue3（IM 聊天室系统），Element UI（Vue2），Element-Plus UI（Vue3），Naive UI（Vue3）

后端技术：Java，SpringBoot，MySQL，Mybatis-Plus，t-io，qiniu-java-sdk，spring-boot-starter-mail

网站分两个模块：
- 博客系统：具有文章，表白墙，图片墙，收藏夹，乐曲，视频播放，留言，友链，时间线，后台管理等功能。
- 聊天室系统：具有朋友圈（时间线），好友，群等功能。

本网站采用前后端分离进行实现，两个前端项目通过Nginx代理，后端使用Java。

部署网站需要安装Nginx、Java、MySQL，然后打包前后端项目并部署。

文件服务可以使用七牛云，也可以使用服务器。默认使用服务器。

Vue3（IM 聊天室系统）是非必须的。如果部署，则需要依赖博客，然后从博客的“联系我”进入，因为登录模块在博客。

## 项目地址
- 接口代理（开源版）：api
- 博客前端（开源版）：ui
- 聊天室前端（开源版）：im
- 后端（开源版）：server
- 博客前端、聊天室前端、后端汇总版（开源版）：https://gitee.com/openfs/blog
- 七牛云登录/注册地址（文件服务/CDN）：https://s.qiniu.com

## 本地启动
Vue2：
1. npm install
2. npm run serve

Vue3：
1. npm install
2. npm run serve

SpringBoot：
1. 导入SQL文件到数据库（poetry.sql）
2. 配置数据库连接（application.yml里面的datasource信息）
3. 启动（PoetryApplication）
4. JDK 1.8 + MySQL 8.4
5. 使用 Maven 打包成jar包，或者直接运行。

## 服务器部署（宝塔示例）
1. 安装Nginx、Java、MySQL。
2. 配置后端数据库连接（application.yml里面的datasource信息）然后打包 jar 包。
3. 配置Nginx，将前端项目打包部署到Nginx的根目录下，im 项目直接部署到服务器的指定目录``im``下。
4. 将打包的 jar 包放到服务器的指定目录下,后端项目默认启动端口 8081。
5. 宝塔=>网站，添加 java 项目
    1. 项目类型：SpringBoot
    2. 项目路径：jar包所在路径
    3. jdk路径： XXXXXX/JDK1.8
    4. 项目启动命令：JDK1.8/bin/java  -jar  -Xmx1024M -Xms256M /XXX/XXX/XXX/XXX/poetize-server.jar --server.port=8081
    5. 启动用户：root (必须有足够权限，会创建日志上传文件等)
    6. 绑定域名，启用SSl
    7. 配置完成后，点击“立即启动”
6. nginx 配置文件
    1. 前端文件为 history 路由模式，需要代理转发到根目录下的 index.html 上。
    ```config
    location / {
  		index index.html index.htm;
  		#配合vue-router的history模式
  		try_files $uri $uri/ @router;
  	}
  	
  	#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
  	#因此需要rewrite到index.html中，然后交给路由在处理请求资源
  	location @router {
  		rewrite ^.*$ /index.html last;
  	}
    ```
    3. 静态资源的路径为：/home/file/xxx/xxxx 也需要代理，代理到 host/static/ 
    ```config
    #STATIC-START 静态资源相关配置
  	location /static/ {
  		rewrite  ^/static/(.*)$  /home/file/$1  break;
  	}
  	#STATIC-END
    ```
    4. 后端api接口通过 host/api 代理到 host:8081 端口上面
    ```config
    #PROXY-LOCAl-START 代理本地服务的相关配置
    #PROXY-STARTapi/
    location /api/ {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
      proxy_set_header X-Host $host:$server_port;
      proxy_set_header X-Scheme $scheme;
      proxy_connect_timeout 30s;
      proxy_read_timeout 86400s;
      proxy_send_timeout 30s;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
      rewrite  ^/api/(.*)$  /$1  break;
      proxy_pass http://127.0.0.1:8081;
    }
    #PROXY-ENDapi/
    ```
    5. im 路径为 聊天室代码，代理到 im （不然会被代理到根域名下的index.html上）
    ```config
    location /im {
  		rewrite  ^//(.*)$  /im/$1  break;
  	}
    ```
7. 自此项目配置完毕 重启项目，通过域名访问 后台 登录，进入配置管理 修改自己配置
8. 默认用户 ``Sara`` 的密码是 ``123456``。
9. 如有疑问请网站留言。

## 项目介绍
大家好，我是 openfs。Charles 刚刚启动。

项目经历了大大小小的更新，每次更新都是在美观度上的精雕细琢，也修复了很多问题，添加了很多功能。

项目提供部分源码供大家参考学习，只需要在Gitee拉取项目，按照Readme启动说明就能直接启动，但需要一定的编程能力。

感谢对Charles的支持。

## 完整版
[官网完整版：https://520.cq.cn](https://520.cq.cn)

[完整版测试网站：http://520.cq.cn](http://520.cq.cn)，用户名admin，密码：jupiter520（请勿搞破坏）。

### 完整版特色
在开源版的基础上持续更新与优化，极致美学设计，实用与美观并存，丰富且强大的文章系统，致力于成为最美博客与最美内容平台。