%20(2).svg)
项目简介
本项目是基于Django和Vue.js构建的项目管理系统，采用前后端分离开发模式。Django负责后端业务逻辑、数据库操作与API接口构建，Vue.js专注于前端界面展示和用户交互。运用Django Rest Framework简化API开发，借助Element UI组件库提升前端美观度与易用性，集成Echarts实现数据可视化展示。
项目的主要特性和功能
- 前后端分离架构：前后端独立开发，提高开发效率，便于维护和扩展。
- 丰富的API接口：通过Django Rest Framework构建全面API接口，支持项目数据的增删改查操作。
- 权限管理：自定义权限类，仅管理员可修改数据，其他用户只能查看。
- 分页与过滤：支持数据分页展示和按条件过滤，提升用户体验。
- 动态导航栏：导航栏数据可动态加载，通过配置文件方便管理。
- 数据可视化：使用Echarts库将项目数据以图表形式展示，直观呈现数据分布和趋势。
- JWT身份验证：集成JWT身份验证机制，保障系统安全性。
安装使用步骤
后端部分
- 创建应用：在项目根目录下，执行
python manage.py startapp article创建应用。 - 数据库连接：安装
pymysql，并在总目录的Init.py中配置，同时在settings.py中设置数据库连接信息。 - 注册应用：在
settings.py的INSTALLED_APPS中注册article应用。 - 配置路由：在
admin/urls.py和article/urls.py中配置访问路径。 - 安装依赖库：使用
pip安装djangorestframework、markdown、django-filter等依赖库，并在settings.py中注册。 - 编写模型：在
models.py中定义项目数据模型。 - 数据迁移：执行
python manage.py makemigrations和python manage.py migrate进行数据迁移。 - 创建序列化器：在
serializers.py中创建序列化器，将Python对象转换为JSON格式。 - 创建视图集：在
views.py中创建视图集，处理API请求。 - 创建超级用户：执行
python manage.py createsuperuser创建超级用户，用于登录后台管理系统。 - 配置权限和认证：在
permissions.py中定义权限类，并在视图集中配置；安装djangorestframework-simplejwt实现JWT身份验证。
前端部分
- 安装Vue CLI：在项目文件夹的终端中，执行
npm install -g vue-cli安装Vue CLI。 - 初始化项目：执行
vue init webpack front - end初始化Vue项目。 - 安装依赖库：使用
npm安装element-ui、axios、echarts等依赖库，并在项目中引入。 - 解决跨域问题：可通过在
frontend/vue.config.js中设置代理或在后端引入django-cors-middleware解决跨域问题。 - 编写前端代码：在
views文件夹中创建页面组件，在config文件夹中配置导航栏数据，在utils文件夹中编写图表配置文件。 - 配置路由：在
router/index.js中配置路由，实现页面跳转。
运行项目
- 启动后端服务：在项目根目录下，执行
python manage.py runserver启动Django服务。 - 启动前端服务：在
front-end文件夹中，执行npm run dev启动Vue服务。 - 访问项目：打开浏览器，访问
http://localhost:8080即可查看项目。
部署项目
- 打包前端项目：在
front-end文件夹中，执行npm run build打包前端项目。 - 配置Django：在
settings.py中配置模板和静态文件路径，将打包后的前端文件嵌入Django项目。 - 部署到服务器：可将项目部署到PythonAnywhere等云服务平台，按照平台的文档进行配置和部署。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】