Axios快速入门

参考目录

json-server:https://www.cnblogs.com/fly_dragon/p/9150732.html

安装json-server

新建文件夹json-server,使用cmd在目录下使用命令

npm install -g json-server

新建db.json

{
  "user": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    }
  ]
}

使用以下命令，把db.json文件托管成一个 web 服务。

json-server --watch --port 53000 db.json

输出类似以下内容，说明启动成功。

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:53000/user

Home
http://localhost:53000

Type s + enter at any time to create a snapshot of the database
Watching...

此时，你可以打开你的浏览器，然后输入：http://localhost:53000/user
,获取json文件。

json-server相当于一个简单的后端服务器，
json-server --watch --port 53000 db.json表明将db.json返回的数据托管成web服务。

安装axios

npm install axios vue-axios -S

引入axios的cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>

简单尝试：
新建html文件，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
	</head>
	<body>
		<script>console.log("Hello,"+axios)</script>
	</body>
</html>

axios发出请求

Get请求

运行json-server，新建html，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
	</head>
	<body>
		<script>
			console.log("Hello," + axios)
		</script>
		<h1 id="text01"></h1>
		<button onclick="btn_Get()">Get</button>
		<button onclick="btn_Post()">Post</button>
		<button onclick="btn_Put()">Put</button>
		<button onclick="btn_Delete()">Delete</button>
		<script>
			const myText = document.getElementById("text01");

			function btn_Get() {
				// 发送axios的Get请求
				axios({
					// 1.请求类型
					method: 'Get',
					// 2.请求json中user下的id为2的数据
					url: 'http://localhost:53000/user/2'
				}).then(response => {
					myText.innerHTML = response.data.name;
					console.log(response)
				});
			}
		</script>

	</body>
</html>

Post-添加数据

			function btn_Post() {
				// 发送axios的Get请求
				axios({
					// 1.请求类型
					method: 'Post',
					// 2.添加至json中user下的
					url: 'http://localhost:53000/user',
					// 3.设置提交内容
					data:{
						name:"王五"
					}
				}).then(response => {
					myText.innerHTML = response.data.name;
					console.log(response)
				});
			}

Put-更新数据

		function btn_Put() {
			// 更新数据
			axios({
				// 1.请求类型
				method: 'Put',
				// 2.添加至json中user下的
				url: 'http://localhost:53000/user/3',
				// 3.设置提交内容
				data:{
					name:"王六"
				}
			}).then(response => {
				myText.innerHTML = response.data.name;
				console.log(response)
			});
		}

Delete-删除数据

		function btn_Delete() {
			// 删除数据
			axios({
				// 1.请求类型
				method: 'Delete',
				// 2.URL
				url: 'http://localhost:53000/user/3',
			}).then(response => {
				myText.innerHTML = response.data.name;
				console.log(response)
			});
		}

vue-cli挂载axios

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);
posted @ 2023-01-27 02:02  对CSDN使用炎拳吧  阅读(125)  评论(0)    收藏  举报