vue的封装

vue的封装

封装的意义

• 提高代码的可读性
• 提高代码的可维护性
• 减少代码的书写

封装

// src/api/http.js
import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
// axios.defaults.baseURL = "http://172.16.240.175/:8000/"


//全局设置⽹络超时
axios.defaults.timeout = 10000;


//设置请求头信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';


axios.interceptors.request.use(
 	config => {
 		// 每次发送请求之前判断是否存在token，如果存在，则统⼀在http请求的header都加上
token，不⽤每次请求都⼿动添加了
 	const token = localStorage.getItem("token")
 		// console.log(token)
 	if (token) {
 		config.headers.Authorization = 'JWT ' + token
 	}
 	return config;
 },
 error => {
 	return Promise.error(error);
 })
 
 
 axios.interceptors.response.use(
 	// 请求成功
 	
 	 // res => res.status === 200 ? Promise.resolve(res) :
Promise.reject(res),
 	res => {
 		if (res){
 			//加上201的原因是因为：modelviewset的post请求添加成功后返回的状态码是201
 			if(res.status === 200 || res.status === 201){
 				return Promise.resolve(res);
 			}
 
 
 	}
 },
 
 
 	// 请求失败
 	error => {
 		if (error.response) {
 			// 判断⼀下返回结果的status == 401？ ==401跳转登录⻚⾯。 ！=401passs
 			// console.log(error.response)
 			if (error.response.status === 401) {
 				// 跳转不可以使⽤this.$router.push⽅法、
 				// this.$router.push({path:'/login'})
 				window.location.href = "http://127.0.0.1:8888/"
 			} else {
 				// errorHandle(response.status, response.data.message);
 				return Promise.reject(error.response);
 			}
 			// 请求已发出，但是不在2xx的范围
 		} else {
 			// 处理断⽹的情况
 			// eg:请求超时或断⽹时，更新state的network状态
 			// network状态在app.vue中控制着⼀个全局的断⽹提示组件的显示隐藏
 			// 关于断⽹组件中的刷新重新获取数据，会在断⽹组件中说明
 			// store.commit('changeNetwork', false);
 			return Promise.reject(error.response);
 		}
 	});
 	
 	
// 封装xiaos请求
// 封装get请求
export function axios_get(url, params) {
 	return new Promise(
 		(resolve, reject) => {
 			axios.get(url, { params: params })
 				.then(res => {
 					// console.log("封装信息的的res", res)
 					resolve(res.data)
 				}).catch(err => {
 					reject(err.data)
 				})
 		}
 	)
}	



// 封装post请求
export function axios_post(url, data) {
 	return new Promise(
 		(resolve, reject) => {
 			// console.log(data)
 			axios.post(url, JSON.stringify(data))
 				.then(res => {
 					// console.log("封装信息的的res", res)
 					resolve(res.data)
 				}).catch(err => {
 					reject(err.data)
 				})
 		}
 	)
}



// 封装put请求
export function axios_put(url, data) {
 	return new Promise(
 		(resolve, reject) => {
 			// console.log(data)
 			axios.put(url, JSON.stringify(data))
 				.then(res => {
 					// console.log("封装信息的的res", res)
 					resolve(res.data)
 				}).catch(err => {
 					reject(err.data)
 				})
 		}
 	)
}




// 封装delete请求
export function axios_delete(url, data) {
 	return new Promise(
 		(resolve, reject) => {
 			// console.log(data)
 			axios.delete(url, { params: data })
 				.then(res => {
 					// console.log("封装信息的的res", res)
 					resolve(res.data)
 				}).catch(err => {
 					reject(err.data)
 				})
 		}
 	)
}


export default axios; //⼀定要导出函数

使用

// src/api/http.js


//将我们http.js中封装好的 get,post.put,delete 导过来
import {
   
    axios_get, axios_post, axios_delete, axios_put } from './http.js'

export const qn_token_get = p => axios_get("/oauth/qntoken/", p) // 获取七⽜云
token
export const section_add = p => axios_post("/course/section/", p) // 获取七⽜云
token


// src/components/qiniu.vue
<script>

//导⼊axios函数 
import {
   
   qn_token_get,section_add} from './axios_api/api'
methods: {
   
   
 	changeFile(e){
   
   
 	// 获取⽂件
 		this.file = e.target.files[0];
 	},
 	gettoken(){
   
   
 		//直接使⽤导⼊的axios函数
 		qn_token_get().then(res=>{
   
   
 
 			return this.token = res.data.uptoken
 			console.log(this.token)
 		})
 	},
}

</script>

跨域请求

**浏览器的同源资源：**非同源的页面之间，无法获取数据

同源一般只一下三个东西相同：

• jsonp
• CORS
• 代理解决跨域

vue组件间通信

• 父组件

  <template>
   	<div>
   		<!-- 展示⼦组件的内容 -->
   		<!-- :后的时⼦组件⾥⾯接收的名字，=后⾯的是⽗组件的名字 -->
   		<!-- @后⾯的是⼦组件⾥定义的名字，=是⽗组件⾥获取参数的名字 -->
   	<zi :str="str" @change_fu="getzi" ></zi> 
   	<button @click="change_zi()">修改⼦组件的数据</button>
   		{
       
       {
       
       data}}
   	<!-- {
       
       {
       
       str}} -->
   	</div>
  </template> 
  
  <script>
  import zi from './zi1'
  export default {
       
       
   	name:"fu1.vue",
   	components:{
       
       zi},
      
      data() {
       
       
   		return {
       
       
   			str:'',
   			data:{
       
       }
   		}
   	},
   	methods:{
       
       
   		change_zi(){
       
       
   			this.str = "⽼⼦让你，你就得⼲啥，谁让我是你爸爸"
   
   		},
   		getzi(val){
       
       
   			console.log(val)
   			this.data = val
   
   		}
   	}
  }
  </script>
  

  • 子组件

    <template>
     	<div>
     		<li>
     			<ul>fghajkndlkajdakjd,⼤家上课⽅便那⽔库⾥，减法计算</ul>
     			{
           
           {
           
           str}}
     			<button @click="send_fu()">把数据传递给⽗组件</button>
     		</li>
     
     
     	</div>
    </template> 
    
    <script>
    export default {
           
           
     	name:"zi1",
     	props:["str"],
     	data() {
           
           
     		return {
           
           
     			data:{
           
           "name":"PP"}
     		}
     	},
     
     	methods:{
           
           
            send_fu(){
           
           
     			console.log(this.data)
     			this.$emit("change_fu",this.data)
     		}
     	}
    }
    </script>
    

父子组件的调用

• import导入子组件
• compants这测子组件
• 注册的子组件当做标签来使用

子组件给父组件传参

• 父组件里的子标签里要写上要传递的数据（： 子组件的参数名字=父组件的参数名字 ）
• 在子组件里注册参数（pros）
• 使用父组件传过来的参数

父组件给子组件传参

• 子组件里先用特定的方法来把数据传递给父组件（this.$emit(“方法的名字”，要传递的数据)）
• 父组件的子标签里来接收数据（@子组件的方法 = 父组件的方法）
• 在methods里接收传过来的val并赋值。

来源：oschina

链接：https://my.oschina.net/u/4389114/blog/4757425