Vue(三)---组件2---axios异步通讯---路由_vue axios异步调用传值-优快云博客

一. 组件

组件之间相互传值 父传子子传父

1. 父传子

父组件给子组件绑定属性通过属性进行传值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 父组件   :givemoney="money" 给子组件传值-->
			我现在有一笔钱要给子组件
			<my-son :givemoney="money"></my-son>
		</div>

		<!-- 创建一个局部组件   子组件 -->
		<template id="sun">
			<div>我收到的$是:{{givemoney}}</div>
		</template>

		<script>
			//创建vue实例
			const app = Vue.createApp({
				data() {
					return {
						money: "100w"
					}
				},
				components: {
					"my-son": {
						template: "#sun",
						props: ["givemoney"] // 获取到父组件传的值
					}
				}
			});

			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app");
		</script>

	</body>
</html>

props

传值: 一般使用数组

验证:一般使用对象{}

{Key:类型}

如果传过来的值不是我们设置的类型控制台会提示

总结

父传子

给子组件绑定一个属性并给这个属性一个具体的值
子组件接收 props属性接收主组件传过来的值Props：【“第一步中绑定的属性”】
子组件使用绑定的属性

2. 子传父

子组件传给父组件值的时候必须得点击之后才能够进行传值

子组件传值的时候绑定事件（传值的时候把事件和值一起传过去）

父组件接收值的时候通过事件来接收值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				子组件给我的值是:{{mymoney}} 万
				<my-son @fcz="getmoney"></my-son>
			</div>
		</div>
		<!-- 局部组件 子组件 -->
		<template id="son">
			<div>
				我是一个富翁 点击的时候给父类 $
				<button type="button" @click="givemoney">送财</button>
			</div>
		</template>
		<script>
			//创建vue实例
			const app = Vue.createApp({
				data() {
					return {
						// 父组件显示的值
						mymoney: ""
					}
				},
				methods: {
					getmoney(val) {
						// val代表传过来给父组件的值
						this.mymoney = val
					}
				},
				components: {
					// 设置局部组件
					"my-son": {
						template: "#son",
						methods: {
							givemoney() {
								/**
								 * 给父组件传值 自定义事件
								 * 第一个参数代表事件的名字
								 * 第二个参数代表传给父组件的值
								 */
								this.$emit("fcz", 100)
							}
						}
					}
				}
			});

			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app");
		</script>7
	</body>
</html>

二. axios 前后端交互

axios 与 ajax特别相似

1. 跨域

想要使用axios前后端分离首先要解决一个问题就是跨域我这边使用的软件分别为

前端: HBuilder X

后端: IDEA

跨域顾名思义前端访问后端所以需要在后台设置允许跨域

@CrossOrigin 方法

这个方法支持在类以及方法上使用所以直接写在类上面减少代码量

2. 启动之前写好的SpringBoot页面

SpringBoot 启动检查完毕

3. 发送Get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		
		
		
		<div id="app">
			id:<input type="text" v-model="id"><br>
			获取到的数据:{{empList}}
			<br>
			<button @click="getEmp">获取到集合</button>
		</div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				data() {
					return {
						empList: []
					}
				},
				methods:{
					getEmp(){
						// http://localhost:8080/stu/selectID 可以直接输入浏览器输入的访问地址
						axios.get("http://localhost:8080/stu/selectID",{
							params: {
								id: this.id // 获取到输入的id 传到后台
							},
						}).then(res=>{
							console.log(res);
							this.empList = res.data.data; // 获取到根据id查到的数据 显示在页面中
						}).catch(function(){
							console.log("失败!!!!!");
						})
					}
				}
			});
			
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

4. 发送post请求

post请求与get请求稍微有点不同因为post请求一般完成的都是增删改操作需要传数据但是直接传会出现一个json数据错误所以需要在后台 Controller层在加方法比如我下方写的是新增操作所以需要在新增加一个

@RequestBody方法即可

发送请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		
		
		
		<div id="app">
			名字:<input type="text" name="stuname" v-model="stuname"/><br />
			身份证:<input type="text" name="idcard" v-model="idcard"/><br />
			<button @click="addEmp">添加</button>
		</div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				data() {
					return{
						stuname:"",
						idcard:""
					}
				},
				methods:{
					addEmp(){
						// 访问路径
						axios.post("http://localhost:8080/stu/add",{
							// 获取到页面输入的值进行传值
							stuname: this.stuname,
							idcard: this.idcard
						}).then(res=>{
							console.log(res.data);
						})
					}
				}
			});
			
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

添加成功

三. 路由

以前页面的局部刷新必须使用javascript操作dom节点，改变dom节点的内容，一个页面只能显示该页面的内容。

Vue Router是vue.js的官方路由器。实现多视图的单页面web应用。可以通过不同的URL访问不同的页面内容。

router-link

使用router-link 创建链接。Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view

router-view 将显示与 url 对应的组件。可以把它放在任何地方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.global.js"></script>
		<!--  axios -->
		<script src="js/vue-router.global.js"></script>
	</head>
	<body>
		
		
		<div id="app">
			<!--  路由 -->
			<router-link to="/a">A</router-link>
			<router-link to="/b">B</router-link>
			<!--  容器 显示组件中的内容   -->
			<router-view></router-view>
			
		</div>
		
		<template id="tmp">
			<div>
				这是一个组件的内容
			</div>
		</template>
		
		<template id="tmp2">
			<div>
				这是一个组件B的内容
			</div>
		</template>
		<script>
			const app=Vue.createApp({});
			
			
			// 创建路由
			const router=VueRouter.createRouter({
				// #
				history:VueRouter.createWebHashHistory(),
				// 路由的规则
				// routes 数组
				routes:[
					{
						path:"/a" ,// 路由访问路径 路径必须以/为开始
						component:{ // 访问的组件
							template:"#tmp"
						}
					
				    },
					{
						path:"/b" , // 第二个路由
						component:{
							template:"#tmp2"
						}
					
					},
				]
			})
			// 别忘了调用 ! ! !
			app.use(router);
	
	        app.mount("#app");
			
		</script>
		
	</body>
</html>