Vue之路由跳转 传参 aixos 和cookie

　　一.路由跳转

　　1.1 项目的初始化

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

　　精简vue项目的

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

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

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

　　基础的完成了

　　

　　二.路由传参的几种方法

　　　　2.1 导航栏的显示设置

　　　　

<template>
    <div class="nav">
        <ul><li :class="{active: currentPage==='/'}">
            <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">-->
                <!--<a href="/" >主页</a>-->
                <router-link to="/">主页</router-link>
 
            </li>
 
        <li :class="{active: currentPage==='/course'}">
            <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">-->
                <!--<a href="/" >主页</a>-->
                <router-link to="/Course">课程</router-link>
 
        </li>
        </ul>
    </div>
</template>
 
<script>
    export default {
        name: "Nav",
        // changePage()加括号表示有数据需要传参
 
        data(){
            return{
                // 需要将数据的返回
                // 每渲染一个页面，都会出现加载Nav组件，currentPage就会被重置，
                // 1）在点击跳转事件中，将跳转的页面用 数据库 保存，在钩子函数中对currentPage进行数据更新
                currentPage:'',
            }
 
        },
        // 方法:
        // methods: {
        //     // 点击事件
        //     changePage(page){
        //         // 进行路由的跳转
        //         this.$router.push(page);
        //
        //
        //
        //     }
        //
        // },
        // 当前组件加载成功，要根据当前实际所在的路径，判断单选激活标签
        cerate(){
            // 获取路径 导航栏每被加载一次 被点击的页面 就被显示高量 : 也就是显示
            this.currentPage=this.$route.path;
 
        }
    }
</script>
 
<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: dodgerblue;
    }
 
    .nav li {
        float: left;
        padding: 15px 30px;
        font: normal 30px/30px '微软雅黑';
 
    }
    /*.nav li:hover {*/
        /*cursor: pointer;*/
        /**/
 
    /*}*/
    /*.nav li.active {*/
        /*cursor: pointer;*/
        /**/
         /*}*/
    /*!*这里的设置主要为了 我们能搞在导航栏进行 点击一整块 扩大范围*!*/
    /*.nav li a {*/
        /*display: block;*/
        /*height: 30px;*/
    /*}*/
      .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }
    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
 
</style>
 
将导航栏组件() 在 view 中注册

// 将导航栏进行 导入和注册 上面写Nav 标签
 
 import Nav from '@/components/Nav.vue'
export default {
  name: 'home',
  components: {
      Nav,
 
      },

<div class="home">
   <Nav></Nav> 引入组件
</div>

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

　　

<template>
    <div class="home">
       <Nav></Nav>
 
    <!--// 自己设计一个页面跳转-->
    <div class="router">
      <!--设置路由 设计点击按钮-->
      <!--方法 1 path --> 方法
      <button type="button" @click="goPage('/course')">课程页</button>
      <button type="button" @click="goPage('/')">主页</button>
 
      <!--// 方法 2 go(数字)-->方法
      <button type="button" @click="goBack">返回上一页</button>
 
       <!--// 方法3 name -->方法
 
      <!-- 拓展性-->
      <button type="button" @click="goPageName('course')">通过name进行跳转</button>
 
      <!--// 方法(4) 将 name router 中的应用--> 运用a标签的特性
      <!--//原来的条状 to ='' a 标签的属性-->
      <!--<router-link to="/course">课程页的name </router-link>>-->
      <!--// 换成变量 {}  :to属性的要特别注意 'course' 是取值所以要字符串-->
      <router-link :to="{name:'course'}">课程页的name </router-link>>
 
    </div>
    <h1>主页</h1>
 
  </div>
</template>
 
<script>
 // 将导航栏进行 导入和注册 上面写Nav 标签
 
 import Nav from '@/components/Nav.vue'
export default {
  name: 'home',
  components: {
      Nav,
 
      },
 
      methods: {
          goPage(page) {
              // 逻辑跳转 (1)
              let currentPage = this.$route.path; // router.path 取值
              // 若是home 页面就不让他进行跳转
              if (currentPage !==page){
                  this.$router.push(page)
              }
 
          },
 
          // (2)
          goBack(){
              // ji逻辑使用history 返回上一层
              // this.$router.go(-1)
              // 返回上量页
              // this.$router.go(-2);
 
              // 前进一页
              // this.$router.go(1);
              // 前进页
              // this.$router.go(2);
 
          },
          // (3)
          // 总结路由跳转的方式 点击事件
          goPageName(goPageName){
              this.$router.push(goPageName)
          }
 
      }
 
}
</script>

　　2.2 三种传参方式

<template>
    <div class="course-card">
        <!--// {{// 变量相关}}-->
        <h1 @click="goDetail">{{course.name}}</h1>
　　　　

    <!--方法二:link 直接跳转-->
    <router-link :to="`course/${course.id}/detail`">{{course.name}}</router-link>
</div>

    </div>
</template>
 
<script>
 
    export default {
        name: "CourseCard",
        // 从父标签
    // <div class="main">
    //         <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
    // </div>
        props:['course'],
　　　　　　方法

        methods:{
            // goDetail(){
            //     this.$router.push({
            //         // 跳转到详情页 进行页面详情展示
            //         name:'course-detail',
                    // 点击的同时发送id 详情页可以通过param query 获取
 
                    //Object fullPath: "/course/detatil"
                    // hash: ""
                    // matched: [{…}]
                    // meta: {}
                    // name: "course-detail"
                    // params: {}
                    // path: "/course/detatil"
                    // query: {}
                    // __proto__: Object
                    // 这是可以 详情页可以进行接收的参数
 
                    // 第一种传参方式
                    // params: {id:this.course.id},
                    // 第一种传参过去 跳转后页面会刷新
 
                    // 第二种传参方式
                    // query: {id:this.course.id}
                     // 第一种传参过去 跳转后页面不会刷新
 
                    // 第三种常用比较灵活()
                    goDetail(){
                         // 跳转到详情页 进行页面详情展显示 >>> 手动拼接不再通过name
                        // params: {id: "2"} d第三种的话是将 $是前端的站位符号 %s
                        this.$router.push(`/course/${this.course.id}/detail`)
            }
    }
 
    }
 
</script>
 
<style scoped> 
    /*// 设置一下 我们课程列表的样式*/
    .course-card h1{
        width: 250px;
        height: 250px;
        background-color:lightsalmon;
        border-radius: 50%;
        font:normal 22px/250px 'STSong';
        float: left;
        text-align: center;
        cursor: pointer;
        margin: 20px;
 
    }
 
</style>

　　三.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');

　　使用

<template>
 
     <div class="test-page">
         <Nav></Nav>
    <h1>测试页面</h1>
         <p>
         <input type="text" v-model=" tokenInput">
             <button @click="getToken">获取token</button>
 
         </p>
         <hr>
         <div class="ajax">
             <input type="text" v-model="username">
             <button @click="ajaxAction">提交按钮</button>
 
         </div>
 
     </div>
</template>
 
<script>
    import Nav from '@/components/Nav.vue'
    export default {
        name: "TestPage",
        components:{
            Nav
        },
        data(){
            return{
                tokenInput:'',
                token:'',
                username:'',
            }
        },
        // 获取token
        methods:{
            getToken(){
                // 什么是token
                // 谁产生的 后台的存储(session表,文件,缓存) 前台存储cookie
                //  怎么用 服务器生成反给 前台 登录认证 登录后的请求
                // if (this.token){
                //     let token=this. tokenInput ;
                //     // token获取后需要前台自己进行存储cookie
                //     // 增 查 更改 删
                //     // 安装vue-cookies
                // }
 
            },
 
            // ajax
            ajaxAction(){
                if (this.username){
                    //
                    this.$axios({
                        url:"http://127.0.0.1:8000/test/ajax",
                        methods:'get',
                        // 请求发送数据 下面的参数
 
                        params:{
                            username:this.username,
                        }
                        // 回调函数
                        // 成功是
                    }).then(function (response) {
                        console.log(response)
                        // 失败是 打印
                    }).catch(function (error) {
                        console.log(error)
                    });
data 也可以发数据 方法二
 
                        this.$axios({
                        url:"http://127.0.0.1:8000/test/ajax",
                        methods:'post',
                        // 请求发送数据 下面的参数
 
                        data:{
                            username:this.username,
                        }
                        // 回调函数
                        // 成功是
                    }).then(function (response) {
                        console.log(response)
                        // 失败是 打印
                    }).catch(function (error) {
                        console.log(error)
                    })
                }
 
            }
 
        }
 
    }
</script>
 
<style scoped>
 
</style>

　　

　　　　下载-安装-使用

　　　　后端提交数据 -=--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
<template>
    <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>
<script>
    // ...
    goDetail() {
        this.$router.push(`/course/${this.course.id}/detail`);
    }
</script>
```
 
##### 接收.vue
 
```js
created() {
    let id = this.$route.params.id;
}
```
 
### 第二种
 
##### router.js
 
```js
routes: [
    // ...
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]
```
 
##### 跳转.vue
 
```vue
<template>
    <router-link :to="{
            name: 'course-detail',
            query: {id: course.id}
        }">{{ course.name }}</router-link>
</template>
<script>
    // ...
    goDetail() {
        this.$router.push({
            name: 'course-detail',
            query: {
                id: this.course.id
            }
        });
    }
</script>
```
 
##### 接收.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
```