vue网络应用

网络应用（vue结合网络数据开发应用）

axios官网
axios网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址？key=value&key2=value2).then(funtion(response){
   },function(err){
   })
axios.post(地址,{
   key:value,key2:value2}).then(funtion(response){
   },function(err){
   })

1.获取笑话接口
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话

2.用户注册接口
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username（用户名，字符串）
响应内容：注册成功或失败

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">

document.querySelector(".get").onclick = function(){
   
	axios.get(https://autumnfish.cn/api/joke/list?num=3)
	.then(funtion(response){
   
		console.log(respose);
	},function(err){
   	
		console.log(err);
	})
	
}

document.querySelector(".post").onclick = function(){
   
	axios.get(https://autumnfish.cn/api/user/reg,{
   username:"jack"})
	.then(funtion(response){
   
		console.log(respose);
	},function(err){
   	
		console.log(err);
	})
	
}

<div id="app">
	<input type="button" value="获取笑话" @click="getJoke">	
	<p>{
  {joke}}</p>
</div>