vue $http请求服务

vue中的$http服务需要引入一个叫vue-resource.js的文件，因为vue.js中没有$http服务。如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可

引入单个vue的时候可以使用 vue-resource.js的文件实现交互效果

搭建vue项目的时候，我们一般用 axios

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据

后期会更新 axios以及项目搭建

get方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="vue-resource.js"></script>
	</head>
	<body>
		
		<div id="app">
			
			<button @click='get()'>点击</button>
			
			
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{
					get:function(){
							//get请求 需要向后台传参数 语法：{params:{a:10,b:2}}
							//this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){}
						this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){
							console.log(res);
							console.log(res.data);
						},function(res){
							console.log('失败')
						})
					}
				}
			})
		</script>
	</body>
</html>

get.php文件：

<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a-$b;
?>

get方法有两个参数get("PHP文件"，“参数”)

post方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="vue-resource.js"></script>
	</head>
	<body>
		
		<div id="app">
			
			<button @click='post()'>点击</button>
			
			
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{
					post:function(){
						//post方法有三个参数post("php文件"，"参数","emulateJSON:true")
				//emulateJSON:true  模拟一个JSON数据发送到服务器，这样才可以成功运行 
						this.$http.post('post.php',{a:10,b:2},{emulateJSON:true}).then(function(res){
							console.log(res);
							console.log(res.data);
						},function(res){
							console.log('失败')
						})
					}
				}
			})
		</script>
	</body>
</html>

post.php:

<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a+$b;
?>

post方法有三个参数post("php文件"，"参数","emulateJSON:true"

   
  
emulateJSON:true  模拟一个JSON数据发送到服务器，这样才可以成功运行  

这样放在服务器环境下就可以运行了，我用的是phpstudy

=======================================
模拟接口数据---显示到页面上
data.json数据
{
	"total":"4",
	"data":[
		{
			"name":"三国演义",
			"category":"文学",
			"desc":"一个军阀混战的年代"
		},{
			"name":"水浒传",
			"category":"文学",
			"desc":"草寇or英雄好汉"
		},{
			"name":"西游记",
			"category":"文学",
			"desc":"妖魔鬼怪牛鬼蛇神什么都有"
		},{
			"name":"红楼梦",
			"category":"文学",
			"desc":"一个封建王朝的缩影"
		}
	],
	"obj":{"adf":"adf"}
}解析数据  get请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/vue-resource.js"></script>
	</head>
	<body>
		
		<div id="app">
			
			<button @click='get()'>点击请求显示数据</button>
			
			<!--遍历数组   数据  -->
			<ul>
				<li v-for='(item,index) in arr'>{{item.name}} {{item.desc}}</li>
			</ul>
			
		
		</div>
		
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					//声明变量 存数据   $http 请求的数据
					arr:[],
				},
				methods:{
					get:function(){
						//get　请求数据  没有传参  模拟数据json　
						this.$http.get('data.json').then(function(res){
							console.log(res);
							// .data  数据
							console.log(res.data)
							console.log(res.data.data);
							//数据res.data.data  给一个变量
							this.arr=res.data.data;
														
						},function(){
							alert("失败")
						})
					}
				}
				
			})
			
			
		</script>
	</body>
</html>显示页面效果：


可以练习显示数据：


                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/xm1037782843/article/details/80673181

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
                        

                            
                                    
                                    发表于 2021-04-08 00:05:27
                                
阅读 ( 1256 )
分类：前端
                                

                        