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

攻城狮幼崽

于 2024-09-15 20:13:17 发布

阅读量471

点赞数 9

分类专栏：笔记分享 Vue 框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_72637723/article/details/142232358

版权

笔记分享同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

框架

2 篇文章 0 订阅

订阅专栏

一，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:"iwen@qq.com",
                                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的代替了。