【Django+Vue3 线上教育平台项目实战】构建高效线上教育平台之首页模块

Django+Vue3 线上教育平台项目实战：构建高效线上教育平台之首页模块

在现代在线教育平台中，首页模块作为用户首次访问的界面，其重要性不言而喻。为了构建一个高效且用户友好的线上教育平台，我们将使用Django作为后端框架，Vue3作为前端框架。本文将重点讲解如何构建首页模块，包括后端的数据接口和前端的展示。

一、项目结构

我们的项目结构如下：

education_platform/
├── backend/
│   ├── manage.py
│   ├── education/
│   │   ├── models.py
│   │   ├── views.py
│   │   ├── urls.py
│   └── requirements.txt
└── frontend/
    ├── src/
    │   ├── components/
    │   │   └── Home.vue
    │   ├── App.vue
    │   └── main.js
    └── package.json

二、后端 Django 设置

在我们的Django项目中，首先需要创建课程模型，并提供相应的API供前端调用。

1. 创建模型

在 models.py 文件中定义课程模型：

from django.db import models

class Course(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

2. 创建视图

接下来，在 views.py 中创建一个视图来获取课程列表：

from django.http import JsonResponse
from .models import Course

def course_list(request):
    courses = Course.objects.all().values()
    return JsonResponse(list(courses), safe=False)

3. 配置路由

然后在 urls.py 配置路由，使其可以访问到课程列表：

from django.urls import path
from .views import course_list

urlpatterns = [
    path('api/courses/', course_list, name='course_list'),
]

三、前端 Vue3 设置

在我们的Vue3项目中，首先需要安装axios库以方便进行HTTP请求：

npm install axios

1. 创建首页组件

在 Home.vue 中创建课程展示的组件：

<template>
  <div class="home">
    <h1>欢迎来到在线教育平台</h1>
    <div v-if="courses.length">
      <div v-for="course in courses" :key="course.id" class="course">
        <h2>{{ course.title }}</h2>
        <p>{{ course.description }}</p>
        <p>价格: {{ course.price }}元</p>
      </div>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      courses: []
    };
  },
  created() {
    this.fetchCourses();
  },
  methods: {
    async fetchCourses() {
      try {
        const response = await axios.get('http://localhost:8000/api/courses/');
        this.courses = response.data;
      } catch (error) {
        console.error("无法获取课程数据", error);
      }
    }
  }
};
</script>

<style scoped>
.course {
  border: 1px solid #ccc;
  margin: 20px;
  padding: 10px;
}
</style>

2. 整合到主应用

在 App.vue 中引入并使用 Home 组件：

<template>
  <div id="app">
    <Home />
  </div>
</template>

<script>
import Home from './components/Home.vue';

export default {
  components: {
    Home
  }
};
</script>

四、总结

通过以上步骤，我们成功构建了一个基于Django和Vue3的在线教育平台的首页模块。后端提供了课程数据的API接口，而前端则通过axios获取数据并展示在网页上。 根据这个基础结构，我们可以继续扩展其他功能如课程详情页、用户注册登录等。希望这篇文章能帮助到那些想要打造线上教育平台的开发者们。