前后端分离

技术栈：

前端：

• Vue

• Vue CLI

• Element UI

• Axios

后端:

• Django
• Django REST framework
• Mysql

前端初始化项目:

• 使用Vue CLI创建项目

  vue create student-management-front #创建项目
  cd student-management-front #进入项目目录

• 安装Element UI和Axios

  vue add element
  npm install axios

• 学生列表页面

  • 在src/views下创建StudentsList.vue文件。

  • 编写获取学生列表的Vue方法和Element UI表格展示数据。

• <template>
    <div>
      <el-table :data="students">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        students: []
      };
    },
    async created() {
      try {
        const response = await axios.get('http://localhost:8000/api/students/');
        this.students = response.data;
      } catch (error) {
        console.error('Error fetching students:', error);
      }
    }
  };
  </script>

  后端：

• 初始化项目

  • 创建虚拟环境并安装Django和Django REST Framework：

    pip install django djangorestframework mysqlclient

  • 创建一个新的Django项目和应用：

    # django-admin startproject student_management
    # cd student_management
    # python manage.py startapp students

• 数据库配置

  • 修改student_management/settings.py中的数据库配置：

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'your_db_name',
            'USER': 'your_db_user',
            'PASSWORD': 'your_db_password',
            'HOST': 'localhost',
            'PORT': '',
        }
    }

• 模型和序列化器

  • 在students/models.py中定义学生模型：

    from django.db import models
    
    class Student(models.Model):
        name = models.CharField(max_length=100)
        age = models.IntegerField()
    
        def __str__(self):
            return self.name

  • 在students/serializers.py中定义序列化器：

    from rest_framework import serializers
    from .models import Student
    
    class StudentSerializer(serializers.ModelSerializer):
        class Meta:
            model = Student
            fields = ['id', 'name', 'age']

• 视图和路由

  • 在students/views.py中定义视图：

    from rest_framework import viewsets
    from .models import Student
    from .serializers import StudentSerializer
    
    class StudentViewSet(viewsets.ModelViewSet):
        queryset = Student.objects.all()
        serializer_class = StudentSerializer

  • 在students/urls.py中定义路由，并在student_management/urls.py中包含它：

    from django.urls import path, include
    from rest_framework.routers import DefaultRouter
    from .views import StudentViewSet
    
    router = DefaultRouter()
    router.register('api/students', StudentViewSet, basename='student')
    
    urlpatterns = [
        path('', include(router.urls)),
    ]

• 迁移和启动服务器

  python manage.py makemigrations students
  python manage.py migrate
  python manage.py runserver

• 测试

确保前端Vue应用指向正确的后端API地址，然后分别启动前端和后端服务，你应该能够看到学生信息列表被成功展示。