# django-vue3-system

**Repository Path**: ResJI/django-vue3-system

## Basic Information

- **Project Name**: django-vue3-system
- **Description**: 采用Django+RESTFramework、Vue3+ElementPlus等框架搭建的一套基础版的Web系统、可作为模板根据实际需求进行二次开发，内置用户和认证系统、Websocket通讯及示例、可快速搭建工控类应用
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/ResJI
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 9
- **Created**: 2021-12-31
- **Last Updated**: 2025-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Django, vue3, djangorestframework, elementPlus, Channels

## README

# django-vue3-system

## 一、项目图片

![桌面-登陆页面](./imgs/desktop-login.png)
![桌面-主页面1](./imgs/desktop-main1.png)
![桌面-主页面2](./imgs/desktop-main2.png)
![桌面-主页面3](./imgs/desktop-main3.png)
![桌面-用户页面](./imgs/desktop-user.png)
![桌面-头像修改](./imgs/desktop-avatar.png)

<div style='width:100%; display:flex'>
	<img width="49%" src="./imgs/mobile-login.png" alt="桌面-头像修改" />
	<img width="49%" src="./imgs/mobile-main1.png" alt="桌面-头像修改" />
</div>
<div style='width:100%; display:flex'>
	<img width="49%" src="./imgs/mobile-main2.png" alt="桌面-头像修改" />
	<img width="49%" src="./imgs/mobile-user.png" alt="桌面-头像修改" />
</div>
<div style='width:100%; display:flex'>
	<img width="49%" src="./imgs/mobile-avatar.png" alt="桌面-头像修改" />
</div>

## 二、系统概述

* 后端采用Python语言的Django框架进行开发，涉及到的模块如下：
  1. django
  2. djangorestframework
  3. django-cors-headers
  4. channels
  5. django-simple-captcha
  6. djangorestframework-simplejwt
  7. celery[redis,eventlet]
  8. psutil

* 前端采用Vue3、ElementPlus进行开发，涉及到的主要模块如下：
  1. vue
  2. vuex
  3. vue-router
  4. element-plus
  5. echarts
  6. axios
  7. js-cookie

## 三、功能概述

* 采用JWT用户认证系统进行用户认证

* 拥有用户系统

  1. 可通过Web修改个人信息
  2. 后端用户接口内容如下，详细API参照 `server/api文档/1.用户API.md`  
     a.用户注册接口  
     b.用户注销接口  
     c.用户认证接口  
     d.用户信息获取接口  
     e.用户信息修改接口  

* 采用Websocket进行数据通讯，并支持断线监测与重连功能
  可作为工业项目对设备进行程控(参照下位机页面)
*  Web针对手机端进行了响应式适配
*  后端采用Celery进行周期任务调度，并结合channels给前端主动推送服务器状态

## 四、源码地址

gitee地址：[https://gitee.com/ResJI/django-vue3-system](https://gitee.com/ResJI/django-vue3-system)

## 五、部署

### 1. 项目下载

该仓库采用的Git子模块的使用，作为前端和后端项目的汇总仓库，所以在源码下载时与以往略有不同，具体下载方式如下

#### a. 下载Zip包

1. 下载该仓库Zip包：[点击下载](https://gitee.com/ResJI/django-vue3-system/repository/archive/master.zip)

2. 下载服务器仓库Zip包：[点击下载](https://gitee.com/ResJI/server-django/repository/archive/master.zip)

3. 下载前端仓库Zip包：[点击下载](https://gitee.com/ResJI/web-vue3-element-plus/repository/archive/master.zip)

4. 分别解压、分别将 `server-django-master` 和 `web-vue3-element-plus-master` 文件夹内文件移动至

   `django-vue3-system-master` 中的 `server` 和 `web` 文件夹内 

#### b. Git克隆（推荐）

 1. 电脑安装Git

 2. 在bash或shell中输入

    ``` bash
    git clone --recursive https://gitee.com/ResJI/server-django.git
    ```

3. bash或shell所在工作目录下的 `django-vue3-system` 文件夹即为项目源码

### 2. 项目运行

1. 服务器端运行

   ``` bash
   cd server
   pip install -r requirements.txt          # 安装后端所需包
   python manage.py runserver 0.0.0.0:8010  # 启动服务器
   
   # 如需使用Celery周期调度，需安装并启用redis
   celery -A server worker -l info -P eventlet  # 启动Celery
   celery -A server beat -l info                # 启动Celery定时服务
   ```

2. Web

   ``` bash
   cd web
   npm install    # 安装前端所需环境
   npm run serve  # 启动开发服务器
   ```

3. 页面访问

   浏览器输入 [http://localhost:8080/](http://localhost:8080/)  进行访问

## 六、微信

- 微信号：Soobeit