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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/424591.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[000-002-01].第03节:Linux系统下Oracle的安装与使用

2.1.Docker安装Oracle 在CentOS7中使用Docker安装Oracle&#xff1a; 1.安装Docker,详细请参考&#xff1a;https://blog.csdn.net/weixin_43783284/article/details/1211403682.拉取镜像&#xff1a; docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g3.下载…

《OpenCV计算机视觉》—— 图像轮廓检测与绘制

文章目录 一、轮廓的检测二、轮廓的绘制图像轮廓检测与绘制的代码实现 三、轮廓的近似 一、轮廓的检测 轮廓检测是指在包含目标和背景的数字图像中&#xff0c;忽略背景和目标内部的纹理以及噪声干扰的影响&#xff0c;采用一定的技术和方法来实现目标轮廓提取的过程注意:做轮…

linux驱动开发-磁盘管理

目录 一、mount基本语法 二、常见选项 三、常用命令 二 fdisk --磁盘分区工具 fdisk作用 命令格式&#xff1a; 选项 分区示例 查看分区情况 -p 删除分区 -d 新增分区 -n 修改分区类型 —— t 保存之前所有的操作 —— w 在Linux系统中&#xff0c;mount命令是一种…

redis-shake v4全量增量同步redis数据

1 概述 RedisShake是一个用于处理和迁移 Redis 数据的工具&#xff0c;github地址是https://github.com/tair-opensource/RedisShake。它提供以下特性&#xff1a; 1&#xff09;Redis 兼容性&#xff1a; RedisShake 兼容从 2.8 到 7.2 的 Redis 版本&#xff0c;并支持各种部…

Parallels Desktop 20 for Mac中文版发布了?会哪些新功能

Parallels Desktop 20 for Mac 正式发布&#xff0c;完全支持 macOS Sequoia 和 Windows 11 24H2&#xff0c;并且在企业版中引入了全新的管理门户。 据介绍&#xff0c;新版本针对 Windows、macOS 和 Linux 虚拟机进行了大量更新&#xff0c;最大的亮点是全新推出的 Parallels…

微软面向所有用户推出 Xbox Game Pass Standard

2024 年 8 月下旬&#xff0c;微软启动了 Xbox Game Pass Standard 的公开测试&#xff0c;这是其不断发展的 Game Pass 套餐中的一个新层级。几周后的今天&#xff0c;Xbox Game Pass 标准版已向支持地区的所有 Xbox 用户开放。 Xbox Game Pass 标准版每月收费 14.99 美元。以…

[Linux]:进程间通信(上)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. 进程间通信介绍 1.1 进程间通信的概念 进程间通信简称IPC&#xff08;In…

我对 monorepo 的一些思考

我对 monorepo 的一些思考 我对 monorepo 的一些思考 前言它的由来技术选型 管理工具语言与打包调试工具测试框架代码规范与质量控制本地引用与发包替换发包流程Github 相关配置部署 使用手册 功能特性总结如何使用&#xff1f;清除默认的包(可选)模板包介绍 packagesapps 更新…

GPU池化为实现Robotaxi按下快进键

日前&#xff0c;甲子光年智库推出《2022中国Robotaxi行业研究报告&#xff1a;探寻规模化商业落地之路》。Robotaxi&#xff08;无人驾驶出租车&#xff09;是自动驾驶技术发展应用的终极目标之一&#xff0c;新基建下的智慧共享出行将链接贯穿未来数智化生活全场景。 该报告从…

七. 部署YOLOv8检测器-quantization-analysis

目录 前言0. 简述1. 案例运行2. 补充说明3. 量化分析4. 探讨总结下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习课程第七章—部署YOLOv8检测器&#xff0c;一起来学习…

C语言:链表

链表是一种常见的基础数据结构&#xff0c;它由一系列节点&#xff08;Node&#xff09;组成。每个节点包含两部分&#xff1a;数据域&#xff08;存储数据&#xff09;和指针域&#xff08;存储下一个节点的地址&#xff09;。链表的特点是元素在内存中不一定连续存储&#xf…

BUUCTF 之Basic 1(BUU LFI COURSE 1)

1、启动靶场&#xff0c;会生成一个URL地址&#xff0c;打开给的URL地址&#xff0c;会看到一个如下界面 可以看到是一个PHP文件&#xff0c;非常的简单&#xff0c;就几行代码&#xff0c;判断一下是否有一个GET的参数&#xff0c;并且是file名字&#xff0c;如果是并且加载&a…

GEE:连续变化检测与分类(Continuous Change Detection and Classification, CCDC)教程

连续变化检测与分类&#xff08;Continuous Change Detection and Classification, CCDC&#xff09;是一种土地变化监测算法&#xff0c;旨在对卫星数据的时间序列进行操作&#xff0c;特别是Landsat数据。CCDC包括两个部分&#xff0c;其一是变化检测算法&#xff08;Change …

python小脚本,实时监测服务器是否宕机状态,并发送到指定群组

一&#xff0c;前言 众所周知&#xff0c;市面上监控软件很多&#xff0c;有Zabbix&#xff0c;Prometheus等&#xff0c;但对于相对简单的功能&#xff0c;需要第一时间发现问题&#xff0c;如服务器宕机&#xff0c;zabbix和Prometheus都需要等几分钟才会报警。 想到最原始…

故障排查:VMware虚拟机网络冲突,导致VPN网络无法正常访问

故障现象 某台windows10系统电脑&#xff0c;远程拨号SSL VPN后&#xff0c;无法正常公司内网。通过排查&#xff0c;发现重启开机&#xff0c;操作系统的默认路由多了一条公司内网的默认路由&#xff0c;但网关不正确。手动删除&#xff0c;重启系统又恢复原样。 排查过程 c…

adb的安装和使用 以及安装Frida 16.0.10+雷电模拟器

.NET兼职社区 .NET兼职社区 .NET兼职社区 1.下载adb Windows版本&#xff1a;https://dl.google.com/android/repository/platform-tools-latest-windows.zip 2.配置adb环境变量 按键windowsr打开运行&#xff0c;输入sysdm.cpl&#xff0c;回车。 高级》环境变量》系统变量》…

OpenCV结构分析与形状描述符(20)计算一个包围给定点集的最小外接圆函数minEnclosingCircle()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到一个包围二维点集的最小面积的圆。 该函数使用迭代算法来寻找一个二维点集的最小外接圆。这意味着函数将会通过反复逼近的过程来计算出能够…

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测 目录 多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于BO-LSSVM贝叶斯优化最小二乘支…

莎朗斯通的比基尼视频曝光了她的日常锻炼!自爆曾在重症监护室呆了9天

如果您错过了&#xff0c;莎朗斯通 (Sharon Stone) 的华丽比基尼视频向您展示了她的日常锻炼&#xff01; 9 月 12 日&#xff0c;斯通分享了一段她在泳池里锻炼的视频。她分享了这段视频&#xff0c;并配文&#xff1a;“我刚刚和教练 kristinemarie_18 完成了最后一次锻炼&a…

【Python刷题】Atcoder Beginner Contest 371

目录 A - Jiro题目描述算法思路代码实现 B - Taro题目描述算法思路代码实现 D - 1D Country题目描述算法思路代码实现 E - I Hate Sigma Problem题目描述算法思路代码实现 A - Jiro 题目描述 有三个人&#xff0c;知道他们之中每两个人的年龄关系&#xff0c;输出年龄第二大的…