django+vue+mysql

### 配置Django以使用MySQL 为了使Django能够与MySQL数据库协同工作，在`settings.py`文件中需指定相应的数据库设置[^1]： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'your_database_name', # 数据库名称 'USER': 'your_username', # 用户名 'PASSWORD': 'your_password', # 密码 'HOST': 'localhost', # 主机地址，默认为本地主机 'PORT': '3306' # 端口号，默认为3306 } } ``` ### 实现Django模型设计 在Django应用中的`models.py`文件内定义所需的数据结构，比如书籍管理系统的实体关系模型。这里展示了一个简单的例子，其中包含了书本、作者和类别的基本属性[^2]。 ```python from django.db import models class Category(models.Model): name = models.CharField(max_length=100) def __str__(self): return self.name class Author(models.Model): first_name = models.CharField(max_length=100) last_name = models.CharField(max_length=100) def full_name(self): return f"{self.first_name} {self.last_name}" def __str__(self): return self.full_name() class Book(models.Model): title = models.CharField(max_length=200) author = models.ForeignKey(Author, on_delete=models.CASCADE) category = models.ManyToManyField(Category) def __str__(self): return self.title ``` 随后通过命令行工具执行如下指令完成数据库同步操作: ```bash python manage.py makemigrations python manage.py migrate ``` ### 构建Vue前端界面并与Django API交互 对于前端部分，则可以采用Vue.js构建用户界面，并利用Axios发起HTTP请求访问由Django REST framework提供的API接口。下面是一个简化版的Vue组件实例，用于显示来自服务器端的一系列图书记录。 ```html <template> <div id="app"> <h1>Book List</h1> <ul v-if="books.length > 0"> <li v-for="(book, index) in books" :key="index">{{ book.title }}</li> </ul> <p v-else>No data available.</p> </div> </template> <script> import axios from "axios"; export default { name: "App", data() { return { books: [], }; }, mounted() { this.fetchBooks(); }, methods: { async fetchBooks() { try { const response = await axios.get("/api/books/"); this.books = response.data; } catch (error) { console.error(error); } }, }, }; </script> ``` 在此基础上还可以进一步扩展功能模块，如增加CRUD（创建、读取、更新、删除）能力等特性，从而形成完整的Web应用程序解决方案。