文章目录

• 前言
• 一、导航功能实现
• • a.效果图：
  • b.后端代码
  • c.前端代码
• 二、轮播图功能实现
• • a.效果图
  • b.后端代码
  • c.前端代码
• 三、标签栏功能实现
• • a.效果图
  • b.后端代码
  • c.前端代码
• 四、侧边栏功能实现
• • 1.整体效果图
  • 2.侧边栏功能实现
  • • a.效果图
    • b.后端代码
    • c.前端代码
  • 3.侧边栏展示分类及课程信息功能实现
  • • a.效果图
    • b.后端代码
    • c.前端代码
• 五、分类课程推荐（楼层设计）功能实现
• • a.效果图
  • b.后端代码
  • c.前端代码

前言

   在当今数字化教育浪潮中，构建一个高效且用户友好的线上教育平台至关重要。本博客将指导您使用Django作为后端框架，结合Vue 3的强大前端能力，快速搭建平台首页的核心功能，包括导航栏、轮播图、侧边栏、标签栏及分类课程推荐。我们将探讨前后端数据交互、Vue组件化开发等关键技术，轻松构建出既美观又实用的线上教育平台。


  最终实现效果图如下：

一、导航功能实现

a.效果图：

b.后端代码

导航表模型类：

class NavigationModel(BaseModel):     name = models.CharField(max_length=100)     url = models.CharField(max_length=100)     is_url = models.BooleanField(default=False)     def __str__(self):         return self.name     class Meta:         verbose_name = '导航表'         verbose_name_plural = '导航表'         db_table = 'navigation' 

导航表序列化器：

class NavigationSerializer(serializers.ModelSerializer):     class Meta:         model = NavigationModel         fields = ('id','name','url','is_url')         # fields = '__all__' 

获取所有头部导航栏信息:

class NavigationView(APIView):     def get(self, request):         nav_list = NavigationModel.objects.all()         ser = NavigationSerializer(nav_list, many=True)         return Response({"code":"200", "data":ser.data}) 

配置url信息:

urlpatterns = [     path('nav/header/', NavigationView.as_view()),     ... ] 

c.前端代码

components/Header.vue:

 
    
      {{item.name}}      {{item.name}}    
 
  

src/api/nav.js:

import http from "../http"; import {reactive} from "vue"; const nav = reactive({  header_nav_list: [], // 头部导航列表  get_header_nav(){    // 获取头部导航菜单    http.get("/home/nav/header/").then(response=>{      this.header_nav_list = response.data;    })  }, }) export default nav; 

二、轮播图功能实现

a.效果图

b.后端代码

轮播图模型类：

class BannerModel(BaseModel):     image = models.CharField(max_length=255)     link = models.CharField(max_length=255)     is_http = models.BooleanField(default=False)     def __str__(self):         return self.image     class Meta:         verbose_name = "轮播图表"         verbose_name_plural = "轮播图表"         db_table = 'banner' 

轮播图序列化器：

class BannerSerializer(serializers.ModelSerializer):     class Meta:         model = BannerModel         fields = '__all__' 

获取轮播图数据：

class BannerView(APIView):     def get(self, request):         banners = BannerModel.objects.all()         ser = BannerSerializer(banners, many=True)         return Response({"code":"200", "data":ser.data}) 

配置url信息：

    path('banner/', BannerView.as_view()), 

c.前端代码

src/components/Banner.vue：

src/api/home.js：

import { reactive } from "vue"; import http from "../http"; const course = reactive({   data: [],  // 分类下课程信息    get_courses_list() {     // 获取分类下课程信息     return http.get("/home/homecourse/").then(response => {       console.log("response.data.data");       console.log(response.data.data);       this.data = response.data.data;   },  })  export default course;