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) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity可视化Shader工具ASE介绍——6、通过例子说明ASE节点的连接方式

大家好&#xff0c;我是阿赵。继续介绍Unity可视化Shader编辑插件ASE的用法。上一篇已经介绍了很多ASE常用的节点。这一篇通过几个小例子&#xff0c;来看看这些节点是怎样连接使用的。   这篇的内容可能会比较长&#xff0c;最终是做了一个遮挡X光的效果&#xff0c;不过把这…

Docker部署gitlab_ce(避坑版---社区版)

1 下载docker 2 下载gitlab镜像 3 运行 4 进入容器内部修改 5 在浏览器里访问 6 修改root密码&#xff08;如果忘记请修改&#xff09; 1 下载docker # 安装依赖 yum install -y yum-utils device-mapper-persistent-data lvm2# 设置yum源 yum-config-manager --add-repo https…

【动手学深度学习-Pytorch版】BERT预测系列——用于预测的BERT数据集

本小节的主要任务即是将wiki数据集转成BERT输入序列&#xff0c;具体的任务包括&#xff1a; 读取wiki数据集生成下一句预测任务的数据—>主要用于_get_nsp_data_from_paragraph函数从输入paragraph生成用于下一句预测的训练样本&#xff1a;_get_nsp_data_from_paragraph生…

css常见问题处理

文章目录 1&#xff1a;禁止文字被复制粘贴1.1 Css 处理1.2 Js 处理 2&#xff1a;元素垂直水平居中2.1:方案一2.2 方案二2.3 方案三2.4 方案四2.5 方案五 1&#xff1a;禁止文字被复制粘贴 1.1 Css 处理 <div class"text">我不可以复制信息</div> <…

语义分割笔记(三):通过opencv对mask图片来画分割对象的外接椭圆

文章目录 mask图像介绍步骤代码 mask图像介绍 根据 mask 图像来画分割对象的外接椭圆是一种常见的图像分割任务。Mask 图像通常是一个二值图像&#xff0c;其中包含了感兴趣对象的像素。通常情况下&#xff0c;白色像素表示对象&#xff0c;黑色像素表示背景。 步骤 以下是一…

CCAK—云审计知识证书学习

目录 一、CCAK云审计知识证书概述 二、云治理概述 三、云信任 四、构建云合规计划 <

js中 slice 用法用法全解析

slice 工作原理 在深入研究一些更高级的用法之前&#xff0c;让我们看一下 slice 方法的基础知识。如MDN文档&#xff0c; slice 是数组上的一个方法&#xff0c;它最多有两个参数: arr.slice([begin[, end]]) begin 从该索引处开始提取原数组中的元素,如果该参数为负数&am…

Linux和UNIX的关系及区别

UNIX 与 Linux 之间的关系是一个很有意思的话题。在目前主流的服务器端操作系统中&#xff0c;UNIX 诞生于 20 世纪 60 年代末&#xff0c;Windows 诞生于 20 世纪 80 年代中期&#xff0c;Linux 诞生于 20 世纪 90 年代初&#xff0c;可以说 UNIX 是操作系统中的"老大哥&…

Web 前端汇总

一、前端技术框架 1、Vue.js 官网&#xff1a;https://cn.vuejs.org/ Vue CLI&#xff1a;https://cli.vuejs.org/ 菜鸟教程&#xff1a;http://www.runoob.com/w3cnote… Nuxt.js&#xff1a;https://zh.nuxtjs.org/ 桌面应用Electron&#xff1a;https://electronjs.org/ 2、…

Python利用jieba分词提取字符串中的省市区(字符串无规则)

目录 背景库&#xff08;jieba&#xff09;代码拓展结尾 背景 今天的需求就是在一串字符串中提取包含&#xff0c;省、市、区&#xff0c;该字符串不是一个正常的地址;,如下字符串 "安徽省、浙江省、江苏省、上海市,冷运标快首重1kg价格xx元,1.01kg(含)-5kg(不含)续重价…

【web实现右侧弹窗】JS+CSS如何实现右侧缓慢弹窗动态效果『附完整源码下载』

文章目录 写在前面涉及知识点页面效果1、页面DOM创建1.1创建底层操作dom节点1.2 创建存放弹窗dom节点 2、页面联动功能实现&#xff08;关闭与弹出&#xff09;2.1 点击非右侧区域实现关闭2.2 点击叉叉及关闭按钮实现关闭功能 3、完整源码包下载3.1百度网盘3.2 123云盘3.3邮箱留…

按键中断小灯蜂鸣器风扇

按键1实现小灯亮灭&#xff0c;按键2实现蜂鸣器&#xff0c;安静3实现风扇 src/key_it.c #include"key_it.h"void key3_it_config() {//RCC使能GPIOF时钟RCC->MP_AHB4ENSETR | (0x1<<5);GPIOF->MODER & (~(0x3<<16));EXTI->EXTICR3 &…

基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 之前讲了自定义业务表单&#xff0c;现在讲如何与流程进行关联 1、后端部分 WfCustomFormMapper.xml &…

ARM按键中断控制事件

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 src/key_it.c #include"key_it.h" //GPIO初…

Acwing.4736步行者(模拟)

题目 约翰参加了一场步行比赛。 比赛为期 N 天&#xff0c;参赛者共 M 人&#xff08;包括约翰&#xff09;。 参赛者编号为 1∼M&#xff0c;其中约翰的编号为 P。 每个参赛者的每日步数都将被赛事方记录并公布。 每日步数最多的参赛者是当日的日冠军&#xff08;可以有并…

Flink-SQL join 优化 -- MiniBatch + local-global

背景 问题1. 近期在开发flink-sql期间&#xff0c;发现数据在启动后&#xff0c;任务总是进行重试&#xff0c;运行一段时间后&#xff0c;container heartbeat timeout&#xff0c;内存溢出(GC overhead limit exceede) &#xff0c;作业无法进行正常工作 023-10-07 14:53:3…

Commonjs与ES Module

commonjs 1 commonjs 实现原理 commonjs每个模块文件上存在 module&#xff0c;exports&#xff0c;require三个变量,然而这三个变量是没有被定义的&#xff0c;但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们。在 nodejs 中还存在 __filename 和 __dirname 变…

【Java】Object equals

Object 类 equals&#xff08;&#xff09; Object 中的 equals() 是直接判断 this 和 obj 本身的值是否相等可以重写父类中的 equals() 比较两个对象成员属性值是否相等 示例代码&#xff1a; Student.java package com.api.Demo05;public class Student {private String n…

设置按键中断,按键1按下,LED亮,再按一次,灭按键2按下,蜂鸣器响。再按一次,不响按键3按下,风扇转,再按一次,风扇停

src/key_it.c #include"key_it.h" //GPIO初始化 void all_led_init() {//RCC使能RCC->MP_AHB4ENSETR | (0X1<<4);//设置PE10 PF10 PE8为输出GPIOE->MODER & (~(0X3<<20));GPIOE->MODER | (0X1<<20);//设置推挽输出GPIOE->OTYPER…

Kaadas凯迪仕助力亚运盛会,尽展品牌硬核科技与智能锁行业风采

9月23日至10月8日&#xff0c;亚洲最大规模体育赛事亚运会在杭州举办。作为国际性体育赛事&#xff0c;除赛中的各类竞赛项目外&#xff0c;杭州亚运会前后相关活动也吸引了大众目光的聚焦。 Kaadas凯迪仕智能锁作为此次杭州亚运会官方指定智能门锁&#xff0c;以#凯迪仕守护每…