一步步完整搭建一个图纸管理系统（Django+Vue3）

张元兵

图纸管理系统

一、初步构建后端项目

1、打开已经创建好的虚拟环境:激活activate（推荐使用虚拟环境）并创建项目

2、导入vs code中，项目环境大致如下：

需要将终端改成虚拟环境的解释器后，简单试运行：

3、创建子app（图纸管理系统模块）

由于我们把子项目都放在apps里面了（方便统一管理）所以注册要加入一段配置

4、创建数据库

一定要注意格式

5、设置Django连接数据库

（1）安装pymysql

1. pip install pymysql

复制代码

（2）gveInformationSystem/settings中进行相关配置

1. DATABASES = {
2.     'default': {
3.         'ENGINE': 'django.db.backends.mysql',
4.         'NAME': 'StudentDB',
5.         'USER': 'root',
6.         'PASSWORD': '123456',
7.         'HOST': 'localhost',
8.         'PORT': '3306',
9.     }
10. }

复制代码

（3）需要在init.py导入pymysql

6、创建数据库表内容

（在：apps/DrawingManagementSystem/models.py）

1. from django.db import models
4. # Create your models here.
5. # === 图纸管理系统 models
6. # 传感器分类--sensor， 项目--project， 资料-data， 图纸信息-drawing
8. # 公有创建时间和修改时间
9. class TimestampMode(models.Model):
10.     """
11.     An abstract base class model that provides selfupdating ``created`` and ``modified`` fields.
12.     """
13.     created = models.DateTimeField(auto_now_add=True)
14.     modified = models.DateTimeField(auto_now=True)
16.     class Meta:
17.         abstract = True  # it's very important to add this line
20. # === 传感器类 --- Sensor：Id,name,created,modified
21. class Sensor(TimestampMode):
22.     sensor_name = models.CharField(verbose_name="传感器名称", max_length=50, unique=True, null=False, blank=False)
24.     # create_time = models.DateTimeField(default=timezone.now().replace(microsecond=0))
26.     class Meta:
27.         db_table = "Draw_Sensor"
28.         managed = True
29.         app_label = "DrawingManagementSystem"
31.     def __str__(self):
32.         return "%s" % (self.sensor_name)
35. # === 项目类 --- project：Id,name,created,modified
36. class Project(TimestampMode):
37.     project_name = models.CharField(verbose_name="项目名称", max_length=50, unique=True, null=False, blank=False)
38.     sensor = models.ForeignKey(verbose_name="所属传感器", to=Sensor, on_delete=models.PROTECT)
40.     class Meta:
41.         db_table = "Draw_Project"
42.         managed = True
43.         app_label = "DrawingManagementSystem"
45.     def __str__(self):
46.         return "%s" % (self.project_name)
49. # === 资料类 --- data:ID,name,created,modified
50. class Data(TimestampMode):
51.     data_name = models.CharField(verbose_name="资料名称", max_length=50, unique=True, null=False, blank=False)
52.     sensor = models.ForeignKey(verbose_name="所属传感器", to=Sensor, on_delete=models.PROTECT)
53.     project = models.ForeignKey(verbose_name="所属项目", to=Project, on_delete=models.PROTECT)
55.     class Meta:
56.         db_table = "Draw_Data"
57.         managed = True
58.         app_label = "DrawingManagementSystem"
60.     def __str__(self):
61.         return "%s" % (self.data_name)
64. # === 图纸信息 --- drawing:ID(Material_code),drawing_name,created,modified,drawing_spec,drawing_page,drawing_client_id,drawing_remark,drawing_version
65. class Drawing(TimestampMode):
66.     material_code = models.CharField(verbose_name="物料编号", max_length=50, blank=False)
67.     sensor = models.ForeignKey(verbose_name="所属传感器", to=Sensor, on_delete=models.PROTECT)
68.     project = models.ForeignKey(verbose_name="所属项目", to=Project, on_delete=models.PROTECT)
69.     data = models.ForeignKey(verbose_name="所属资料", to=Data, on_delete=models.PROTECT)
70.     drawing_name = models.CharField(verbose_name="材料名称", max_length=50, blank=False)
71.     drawing_spec = models.CharField(verbose_name="规格/图纸号", max_length=50, blank=False)
72.     drawing_page = models.CharField(verbose_name="图纸页数", max_length=50, blank=False)
73.     drawing_client_id = models.CharField(verbose_name="客户编号", max_length=50)
74.     drawing_version = models.CharField(verbose_name="版本号", max_length=50, blank=False)
75.     drawing_remark = models.CharField(verbose_name="备注", max_length=100)
76.     drawing_url = models.CharField(verbose_name="地址", max_length=100)
77.     is_deleted = models.IntegerField(verbose_name="逻辑删除0否1是", max_length=10, blank=False, default=0)
79.     class Meta:
80.         db_table = "Draw_Drawing"
81.         managed = True
82.         app_label = "DrawingManagementSystem"
84.     def __str__(self):
85.         return "%s" % (self.drawing_name)

复制代码

（1）用指令生成数据库

1. python manage.py makemigrations
2. python manage.py migrate

复制代码

完成后代码如下：

7、DRF接口（初步）

（1）DRF的安装和快速实现
安装DjangoRestFramework包

1. pip install djangorestframework==3.13.0

复制代码

在settings中导入

序列化:负责对象和json格式的相互转换
​        a获取数据：对象-->Json返回给前端
​        b添加、修改：json-->对象 存储在数据库中
视图：实现后台功能的核心
​        早期：视图是基于函数--FBV
​        DRF：视图基于类--CBV
路由：路由的匹配
（2）序列化
创建DrawingManagementSystem\serializer.py文件

1. from rest_framework import serializers
2. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing
5. # ----Sensor序列化类----
6. class SensorSerialzer(serializers.ModelSerializer):
7.     class Meta:
8.         model = Sensor
9.         fields = "__all__"
11. # ____Project序列化类____
12. class ProjectSerialzer(serializers.ModelSerializer):
13.     class Meta:
14.         model = Project
15.         fields = "__all__"
17. # ____Data序列化类____
18. class DataSerialzer(serializers.ModelSerializer):
19.     class Meta:
20.         model = Data
21.         fields = "__all__"
23. # ____Drawing序列化类____
24. class DrawingSerialzer(serializers.ModelSerializer):
25.     class Meta:
26.         model = Drawing
27.         fields = "__all__"

复制代码

（3）编写view.py代码（apps\DrawingManagementSystem\views.py）

1. # ====== 导入模块 ======
2. from rest_framework.viewsets import ModelViewSet  # 封装完成的ModelViewset视图集
3. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing  # 具体的类
4. from DrawingManagementSystem.serializer import SensorSerialzer, ProjectSerialzer, DataSerialzer, DrawingSerialzer # 序列化类
6. # ---Sensor视图---
7. class SensorViewSet(ModelViewSet):
8.     queryset = Sensor.objects.all()
9.     serializer_class = SensorSerialzer
11. # ---Project---
12. class ProjectViewSet(ModelViewSet):
13.     queryset = Project.objects.all()
14.     serializer_class = ProjectSerialzer
16. # ---Data视图---
17. class DataViewSet(ModelViewSet):
18.     queryset = Data.objects.all()
19.     serializer_class = DataSerialzer
21. # ---Sensor视图---
22. class DrawingViewSet(ModelViewSet):
23.     queryset = Drawing.objects.all()
24.     serializer_class = DrawingSerialzer

复制代码

（4）编写urls.py代码（apps\DrawingManagementSystem\urls.py）

1. # ======导入模块======
2. from django.urls import path
3. from rest_framework.routers import DefaultRouter
4. from DrawingManagementSystem.views import SensorViewSet, ProjectViewSet, DataViewSet, DrawingViewSet
6. # ====1.实例化一个 DefaultRouter====
7. router = DefaultRouter()
9. # ====2.注册相应的url====
10. # 注册Sensor对象
11. router.register('Sensors', SensorViewSet, basename='Sensors') # http://127.0.0.1:8080/DrawingApi/v1/Sensors/
12. # 注册Sensor对象
13. router.register('Projects', ProjectViewSet, basename='Projects') # http://127.0.0.1:8080/DrawingApi/v1/Projects/
14. # 注册Sensor对象
15. router.register('Datas', DataViewSet, basename='Datas') # http://127.0.0.1:8080/DrawingApi/v1/Datas/
16. # 注册Sensor对象
17. router.register('Drawings', DrawingViewSet, basename='Drawings') # http://127.0.0.1:8080/DrawingApi/v1/Drawings/
19. urlpatterns = [
21. ]
23. # ====3.附加到urlpatterns集合中====
24. urlpatterns += router.urls

复制代码

编写总urls.py代码（gveInformationSystemBE\urls.py）

1. from django.contrib import admin
2. from django.urls import path,include
4. urlpatterns = [
5.     path('admin/', admin.site.urls),
6.     path('DrawingApi/v1/',include('DrawingManagementSystem.urls')),
7. ]

复制代码

编写后运行django项目

1. python manage.py runserver

复制代码

浏览器输入：http://127.0.0.1:8000/DrawingApi/v1/
可以看到界面如下：

说明简单后端接口已经完成，可以简单测试下：

发现存入的时间是北美市区，将gveInformationSystemBE\settings.py中的USE_TZ = True改为：USE_TZ = False
发现存入的时间是带毫秒：参考解决方法为

或者直接在数据库软件中

可以避免存入毫秒的问题
8、DRF进阶（增删改接口、筛选、搜索、分页）

其实在网址后面加上id，就可以进行数据的删除修改

（1）DRF的筛选
步骤为：
安装：pip install django-filter

1. pip install django-filter==21.1

复制代码

注册到installed_apps中

完成filter的筛选类
在apps\DrawingManagementSystem新建filter.py

1. # =====导入模块=====
2. from django_filters import FilterSet
3. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing
6. # ---Sensor的Filter类---
7. class SensorFilter(FilterSet):
8.     class Meta:
9.         model = Sensor
10.         fields = ('sensor_name',) # 传感器名称
13. # ---Project的Filter类---
14. class ProjectFilter(FilterSet):
15.     class Meta:
16.         model = Project
17.         fields = ('project_name', 'sensor') # 项目名称 所属传感器
20. # ---Data的Filter类---
21. class DataFilter(FilterSet):
22.     class Meta:
23.         model = Data
24.         fields = ('data_name', 'sensor', 'project') # 资料名称 所属传感器 所属项目
27. # ---Drawing的Filter类---
28. class DrawingFilter(FilterSet):
29.     class Meta:
30.         model = Drawing
31.         fields = ('drawing_name', 'material_code', 'drawing_spec', 'drawing_client_id')  # 材料名称、物料编号、规格/图纸号、客户编号

复制代码

在viewset中添加筛选类

1. # ====== 导入模块 ======
2. from rest_framework.viewsets import ModelViewSet  # 封装完成的ModelViewset视图集
3. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing  # 具体的类
4. from DrawingManagementSystem.serializer import SensorSerialzer, ProjectSerialzer, DataSerialzer, \
5.     DrawingSerialzer  # 序列化类
6. from django_filters.rest_framework import DjangoFilterBackend  # 实现筛选的后台模块
7. from DrawingManagementSystem.filter import SensorFilter, ProjectFilter, DataFilter, DrawingFilter
10. # ---Sensor视图---
11. class SensorViewSet(ModelViewSet):
12.     queryset = Sensor.objects.all()
13.     serializer_class = SensorSerialzer
14.     # 设定筛选的后台
15.     filter_backends = (DjangoFilterBackend,)
16.     # 指定筛选的类
17.     filter_class = SensorFilter
19. # ---Project---
20. class ProjectViewSet(ModelViewSet):
21.     queryset = Project.objects.all()
22.     serializer_class = ProjectSerialzer
23.     # 设定筛选的后台
24.     filter_backends = (DjangoFilterBackend,)
25.     # 指定筛选的类
26.     filter_class = ProjectFilter
29. # ---Data视图---
30. class DataViewSet(ModelViewSet):
31.     queryset = Data.objects.all()
32.     serializer_class = DataSerialzer
33.     # 设定筛选的后台
34.     filter_backends = (DjangoFilterBackend,)
35.     # 指定筛选的类
36.     filter_class = DataFilter
39. # ---Sensor视图---
40. class DrawingViewSet(ModelViewSet):
41.     queryset = Drawing.objects.all()
42.     serializer_class = DrawingSerialzer
43.     # 设定筛选的后台
44.     filter_backends = (DjangoFilterBackend,)
45.     # 指定筛选的类
46.     filter_class = DrawingFilter

复制代码

效果如下：

（2）筛选优化——模糊匹配

1. # =====导入模块=====
2. from django_filters import FilterSet,filters
3. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing
6. # ---Sensor的Filter类---
7. class SensorFilter(FilterSet):
8.     # 重新需要支持模糊匹配的字段
9.     sensor_name = filters.CharFilter(field_name='sensor_name',lookup_expr="icontains")
10.     class Meta:
11.         model = Sensor
12.         fields = ('sensor_name',) # 传感器名称
15. # ---Project的Filter类---
16. class ProjectFilter(FilterSet):
17.     # 重新需要支持模糊匹配的字段
18.     project_name = filters.CharFilter(field_name='project_name', lookup_expr="icontains")
19.     class Meta:
20.         model = Project
21.         fields = ('project_name', 'sensor') # 项目名称 所属传感器
24. # ---Data的Filter类---
25. class DataFilter(FilterSet):
26.     # 重新需要支持模糊匹配的字段
27.     data_name = filters.CharFilter(field_name='data_name', lookup_expr="icontains")
28.     class Meta:
29.         model = Data
30.         fields = ('data_name', 'sensor', 'project') # 资料名称 所属传感器 所属项目
33. # ---Drawing的Filter类---
34. class DrawingFilter(FilterSet):
35.     # 重新需要支持模糊匹配的字段
36.     drawing_name = filters.CharFilter(field_name='drawing_name', lookup_expr="icontains")
37.     material_code = filters.CharFilter(field_name='material_code', lookup_expr="icontains")
38.     drawing_spec = filters.CharFilter(field_name='drawing_spec', lookup_expr="icontains")
39.     drawing_client_id = filters.CharFilter(field_name='drawing_client_id', lookup_expr="icontains")
40.     class Meta:
41.         model = Drawing
42.         fields = ('drawing_name', 'material_code', 'drawing_spec', 'drawing_client_id')  # 材料名称、物料编号、规格/图纸号、客户编号

复制代码

（3）全局加入筛选后台
在gveInformationSystemBE\settings.py中加入

1. # ======= REST Framework全局设置 ===========
2. REST_FRAMEWORK = {
4.     # ==== 设置全局的Filter_Backends ====
5.     'DEFAULT_FILTER_BACKENDS': [
6.         'django_filters.rest_framework.DjangoFilterBackend',
7.     ],
10. }

复制代码

这样views.py中就不需要加入

1. # 设定筛选的后台
2.     filter_backends = (DjangoFilterBackend,)

复制代码

修改后代码如下：

1. # ====== 导入模块 ======
2. from rest_framework.viewsets import ModelViewSet  # 封装完成的ModelViewset视图集
3. from DrawingManagementSystem.models import Sensor, Project, Data, Drawing  # 具体的类
4. from DrawingManagementSystem.serializer import SensorSerialzer, ProjectSerialzer, DataSerialzer, \
5.     DrawingSerialzer  # 序列化类
6. from DrawingManagementSystem.filter import SensorFilter, ProjectFilter, DataFilter, DrawingFilter
9. # ---Sensor视图---
10. class SensorViewSet(ModelViewSet):
11.     queryset = Sensor.objects.all()
12.     serializer_class = SensorSerialzer
14.     # 指定筛选的类
15.     filter_class = SensorFilter
17. # ---Project---
18. class ProjectViewSet(ModelViewSet):
19.     queryset = Project.objects.all()
20.     serializer_class = ProjectSerialzer
22.     # 指定筛选的类
23.     filter_class = ProjectFilter
26. # ---Data视图---
27. class DataViewSet(ModelViewSet):
28.     queryset = Data.objects.all()
29.     serializer_class = DataSerialzer
31.     # 指定筛选的类
32.     filter_class = DataFilter
35. # ---Sensor视图---
36. class DrawingViewSet(ModelViewSet):
37.     queryset = Drawing.objects.all()
38.     serializer_class = DrawingSerialzer
40.     # 指定筛选的类
41.     filter_class = DrawingFilter

复制代码

（4）加入搜索
筛选【filter】：一个值只能对应一个字段，需要django-filter
搜索【search】；一个值能对应多个字段，DRF自带
在gveInformationSystemBE\settings.py中加入'rest_framework.filters.SearchFilter',

1. # ======= REST Framework全局设置 ===========
2. REST_FRAMEWORK = {
4.     # ==== 设置全局的Filter_Backends ====
5.     'DEFAULT_FILTER_BACKENDS': [
6.         'django_filters.rest_framework.DjangoFilterBackend',
7.         'rest_framework.filters.SearchFilter',
9.     ],
12. }

复制代码

在apps\DrawingManagementSystem\views.py中加入需要搜索匹配的字段

1. # ---Sensor视图---
2. class DrawingViewSet(ModelViewSet):
3.     queryset = Drawing.objects.all()
4.     serializer_class = DrawingSerialzer
6.     # 指定筛选的类
7.     filter_class = DrawingFilter
8.     # 指定查找匹配的字段
9.     search_fields = ('drawing_name', 'material_code', 'drawing_spec', 'drawing_client_id')

复制代码

结果如下：

（5）加入分页
有2种，一种为全局
即在在gveInformationSystemBE\settings.py中加入

1. # ======= REST Framework全局设置 ===========
2. REST_FRAMEWORK = {
4.     # ==== 设置全局的Filter_Backends ====
5.     'DEFAULT_FILTER_BACKENDS': [
6.         'django_filters.rest_framework.DjangoFilterBackend',
7.         'rest_framework.filters.SearchFilter',
9.     ],
10.     # ===== 设置分页 ===============
11.     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
12.     'PAGE_SIZE': 10
15. }

复制代码

还有一种为：按需分页
apps\DrawingManagementSystem下新建paginations.py
代码如下：

1. # ========== 导入 ===========
2. from rest_framework.pagination import PageNumberPagination
5. class MyPageNumberPagination(PageNumberPagination):
6.     page_size = 5
7.     page_query_param = "page"
8.     page_size_query_param = 'size'
9.     max_page_size = 50

复制代码

在apps\DrawingManagementSystem\views.py中加入：

1. from DrawingManagementSystem.paginations import MyPageNumberPagination
2. ###
3. ###
4. ###
5. # ---Sensor视图---
6. class DrawingViewSet(ModelViewSet):
7.     queryset = Drawing.objects.all()
8.     serializer_class = DrawingSerialzer
9.     pagination_class = MyPageNumberPagination
11.     # 指定筛选的类
12.     filter_class = DrawingFilter
13.     # 指定查找匹配的字段
14.     search_fields = ('drawing_name', 'material_code', 'drawing_spec', 'drawing_client_id')

复制代码

效果如下：

9、添加Swagger文档

记得在setting中注册

1. INSTALLED_APPS = [
2.     'django.contrib.admin',
3.     'django.contrib.auth',
4.     'django.contrib.contenttypes',
5.     'django.contrib.sessions',
6.     'django.contrib.messages',
7.     'django.contrib.staticfiles',
8.     'DrawingManagementSystem',
9.     'rest_framework',
10.     'django_filters',
11.     'drf_yasg',
12. ]

复制代码

效果如下：

想要中文注释

效果如下：

来源:https://www.cnblogs.com/lightwower/p/17428880.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！