文章目錄
- 前言
- 一、導航功能實現
- 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.nameclass Meta:verbose_name = '導航表'verbose_name_plural = '導航表'db_table = 'navigation'
導航表序列化器：
class NavigationSerializer(serializers.ModelSerializer):class Meta:model = NavigationModelfields = ('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:
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.imageclass Meta:verbose_name = "輪播圖表"verbose_name_plural = "輪播圖表"db_table = 'banner'
輪播圖序列化器：
class BannerSerializer(serializers.ModelSerializer):class Meta:model = BannerModelfields = '__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>
<script setup>
import banner from "../api/banner";
banner.get_banner_list();// 輪播圖列表 接口數據替換
// http://192.168.56.1:3000/src/assets/img/course1.jpg
const bannerImg = reactive([{image: '/src/assets/img/course1.jpg',link: '',is_http: false,
}])// 當前輪播 banner背景
const nowBannerImg = reactive({ src: bannerImg[0].image });
//輪播切換賦值
const handleCarouselChange = (index) => {// 更新當前banner圖片地址nowBannerImg.src = banner.bannerImg[index].image;
};<script>
src/api/banner.js:
import { reactive } from "vue";
import http from "../http";
const banner = reactive({bannerImg: [], // 輪播廣告列表get_banner_list() {// 獲取輪播廣告列表return http.get("/home/banner/").then(response => {// console.log("Bannner---response.data");// console.log(response.data);this.bannerImg = response.data.data;// console.log("bannerImg");// console.log(response.data.data);})},
})export default banner;
三、標簽欄功能實現
a.效果圖
b.后端代碼
標簽表模型類：
class DirectionModel(BaseModel):direction = models.CharField(max_length=255)desc = models.CharField(max_length=255)icon = models.CharField(max_length=255)def __str__(self):return self.directionclass Meta:verbose_name = "方向表"verbose_name_plural = "標簽表"db_table = 'direction'
標簽 / 方向表序列化器：
class DirectionSerializer(serializers.ModelSerializer):class Meta:model = DirectionModelfields = ['id','direction','desc','icon']# fields = '__all__'
獲取所有標簽數據：
class DirectionView(APIView):def get(self, request):directions = DirectionModel.objects.all()ser = DirectionSerializer(directions, many=True)return Response({"code":"200", "data":ser.data})
配置urls：
path('directions/', DirectionView.as_view()),
c.前端代碼
src/components/Banner.vue：
<!-- 標簽表（方向表） --><div class="system-class-show"><a class="show-box" v-for="(item, index) in directions.directions_list" :key="index"><div class="system-class-icon" :style="{ 'background-image': `url('${item.icon}')` }"></div><div class="describe"><h4>{{ item.direction }}</h4><p>{{ item.desc }}</p></div></a><div class="line"></div><a class="all-btn"><div class="mini-title">體系課</div><div class="more-btn">more</div></a></div>
import directions from '../api/directions';directions.get_directions_list();
src/api/directions.js：
import { reactive } from "vue";
import http from "../http";const directions = reactive({directions_list: [], // 標簽列表get_directions_list() {// 獲取標簽列表return http.get("/home/directions/").then(response => {// console.log("11111111111111");// console.log("directions_list---response.data");// console.log(response.data);this.directions_list = response.data.data;// console.log(response.data.data);})},})export default directions;
四、側邊欄功能實現
1.整體效果圖
2.側邊欄功能實現
a.效果圖
b.后端代碼
分類表模型類：
class CategoryModel(BaseModel):id = models.AutoField(primary_key=True) # 通常Django會自動為主鍵添加AutoField，這里顯式寫出也可以name = models.CharField(max_length=255, unique=True) # 假設分類名最大長度為255個字符parent = models.ForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='son') # 自關聯字段，表示父分類recommend = models.BooleanField(default=False)def __str__(self):return self.nameclass Meta:verbose_name = '分類表'verbose_name_plural = '分類表'db_table = 'category'
父級分類序列化器、子級分類序列化器：
# 子類序列化器---二級分類
class SonCategorySerializer(serializers.ModelSerializer):class Meta:model = CategoryModelfields = ('id', 'name')# fields = '__all__'# 父類序列化器--一級分類
class CategorySerializer(serializers.ModelSerializer):son = SonCategorySerializer(many=True, read_only=True)class Meta:model = CategoryModelfields = '__all__'# fields = ('id','name','son')
獲取父級與子級分類：
# 2.獲取一、二級分類
class CategoryView(APIView):def get(self, request):# 查詢所有一級分類：parent is null# query_setcategories = CategoryModel.objects.filter(is_delete=0,parent__id__isnull=True) #query_setclist = [] #側邊欄 二級分類顯示幾個for category in categories:# 獲取一級下面所有的二級分類，操作顯示二級分類數據條數sondata = category.son.all()[0:2] #query_set# d對二級數據進行序列化操作son = SonCategorySerializer(sondata, many=True)clist.append({"id": category.id, "name": category.name, "son": son.data})return Response({"code":"200", "data":clist})
配置url：
path('nav/cates/', CategoryView.as_view()), #側邊欄-獲取一二級分類
c.前端代碼
src/components/Banner.vue：
<!-- 左側邊欄Banner---二級分類 --><div class="menuContent"><divv-for="(item, index) in cates.cates_list":key="index"class="item":class="{ 'js-menu-item-on': state.current_menu == 0 }"@mouseover="fnMethod(item.id)"><!-- item.id 一級分類id --><span class="title">{{ item.name }}:</span><span class="sub-title" v-for="(s, index) in item.son" :key="index"> {{ s.name }} </span><i class="imv2-arrow1_r"></i></div></div>
import cates from "../api/cates";cates.get_cates_list();
// 定義方法-展示側邊欄所有二級分類以及所有分類下的課程
const fnMethod = (cateid) => {state.current_menu = 0;cates.get_coures_list(cateid);
};
src/api/cates.js：
import http from "../http";
import { reactive } from "vue";const cates = reactive({cates_list: [], // Banner---兩級分類列表get_cates_list() {// 獲取兩級分類return http.get("/home/nav/cates/").then(response => {// console.log("左側邊欄獲取兩級分類response.data：");// console.log(response.data);this.cates_list = response.data.data;})},
})
export default cates;
3.側邊欄展示分類及課程信息功能實現
點擊分類(側邊欄觸發)，獲取此分類下所有的二級分類（@mouseover）以及此分類下推薦的課程
a.效果圖
b.后端代碼
+課程表模型類：
class CourseModel(BaseModel):id = models.AutoField(primary_key=True)name = models.CharField(max_length=255, unique=True)# parent 指向 Category 分類idparent = models.ForeignKey(CategoryModel, on_delete=models.CASCADE, related_name='course',verbose_name="parent-父級分類")topid = models.IntegerField(verbose_name="topid-頂級分類")recommend = models.BooleanField(default=False)picurl = models.CharField(max_length=100)price = models.FloatField()level = models.IntegerField(verbose_name="1零基礎 2中級 3高級")sales = models.IntegerField(default=0,verbose_name="銷量")describe = models.TextField()def __str__(self):return self.nameclass Meta:verbose_name = '課程表'verbose_name_plural = '課程表'db_table = 'course'
課程序列化器：
class CourseSerializer(serializers.ModelSerializer):# teacher = TeachersSerializer(many=True, read_only=True)# teacher = TeachersSerializer()class Meta:model = CourseModelfields = '__all__'
獲取所有分類及其推薦課程：
class CategoryCourseView(APIView):def get(self, request):#獲取一級分類idcateid = request.GET.get("cateid")#根據id查詢分類：一級分類和二級分類cate = CategoryModel.objects.filter(id=cateid).first()#通過id查詢推薦課程ser = CategorySerializer(cate)#返回結果#print(cate.id)courses = CourseModel.objects.filter(topid=cateid,recommend=True)#print(courses)cSer = CourseSerializer(courses, many=True)#print(cSer.data)return Response({"code":"200", "clist":ser.data,"courses":cSer.data})
配置urls：
path('nav/catescourses/', CategoryCourseView.as_view()),#側邊欄-傳一級分類id->展示子分類及其所有課程
c.前端代碼
src/components/Banner.vue：
<!-- 側邊欄觸發顯示：分類信息、課程信息 -->
<div class="submenu" v-if="state.current_menu === 0"><!-- 1.2.1側邊欄觸發顯示：商品課程二級分類信息 --><div class="inner-box"><h2 class="type">{{ cates.cc_list.name }}</h2><div class="tag clearfix"></div><div class="lore"><span class="title">知識點：</span><p class="lores clearfix"><a target="_blank" v-for="(item, index) in cates.cc_list.son" :key="index" href="">{{ item.name }}</a></p></div></div><!-- 1.2.2側邊欄觸發顯示：分類下的課程信息---><div class="recomment clearfix"><a href="" target="_blank" title="" class="recomment-item" v-for="(c,index) in cates.course_list" :key="index"><div class="img" :style="{ 'background-image': `url('${c.picurl}')`, 'background-size': '100%' }"></div><div class="details"><div class="title-box"><p class="title"><span class="text">{{c.name}}</span><span class="tag tixi">體系</span></p></div><div class="bottom"><span class="discount-name">優惠價:</span><span class="price">￥{{c.price}}</span> ·<span class="difficulty"> {{c.describe}} </span> ·<span class="difficulty" v-if="c.level==1"> 0基礎 </span> ·<span class="difficulty" v-if="c.level==2"> 中級 </span> ·<span class="difficulty" v-if="c.level==3"> 高級 </span> ·<span class="num"><i class="imv2-set-sns"></i> {{c.sales}}人</span></div></div></a></div></div>
src/api/cates.js：
import http from "../http";
import { reactive } from "vue";const cates = reactive({cates_list: [], // Banner---兩級分類列表cc_list: {}, //Banner---觸發顯示：顯示所有二級分類course_list: [], //Banner ---觸發顯示：顯示分類下的課程get_cates_list() {// 獲取兩級分類return http.get("/home/nav/cates/").then(response => {this.cates_list = response.data.data;})},get_coures_list(cateid) {// 獲取所有二級分類 及其 課程return http.get("/home/nav/catescourses/?cateid=" + cateid).then(response => {// console.log("左側邊欄獲取課程分類及課程response.data：");// console.log(response.data);this.cc_list = response.data.clist;this.course_list = response.data.courses;})},})export default cates;
五、分類課程推薦（樓層設計）功能實現
首頁分類課程推薦設計：
????顯示推薦分類，獲取不同樓層不同分類下的課程，點擊不同分類時獲取當前樓層分類下的推薦課程并顯示
a.效果圖
b.后端代碼
為了便于理解，建立三張表：頻道表、頻道分類表、頻道課程表，模型類如下：
# a.頻道表
class ChannelModel(BaseModel):name = models.CharField(max_length=255, unique=True)picurl = models.CharField(max_length=100)sort = models.IntegerField()def __str__(self):return self.nameclass Meta:verbose_name = '頻道表'verbose_name_plural = '頻道表'db_table = 'channel'# b.頻道分類表 id,name,顯示順序,頻道id,類別(1-添加的 2-分類的),分類id
class ChannelCategoryModel(BaseModel):name = models.CharField(max_length=255)sort = models.IntegerField()channel = models.ForeignKey(ChannelModel, on_delete=models.CASCADE, related_name='cates')type = models.IntegerField()cateid = models.IntegerField()def __str__(self):return self.nameclass Meta:verbose_name = '頻道分類表'verbose_name_plural = '頻道分類表'db_table = 'channel_cates'# c.頻道分類課程表 id,name,圖標,價格,難度,購買人數,頻道分類id
class ChannelCoursesModel(BaseModel):name = models.CharField(max_length=255,unique=True)picurl = models.CharField(max_length=100)price = models.FloatField()sales = models.IntegerField(default=0)level = models.IntegerField()ccates = models.ForeignKey(ChannelCategoryModel, on_delete=models.CASCADE, related_name='courses')def __str__(self):return self.nameclass Meta:verbose_name = '頻道分類課程表'verbose_name_plural = '頻道分類課程表'db_table = 'channel_courses'
頻道、頻道分類、頻道課程序列化器：
# --
# c.頻道分類課程序列化器
class ChannelCourseSerializer(serializers.ModelSerializer):class Meta:model = ChannelCoursesModelfields = '__all__'# b.頻道分類序列化器-
class ChannelCategorySerializer(serializers.ModelSerializer):courses = ChannelCourseSerializer(many=True, read_only=True)class Meta:model = ChannelCategoryModelfields = '__all__'# a.頻道序列化器
class ChannelSerializer(serializers.ModelSerializer):cates = ChannelCategorySerializer(many=True, read_only=True)class Meta:model = ChannelModelfields = '__all__'
獲取首頁推薦課程分類信息：
# 6.2 樓層-課程卡片--（無順序版-->直接嵌套序列化器）
class HomeCourseView(APIView):def get(self, request):channels = ChannelModel.objects.order_by('sort').all()ser_channels = ChannelSerializer(channels, many=True)return Response({"code":"200", "data":ser_channels.data})
配置urls：
path('homecourse/', HomeCourseView.as_view()), #首頁推薦分類課程
c.前端代碼
src/components/NewCourse.vue：
<template><div class="bg000"><div class="container-types new-course" v-for="record,index in course.data" :key="index"><!-- 第一級：pic --><h3class="types-title justify-content_flex-start":style="{ 'background-image': `url('${record.picurl}')` }">{{index}}<!-- 第二級 eg：推薦、前端課程 --><ul class="menu"><li :class="{'curr': state.current_menu[index]==key}"v-for="item,key in record.cates" :key="key"@click="selectTab(item,key,index)"><a>{{ item.name }}</a></li></ul></h3><!-- 對應分類下的課程信息 --><div class="list clearfix show" ><a class="item" v-for="citem,cindex in record.cates[courseList.data[index]].courses" :key="cindex"><div class="img":style="{ 'background-image': `url('${citem.picurl}')` }"></div><div class="title ellipsis2">{{ citem.name }}</div><div class="difficulty">{{ citem.level }} · {{ citem.person }}人報名</div><div class="bottom clearfix"><span class="price l red bold">￥{{ citem.price }}</span></div></a></div></div> </div>
</template>
<script setup>
import {reactive} from "vue"
// 接口取回的數據
import course from "../api/home";course.get_courses_list();// 定義每個頻道TAB的下標
let courseList = reactive({data: [0,0,0]})// 點擊事件item-cates，key-二級index，index-一級index
const selectTab = (item,key,index) => {courseList.data[index] = keystate.current_menu[index] = key
}
const state = reactive({current_menu: [0,0,0],
})</script>
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;
![[圖解]企業應用架構模式2024新譯本講解26-層超類型2](http://pic.xiahunao.cn/[圖解]企業應用架構模式2024新譯本講解26-層超類型2)
)
