vue框架

1.路由-页面跳转

this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">课程页</router-link>
<router-link :to="{name: 'course'}">课程页</router-link>

代码：

<template>
  <div class="home">
      <Nav/>
    <!--逻辑跳转页面-->
    <div class="router">
      <button type="button" @click="goPage('/course')">课程页</button>
      <button type="button" @click="goHome('/')">主页</button>
      <button type="button" @click="goBack">返回上一页</button>
      <!--通过名字来跳转-->
      <button type="button" @click="goPageName('/course')">课程页(name)</button>

      <!--怎么把这个也通过名字跳转-->
      <!--<router-link to="/course">课程页(name)</router-link>-->
      <!--直接去找这个路由的名字-->
      <router-link :to="{name:'course'}">课程页(name)</router-link>
    </div>

  </div>
</template>

<script>
  import Nav from '@/components/Nav.vue'
export default {
  name: 'home',
  components: {
        Nav
  },
  methods:{
      goPage(page){
      //直接写死去哪个页面
          let currentPage = this.$route.path;
      // 如果你在主页，你还点击主页，就会报错，需要做一下判断
         if (currentPage !== page){
             this.$router.push(page)
         }

      },
      goBack(){
          // js逻辑使用history，完成返回上一页
          this.$router.go(-1)

          //返回上2页
          // this.$router.go(-2)

          // 前进一页
          // this.$router.go(1)
      },
      // 通过名字跳转
      goPageName(pageName) {
          this.$router.push({
              name:pageName
          })
      }

  }
}
</script>

2.课程与详情页简单搭建

小组件：
components，CourseCard 文件夹里面

代码：

<template>
    <!--写一个个课程-->
    <div class="course-card">
        <!--添加一个点击事件-->
        <h1 @click="goDetail">{{ course.name }}</h1>

    </div>
</template>

<script>
    export default {
        name: "CourseCard",
    //  这是从页面组件那边穿过的，这个是父传子
       props:['course'],
    //    点击事件
        methods:{
            goDetail(){
                this.$router.push({
                    name:'course-detail'
                })
            }
        }
    }
</script>

<style scoped>
    /*写一些样式*/
    .course-card h1 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px 'STSong';
        float: left;
        text-align: center;
        cursor:pointer;
    }
</style>

页面组件里面的Course文件夹  课程页：
代码：

<template>
    <div class="course">
        <Nav />

        <!--在这渲染页面   :key="course.name" 这个是建立一下缓存的  :course="course" 父传子-->
        <div class="main">
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"/>
        </div>

    </div>
</template>

<!--三步骤：
导入   渲染   注册

-->
<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    // 现在可以在这直接制造课程
    let course_list = [
    {
        id:1,
        name:'Python入门到入土'
    },
     {
        id:2,
        name:'前端放弃攻略'
    },
         {
        id:3,
        name:'vue'
    },
           {
        id:4,
        name:'基佬是怎样炼成的'
    },




    ];

    export default {
        name: "Course",
       components:{
             Nav,
        CourseCard,
       },
        data(){
            return {
                course_list,
            }
        }
    }
</script>

<style scoped>

</style>

CourseDetail文件夹  详情页：

代码：

<template>
    <!--详情页-->
    <div class="course-detail">
        <h1>Python入门到入土</h1>
        <p>三分钟入门，一分钟入土，一定要学啊</p>

    </div>
</template>

<script>
  
    export default {
        name: "CourseDetail"
    }
</script>

<style scoped>

</style>

router 路由文件夹：

代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Course from './views/Course.vue'
import CourseDetail from './views/CourseDetail.vue'

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
        {
      path: '/course',
      name: 'course',
      component: Course
    },
          {
      path: '/course/detail',
      name: 'course-detail',
      component: CourseDetail
    },


  ]
})

3.路由-俩种传参

第一种：
router.js

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

跳转.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

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

第二种：

router.js

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

跳转.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

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

详细代码：

写一个个的课程小组件

CourseCard.vue

<template>
    <!--写一个个课程-->
    <div class="course-card">
        <!--添加一个点击事件-->
        <!--这是通过逻辑跳转的-->
        <!--<h1 @click="goDetail">{{ course.name }}<h1/>-->
        <!--第三种-->
        <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
        <!--第二种-->
        <!--<router-link :to="{-->
        <!--    name: 'course-detail',-->
        <!--    query: {id: course.id}-->
        <!--}">{{ course.name }}</router-link>-->

    </div>
</template>

<script>
    export default {
        name: "CourseCard",
    //  这是从页面组件那边穿过的，这个是父传子
       props:['course'],
    //    点击事件
        methods:{
            goDetail(){
                // this.$router.push({
                //     name:'course-detail'
                // });
            // 第一种传参方式，因为涉及到路由跳转所以用router
            //      this.$router.push({
            //         name:'course-detail',
            //         // 传参用params字典的方式传
            //         params:{
            //             id:this.course.id,
            //         }
            //     });
                // 第二种传参方式
                //   this.$router.push({
                //     name:'course-detail',
                //     query:{
                //         id:this.course.id,
                //     }
                // });

                // 第三种方式 建议使用这一种
                this.$router.push(`/course/${this.course.id}/detail/`)




            }

        }
    }
</script>

<style scoped>
    /*写一些样式*/
    .course-card h1，.course-card a {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px 'STSong';
        float: left;
        text-align: center;
        cursor:pointer;
        display: block;
    }
</style>

页面课程详情页组件

CourseDetail.vue

<template>
    <!--详情页-->
    <div class="course-detail">
        <h1>{{ course.name }}</h1>
        <p>{{ course.info }}</p>
        <p>{{ course.price }}</p>


    </div>
</template>

<script>
    // 详情页也应该有数据，是详细的数据
    let course_list = [
    {
        id:1,
        name:'Python入门到入土',
        price:6.6,
        info:'三分钟入门，一分钟入土，一定要学啊',
    },
     {
        id:2,
        name:'前端放弃攻略',
        price:5.5,
        info:'学的欲仙欲死',
    },
         {
        id:3,
        name:'vue',
        price:9.9,
        info:'vue前端框架'
    },
           {
        id:4,
        name:'基佬是怎样炼成的',
        price:8.8,
        info:'这本书你值得拥有',
    },
    ];
    export default {
        name: "CourseDetail",
        data(){
            return {
                // 课程初始为空的
                course:{}
            }
        },
        // 拿到课程页点击的id页课程详情的的id进行匹配，然后渲染出相应的数据
       // for of 遍历的是值  for in遍历的是取值的依据(arr是索引，obj是key)
       created() {
            // 这里现在就不能写死了,需要点谁就渲染谁的详情
           //params没有就从query里面去拿
            let  id = this.$route.params.id || this.$route.query.id || 1;
            for (let course of course_list) {
                if  (id === course.id) {
                    this.course = course;
                    break
                }
            }
            // for (let index in course_list) {
            //     console.log(index)
            // }

       }

    }
</script>

<style scoped>

</style>

4.跨组件传参-vuex仓库

可以完成跨组件传参的四种方式

// 1) localStorage：永久存储数据
// 2) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置)
// 3) cookie：临时或永久存储数据(由过期时间决定)
// 4) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)

vue仓库插件

store.js配置文件

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)

5.vue的cookie操作（vue-cookie插件）

安装：

>: cnpm install vue-cookies

main.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

如何使用：

// 增(改): 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的

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

6.vue的ajax操作

axios插件安装：

>: cnpm install axios

main.js配置

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

如何使用：

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

案例：

// get请求
this.$axios({
    url: 'http://127.0.0.1:8000/test/ajax/',
    method: 'get',
    params: {
        username: this.username
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
});

// post请求
this.$axios({
    url: 'http://127.0.0.1:8000/test/ajax/',
    method: 'post',
    data: {
        username: this.username
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
});

7.跨域问题（同源策略）

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

8.vue的element-ui插件

element-ui插件

安装

>: cnpm i element-ui -S

main.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