162-路飞03跨域问题处理&头尾部组件&轮播图&git简介

本文链接：https://blog.youkuaiyun.com/qq_40808228/article/details/111996247

昨日回顾

1 前端配置
	-cnpm install jquery --save  # 依赖模块同步到pacakage.json中
	-vue create 项目名字（eslint不使用，vuex，router，bable）
    -npm run serve
    -npm run build    # 项目上线，执行，把dist文件夹部署，前端所有的代码
    -每个组件都有三部分
    	-template
        -script
        -style
2 后端配置
	-全局异常：
    -全局响应对象Response对象
    -记录日志：
3 跨域问题解决
	-前端使用代理（什么叫反向代理，什么是正向代理）
    -自己处理（CORS：跨域资源共享）（csrf：跨站请求伪造，xss：跨站脚本攻击）
    	
    -借助第三方 django-cors-headers
    	-注册app
        -写中间件
        -一堆配置

今日内容

1 跨域问题

1 同源策略：浏览器的安全策略，不允许去另一个域加载数据
2 域：ip或者端口都必须一致
3 前后端分离项目会出现跨域
4 不使用第三方，自己处理
5 CORS：后端技术，跨域资源共享，服务端只要做配置，（本身浏览器已经支持了），就支持跨域
	-access-control-allow-origin: *  # 所有的域都可以向我发送请求，浏览器不会禁止
6 浏览器将CORS请求分成两类：
	-简单请求（simple request）
	-非简单请求（not-so-simple request）
7 满足以下两大条件就是简单请求
    (1) 请求方法是以下三种方法之一：
        HEAD
        GET
        POST
    (2)HTTP的头信息不超出以下几种字段：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
        
8 简单请求，只发送一次，如果后端写了CORS，浏览器就不禁止了
9 非简单请求，发两次，第一次是OPTIONS（预检请求），看后端是否允许，如果允许再发真正的请求

1.1 后端处理CORS跨域问题

# 自己写一个中间件
# 写一个中间件
from django.utils.deprecation import MiddlewareMixin
class CoreMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':  # 处理了非简单请求
            response['Access-Control-Allow-Headers'] = 'Content-Type,authorization'
        # 处理了简单请求
        response['Access-Control-Allow-Origin'] = '*'
        return response

# setting中注册
MIDDLEWARE = [
	...
    'middle.CoreMiddle', # 自己写的处理跨域问题的中间件
    ...
]

1.2 前端处理跨域问题(使用代理)

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/ajax': {
                target: 'https://m.maoyan.com/',
                changeOrigin: true
            },
             '/user': {
                target: 'http://127.0.0.1:8000/',
                changeOrigin: true
            },

        }
    }
};

# axios发送请求
this.$axios.get('user/test/').then(item=>{
                console.log(item.data)
            })
# 修改配置要重启

2 头部组件,尾部组件

headers.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 {
                //sessionStorage中有url_path就使用它，没有就是 /
                url_path: sessionStorage.url_path || '/',
            }
        },
        methods: {
            goPage(url_path) {
                // 已经是当前路由就没有必要重新跳转
                if (this.url_path !== url_path) {
                    //js控制路由跳转
                    this.$router.push(url_path);
                }
                //把当前路径加入到了sessionStorage
                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>

footer.vue

<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>

3 首页组件,轮播图组件

scope.vue

<template>
    <div>
        <el-carousel height="400px">
            <el-carousel-item v-for="item in 4" :key="item">
                <img src="../assets/img/banner4.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>

Home.vue

<template>
    <div id="home">
        <Header></Header>
        <Banner></Banner>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        内容部分
        <br><br><br><br>
        <Footer></Footer>
    </div>
</template>

<script>

    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import Banner from "../components/Banner";
    export default {
        name: "Home",
        data(){
            return {

            }
        },
        components:{
            Header,
            Footer,
            Banner
        }
    }
</script>
<style scoped>
</style>

4 git入门

1 协同开发：版本管理工具
	-svn
    -git
2 git能干什么
    完成 协同开发 项目，帮助程序员整合代码
        i）帮助开发者合并开发的代码
        ii）如果出现冲突代码的合并，会提示后提交合并代码的开发者，让其解决冲突

    软件：SVN 、 GIT（都是同一个人的个人项目）
        github、gitee（两个采用git版本控制器管理代码的公共平台）
        github，gitee，gitlab：区别
        	-github：一般开源的代码放再github，代码托管平台（公有仓库，私有仓库），公司代码不会放				在这上面
            -gitee（码云）：中国的github，开源代码放在共有仓库，有一部分公司的公司代码托管到gitee				的私有仓库（你们公司代码放在码云上）
            -gitlab：公司自己的搭建github，公司内部自己访问（docker拉一个gitlab镜像，跑起来即可）

    git：集群化、多分支
    
3 安装git客户端
	一路下一步
4 右键---》git bash（terminal窗口）
	git init  ：初始化仓库