第四阶段：Vue框架 day75 Vue--Vue前后端配合搭建项目
昨日内容复习
"""
1、箭头函数 let fn = (a, b) => a + b;
let 函数名 = (参数列表) => {函数体}
2、函数原型：给函数设置原型 Fn.prototype.变量 = 值，那么Fn new出来的对象都可以共用 原型变量
function Fn() {}
let f1 = new Fn()
let f2 = new Fn()
Fn.prototype.fn = () => {}
Fn.prototype.fn2 = function () {}
f1.fn()
f2.fn()
3、vue项目的请求生命周期：main.js完成环境的加载与根组件的渲染；router的index.js完成路由映射
项目启动：加载main.js：index.html、new Vue()、Vue、router、store、完成App.vue的挂载
请求：请求路径 => router路由 => 页面组件(小组件) => 替换<router-view />完成页面渲染 => <router-link>（this.$router.push()）完成请求路径的切换
4、<router-view />标签作为路由映射的页面组件占位符
5、<router-link></router-link>来完成路由的跳转
<router-link to="/1" :to="{name:'home', params={arg: 1}}">主页</router-link>
{
path: '/:arg',
name: 'home',
component: Home
}
6、this.$router来完成路由的跳转：push() | go()
this.$router.push('/1');
this.$router.push({name:'home', params={arg: 1}});
this.$router.go(-1);
this.$router.go(1);
7、this.$route来完成路由的传参
this.$route.params.arg
this.$route.params['arg']
8、资源的加载
require(资源的相对路径)
"""
知识点总结
"""
1、vue项目配置全局css文件：在main.js中用import导入或是require()加载 .css 文件
assets/css/global.css
import '@/assets/css/global.css' | require('@/assets/css/global.css')
2、vue项目配置全局js文件：在main.js中用import导入 .js 文件，并将其设置给 Vue 原型
settings.js => export default {base_url='http://127.0.0.1:8000'}
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings => this.$settings.base_url
3、vuex提供的store仓库存储，可以完成组件间的传参(了解)
store/index.js => state: {num: 0}
this.$store.state.num
4、vue项目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})
import axios from 'axios'
Vue.prototype.$axios = axios
this.$axios({
url: '后台接口',
method: 'get|post',
params: {},
data: {},
headers: {},
}).then(response=>{
response.data
}).catch(error=>{
error.response.data
})
5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
注册corsheaders => 添加中间件 => 允许跨越
6、前台两种提交数据的方式：url拼接参数，数据包参数
7、前后台分离，后台登录通过的token会返回给前台，前台自己处理存储在cookie中：vue-cookies插件操作cookie
token = response.data.token
this.$cookies.set(k, v, exp);
this.$cookies.get(k);
this.$cookies.remove(k);
8、全局应用配置element-ui、bootstrap
import ElementUi from 'element-ui'
Vue.use(ElementUi)
"""
vue配置bs环境
https://www.cnblogs.com/foreversun92/p/11868997.html
vue前后台分离跨域交互
https://www.cnblogs.com/foreversun92/p/11869001.html
今日作业
A作业（必做）
"""
1、整理今天所学知识点
2、将vue知识点系统回顾一下：vue指令、vue成员、vue生命周期钩子、vue项目的请求生命周期、vue文件组件（结构、语法、导入、页面与小组件）、父子组件间的传参(Cars页面渲染多个Car组件)、路由（占位、跳转、传参）、配置各种第三方插件(element、jq+bs、axios、cookie)
3、完成基础前后台分类的数据展示类网站
封装导航栏Nav小组件，完成各页面的跳转，在需要导航栏的页面中渲染Nav小组件
在主页Home组件中，写一个轮播图(bs和element都要提供)，完成后台数据的轮播展示
将汽车主页数据渲染以及详情页数据渲染的数据，都放在后台（用mysql数据库存储），完成后台数据的渲染，前台父子组件以及组件间的传参
"""
B作业（选做）
"""
1、尝试将bbs重构为前后台分类项目
2、好好预习drf视频（重中之重重）
"""
