一个简单的个人博客小项目

电玩女神 2022-09-09 11:51 226阅读 0赞

# [一个简单的个人博客小项目][Link 1] #

## 简介 ##

一个主要靠拼凑而成的个人博客项目，共分为了 [前台][Link 2]  
、 [后台][Link 3] 、 [api][] 三个部分。

1.  [api][]  
    后端基于 `SpringBoot` 。主要依赖 `mybatis` 、 `fastjson` 、 `DruidDataSource` 、 `Lombok` 、 `java-jwt` 、 `aliyun-sdk-oss`  
    、 `knife4j` 等，数据库使用的是 `MySQL8.0+`
2.  [前台][Link 2]  
    前台的主要样式是来源于网络上了一个 `BizBlog` 模板，最初来源于哪我不得而知，在原本的基础上改写成了 `nuxtJs` 项目。
3.  [后台][Link 3]  
    后台UI套用的[vue-element-admin][]，基本是直接拿来用了，想自己定制着实实力不允许。
4.  [示例][Link 1]：[绿色食品——菜狗][Link 1]

## 本地启动 ##

### [api][]：前台后台请求的api使用的是同一个项目 ###

1.  `git clone https://github.com/WindSnowLi/w-blog-api.git` 克隆项目到本地
2.  `mvn clean install dependency:tree` 安装依赖
3.  修改开发环境 `application-dev.yml` 和生产环境 `application-prod.yml` 中的数据库配置信息； `knife4j` 只在开发环境中激活。
4.  创建数据库配置中指定名称的空数据库，`UTF8`编码
5.  `mvn clean package -Dmaven.test.skip=true` 跳过测试并生成 `jar` 包
6.  `java -jar 生成的包名.jar` 运行开发配置环境，初次运行会自动初始化数据库
7.  访问 `http://127.0.0.1:8888/doc.html` 查看 `api` 文档
8.  *推荐使用IDEA打开项目文件夹自动处理依赖、方便运行*

### [前台][Link 2] ###

1.  `git clone https://github.com/WindSnowLi/vue-ssr-blog.git` 克隆项目到本地
2.  `npm install` 安装依赖
3.  可修改 `config/sitemap.xml` 文件中的 `host` 地址，用于生成访问地图
4.  可修改 `nuxt.config.js` 中的端口号
5.  可修改 `package.json` 文件中的 `script` 中的 `BASE_URL` 来指定后端 `api` 地址
6.  `npm run build` 编译
7.  `npm start` 本地运行

### [后台][Link 3] ###

1.  `git clone https://github.com/WindSnowLi/vue-admin-blog.git` 克隆项目到本地
2.  `npm install` 安装依赖
3.  `npm run dev` 使用模拟数据预览界面
4.  修改 `.env.production` 文件中的 `VUE_APP_BASE_API` 地址为后端 `api` 的地址
5.  `npm run build:prod` 编译
6.  `dist` 文件夹下的为编译好的文件，可放到 `http` 服务器下（可以使用 `npm` 安装 `http-server` ）进行访问

## 界面展示 ##

### 前台 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 后台 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 6]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 7]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 8]

[原文链接][Link 4]:`https://www.blog.hiyj.cn/article/detail/100`

[Link 1]: https://www.blog.hiyj.cn/
[Link 2]: https://github.com/WindSnowLi/vue-ssr-blog
[Link 3]: https://github.com/WindSnowLi/vue-admin-blog
[api]: https://github.com/WindSnowLi/w-blog-api
[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/2a45e2b231424a719dad06f4eef482a5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/09d41a940bba40b5ac9fd1be1e64f2b3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/b6fcdaaec5ae4044a72f0d0aaaf9e088.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/a815953e828b45b78de62e0479f89b28.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/43e2b4b6401e44e8acb5313903a8558d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/97b449c45255455d82a599769fb78314.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/51526fbb1b73486ea4726288a43af2c4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/67901da3655b4a758cc734db5687fbea.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2luZFNub3dMaQ_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/07a2e2db41b5431d8fa9c99369cf402e.png
[Link 4]: https://www.blog.hiyj.cn/article/detail/100