# xflow

**Repository Path**: kang-zhenbin/xflux

## Basic Information

- **Project Name**: xflow
- **Description**: 集成笔记与视频的学习网站，可以简单理解为将技术博客和b站这两种网站融合起来，目标是做出个人知识库
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2023-06-15
- **Last Updated**: 2025-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI, Axios, vue-markdown, VideoJS

## README

> 心流：构建您的个人数字花园

前言：
- 这是心流项目的前端
- 本项目有一个集成前端页面的Node后端可以直接预览：[xflow: 集成笔记与视频的学习网站(gitee.com)](https://gitee.com/kang-zhenbin/xflow_backend)

# 项目介绍

这是一个使用vue.js和node.js的express.js开发的网站，它可以让用户在浏览器中查看和上传markdown格式的笔记，并且可以自由挑选视频来学习或放松。这个网站的目标是帮助用户构建自己的数字花园，也就是一个可以记录、整理、分享和回顾自己学习的知识和经验的个人空间。


# 如何运行

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

# 项目效果预览

## 登录注册

![截屏2023-06-30 23.07.22.png](./remd_img/5.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/6.webp)

## 首页

![截屏2023-06-30 23.07.22.png](./remd_img/7.webp)

## 笔记
![截屏2023-06-30 23.07.22.png](./remd_img/8.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/9.webp)

## 视频

![截屏2023-06-30 23.07.22.png](./remd_img/10.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/11.webp)
## 个人中心


![截屏2023-06-30 23.07.22.png](./remd_img/12.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/13.webp)

## 管理

### 管理笔记
![截屏2023-06-30 23.07.22.png](./remd_img/14.webp)

![截屏2023-06-30 23.07.22.png](./remd_img/15.webp)
### 管理视频

![截屏2023-06-30 23.07.22.png](./remd_img/16.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/17.webp)
### 管理用户

![截屏2023-06-30 23.07.22.png](./remd_img/18.webp)


![截屏2023-06-30 23.07.22.png](./remd_img/19.webp)

### 内容投稿
投稿笔记
![截屏2023-06-30 23.07.22.png](./remd_img/20.webp)

投稿视频
![截屏2023-06-30 23.07.22.png](./remd_img/21.webp)