遥遥领先，免费开源的django4-vue3前后端分离项目

一时失言乱红尘 2024-05-04 08:15 80阅读 0赞

#### 文章目录 ####

*   *  ?星域后台管理系统前端介绍
     *  ?项目简介
     *   *  ?项目开源仓库地址
         *  ?项目预览地址
         *   *  ?PC端
             *  ?移动端
     *  ? 框架以及使用技术栈介绍
     *  ? 安装
     *  ? 运行
     *  ? 打包
     *  ? 项目截图
     *   *  ? 登录和首页
         *  ? 书店管理（书籍管理，借书管理）
         *  ? 古文学习（古诗词学习，古籍学习）
     *  ?移动端截图
 *  ? 星域后台管理系统后端介绍
 *   *  ?项目简介
     *  ? 软件架构
     *  ? 使用教程
     *  ?后端管理平台可视化模块截图（simple-ui）
     *  ?后端代码和数据集部分截图
 *  ? 参与贡献

### ?星域后台管理系统前端介绍 ###

### ?项目简介 ###

本项目前端基于当下流行且常用的vue3作为主要技术栈进行开发，融合了typescript和element-plus-ui，提供暗黑模式和白昼模式两种主题以及全屏切换，开发bug少，简单易学，项目后端采用了python的django框架作为开发模块。

目前正在搭建到网络服务器中。项目会不定期更新喜欢的朋友赶紧收藏起来吧?

#### ?项目开源仓库地址 ####

[https://gitee.com/Chen\_SC/django-vue3/][https_gitee.com_Chen_SC_django-vue3]

#### ?项目预览地址 ####

##### ?PC端 #####

*  域名：
 *  [http://www.chensc.com.cn/][http_www.chensc.com.cn]
 *  该地址为原IP，如上域名无法进入，请通过下方IP地址进入查看
 *  [http://47.93.35.47][http_47.93.35.47]

##### ?移动端 #####

*  域名：
 *  [http://www.chensc.com.cn/mobile][http_www.chensc.com.cn_mobile]
 *  该地址为原IP，如上域名无法进入，请通过下方IP地址进入查看
 *  [http://47.93.35.47/mobile][http_47.93.35.47_mobile]

### ? 框架以及使用技术栈介绍 ###

前端主要采用了vue3+ts+element-plus-ui+echarts+axios+pinai等技术栈和框架搭建

<table> 
 <thead> 
  <tr> 
   <th>技术栈框架</th> 
   <th>官方地址</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vue3</td> 
   <td>https://cn.vuejs.org/</td> 
   <td>易学易用，性能出色，适用场景丰富的 Web 前端框架</td> 
  </tr> 
  <tr> 
   <td>typescript</td> 
   <td>https://www.tslang.cn/</td> 
   <td>JavaScript的一个超集，强类型语言</td> 
  </tr> 
  <tr> 
   <td>element-plus-ui</td> 
   <td>https://element-plus.gitee.io/zh-CN/</td> 
   <td>基于 Vue 3，面向设计师和开发者的组件库</td> 
  </tr> 
  <tr> 
   <td>axios</td> 
   <td>https://www.axios-http.cn/</td> 
   <td>Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。使用简单,包尺寸小且提供了易于扩展的接口。</td> 
  </tr> 
  <tr> 
   <td>pinia</td> 
   <td>https://pinia.vuejs.org/zh/</td> 
   <td>符合直觉的 Vue.js 状态管理库</td> 
  </tr> 
  <tr> 
   <td>echarts</td> 
   <td>https://echarts.apache.org/zh/index.html</td> 
   <td>一个基于 JavaScript 的开源可视化图表库</td> 
  </tr> 
 </tbody> 
</table>

### ? 安装 ###

使用了yarn作为包管理工具，安装使用

yarn

直接进行安装

### ? 运行 ###

yarn run serve

### ? 打包 ###

yarn run build

### ? 项目截图 ###

#### ? 登录和首页 ####

**暗黑主题模式**  
![在这里插入图片描述][66b593d4e9404064830dce4ffc817759.png_pic_center]

![在这里插入图片描述][180a3a9b3e0b4ccb8d5ed7b1a7de6a6b.png_pic_center]  
![在这里插入图片描述][fbfe4b10e62d4fddac9414579b16d4f0.png_pic_center]  
![在这里插入图片描述][5de8ed328d0a4c2099b71cc4bf97ee53.png_pic_center]

**白昼主题模式**  
![在这里插入图片描述][5a2fad94f96946b49584b494e4042efc.png_pic_center]

![在这里插入图片描述][2bcb7d71a5fa4ef49ce6c45aed5d5c36.png_pic_center]

#### ? 书店管理（书籍管理，借书管理） ####

**书籍管理**  
![在这里插入图片描述][56062eb504f846c1834c769dc666df6e.png_pic_center]  
**借书管理**  
![在这里插入图片描述][786240df0af94cd98d20cf206137dd05.png_pic_center]

#### ? 古文学习（古诗词学习，古籍学习） ####

**古诗词学习**  
![在这里插入图片描述][79a8ad9c80e34ffd878989886e309cf2.png_pic_center]  
![在这里插入图片描述][a2700b9e2f034811b44859bed95118d4.png_pic_center]  
**古籍学习**  
![在这里插入图片描述][80f31bd08b51459db3cfc1d02f60d329.png_pic_center]

![在这里插入图片描述][10b4a14b56b745f094b2f1d6409c3d4c.png_pic_center]

### ?移动端截图 ###

![在这里插入图片描述][a2c9db4123884f2abae3121e26285160.jpeg_pic_center]

![在这里插入图片描述][95a9f0e240f04a4088096a4edcdf9de6.jpeg_pic_center]

![在这里插入图片描述][c0cd5967f02441cdafb0259f973804e1.jpeg_pic_center]  
![在这里插入图片描述][9da43874a3f741aeaa26f56bbecf2c8f.jpeg_pic_center]

![在这里插入图片描述][d28ab204d2e4436ab34db69d6b439d17.jpeg_pic_center]

![在这里插入图片描述][a4e3d6d6a3374dd69778ee2e4d34ff2e.jpeg_pic_center]

![在这里插入图片描述][e6f7c938f0f1460f9f781c18b7c43ec3.jpeg_pic_center]

## ? 星域后台管理系统后端介绍 ##

### ?项目简介 ###

后端主要使用python语言进行开发，python简单易学，其中的django框架更是web系统开发的一个超级大利器，很多的和web相关的内置模块使得开发轻松快捷，很多时候一句代码就能解决大部分需求，使用ORM对数据库操作，减少了sql注入风险的同时，也对我们操作数据库提供了极大的便利。本项目主要使用python3.8加django4，安装时请注意相关版本。

### ? 软件架构 ###

*  主要使用三个模块：python+django+redis
 *  数据库方面使用简单的sqlite3（django项目搭建时会默认使用sqlite3且可以直接使用），不用像MySQL一样需要安装软件，简洁高效
 *  主要使用的第三方库：
    
     *  Django==4.1
     *  django-celery-beat==2.5.0
     *  django-celery-results==2.5.0
     *  django-cors-headers==3.13.0
     *  django-filter==21.1
     *  django-import-export==3.2.0
     *  django-simple-history==3.3.0
     *  django-simpleui==2023.3.1
     *  django-timezone-field==5.0
     *  djangorestframework==3.13.1
     *  djangorestframework-simplejwt==5.2.2
     *  PyJWT==2.6.0
     *  redis==4.5.4
     *  pycryptodome==3.19.0
     *  pycryptodomex==3.19.0
     *  Pillow==9.5.0

*  python的安装的主要第三方库请查看本目录下的：***requirements.txt*** 文件  
    安装命令：

pip install requirements.txt -r

*  用户验证方面没有使用django的jwt模块，而是使用了标准库的PyJWT模块，使用这个模块的好处是可以通过对token的验证更大的自由性，可以由开发者自己决定对token的验证规则（当然，内置的一些不可更改的规则还是不能改的）

### ? 使用教程 ###

1.  **【首先启动redis】** 请先打开本项目的 “Redis-x64-5.0.14.1” 目录而后双击启动

redis-server.exe

1.  **【其次启动django】** 打开cmd窗口使用命令（默认使用的9000端口，可自行修改）：

python manage.py runserver http://127.0.0.1:9000

### ?后端管理平台可视化模块截图（simple-ui） ###

![在这里插入图片描述][aaa1a9b83f5845289003e8e650928580.png_pic_center]  
![在这里插入图片描述][e73d35c17cd34cb789e80e680a62ebaf.png_pic_center]

### ?后端代码和数据集部分截图 ###

![在这里插入图片描述][33d0f09b4298415a9bac8484c2af42ab.png_pic_center]  
![在这里插入图片描述][2cfecd1d6ff94195922983a9ad76f95a.png_pic_center]  
![在这里插入图片描述][7da234718c5b4b6f9f76639679eac917.png_pic_center]

## ? 参与贡献 ##

*  目前开源仅限本人开发，不定期更新

[https_gitee.com_Chen_SC_django-vue3]: https://gitee.com/Chen_SC/django-vue3/
[http_www.chensc.com.cn]: http://www.chensc.com.cn/
[http_47.93.35.47]: http://47.93.35.47/
[http_www.chensc.com.cn_mobile]: http://www.chensc.com.cn/mobile
[http_47.93.35.47_mobile]: http://47.93.35.47/mobile
[66b593d4e9404064830dce4ffc817759.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/a476f494a79d47e9b18b7ff8ccf4b2c8.png
[180a3a9b3e0b4ccb8d5ed7b1a7de6a6b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/8867cd2561b244718a9f3a46de7a4538.png
[fbfe4b10e62d4fddac9414579b16d4f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/d067619dc03e4a2f9ce77abcd2626b40.png
[5de8ed328d0a4c2099b71cc4bf97ee53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/29982e3777d048ba858d88944f594053.png
[5a2fad94f96946b49584b494e4042efc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/cace960d587f4caebf142d626f14dbe5.png
[2bcb7d71a5fa4ef49ce6c45aed5d5c36.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/632b99234d8b44a3924d7e7f34e741b6.png
[56062eb504f846c1834c769dc666df6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/4b8607558087470a92043628b7505a05.png
[786240df0af94cd98d20cf206137dd05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/e3e852e10f2a431fa047193c5656334c.png
[79a8ad9c80e34ffd878989886e309cf2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/08da54de62e14081b4a84829d3c14f49.png
[a2700b9e2f034811b44859bed95118d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/18c5e3dbee9a46f08e7edec3ae569163.png
[80f31bd08b51459db3cfc1d02f60d329.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/277656776f2a4aa99d9c180e4a8c7643.png
[10b4a14b56b745f094b2f1d6409c3d4c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/b80d1e5f23cd4d6bb255e4735287b791.png
[a2c9db4123884f2abae3121e26285160.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/32da726d3412488a830d68a98dde942a.jpeg
[95a9f0e240f04a4088096a4edcdf9de6.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/81b7aa781a384523a39c755d3ce30bbf.jpeg
[c0cd5967f02441cdafb0259f973804e1.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/d9a8763169bf47f3bed0f182f4dd682d.jpeg
[9da43874a3f741aeaa26f56bbecf2c8f.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/6c1c00f1339b419bafe267a5ed49d3ac.jpeg
[d28ab204d2e4436ab34db69d6b439d17.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/1ba3480f0d924e71a24a50ea04311417.jpeg
[a4e3d6d6a3374dd69778ee2e4d34ff2e.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/9bd0e110c7ab40f9a5370a7728484348.jpeg
[e6f7c938f0f1460f9f781c18b7c43ec3.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/707101d38b844f55a134c0633dd4c20e.jpeg
[aaa1a9b83f5845289003e8e650928580.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/17928b40e0b745149d3e34c8b656a4c7.png
[e73d35c17cd34cb789e80e680a62ebaf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/555c1c3671474903a718e11c8ffd2c3a.png
[33d0f09b4298415a9bac8484c2af42ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/925abb56d2304f8fa29662717cb2d44e.png
[2cfecd1d6ff94195922983a9ad76f95a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/d7678b9ff13c4577bacff9d350435058.png
[7da234718c5b4b6f9f76639679eac917.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/82e6a74030364e0682cd7acab7c30f5b.png