day 91 路飞项目头部组件、 配置全局css和setting、 前台配置、 git的使用、
作者：互联网
内容回顾
# 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分支的命令
标签：axios,url,import,路飞,setting,path,91,git,css 来源： https://www.cnblogs.com/md-my/p/15862892.html