Vue之路由跳转 传参 aixos 和cookie

　　一.路由跳转

　　1.1 项目的初始化

　　vue create m-proj   >>>创建vue项目

　　精简vue项目的

　　views 视图   About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式) 

　　scr 下创建一个css 作为全局的样式 设置

　　最后将设置好的全局样式 在mian.js 文件中 导入 作为 项目的入口 类似执行文件(start.py)

　　基础的完成了

　　

　　二.路由传参的几种方法

　　　　2.1 导航栏的显示设置 

　　　　

将导航栏组件() 在 view 中注册

// 将导航栏进行 导入和注册 上面写Nav 标签

 import Nav from '@/components/Nav.vue'
export default {
  name: 'home',
  components: {
      Nav,
      
      },

   
 引入组件

 

2.2 路由进行跳转的四大方法

　　

　　2.2 三种传参方式

　　三.vue-cookies 插件的 下载-配置-使用

　　

D:\MY-vue\my-vueprj2>cnpm install vue-cookies

万一安装错了

D:\MY-vue\my-vueprj2>cnpm uninstall vue-cookies

再次安装cnpm install vue-cookies

 

配置

这里出错了 ???? 回去整理

 

　　四.axios -- vue 中的ajax 异步提价数据

　　安装

D:\MY-vue\my-vueprj2>cnpm install axios

　

　　

　　配置

　　main,js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;


// 项目的初始化全局样式的配置
import  '@/assets/css/global.css'

// 配置全局的cookies
import cookies from 'vue-cookies'
// 直接舍给vue原型
Vue.prototype.$cookies=cookies;

// 配置axios 请求后台的ajax
import axios from 'axios'
Vue.prototype.$axios=axios;
new Vue({
  router,
  store,

  render: h => h(App)
}).$mount('#app');

 

　　使用

 

　　

　　　　下载-安装-使用

　　　　后端提交数据 -=--cookio(跨域问题)同源策略

　　　　不是同一服务器发来的请求 拒绝请求 同源策略(CORS)

　　　　如何解决

　　　　django解决跨域问题

　　　　后台安装django-cors-headers 模块

　　　　

　　　(1)　D:\day67_djproj>pip install django-cors-headers)

　　　(2))注册

　　

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
    'corsheaders'
]

　　　(3)　设置中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware'
]

　　    (4)设置跨域

　　

# 设置苦于问题 允许跨域
CORS_ORIGIN_ALLOW_ALL = True

　　　　上线指定 传输的路径

 

　　五.element-ui 

　　 下载 一定要会用多练啊 在研究一下 老师的视屏

　　 还有就是cookies 的增改 查 删

　

       D:\day67_djproj>npm i element-ui -S

　　 -配置-

main.js

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 

 

　　使用

文档

## 路由传参

### 第一种

##### router.js

```js
routes: [
    // ...
    {
        path: '/course/:id/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]
```

##### 跳转.vue

```vue


```

##### 接收.vue

```js
created() {
    let id = this.$route.params.id;
}
```





### 第二种

##### router.js

```js
routes: [
    // ...
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]
```

##### 跳转.vue

```vue


```

##### 接收.vue

```js
created() {
    let id = this.$route.query.id;
}
```







```
export default new Vuex.Store({
    state: {
        title: '默认值'
    },
    mutations: {
        // mutations 为 state 中的属性提供setter方法
        // setter方法名随意，但是参数列表固定两个：state, newValue
        setTitle(state, newValue) {
            state.title = newValue;
        }
    },
    actions: {}
})

赋值
this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle')

取值
console.log(this.$store.state.title)
```





## vue-cookie插件

安装

```
>: cnpm install vue-cookies
```

main.js 配置

```js
// 第一种
import cookies from 'vue-cookies'      // 导入插件
Vue.use(cookies);                    // 加载插件
new Vue({
    // ...
    cookies,                        // 配置使用插件原型 $cookies
}).$mount('#app');

// 第二种
import cookies from 'vue-cookies'    // 导入插件
Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies
```

使用

```js
// 增(改): key，value，exp(过期时间)
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');

// 查：key
this.token = this.$cookies.get('token');

// 删：key
this.$cookies.remove('token');
```

注：cookie一般都是用来存储token的

```js
// 1) 什么是token：安全认证的字符串
// 2) 谁产生的：后台产生
// 3) 谁来存储：后台存储（session表、文件、内存缓存），前台存储（cookie）
// 4) 如何使用：服务器先生成反馈给前台(登陆认证过程)，前台提交给后台完成认证(需要登录后的请求)
// 5) 前后台分离项目：后台生成token，返回给前台 => 前台自己存储，发送携带token请求 => 后台完成token校验 => 后台得到登陆用户
```





## axios插件

安装

```
>: cnpm install axios
```

main.js配置

```js
import axios from 'axios'    // 导入插件
Vue.prototype.$axios = axios;    // 直接配置插件原型 $axios
```

使用

```js
this.axios({
    url: '请求接口',
    method: 'get|post请求',
    data: {post等提交的数据},
    params: {get提交的数据}
}).then(请求成功的回调函数).catch(请求失败的回调函数)
```





跨域问题（同源策略）

```js
// 后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS）

// 导致跨域情况有三种
// 1) 端口不一致
// 2) IP不一致
// 3) 协议不一致

// Django如何解决 - django-cors-headers模块
// 1) 安装：pip3 install django-cors-headers
// 2) 注册：
INSTALLED_APPS = [
    ...
    'corsheaders'
]
// 3) 设置中间件：
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
// 4) 设置跨域：
CORS_ORIGIN_ALLOW_ALL = True
```





## element-ui插件

安装

```
>: cnpm i element-ui -S
```

main.js配置

```js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```

使用

```
依照官网 https://element.eleme.cn/#/zh-CN/component/installation api
```