在 Django 框架中，从 MySQL 数据库获取数据并在前端页面展示通常包括以下几个关键步骤： ### 1. 配置数据库连接 首先需要配置 `settings.py` 文件以连接到 MySQL 数据库。确保安装了 `mysqlclient` 或 `pymysql` 库，并正确设置数据库引擎、名称、用户和密码。 ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'your_database_name', 'USER': 'your_database_user', 'PASSWORD': 'your_database_password', 'HOST': 'localhost', # 或者是远程主机地址 'PORT': '3306', } } ``` ### 2. 创建模型（Model） 在 `models.py` 中定义一个与数据库表对应的模型类。Django ORM 将根据这个类自动映射到相应的数据库表。 ```python from django.db import models class CarEngines(models.Model): engine_type = models.CharField(max_length=100) horsepower = models.IntegerField() manufacturer = models.CharField(max_length=100) def __str__(self): return self.engine_type ``` ### 3. 数据序列化 为了将模型数据转换为 JSON 格式以便前端使用，可以借助 Django REST Framework 的 `serializers.ModelSerializer` 来实现序列化。 ```python from rest_framework import serializers from .models import CarEngines class CarEnginesSerializer(serializers.ModelSerializer): class Meta: model = CarEngines fields = '__all__' # 表示序列化所有字段 ``` ### 4. 编写视图函数或类 在 `views.py` 中编写一个基于类的视图来处理 GET 请求并返回 JSON 数据。 ```python from rest_framework.views import APIView from rest_framework.response import Response from .models import CarEngines from .serializers import CarEnginesSerializer class CarModelAPIView(APIView): def get(self, request): engines = CarEngines.objects.all() serializer = CarEnginesSerializer(instance=engines, many=True) return Response(serializer.data) ``` ### 5. 设置 URL 路由 在 `urls.py` 中注册路径以访问上述视图。 ```python from django.urls import re_path from .views import CarModelAPIView urlpatterns = [ re_path(r'^carmodel/$', CarModelAPIView.as_view(), name='car-model-api'), ] ``` ### 6. 前端展示数据 在前端页面中，可以通过 AJAX 请求从后端获取数据，并将其渲染到 HTML 页面上。例如，在 Vue.js 项目中，可以这样请求数据并绑定到模板： ```javascript import axios from 'axios'; export default { data() { return { carEngines: [] }; }, mounted() { axios.get('http://your-django-server/carmodel/') .then(response => { this.carEngines = response.data; }) .catch(error => { console.error("Error fetching data:", error); }); } }; ``` 然后在 Vue 模板中循环显示数据： ```html <template> <div> <ul> <li v-for="engine in carEngines" :key="engine.id"> {{ engine.engine_type }} - {{ engine.horsepower }} HP - {{ engine.manufacturer }} </li> </ul> </div> </template> ``` ### 7. 启用跨域支持（可选） 如果前端和后端运行在不同的域名或端口下，则需要启用跨域支持。可以在 Django 项目中安装 `django-cors-headers` 并进行如下配置： ```python # settings.py INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] CORS_ORIGIN_ALLOW_ALL = True # 允许所有来源，生产环境应更严格控制 ``` 通过以上步骤，即可完成从 Django 后端读取 MySQL 数据库中的信息，并将其展示在前端网页上的全过程 [^2]。 ---