Python+Django+Vue+MySql图书

### 使用 Python Django Vue MySQL 开发图书管理系统的概述 构建一个完整的图书管理系统涉及多个方面的工作，从前端界面设计到后端逻辑处理以及数据库交互。以下是针对这一特定应用领域内各组件的作用说明。 #### 1. 后端开发 (Django) 在 `settings.py` 文件中配置数据库连接参数以确保能够顺利访问 MySQL 数据库[^2]： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'library_management_system', # 替换为实际使用的数据库名称 'USER': 'root', # 用户名 'PASSWORD': '', # 密码 'HOST': 'localhost', # 主机地址 'PORT': '3306' # 端口号，默认情况下可以省略此选项 } } ``` 为了使应用程序能够在启动时自动加载并注册所需的驱动程序，在项目的根目录下的 `_init_.py` 中加入如下代码片段来初始化 PyMySQL 并将其作为默认的 MySQL 驱动器[^1]: ```python import pymysql pymysql.install_as_MySQLdb() ``` 定义模型类用于表示书籍实体及其属性字段，例如 ISBN 编号、书名、作者姓名等信息存储于关系型表格之中。通过继承自 `models.Model` 的方式创建新的数据表结构体，并利用迁移命令同步至目标数据库实例当中去。 ```python from django.db import models class Book(models.Model): isbn = models.CharField(max_length=13, unique=True) title = models.TextField(null=False) author = models.CharField(max_length=255, null=False) # 执行 makemigrations 和 migrate 来更新 schema 变更 ``` 编写视图函数负责接收来自客户端发出的各种请求消息（GET/POST），并对之作出响应；同时也可以在此处实现业务流程控制逻辑，比如查询符合条件记录列表、新增单条或多条目项操作等功能特性支持。 ```python from rest_framework.views import APIView from .serializers import BookSerializer from rest_framework.response import Response from .models import Book class BooksList(APIView): def get(self, request): books = Book.objects.all() serializer = BookSerializer(books, many=True) return Response(serializer.data) def post(self, request): serializer = BookSerializer(data=request.data) if serializer.is_valid(): serializer.save() return Response(status=status.HTTP_201_CREATED) return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST) ``` #### 2. 前端展示 (Vue.js) 安装必要的依赖包以便后续工作中调用 RESTful Web Service 接口获取远程服务器返回的数据集资源集合。 ```bash npm install axios vue-router --save ``` 设置路由映射规则从而允许用户浏览不同页面之间切换而无需刷新整个浏览器窗口标签页内容本身。 ```javascript // main.js import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' const routes = [ { path: '/', component: Home }, ] const router = createRouter({ history: createWebHistory(), routes, }) new Vue({ render: h => h(App), router }).$mount('#app') ``` 创建组件文件夹用来放置各个独立功能模块对应的 HTML 模板标记语言描述文档以及其他静态资产素材资料等等。 ```html <!-- components/Home.vue --> <template> <div class="home"> <!-- 显示所有书籍 --> <ul v-for="(book, index) in books" :key="index"> {{ book.title }} by {{ book.author }} </ul> <!-- 添加新书 --> <form @submit.prevent="addBook()"> Title:<input type="text" v-model="title"/> Author:<input type="text" v-model="author"/> <button>Add</button> </form> </div> </template> <script> export default { name: "Home", data() { return { books: [], title: "", author: "" }; }, methods: { addBook() { this.$http.post("/api/books/", {"title":this.title,"author":this.author}).then(response=>{ console.log('success'); }); } }, mounted(){ this.$http.get('/api/books/') .then((response)=>{ this.books=response.body; }) } }; </script> ``` #### 3. 客户端与服务端通信机制 采用 Axios 库发起 HTTP 请求并与远端 API 进行互动交流，进而完成诸如读取现有藏品详情概览或是提交待录入的新作品元数据等一系列在线事务活动过程中的信息交换工作。 ```javascript axios.defaults.baseURL = '/api/'; axios.interceptors.request.use(config => config); axios.interceptors.response.use(res => res); async function fetchBooks() { try { const response = await axios.get('books/'); console.table(response.data); // 输出接收到的结果对象数组形式呈现给开发者查看调试用途 } catch(error){ alleet(`Error fetching books ${error}`); } } fetchBooks(); ```