# Project-Blog

**Repository Path**: JinLinC/project-blog

## Basic Information

- **Project Name**: Project-Blog
- **Description**: 一个简单的博客项目，前端基于Vue3开发，后端使用NestJs开发。支持文章和图片的发布、查看、编辑、删除等功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-03-09
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Project

## README

# README

在线博客`Blog`项目：

- 后端基于`NestJs`框架开发，具体的代码文件在`blog-nest`文件夹中

  配置使用：

  1. 进入`blog-nest`文件夹中
  2. 安装相关的包：`npm install` 
  3. 执行迁移数据库命令：`npx prisma migrate dev `
  4. 启动后端：`npm run dev`

- 前端基于`Vue3`框架开发（在自己开发的前端脚手架的基础上进行二次开发），具体的代码文件在`blog-vue`文件夹中

  前端脚手架项目的仓库为：

  - [Project-VueCli: 前端脚手架项目，基于Vue3进行开发，包含了前端项目后台管理的基础部分（如界面、路由和权限控制等等）](https://gitee.com/JinLinC/project-vue-cli)
  - [JinLinC0/Project-VueCli: 前端脚手架项目，基于Vue3进行开发，包含了前端项目后台管理的基础部分（如界面、路由和权限控制等等）](https://github.com/JinLinC0/Project-VueCli)

  配置使用：

  1. 进入`blog-vue`文件夹中
  2. 安装相关的包：`npm install` 
  3. 启动前端：`npm run dev`

模拟数据通过`mockJs`生成，富文本编辑器使用了`wangEditor`

该博客项目分为五个专栏，每个专栏下面初始随机生成了一些文章数据，可以点击顶部的专栏筛选该专栏下的文章，点击具体的文章可以查看完整的文章内容；在文章具体内容页面，我们可以对文章进行编辑修改和删除操作；也可以在首页点击文章发表，进行文章的添加操作。编辑器支持文章图片的上传。

做了媒体查询处理，在桌面端和移动端都有较合理的布局

桌面端具体功能界面：

首页界面：可以点击具体的栏目列表，查看当前栏目的所有文章，点击文章的名称，可以查看具体的文章；同时支持文章的新增

![image-20250515111522144](/public/image-20250515111522144.png)

点击文章发表按钮，进行新增文章页面：

![image-20250515111913152](/public/image-20250515111913152.png)

对于已有的文章，支持编辑修改和删除功能：

编辑界面：

![image-20250515111659392](/public/image-20250515111659392.png)

删除界面：

![image-20250515112015922](/public/image-20250515112015922.png)

手机端具体功能界面：

![image-20250515111159563](/public/image-20250515111159563.png)