Vue生命周期；Vue路由配置；vue网络请求；vue跨域处理

一，Vue生命周期

<template><div >
<h1 @click="changeText">{{ info }}</h1></div>
</template><script>
export default {name: 'HelloWorld',data(){return{info:"介绍组件生命周期"}},methods:{changeText(){this.info="修改组件内容";}},beforeCreate(){ /**组件生命周期 */console.log("创建组件前.....")},created(){console.log("创建组件后.....")},beforeMount(){console.log("数据渲染前...")},mounted(){console.log("数据渲染后...")},beforeUpdate(){console.log("数据修改前...")},updated(){console.log("数据修改后...")},beforeDestroy(){
//组件跳离本页面，本页面会执行销毁console.log("数据销毁前...")},destroyed(){console.log("数据销毁后...")}}
</script>
<style ></style>

二，Vue路由配置

        前端路由：说白了就是通过不同的url，来访问不同的页面 这就是前端路由的概念。（即在地址栏输入对应组件设置的地址路径，即可访问，不用再通过主组件中转。）

1，介绍路由

2.安装vue router@3.5.2

【安装指定版本路由】npm install --save vue-router@3  

 2版本的vue项目，安装3版本的路由！

然后重启一下vue项目。

3.配置路由 进行地址栏访问页面

在main.js配置文件进行中配置。

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//1，引入路由管理器
import VueRouter from 'vue-router'
//引入想要配置路由的子组件
import HelloWorld from './components/HelloWorld.vue'
Vue.config.productionTip = false
//2，加载路由
Vue.use(VueRouter)//3，配置路由
const router=new VueRouter({mode:"history",//设置项目的访问模式为history模式，结果是地址栏去掉#
routes:[{path:"/hello",component:HelloWorld}  ]})
//初始化配置
new Vue({router,render: h => h(App),
}).$mount('#app')

4.在主组件（app.vue）中配置路由显示

<template><div><router-view></router-view></div>
</template>

HelloWorld.vue组件内容：

<template><div >
<h1>路由配置成功</h1></div>
</template><script>
export default {name: 'HelloWorld',}
</script>
<style ></style>

补：配置多个路由：在main.js配置文件中const router=new VueRouter直接添加导入即可，其它与上面一致。

5.访问：

自身域名+/hello即可访问。

三，vue网络请求

        使用vuejs前端项目，访问后端服务使用axios库，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.安装Axios

使用命令：npm install axios --save

然后启动运行项目：npm run serve

2.使用  

2.1get请求

【get请求方式，不友好，有乱码】

<template><div><button @click="getArr">点击发送get请求，获得数据</button></div>
</template>
<script>
//引入网络请求资源对象；
import axios  from 'axios';
export default {name:"AxiosGet",methods:{getArr(){//发送get请求axios.get("http://iwenwiki.com/api/blueberrypai/getIndexInteresting.php").then(function(mess){//请求成功时执行的方法console.log("成功"+mess);}).catch(function(e){//请求错误时执行的方法console.log("发生了错误"+e)})}}
}  
</script>
<style></style>

2.2post请求

处理乱码

<!-- post带参提交 --><template><div><form >用户名：<input type="text" v-model="uname"><br>密码:<input type="text" v-model="upwd"><br>验证码:<input type="text" v-model="yzm"><br><input type="button" value="登录" @click="ckLogin"></form></div></template><script>
import axios from 'axios'; //网络请求对象
import qs from "qs"  //处理参数的类型转换和中文乱码export default {name:"UserLogin",data(){return{uname:"",upwd:"",yzm:""}},methods:{ckLogin(){//发送post请求axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({user_id:this.uname,password:this.upwd,verification_code:this.yzm})).then(mess=>{//mess是响应回的信息console.log(mess)if (mess.data.success){alert("登录成功")/** 输入如下登录成功*          user_id:"[e-mail]",password:"iwen123",verification_code:"crfvw"*///登录成功后进行组件跳转this.$router.push("/us")}else{alert("登录失败")}}).catch(err=>{console.log("登录失败")console.log(err)})//简化版成功与失败执行提示}}}</script><style></style>

四，vue跨域处理

跨域的情况有很多：端口不一样，域名不一样，ip和域名不对应等等，都会出现跨域。或者 ：

         进行前端与后端数据进行交互

访问百度音乐例子

未进行跨域处理运行会出错：

解决问题

在项目的跟目录下，创建一个 环境配置文件 vue.config.js，

如果有此文件，修改里面的内容如下：（将原文件已有内容删除）

module.exports = { devServer: {proxy: {'/api': {target: 'http://tingapi.ting.baidu.com',ws: true,pathRewrite: {'^/api': ''},changeOrigin: true}}}
}

修改配置文件后进行项目重启

【修改组件中，get请求或post里的地址代码】

        现在'http://tingapi.ting.baidu.com', 就被名字叫/api的代替了。