首页 > 其他分享 >Axios快速入门

Axios快速入门

时间:2023-01-27 02:11:25浏览次数:60  
标签:axios 入门 53000 json Axios user 快速 response name

参考目录

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);

标签:axios,入门,53000,json,Axios,user,快速,response,name
From: https://www.cnblogs.com/cnleika/p/17067813.html

相关文章

  • 快速幂c++
    是求(a^b)modp如果用暴力解法O(b)点击查看TLE代码c++#include<iostream>usingnamespacestd;intmain(){inta,b,p;longlongres=1;cin>>a>>b>......
  • 通过脚本实现Java程序在window系统中的快速启动和快速停止
    本文的目的是通过脚本实现Java程序在window系统中的快速启动和快速停止启动java程序前台方式启动java-jarxxx.jar登录后复制通过这种方式启动的缺点是需要保持cmd窗......
  • 230126_50_SpringBoot入门
    4.首页实现自定义配置packagecom.bill.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.an......
  • SAP入门技术分享四:模块化程序
    模块化程序​​1.子程序概要​​​​2.子程序定义​​​​3.子程序参数​​​​(1)传递参数的方法​​​​(2)定义参数类型​​​​(3)参数与结构体​​​​(4)参数与内表​​​​4.......
  • SAP入门技术分享三:OPEN SQL
    OPENSQL​​1.概要​​​​(1)R/3体系结构​​​​(2)SQL定义​​​​(3)OPENSQL经常使用的命令​​​​2.OPENSQL​​​​(1)SELECT语句​​​​(2)INTO语句​​​​3.FROM语......
  • drf快速入门
     1.Web应用模式在开发Web应用中,有两种应用模式:1.前后端不分离[客户端看到的内容和所有界面效果都是由服务端提供出来的。[前后端不分离](assets/depended_front......
  • LESSON THREE:Java入门环境搭建
    Java入门环境搭建Java如何诞生改进了c与c++的一些难点;1995年诞生;三大版本:JavaSE:标准版(桌面程序、控制台开发、简单游戏...)JavaME:嵌入式开发JavaEE:E企业级开发(web......
  • Python入门之选择语句&循环语句练习
    """选择语句ifbool类型的条件:pass满足条件执行的语句else:不满足条件执行的语句----------------------------......
  • Python入门之初识while循环
    """循环语句while条件:循环体"""#死循环:循环条件永远是满足的。whileTrue:usd=int(input("请输入美元:"))print(usd*6.9)i......
  • 软件测试入门知识点
    Prerequisite全部内容转载自:AirtestProjectDocs因为写的实在是太好了!!!简单聊聊测试①首先根据测试方法来划分,可以分为:黑盒测试:最基础的功能测试,不关心内部的代码实......