Vue中发送网络请求

文章目录

  • 前言
  • 一.vue中发送网络请求
    • 1.下载npm 包管理器
    • 2 .安装json-server 工具
    • 3.创建db.json
    • 4. 启动json-server
    • 5.json-server restful接口使用规则
    • 6.见解高效的http库-axios
  • 总结


前言

学习vue中发送网络请求


提示:以下是本篇文章正文内容,下面案例可供参考

一.vue中发送网络请求

1.下载npm 包管理器

https://nodejs.org/en/

Vue中发送网络请求_第1张图片

Vue中发送网络请求_第2张图片

Vue中发送网络请求_第3张图片
Vue中发送网络请求_第4张图片

Vue中发送网络请求_第5张图片
安装完毕,打开cmd,输入npm -v 检查npm 是否安装完毕【见如下界面说明npm安装完毕】
Vue中发送网络请求_第6张图片

2 .安装json-server 工具

   npm i  -g json-server

Vue中发送网络请求_第7张图片

3.创建db.json

{
     
	"brands":[
		{
     
			"id":1,
			"name":"TCL",
			"create_time":"Mon Oct 26 2020 20:49:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":2,
			"name":"Apple",
			"create_time":"Mon Oct 26 2020 17:49:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":3,
			"name":"HuaWei",
			"create_time":"Mon Oct 26 2020 18:49:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":4,
			"name":"百度",
			"create_time":"Mon Oct 26 2020 10:49:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":5,
			"name":"腾讯",
			"create_time":"Mon Oct 26 2020 18:42:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":6,
			"name":"阿里巴巴",
			"create_time":"Mon Oct 26 2020 16:49:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":7,
			"name":"大华",
			"create_time":"Mon Oct 26 2020 14:22:06 GMT+0800 (中国标准时间)"
		},
		{
     
			"id":8,
			"name":"中兴",
			"create_time":"Mon Oct 26 2020 18:23:06 GMT+0800 (中国标准时间)"
		}
	]
}

4. 启动json-server

json-server --watch --port 30001 db.json

Vue中发送网络请求_第8张图片
请求访问
Vue中发送网络请求_第9张图片

5.json-server restful接口使用规则

https://github.com/typicode/json-server
Vue中发送网络请求_第10张图片

6.见解高效的http库-axios

npm安装

  npm install axios

cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
	body>
html>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
	axios.get("http://127.0.0.1:30001/brands/1").then(result =>{
      
		console.log(result.data);
	}).catch(err => {
      
		console.log(ee);
	})
script>

Vue中发送网络请求_第11张图片


总结

学习vue中发送网络请求

你可能感兴趣的:(vue)