Vue-resource delete请求

Vue-resource delete请求教程

Vue-resource 可以发送 HTTP 的 delete 请求，用于删除一条数据。

Vue-resource delete请求详解

语法

this.$http.delete(url, [options]).then(successCallback, errorCallback)

参数

参数	描述
delete	我们需要发送的是 Vue-resource delete 请求。
successCallback	请求成功后调用的回调函数。
errorCallback	请求失败后调用的回调函数，这个回调是可选的。

Vue-resource数据准备

首先，我们在 E:\workspace 目录，创建一个 db.json 文件，输入以下内容：

{
    "JavaScript":[
        {
            "id": 1,
            "category":"ES6",
            "author": "HaiCoder1"
        },
        {
            "id": 2,
            "category":"Vue",
            "author": "HaiCoder2"
        }
    ],
    "Server":[
        {
            "id": 1,
            "category":"Docker",
            "author": "HaiCoder3"
        },
        {
            "id": 2,
            "category":"Golang",
            "author": "HaiCoder4"
        },
        {
            "id": 3,
            "category":"Python",
            "author": "HaiCoder5"
        }
    ]
}

接着，我们在该目录的地址栏，输入 cmd，打开 cmd 窗口，如下图：

11 vueresource data.png

输入 cmd 之后，直接回车，即可在此目录打开命令行，如下图所示：

12 vueresource data.png

我们在命令行，输入以下命令，启动 json-server：

json-server --watch db.json

更过有关 JsonServer 的使用，请参考前面的 JsonServer 教程。

案例

Vue-resource delete请求

使用 Vue-resource delete 请求，删除一条数据

<!DOCTYPE html>
<html>
<head>
	<title>Vue-resource delete请求</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<!-- 使用 cdn 的方式引入 vue-resource, vue-resource 依赖 vue，所以引入的时候需要先引入 vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="delete请求" @click='deleteInfo'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        methods:{
        	deleteInfo() {
                //通过delete方法的第三个参数，设置提交的内容类型为普通表单数据格式
        		this.$http.delete('http://localhost:3000/Server/1').then(function(result){
        			//通过 result.body 拿到服务器返回的成功的数据
        			console.log(result.body);
        		})
        	}
        }
    });
</script>
</html>

我们点击按钮，向 JsonServer 发送请求，请求成功后，浏览器输出如下内容：

13 vueresource delete.png

我们通过 Vue-resource 发送了 HTTP 的 delete 请求，在成功的回调函数中，使用 result.body 的方法获取服务器返回的数据。

我们再次，使用 GET 请求，获取 Server 模块的新数据，输入以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>Vue-resource get请求</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<!-- 使用 cdn 的方式引入 vue-resource, vue-resource 依赖 vue，所以引入的时候需要先引入 vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="Get请求" @click='getInfo'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        methods:{
        	getInfo() {
        		this.$http.get('http://localhost:3000/Server').then(function(result){
        			//通过 result.body 拿到服务器返回的成功的数据
        			console.log(result.body);
        		})
        	}
        }
    });
</script>
</html>

我们点击按钮，向 JsonServer 发送请求，请求成功后，浏览器输出如下内容：

14 vueresource delete.png

我们可以看到，Server 模块下面 id 为 1 的数据已经不存在了，即被我们使用 DELETE 请求删除了。

Vue-resource delete请求总结

Vue-resource delete 请求语法格式为：

this.$http.delete(url, [options]).then(successCallback, errorCallback)