总结2

Posted 2020-11-15 cherish937426

总结

1 在发生页面跳转的时候，如果是a标签就不需要考虑点击重复的页面，前端会发生错误

如果是在逻辑跳转页面就要判断当前的路径是否是点击事件携带的路由。如果不是才我们才跳转

2 还有我们在进行页面跳转的时候，如果在a标签和逻辑跳转中如果用反向解析的时候统一格式都是{name:‘名字’}，还要注意，如果是a标签中的话，to是要加冒号的：应为我们大括号中的是变量

3 跳转页面传入参数，

第一种情况，

1 标签传参，在标签中用反向解析的方式，字典中可传多个参数，然后就是然后在传入query：{ }

2 逻辑传参，在事件中，在this.$route.push(),也是通过反向解析字典中传入多个值，在将query：{ }这里注意，index的前面我们是要加this的，不然页面渲染不出来，

然候获取数据，就是，在生命钩子里，我么直接通过this.$route.query就可以将我们刚才在

上一个页面中向query中添加的数据取出来，然后我么在

第二种情况

1 先要修改路由，用：d来结束我们路由传过来的数据

2 在标签传参的话，那就是将to前面还是得加冒号，应为传入的是变量，里面需要用反引号，将录用写出来，然后，用标签里的变量替换将数据添加到路由中，

3 如果是用逻辑传参的话，和标签是一样的，就是在替换中的大括号中的变量还是得先用this开头，和上面的第一种情况是一样的

然后就是页面接收数据的，和第一中情况是一样的，这里唯一改变的就是我们保存的数据是在params中，

我们一般都是用的第二种，应该尽量的少暴露信息给用户

4 仓库，先要在store.js文件夹中，先在state中先写一个我们要向里面的添加的变量，

然后就可以在各个组件中添加这个变量了，也可以访问变量，但应该是在事件中访问这个变量和修改变量

 

5 Vue-cookies插件

安装，在项目路径下 cnpm install vue-cookies

然后我们要main.js文件中配置，

1 import cookies from ‘vue-cookies‘

Vue.use(cookies)

new Vue({

cookies,

})

2 import cookies from ‘vue-cookies‘

Vue.prototype.$cookies = cookies 注意这里的$ 这个符号可以加，可以不加，但一般都加

用法，在任意住组件的事件中都可以用到cookies

添加和修改cookies this.$cookies.set(‘名称（token）‘,‘cookies值‘，‘时间‘)

获取 this.$cookies.get(‘token名字‘)

删除 this.$cookies.remove(‘token名字‘)

6 安装axios模块

先cnpm install axios

然后在main.js中去配置

还是顾固定的两句话

import axios from ‘axios‘

Vue.prototype.$axios = axios 注意这里的d$符号，还是可以加，可以不加，

然后就是使用

在事件中和ajax的使用都差不多

this.axios({

url:‘请求路由‘,

method:‘请求方式（get，post）‘,

params:{get请求的数据}，data（post请求的数据源）,

}).then(function(response){

console.log(response) 这是返回的消息

}.catch(function(error){

console.log(error) 这是答应后端返回的错误消息

})

注意这里有一个跨域问题，在后端，如果不是自身网站访问的话，只会接受消息，而不给你返回消息

解决这个问题，

先在django中安装一个模块 pip3 install django-cors-headers

然后在app中设置一个app ‘corsheaders‘

然后还要在中间键中设置 ‘corsheaders.middleware.CorsMiddleware‘

最后还要注册 CORS_ORIGIN_ALLOW_ALL = True

就好了