# QC博客

**Repository Path**: nbqc233/qc-blog

## Basic Information

- **Project Name**: QC博客
- **Description**: 多用户博客网站 web大作业
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: http://www.qcblog.cc/
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 0
- **Created**: 2022-12-30
- **Last Updated**: 2025-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, element-plus

## README

# QCBlog

[![vue version](https://img.shields.io/badge/Vue-3.2.45-brightgreen)](https://cn.vuejs.org/)
[![pinia version](https://img.shields.io/badge/Pinia-2.0.28-yellow)](https://img.shields.io/badge/Pinia-2.0.28-yellow)
[![element-plus version](https://img.shields.io/badge/Element%20Plus-2.2.27-blue)](https://element-plus.gitee.io/zh-CN/)
[![marked version](https://img.shields.io/badge/Marked-4.2.5-lightgrey)](https://marked.js.org/)
[![uuid version](https://img.shields.io/badge/uuid-9.0.0-orange)](https://github.com/uuidjs/uuid/)
[![nprogress version](https://img.shields.io/badge/nprogress-0.2.0-green)](https://ricostacruz.com/nprogress/)
[![crypto-js version](https://img.shields.io/badge/crypto--js-4.1.1-orange)](https://github.com/brix/crypto-js)
[![vue-cropper version](https://img.shields.io/badge/vue--cropper-1.0.5-red)](https://github.com/xyxiao001/vue-cropper)

一个比较简单的多用户博客网站

## 网站链接
[QCBlog](http://www.qcblog.cc/)

## 开发环境
node v18.12.1

vite v4.0.0

## 开发背景简介
这个项目是**web应用开发**课程的大作业

在此特别感谢**江西财经大学辜勇老师**让我的前端开发水平上了一个台阶

老师讲的课真的是深入浅出非常的精彩，还有特别细致的讲解文档

~~其实我课都没怎么听，都是靠课后看文档理解的~~

~~虽然每次作业都难的我头大~~ 但是能认真做下来收获还是很大的

这次大作业是我第一次使用vue3开发项目，对组合式api的理解和运用还不够到位，后面会持续更新的

## 网页样式
### 网页整体样式借鉴了 **[Roriacl](https://github.com/Rorical)** 大佬写的typecho主题 **[Rorical 可爱简洁模板](https://www.typecho.me/1361.html)**
**这个主题真的炒鸡好看！！** 

但是大佬弃坑了有点可惜，我也不会php。~~所以干脆用vue复刻一个吧~~ 实际是拙劣的模仿了一个（

### 部分页面展示

![首页](screenshot/%E4%B8%BB%E9%A1%B5.png)

![个人主页](screenshot/%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5.png)

![登录注册](screenshot/%E7%99%BB%E5%BD%95.png)

![文章界面](screenshot/%E6%96%87%E7%AB%A0%E9%A1%B5%E9%9D%A2.png)

## 主要功能

### 主页功能
+ 展示博客/图片轮播
+ 展示最新文章
+ 展示文章分类
+ 关于界面
+ 提供登录注册服务

### 用户系统
+ 登录
+ 注册
+ 查看个人主页
+ 分享个人主页
+ 退出登录
+ 用户设置
  + 修改个人信息
  + 修改头像
  + 修改密码
  + 删除账号

### 博客系统
用户登录后可以编辑并发布博客或者存至草稿箱，支持markdown语法

游客可以点赞、分享文章，用户登陆后还能在每篇文章下发表评论及回复

#### 博客编辑器及其功能如下
+ 左侧文章/草稿箱列表
  + 展示用户发布的所有文章
  + 展示用户储存的所有草稿
  + 新建文章

+ 顶部菜单栏、单元格工具栏
  + 菜单栏
    + Edit 切换到编辑模式
    + View 切换到浏览模式
    + Reload 刷新
    + Help 查看帮助
    + 删除该文章
    + ~~Download 下载该文档~~（还没做好）
  + 单元格工具
    + 发布文章
    + 保存文章到草稿箱
    + 尾行新建单元格
    + 剪切、复制、粘贴单元格
    + 上/下移单元格
    + 在选中单元格上/下方新建单元格
    + 删除单元格

+ 中间文本编辑栏
  + 文本编辑
    + 单击选中单元格
    + 双击切换该单元格状态（编辑/浏览）

+ 右侧信息栏
  + 信息栏
    + 文章信息
      + 作者
      + 创建日期
      + 最后一次更新日期
      + 文章分类
      + Tags（可编辑）
      + 文章头图（可自定义）
    + 单元格信息
      + 单元格序号
      + 单元格字体大小

### 管理系统
拥有管理员权限的账号可以管理网站。

管理内容：
+ 网站首页展示内容
+ 用户管理
+ 文章管理
+ 评论管理
+ 草稿管理

## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development

```sh
npm run dev
```
### Compile and Minify for Production

```sh
npm run build
```