@TOC

前言

   在当今数字化教育浪潮中，构建一个高效且用户友好的线上教育平台至关重要。本博客将指导您使用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:

<!-- 0.导航栏 -->
<ul class="nav">
   <li v-for="(item,index) in nav.header_nav_list " :key="index">
     <a :href="item.url" v-if="item.is_url">{
   
   {item.name}}</a>
     <router-link :to="item.url" v-else>{
   
   {item.name}}</router-link>
   </li>
</ul>
<script setup>
import nav from "../api/nav"
   // 获取顶部导航菜单
   nav.get_header_nav()
</script>

src/api/nav.js:
~~~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：

<!-- 焦点图、轮播图-->
<div class="g-banner-content" @mouseover="state.current_menu = -1">
  <el-carousel height="382px" indicator-position="bottom" @change="handleCarouselChange">
    <el-carousel-item v-for="(item, key) in banner.bannerImg" :key="key">
      <img :src="item.image" alt="" style="width: 100%; height: 100%" />
    </el-carousel-item>
  </el-carousel>
</div>

```js