luffy第三篇
文章目录
- 一、跨域问题
-
- 1、详解
- 2、后端自己处理跨域问题
- 3、前端处理跨域
- 二、luffy头部组件，尾部组件
- 三、首页组件,轮播图组件
- 四、git入门
一、跨域问题
1、详解
1 同源策略：浏览器为了保护用户信息安全的一种安全机制，不允许去另一个域加载数据
2 域：ip或者端口都必须一致
3 前后端分离项目会出现跨域（前后端来自同一个ip的不同端口）
4 使用第三方模块处理，详见上篇
5 CORS：是一门后端技术，全称跨域资源共享，CORS需要浏览器和服务器同时支持，目前所有浏览器都支持该功能，也就是说服务端只要做配置（实现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（预检请求），看后端是否允许，如果允许再发真正的请求用于数据传输
2、后端自己处理跨域问题
简单请求
开两个端口不同的django
#127.0.0.1:8000
#views.py
from django.http import JsonResponse
def test(request):
obj = JsonResponse({
'name':'lqz','age':21})
obj['Access-Control-Allow-Origin']='*'
return obj
#127.0.0.1:8002
#前端
<script>
$('#btn').click(()=>{
$.ajax({
url: 'http://127.0.0.1:8000/user/test/',
method: 'get',
success: function (data) {
console.log(data)
}
})
})
</script>
非简单请求
#127.0.0.1:8000
from django.http import JsonResponse
def test(request):
obj = JsonResponse({
'name':'lqz','age':21})
if request.method == 'OPTIONS':
obj['Access-Control-Allow-Headers']='Content-Type,authorization'
obj['Access-Control-Allow-Origin']='http://127.0.0.1:8002'
return obj
#127.0.0.1:8002
<script>
$('#btn').click(()=>{
var obj = {
name:'egon'}
$.ajax({
url: 'http://127.0.0.1:8000/user/test/',
method: 'post',
contentType: 'application/json',
headers: {
authorization: 'lqz'},
data: JSON.stringify(obj),
success: function (data) {
console.log(data)
}
})
})
</script>
中间件处理
# 在utils下创建mymiddle.py 自定义中间件
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 = [
...
'utils.mymiddle.CoreMiddle', # 自己写的处理跨域问题的中间件
...
]
3、前端处理跨域
//在根路径下创建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)
})
//修改配置要重启
二、luffy头部组件，尾部组件
<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>
三、首页组件,轮播图组件
<template>
<div class="banner">
<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>
内容部分
四、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客户端
下载链接：https://git-scm.com/
一路下一步安装
4 右键---》git bash（terminal窗口）
git init ：初始化仓库