内容回顾

# 1 同源策略:浏览器的安全策略， 不允许不同域(ip+端口+协议)
# 2 垮域资源共享, cors, 本质就是在响应头部加入允许，允许某些域，允许某些头
# 3 项目处理跨域
	-两种方式:
        -django-cors-headers
        -自己处理，在中间件中允许域和头
# 4 跨域: 简单请求和非简单请求, 非简单请求发送两次，一次预检请求
	-(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

# 5 单页面开发: 小组件，页面组件
	-组件: 三部分, template, script, styple
    -vuee-router: 
        -vue-router：
    	  const routes = [
              {
                path: '/',
                name: 'Home',
                component: Home
              },
            ]
# 6 vue跟后端交互(ajax)
	-axios
    -npm install axios
    -在min.js配置
    	import axios from 'axios'   //导入安装的axios
        //相当于把axios这个对象放到了vue对象中，以后用  vue对象.$axios
        Vue.prototype.$axios = axios;
    -使用: 在组件中
        this.$axios.get(url).then(function(response){}).catch(function(error){})
        this.$axios.get(url).then(response.data=>{}).catch(=>error{})

今日内容

1 路飞项目头部组件1.1 路由跳转的方式

#html中路由跳转
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
#js中控制路由跳转
this.$router.push('/');

1.2 头部组件vue代码

# 在components内新建Head.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>

1.3 配置全局css和setting

# 在main.js中配置
// 配置全局样式 @ 符号，代指src路径
import '@/assets/css/global.css'
// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中：this.$settings.base_url + '再拼接具体后台路由'

# 在assets下的css中加入global.css
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}


# 在assets下的js中加入settings.js
export default {
    base_url: 'http://127.0.0.1:8000'
}
 

1.4 前台配置

# 安装
cnpm install axios
cnpm install vue-cookies
cnpm install element-ui
cnpm install jquery
cnpm install bootstrap@3
# 在main.js中配置
# axios配置
import axios from 'axios'
Vue.prototype.$axios = axios;
# vue-cookies配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies
# ElementUI的配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
# bootstrap配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

5 git的使用

#1  协同开发，版本管理
#2 svn(集中式管理), git(分布式管理)
#3 git安装，既有客户端，又有服务端
#4 git工作流程
	-工作区，暂存区，版本库
#5 远程仓库: github,码云， 公司内部(gitlab)

#6 安装: 一路下一步
#7 右键--git bash here

#8 git 命令
	-初始化: git init 文件夹名
    -初始化: git init #当前路径全被管理
    
    -git status
    -git add a.txt  # 把a提交到暂存区
    -git add .
    -git commit -m '注释，我新增了a'  # 把暂存区的所有都提交到版本库
    -把a的新增提交到版本管理
    -需要增加作者信息
    	  git config --global user.email "wr@qq.com"
          git config --global user.name "wr"
    -新建b,在a中新增一行
    -git checkout .  # 回复到提交版本的位置，a是空的，b没有被git管理,所以是啥样就是啥样
	-git log  查看版本管理的日志
    -git reset --hard 版本号
    
# 红色表示未被管理
# 绿色表示提交到暂存区了

# 忽略文件
	-空文件夹不被管理
	-指定某些文件或者文件夹不被git管理
    -在项目根路径跟.get文件夹一个路径 ，新建.gitignore., 在里面配置
    -语法: 
    	# 号是注释，没有用
    	文件夹名字，表示文件夹忽略，不被管理
		/dist 表示根路径下的dist文件夹不被管理
        *.py  表示后缀名为py文件，都被忽略
        *.log*
# 分支操作
	-查看分支 git branch  查看所有分支，分支是绿的，表示在当前分支上
    -创建分支 git branch dev
    -创建并切换 git checkout -b dev
    -删除分支 git branch -d dev
    -切换分支 git checkout dev
    -合并分支 git merge 分支名  # 把dev分支合并到master分支, 切换到master分支，执行合并dev分支的命令