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:"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的代替了。

相关推荐
王哲晓10 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41113 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v15 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云25 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058727 分钟前
web端手机录音
前端
齐 飞33 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html