基于Python+Django+Vue+Mysql前后端分离的图书管理系统

利用空闲休息时间开始自己写了一套图书管理系统。现将源码开源，项目遇到问题

Python+Django+Vue图书管理系统开发全流程

大家好，我是程序员科科，这是我开源的基于Python+Django+Vue的图书管理系统

希望可以帮助想学前后端分离的同学

项目中遇到问题欢迎添加微信python_kk一起探讨

如果感觉项目还不错，请帮我点个star~

项目运行截图

首页

出版社

图书

作者

怎么运行项目

前端

npm install

npm run dev

后端

使用虚拟环境

python manage.py runserver 127.0.0.1:8000

前端8080端口，后端8000端口

1、pycharm创建django项目（使用虚拟环境，避免项目干扰）

2、配置总路由

from django.urls import path,re_path,include from django_vue_tushu.settings import MEDIA_ROOT from django.contrib import admin from dvtushu import views from django.views.static import serve from rest_framework.documentation import include_docs_urls urlpatterns = [ # 接口文档 path('docs/', include_docs_urls(title='tushu')), path('admin/', admin.site.urls), path('django_vue_tushu/', include('dvtushu.urls'),name='dvtushu'), # 图片上传接口 re_path('img_upload/', views.img_uploadApiview.as_view()), # 前端查找图片地址 re_path('upimg/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}) ]

3、配置子路由

from django.urls import path,re_path from . import views urlpatterns = [ # path('/', ), ]

3、启动项目

python manage.py runserver 127.0.0.1 或者 pycharm 启动

4、安装依赖（有默认前后端分离所需依赖）

pip install -r .\utils\requ.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

依赖放入 /utils/requirements.txt

asgiref==3.7.2 certifi==2024.2.2 cffi==1.15.1 charset-normalizer==3.3.2 coreapi==2.3.3 coreschema==0.0.4 cryptography==42.0.2 Django==3.2.23 django-cors-headers==4.1.0 django-filter==23.5 django-rest-swagger==2.2.0 djangorestframework==3.14.0 djangorestframework-jwt==1.11.0 drf-yasg==1.21.7 idna==3.6 inflection==0.5.1 install==1.3.5 itypes==1.2.0 Jinja2==3.1.3 MarkupSafe==2.1.5 openapi-codec==1.3.2 packaging==24.0 pycparser==2.21 PyJWT==1.7.1 PyMySQL==1.1.0 pytz==2023.4 PyYAML==6.0.1 requests==2.31.0 simplejson==3.19.2 sqlparse==0.4.4 typing_extensions==4.7.1 uritemplate==4.1.1 urllib3==1.26.12

5、修改数据库

djvue_school_shop/settings.py

DATABASES = { "default": { "ENGINE": "django.db.backends.mysql", "HOST": "127.0.0.1", "PORT": 3306, "USER": "root", "PASSWORD": "123456", "NAME": "dvlvyou", } }

djvue_school_shop/init.py

import pymysql pymysql.install_as_MySQLdb()

6、设置settings相关内容

（1）：添加跨域和djangorestframework

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'djvue_schoolshop.apps.DjvueSchoolshopConfig', 'corsheaders', 'rest_framework', ]

（2）：添加跨域中间件和注释csrf

MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware', ]

（3）：时间中国

LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'Asia/Shanghai'

（4）：添加跨域请求头和请求地址相关

# # # CORS组的配置信息 # CORS_ORIGIN_WHITELIST = ( # #'www.hippo.cn:8080', #如果这样写不行的话，就加上协议(http://www.hippo.cn:8080，因为不同的corsheaders版本可能有不同的要求) # 'http://127.0.0.1:8080', # ) CORS_ORIGIN_ALLOW_ALL = True # 是否允许ajax跨域请求时携带cookie，False表示不用，我们后面也用不到cookie，所以关掉它就可以了，以防有人通过cookie来搞我们的网站 CORS_ALLOW_CREDENTIALS = False # 请求方法 CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) # 允许的请求头，不能用*，要写具体的请求头，不然Vue会跨域失败，在这里坑了我好久好久MD CORS_ALLOW_HEADERS = ( '*' )

（5）：添加djangorestframework全局处理类

REST_FRAMEWORK = { # 异常处理 # 'EXCEPTION_HANDLER': 'hippo_api.utils.exceptions.custom_exception_handler', # jwt 'DEFAULT_AUTHENTICATION_CLASSES': ( # 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', 'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', # 'dj_vue_jc.TokenAuthtication.TokenAuthtication', ), }

（6）：添加媒体上传文件配置

# 指定文件获取的url路径 MEDIA_URL = "/upimg/" # 文件上传的保存路径 MEDIA_ROOT = BASE_DIR / 'upimg'

7、创建媒体文件

upimg

8、urls中设置前端文件图片上传地址和访问地址

from django.urls import path,re_path,include from django_vue_tushu.settings import MEDIA_ROOT from django.contrib import admin from dvtushu import views from django.views.static import serve from rest_framework.documentation import include_docs_urls urlpatterns = [ # 接口文档 path('docs/', include_docs_urls(title='tushu')), path('admin/', admin.site.urls), path('django_vue_tushu/', include('dvtushu.urls'),name='dvtushu'), # 图片上传接口 re_path('img_upload/', views.img_uploadApiview.as_view()), # 前端查找图片地址 re_path('upimg/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}) ]

9、views 设置图片上传接口

# 前台返回格式 ret = { "data": {}, "meta": { "status": 200, "message": "注册成功" } } # 图片上传接口 class img_uploadApiview(View): def get(self, request): return JsonResponse(data={'code': 200, 'message': '方法测试'}) # 图片上传接口通过 request.data 可以接收到前端发来的 def post(self,request): response = {} dataduixiang = request.POST.get('data','') file = request.FILES.get('file') # try: # 构造图片保存路径 路径为<USER_AVATAR_ROOT + 文件名> # USER_AVATAR_ROOT刚刚在settings.py中规定过，需要导入进来 file_path = os.path.join(settings.MEDIA_ROOT, file.name) # 保存图片 print(dataduixiang,file) with open(file_path, 'wb+') as f: f.write(file.read()) f.close() response['file'] = file.name # 返回新的文件名 response['code'] = 0 response['msg'] = "图片上传成功！" return JsonResponse(data={'code': 200, 'message': '上传成功', 'data': response})

10、启动项目

python manage.py runserver 127.0.0.1:8000

11、数据库设计

from django.db import models # Create your models here. # 管理表 class Guanli(models.Model): username = models.CharField(max_length=255) password = models.TextField() from django.db import models # Create your models here. class Book(models.Model): title = models.CharField(max_length=32, verbose_name="书籍名称") price = models.IntegerField(verbose_name="价格") # pub_date = models.DateField(verbose_name="出版日期") img_url = models.CharField(max_length=255, null=True,blank=True,verbose_name="") bread = models.IntegerField(verbose_name="阅读量") bcomment = models.IntegerField(verbose_name="评论量") publish = models.ForeignKey("Publish", on_delete=models.CASCADE, verbose_name="出版社") authors = models.ManyToManyField("Author",verbose_name="作者") def __str__(self): return self.title class Publish(models.Model): name = models.CharField(max_length=32, verbose_name="出版社名称") email = models.EmailField(verbose_name="出版社邮箱") def __str__(self): return self.name class Author(models.Model): name = models.CharField(max_length=32, verbose_name="作者") age = models.IntegerField(verbose_name="年龄") def __str__(self): return self.name

12、迁移

python manage.py makemigrations python manage.py migrate

13、登录接口

url

# 登录接口 path('logintest/', views.LoginView.as_view()),

view

from .TokenAuthtication import TokenAuthtication from rest_framework.response import Response from django.core.paginator import Paginator from rest_framework.views import APIView from django.views import View from django.http import HttpResponse,JsonResponse from django_vue_tushu import settings from .Serializer import * from .models import * import datetime import jwt import os class LoginView(APIView): def post(self, request): ret = { "data": {}, "meta": { "status": 200, "message": "" } } try: username = request.data["username"] password = request.data["password"] value = int(request.data["value"]) if value == 1: user = Guanli.objects.filter(username=username,password=password) print(username,password,value,user) if user.count == 0: ret["meta"]["status"] = 500 ret["meta"]["message"] = "用户不存在或密码错误" return Response(ret) elif user and user.first().password: dict = { "exp": datetime.datetime.now() + datetime.timedelta(days=1), # 过期时间 "iat": datetime.datetime.now(), # 开始时间 "id": user.first().id, "username": user.first().username, } token = jwt.encode(dict, settings.SECRET_KEY, algorithm="HS256") ret["data"]["token"] = token ret["data"]["username"] = user.first().username ret["data"]["user_id"] = user.first().id # 这里需要根据数据库判断是不是管理员 ret["data"]["isAdmin"] = 1 ret["meta"]["status"] = 200 ret["meta"]["message"] = "登录成功" print(ret,type(ret)) return Response(ret) else: ret["meta"]["status"] = 500 ret["meta"]["message"] = "用户不存在或密码错误" return Response(ret) except Exception as error: print(error) ret["meta"]["status"] = 500 ret["meta"]["message"] = "用户不存在或密码错误" return Response(ret)

14、创建Serializer

djvue_schoolshop

from rest_framework import serializers from rest_framework.serializers import ModelSerializer from . import models class GuanliModelSerializers(ModelSerializer): """管理员信息模型序列化器""" username = serializers.CharField(read_only=True) class Meta: model = models.Guanli fields = '__all__' class PublishSerializer(serializers.ModelSerializer): class Meta: model=models.Publish fields = "__all__" class AuthorSerializer(serializers.ModelSerializer): class Meta: model=models.Author fields = "__all__" class BookInfoModelSerializermodel(serializers.ModelSerializer): # 使用PublishSerializer作为publish字段的嵌套序列化器 publish = PublishSerializer(read_only=True) # 使用主键字段类型 并且将publish_id设置为"只写"，也就是读取的时候不会返回！ publish_id = serializers.PrimaryKeyRelatedField(queryset=models.Publish.objects.all(), source='publish', write_only=True) # 使用AuthorSerializer作为author字段的嵌套序列化器 authors = AuthorSerializer(read_only=True, many=True) # 使用主键字段类型 并且将author_id设置为"只写"，也就是读取的时候不会返回！ authors_id = serializers.PrimaryKeyRelatedField(queryset=models.Author.objects.all(), source='authors', write_only=True, many=True) class Meta: model = models.Book # fields = ['id', 'title', 'price', 'pub_date', 'bread', 'bcomment', 'publish_id', 'publish', 'authors', # 'authors_id'] fields = "__all__" # depth = 1

总结

### 文章总结：Python+Django+Vue图书管理系统开发全流程
**项目背景**：
- 程序员科科利用空闲时间开发了一套基于Python+Django+Vue的图书管理系统，并决定将其源码开源，以帮助想学习前后端分离技术的同学。
**项目亮点**：
- 完整的图书管理系统，包括出版社、图书、作者等模块。
- 前后端分离架构，前端使用Vue，后端使用Django。
- 提供项目运行截图和详细的开发流程。
**项目运行步骤**：
1. **前端环境搭建**：
- 使用npm安装依赖：`npm install`
- 启动前端服务：`npm run dev`（默认端口8080）
2. **后端环境搭建**：
- 使用PyCharm创建Django项目，并配置虚拟环境。
- 配置总路由和子路由。
- 修改数据库配置，支持MySQL。
- 安装依赖：`pip install -r .\utils\requirements.txt`
- 修改Django设置，包括跨域、时区、静态文件等。
- 创建数据库模型并迁移。
3. **项目启动**：
- 前端启动后，在浏览器访问前端页面。
- 后端通过Django命令启动：`python manage.py runserver 127.0.0.1:8000`（默认端口8000）。
**关键代码和配置**：
- **路由配置**：包括接口文档、图片上传接口、前端图片访问地址等。
- **数据库模型**：定义了出版社（Publish）、图书（Book）、作者（Author）等模型，并配置了多对多关系。
- **图片上传接口**：在views中设置了图片上传的接口，并配置了图片保存路径和访问路径。
- **登录接口**：实现了用户登录功能，使用JWT进行用户认证。
- **序列化器**：定义了各模型的序列化器，用于数据的前后端传输。
**项目问题和支持**：
- 项目中遇到问题欢迎添加微信python_kk一起探讨。
- 如果感觉项目还不错，请点star支持。
**总结**：
该项目是一个完整的图书管理系统，通过前后端分离的方式，使用Python+Django+Vue技术栈开发。项目提供了详细的开发流程和代码示例，适合想学习前后端分离技术的同学参考和学习。同时，项目也开放了源码，欢迎大家一起探讨和改进。 urlpythondocrfiwordtokenapisql管理系统数据库mysqlcodejsonpycharm虚拟环境mmocreateparse管理员开发流程