2020/12/10自学项目问题总结

2020/12/10自学项目问题总结

axios的实例化，post后台传参的问题

解决代码：
1.配置axios实例化

import axios from 'axios'
export function request(config){
	const instance = axios.create({
		baseURL:'http://localhost:8080',
		timeout:5000
		
	})
	return instance(config)
}

get实例方法，以及拿到数据后执行的方法

request({
					url:'/index.php/index/index/verify',
					method:'get',
					params:{
						value:this.thisyanzheng
					}
				}).then(res=>{
					console.log('res')
					if(document.querySelector('#yz').value == ''){
						document.querySelector('#yztext').innerHTML='请输入验证码'
						return false
					}
					if(res.data.state==false){
						document.querySelector('#yztext').innerHTML='验证码错误'
						return false
					}
					if(res.data.state==true){
						this.yanzheng ='true'
						document.querySelector('#yztext').innerHTML=''
					}
				})

3.post方法比较特殊，需要qs插件，可以从 vue ui里面下载。
并且要在main.js内和组件内引用。
代码如下：

let data = {
					user : this.userna,
					password : this.pwdna
				}
					request({
					    method: 'post',
					    url: '/index.php/index/index/login',
					    data: qs.stringify(data)
					})

本地测试跨域问题解决

本地在一级目录 src同级目录下创建 vue.config.js，并输入代码。解决跨域问题，打包后要删掉，因为，打包之后不存在跨域的问题

module.exports = {
  
    devServer: {
        open: true,
        proxy: {
            '/index.php': {    // '/index.php'的意思是匹配所有带 '/index.php'的地址
                target: 'http://www.userup.com',//要代理的本地api地址，也可以换成线上测试地址
                changeOrigin: true//允许跨域
                
            }
        }
    },
    lintOnSave: false// 屏蔽EsLint
}

路由拦截的问题，禁止用户直接从地址跳转到别的地址。

//路由拦截
const whiteList = ['/zhuce', '/', '/']
router.beforeEach((to,from,next)=>{
	if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
	      next()
	    } 
	else {
		//判断有没有name
	      if(!localStorage.getItem('name')){
	      if(to.path !=='/home'){
	      	return next('/home')
	      }	
	      }
	      next()
	    }
})

通常我们在登录账号的时候，后台会发送一个token值，但是本次用name代替，登录成功后，本地会储存一个name，然后进行判断，是否有name执行语句。

let storage = window.localStorage;  //路由拦截设置，记录上传
						storage.setItem('name', 'name');   //上传name

多窗口进行保存登录状态

用户在登录的时候，需要在本地储存数据，并且记录一下登录状态，我们知道的向本地储存数据的有两个属性，localStorage和sessionStorage
他们的区别是，
sessionStorage只是单页面保存，多页面不会共享登录状态，关闭浏览器，会删除数据。
localStorage会有这多页面保存共享登录状态，关闭浏览器，也会进行数据的保存，
但是如果我们想要关闭浏览器之后清除localStorage本地保存的值并且刷新不会清除

mounted() {
			  window.onbeforeunload = function () {
				  
				    if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
				      {
				             var storage = window.localStorage;
				             storage.clear()
				      }
			               
			            }
			        
		}

需要执行这个方法。