day04-前台首页、导出项目依赖

1 前台首页

1.1 Header.vue
1.2 Footer.vue
1.3 Banner.vue
1.4 HomeView.vue
1.5 轮播图接口打通

2 导出项目依赖

3 抽取返回格式

1 前台首页

-在项目的components文件夹下：
新建：Header.vueFooter.vueBanner.vue

<template><div class="header"><div class="slogan"><p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p></div><div class="nav"><ul class="left-part"><li class="logo"><router-link to="/"><img src="../assets/img/head-logo.svg" alt=""></router-link></li><li class="ele"><span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span></li><li class="ele"><span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span></li><li class="ele"><span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span></li></ul><div class="right-part"><div><span>登录</span><span class="line">|</span><span>注册</span></div></div></div></div></template>
<script>
export default {name: "Header",data() {return {url_path: sessionStorage.url_path || '/',}},methods: {goPage(url_path) {// 已经是当前路由就没有必要重新跳转if (this.url_path !== url_path) {this.$router.push(url_path);}sessionStorage.url_path = url_path;},},created() {sessionStorage.url_path = this.$route.path;this.url_path = this.$route.path;}
}
</script><style scoped>
.header {background-color: white;box-shadow: 0 0 5px 0 #aaa;
}.header:after {content: "";display: block;clear: both;
}.slogan {background-color: #eee;height: 40px;
}.slogan p {width: 1200px;margin: 0 auto;color: #aaa;font-size: 13px;line-height: 40px;
}.nav {background-color: white;user-select: none;width: 1200px;margin: 0 auto;}.nav ul {padding: 15px 0;float: left;
}.nav ul:after {clear: both;content: '';display: block;
}.nav ul li {float: left;
}.logo {margin-right: 20px;
}.ele {margin: 0 20px;
}.ele span {display: block;font: 15px/36px '微软雅黑';border-bottom: 2px solid transparent;cursor: pointer;
}.ele span:hover {border-bottom-color: orange;
}.ele span.active {color: orange;border-bottom-color: orange;
}.right-part {float: right;
}.right-part .line {margin: 0 10px;
}.right-part span {line-height: 68px;cursor: pointer;
}
</style>

<template><div class="footer"><ul><li>关于我们</li><li>联系我们</li><li>商务合作</li><li>帮助中心</li><li>意见反馈</li><li>新手指南</li></ul><p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p></div>
</template><script>
export default {name: "Footer"
}
</script><style scoped>
.footer {width: 100%;height: 128px;background: #25292e;color: #fff;
}.footer ul {margin: 0 auto 16px;padding-top: 38px;width: 810px;
}.footer ul li {float: left;width: 112px;margin: 0 10px;text-align: center;font-size: 14px;
}.footer ul::after {content: "";display: block;clear: both;
}.footer p {text-align: center;font-size: 12px;
}
</style>

<template><div class="banner"><el-carousel height="400px"><el-carousel-item v-for="item in 4" :key="item"><img src="../assets/img/banner1.png" alt=""></el-carousel-item></el-carousel></div>
</template><script>
export default {name: "Banner"
}
</script><style scoped>
.el-carousel__item {height: 400px;min-width: 1200px;
}.el-carousel__item img {height: 400px;margin-left: calc(50% - 1920px / 2);
}
</style>

1.4 HomeView.vue

<template><div class="home"><Header></Header><Banner></Banner><div><el-row><el-col :span="6" v-for="(o, index) in 8" :key="o" class="course_detail"><el-card :body-style="{ padding: '0px' }"><img src="http://photo.liuqingzheng.top/2023%2002%2022%2021%2057%2011%20/image-20230222215707795.png"class="image"><div style="padding: 14px;"><span>热门课程</span><div class="bottom clearfix"><time class="time">价格：199</time><el-button type="text" class="button">查看详情</el-button></div></div></el-card></el-col></el-row></div><img src="http://photo.liuqingzheng.top/2023%2003%2001%2016%2010%2034%20/1.png" alt="" width="100%" height="500px"><Footer></Footer></div>
</template><script>
import Banner from "@/components/Banner";
import Footer from '@/components/Footer'
import Header from "@/components/Header";export default {name: 'HomeView',components: {Header, Footer, Banner}}
</script>
<style scoped>
.time {font-size: 13px;color: #999;
}.bottom {margin-top: 13px;line-height: 12px;
}.button {padding: 0;float: right;
}.image {width: 100%;display: block;
}.clearfix:before,
.clearfix:after {display: table;content: "";
}.clearfix:after {clear: both
}.course_detail {padding: 50px;
}
</style>

1.5 轮播图接口打通

1.5.1 Banner.vue

<template><div class="banner"><el-carousel height="400px"><el-carousel-item v-for="item in banner_list" :key="item.id"><div v-if="item.link.indexOf('http')==0"><a :href="item.link"><img :src="item.image" alt=""></a></div><div v-else><router-link :to="item.link"><img :src="item.image" alt=""></router-link></div></el-carousel-item></el-carousel></div>
</template><script>
export default {name: "Banner",data() {return {banner_list: []}},created() {this.$axios.get(this.$settings.BASE_URL + 'home/banner/').then(res => {console.log(res.data)if (res.data.code == 100) {this.banner_list = res.data.result} else {this.$message({showClose: true,message: res.data.msg,type: 'error'});}})}
}// var a = 'ss'
// var res = a.indexOf('ss')
// console.log(res)</script><style scoped>
.el-carousel__item {height: 400px;min-width: 1200px;
}.el-carousel__item img {height: 400px;margin-left: calc(50% - 1920px / 2);
}
</style>

2 导出项目依赖

# 在虚拟环境中，进到项目根路径，执行
pip freeze > requirements.txt

3 返回格式

1 在common_response.py中：from rest_framework.response import Response# APIResponse()# APIResponse(result=[{}, {}])# APIResponse(token=lin, username=liw)# APIResponse(token=fsadfas, username=lin, status=201, headers={'xx': 'xx'})class APIResponse(Response):def __init__(self, code=100, msg='成功', status=None,template_name=None, headers=None,exception=False, content_type=None, **kwargs):data = {'code': code, 'msg': msg}if kwargs:data.update(kwargs)super().__init__(data=data, status=status, headers=headers, template_name=template_name,exception=exception, content_type=content_type)# Response(data=data, status=status, headers=headers)2 在common_mixin.py中：from rest_framework.mixins import ListModelMixinfrom utils.common_response import APIResponseclass CommonListModeMixin(ListModelMixin):# 重写list方法def list(self, request, *args, **kwargs):res = super(CommonListModeMixin, self).list(request, *args, **kwargs)return APIResponse(result=res.data)3.在views.py中：from rest_framework.mixins import ListModelMixin  # 继承这个路由类缺一个视图类from rest_framework.generics import GenericAPIView  # 上述需要配上这个视图from rest_framework.generics import ListAPIView  # 视图from rest_framework.viewsets import ViewSetMixin, GenericViewSet  # 自动生成路由from .models import Bannerfrom .serializer import BannerSerializerfrom django.conf import settingsfrom utils.common_mixin import CommonListModeMixin# class BannerView(ViewSetMixin, ListAPIView):# class BannerView(ViewSetMixin, GenericAPIView, ListModelMixin):# 注意：ViewSetMixin, GenericAPIView可以简写成# class BannerView(GenericViewSet, ListModelMixin):  # 自动生成路由class BannerView(GenericViewSet, CommonListModeMixin):  # 自动生成路由# 查询没有删除的和可以展示的，并且按照orders排序, 然后进行切片显示queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]serializer_class = BannerSerializer# 抽取出去生成common_mixin# def list(self, request, *args, **kwargs):#     res = super().list(request, *args, **kwargs)#     return APIResponse(result=res.data)