知道今天看到一个视频让我恍然大悟!
接口就是别人写好一个请求的处理方法!你只需要按照他所规定的发送请求就可以返回一串他给你的数据!
例如: 只要你发送获取笑话的接口的 固定请求https://autumnfish.cn/api/joke 他就会给你返回一个json串!
我们要做的就是将这个json串中有用的数据提取出来!放到我们需要放的地方就可以了!

1.引入axios的js文件和vue的js文件!在head标签中或者body中都可以!(我放在了body中)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.创建一个按钮用于触发获取笑话的事件,
创建一个<p>标签或者<textarea>标签用于存放笑话

<div id="app">
	<textarea id="test">{{joke}}</textarea><br />
	<input type="button"  value="获取笑话" v-on:click="getJock" />
</div>

3.新创建一对script标签,在里面编写vue的挂载点(注意看一下里面的注解是干嘛用的)

axios的用法
axios.get(地址?key=value1&key2=value2).then.(function(response){“成功是触发”}, function(err){失败时触发})
axios.post(地址,参数).then.(function(response){}, function(err){})

<script>
	var app=new Vue({
		el:"#app",	//元素选择器,选择要操作的元素,就是id="app"的div元素,也可以用其他选择器
		data:{		//这儿就是最终的数据!textarea标签中的数据就是跟这儿要的!
			//这儿的内容会在input按钮被点击后触发事件!从远程获取笑话,然后放在这儿
			joke:"这儿是笑话的内容"		
		},
		methods:{		//事件
			getJock:function(){
				//因为this在进入axios后就会代表axios,所以在进去axios之前提前将他复制一份!
				var that =this;	
				
				/**axios其实就是ajax改造后的!获取这个请求上的结果! then()是返回的结果,
				function(response){}是有结果的方法!function(err){}是返回错误的方法!
				*/
				axios.get("https://autumnfish.cn/api/joke").then(function(response){
				
					/*response是返回的数据,其中data中是存放的笑话内容,
					将笑话内容赋值给that中的joke
					*/
					that.joke=response.data;
				},function(err){})
			}
		}
	});
</script>

结果:

Java如何把别人的接口数据拿到 java怎么调用别人的接口_网络接口

最后的代码是这样的,不对的按照这个看一看错在那儿了!

<body>
		<div class="Centen">
			<div id="app">
				
			<!--	<p>{{message}}</p>
				<p>{{joke}}</p>
			-->	
				<textarea id="test">{{joke}}</textarea><br />
				<input type="button"  value="获取笑话" v-on:click="getJock" />
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"下面给大家带来一个笑话",
					joke:"笑话内容"
				},
				methods:{
					getJock:function(){
						var that = this;
						//"http://v.juhe.cn/joke/content/text.php?page=1&pagesize=1&key=0ebeff61481c18b6198852d985031731"
						axios.get("https://autumnfish.cn/api/joke").then(function(response){
							console.log(response.data);
							console.log(this.joke);
							
							that.joke=response.data;
						},function(err){})
					}
				}
			});
		</script>	
	</body>