Vue之前后端交互模式

1. fetch-API的使用

1.1 init

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 0. using Fetch: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch; 1. Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集; 2. Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应; 它还提供了一```全局 fetch()方法```，该方法提供了一种简单，合理的方式来跨网络异步获取资源; --><!-- fetch(...) => https://developer.mozilla.org/zh-CN/docs/Web/API/fetch格式：Promise<Response> fetch(input[, init]);1. 参数：(1) input:  定义要获取的资源。这可能是：a. 一个 USVString 字符串，包含要获取资源的 URL; b. 一个 Request 对象; (2) init: 一个配置项对象，包括所有对请求的设置。可选的参数有：method:         请求使用的方法，如 GET、POST; headers:        请求的头信息, ，形式为 Headers 的对象或包含 ByteString 值的对象字面量; body:           请求的body信息：可能是一个Blob、BufferSource (en-US)、FormData、URLSearchParams 或者 USVString 对象;mode:           请求的模式，如 cors、 no-cors 或者 same-origin; credentials:    ...cache:          ...redirect:       ...referrer:       ...referrerPolicy: ...integrity:      ...2. 返回值：```它返回一个 promise，这个 promise会在请求响应后被 resolve，并传回Response对象```; 3. 与fetch()相关联的对象：(1) Response对象： Fetch API 的 Response 接口呈现了对一次请求的响应数据; (2) Request对象： Fetch API 的 Request接口用来表示资源请求; (3) Headers对象: Fetch API 的 Headers 接口允许您对HTTP请求和响应头执行各种操作; -->
</head>
<body></body>
</html>

1.2 基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>/*fetch()函数返回一个 promise，这个 promise会在请求响应后被 resolve，并传回Response对象;通过response.text(): 它返回一个包含USVString对象（也就是文本）的Promise对象，返回结果的编码永远是 UTF-8;*/fetch('http://localhost:3000/fdata')    // 返回一个Promise对象.then(function (response) {return response.text();         // response.text()又是一个Promise对象}).then(function (text) {// console.log(text);alert(text); });</script>
</body></html>

1.3 参数传递

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">// 1. GET参数传递-传统URL/*fetch('http://localhost:3000/books?id=123', {method: 'get'}).then(function (response) {return response.text();}).then(function (text) {alert(text); });*/// 2. GET参数传递-restful形式的URL/*fetch('http://localhost:3000/books/456', {method: 'get'}).then(function (response) {return response.text();}).then(function (text) {alert(text); });*/// DELETE请求方式参数传递/*fetch('http://localhost:3000/books/789', {method: 'delete'}).then(function (response) {return response.text();}).then(function (text) {alert(text); });*/// POST请求传参(uname=lisi&pwd=123形式)/*fetch('http://localhost:3000/books', {method: 'post',body: 'uname=lisi&pwd=123',headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function (response) {return response.text();}).then(function (text) {alert(text); });*/// POST请求传参(json格式)/*fetch('http://localhost:3000/books', {method: 'post',body: JSON.stringify({uname: '张三',pwd: '456'}),headers: {'Content-Type': 'application/json'}}).then(function (response) {return response.text();}).then(function (text) {alert(text);});*/// PUT请求传参fetch('http://localhost:3000/books/123', {method: 'put',body: JSON.stringify({uname: '张三',pwd: '789'}),headers: {'Content-Type': 'application/json'}}).then(function (response) {return response.text();}).then(function (text) {alert(text);});</script>
</body></html>

1.4 响应数据格式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- Fetch响应结果的数据格式-->
</head><body><script type="text/javascript">/*fetch('http://localhost:3000/json').then(function (response) {return response.json();}).then(function (json) {console.log(json);}); */fetch('http://localhost:3000/json').then(function (response) {return response.text();}).then(function (jsonText) {// console.log(jsonText);              // "{"uname":"lisi","age":13,"gender":"male"}"console.log(JSON.parse(jsonText)); }); </script>
</body></html>

2. axios库的基本使用

2.1 init

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. https://www.axios-http.cn/docs/intro2. Axios是什么？基于promise可以用于浏览器和node.js的网络请求库; Axios 是一个基于promise网络请求库，作用于node.js 和 浏览器中; 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中); 在服务端它使用原生node.js中的http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests; 2. 具备以下特征：a. 从浏览器创建 XMLHttpRequests; b. 从 node.js 创建 http 请求; c. 支持 Promise API; d. 拦截请求和响应; e. 转换请求和响应数据; f. 取消请求; g. 自动转换JSON数据; h. 客户端支持防御XSRF; -->
</head>
<body></body>
</html>

2.2 基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- URLSearchParams对象; -->
</head><body><!-- 引入axios网络库 --><script type="text/javascript" src="../js/axios.js"></script><!-- 发起axios网络请求 --><script type="text/javascript">axios.get('http://localhost:3000/adata').then(function (response) {console.log(response);alert(response.data);});</script>
</body></html>

2.3 参数传递

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript" src="../js/axios.js"></script><script type="text/javascript">/************************************* axios get请求传参 ***********************************/// [1.] 传统URL传参/*axios.get('http://localhost:3000/axios?id=123').then(function (response) {console.log(response.data); }); */// [2.] restful风格传参/*axios.get('http://localhost:3000/axios/123').then(function (response) {console.log(response.data); });*/// [3.] params传参(axios请求配置对象中的一个属性, 必须是一个简单对象 或 URLSearchParams对象)/*axios.get('http://localhost:3000/axios', {params: {               // 自动被转换成?id=789形式id: 789}}).then(function (response) {console.log(response.data); });*//************************************* axios delete请求传参 ***********************************//*axios.delete('http://localhost:3000/axios', {params: {id: 111}}).then(function (response) {console.log(response.data); }); *//************************************* axios post请求传参 ***********************************//*axios.post('http://localhost:3000/axios', {uname: 'lisi',pwd: 123}).then(function (response) {console.log(response.data);});let params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '111');axios.post('http://localhost:3000/axios', params).then(function (response) {console.log(response.data); });*//************************************* axios put请求传参 ***********************************/axios.put('http://localhost:3000/axios/123', {uname: 'lisi',pwd: 123}).then(function (response) {console.log(response.data); });</script>
</body></html>

2.4 响应结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript" src="../js/axios.js"></script><script type="text/javascript">/* 服务器返回json格式数据, 浏览器端的axios将会自动解析json数据格式, response.data就是json对象 */axios.get('http://localhost:3000/axios-json').then(function (response) {console.log(response.data); }); </script>
</body></html>

2.5 全局配置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript" src="../js/axios.js"></script><script type="text/javascript">// 配置请求的基准URL地址axios.defaults.baseURL = 'http://localhost:3000/';// 配置请求头信息axios.defaults.headers['mytoken'] = 'hello';axios.get('axios-json')             // 因为baseURL的存在, 相当于http://localhost:3000/axios-json请求地址.then(function (ret) {console.log(ret.data.uname)});</script>
</body></html>

2.6 axios拦截器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript" src="../js/axios.js"></script><script type="text/javascript">
// 1. 添加请求拦截器axios.interceptors.request.use(// 在发送请求前做些什么function (config) {console.log(config);config.headers.mytoken = 'nihao';return config;},// 对请求错误做些什么function (err) {console.log(err)});// 2. 添加响应拦截器axios.interceptors.response.use(// 对响应数据做点什么function (response) {return response.data;   // 直接将response.data给返回出去, 此时在then中就可以直接拿到data数据了},// 对响应错误做点什么function (err) {console.log(err)}); axios.get('http://localhost:3000/adata').then(function (data) {console.log('***> ' + data); }); </script>
</body></html>

在这里插入图片描述

3. index.js

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 处理静态资源
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Headers', 'mytoken');
//   res.header('Access-Control-Allow-Headers', '*');next();
});
app.get('/async1', (req, res) => {res.send('hello1')
})
app.get('/async2', (req, res) => {if(req.query.info == 'hello') {res.send('world')}else{res.send('error')}
})app.get('/adata', (req, res) => {res.send('Hello axios!')
})
app.get('/axios', (req, res) => {res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {res.send('axios delete 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})app.get('/axios-json', (req, res) => {res.json({uname: 'lisi',age: 12});
})app.get('/fdata', (req, res) => {res.send('Hello Fetch!')
})
app.get('/books', (req, res) => {res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})app.get('/json', (req, res) => {res.json({uname: 'lisi',age: 13,gender: 'male'});
})app.get('/a1', (req, res) => {setTimeout(function(){res.send('Hello TOM!')},1000);
})
app.get('/a2', (req, res) => {setTimeout(function(){res.send('Hello JERRY!')},2000);
})
app.get('/a3', (req, res) => {setTimeout(function(){res.send('Hello SPIKE!')},3000);
})// 路由
app.get('/data', (req, res) => {res.send('Hello World!')
})
app.get('/data1', (req, res) => {setTimeout(function(){res.send('Hello TOM!')},1000);
})
app.get('/data2', (req, res) => {res.send('Hello JERRY!')
})// 启动监听
app.listen(3000, () => {console.log('running...')
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/254511.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

计算机病毒及其防治技术期末复习

计算机病毒及其防治技术期末复习

《计算机病毒及其防治技术》总结复习 文章目录 《计算机病毒及其防治技术》总结复习第一章 概述第二章 蠕虫第三章 病毒结构第四章 计算机病毒的技术特征第五章 特洛伊木马第六章 宏病毒第七章 Linux病毒第八章 移动终端恶意代码第九章 新型计算机病毒第十章&#xff08;上&…
阅读更多...
windows做时间服务器，linux和windows时间同步

windows做时间服务器，linux和windows时间同步

windows做时间服务器&#xff0c;linux和windows时间同步 在Windows上设置NTP 英文版&#xff1a;http://www.satsignal.eu/ntp/setup.html#local Meinberg为Windows用户提供了备受推崇且高度准确的NTP软件的安装程序非常有用- 我要感谢他们。此网页提供了在Windows XP&#xf…
阅读更多...
计算机D盘无法读取,D盘目录或文件已损坏，无法读取解决方案

计算机D盘无法读取,D盘目录或文件已损坏，无法读取解决方案

通过FireWire修复CF文件损坏的工具 立即下载 硬盘上出现“文件或目录损坏且无法读取”的问题. 首先，不要考虑格式化该分区，因为成本太高，并且备份文件也很麻烦. 故障现象 无论是移动硬盘还是USB闪存驱动器，包括本地计算机上的硬盘分区，双击打开时，都会提示: “无法打开H盘…
阅读更多...
chatgpt赋能python：Python中日期转换：从字符串到日期对象

chatgpt赋能python：Python中日期转换：从字符串到日期对象

Python中日期转换&#xff1a;从字符串到日期对象 作为一个经验丰富的Python工程师&#xff0c;日期转换在我的日常编码工作中经常遇到。Python提供了一些内置函数和模块&#xff0c;可以将字符串转换为日期对象或将日期对象格式化为特定的字符串。本篇文章将带您深入了解Pyth…
阅读更多...
MySQL进阶- SQL优化和视图

MySQL进阶- SQL优化和视图

目录 SQL优化插入数据时的SQL优化&#xff08;insert优化&#xff0c;和大批量数据插入&#xff09;主键优化order by优化&#xff08;排序操作的优化&#xff09;group by优化&#xff08;分组优化&#xff09;limit优化&#xff08;分页查询优化&#xff09; SQL优化 插入数…
阅读更多...
网吧台式计算机配置,详细推荐一套网吧电脑配置

网吧台式计算机配置,详细推荐一套网吧电脑配置

让我向您介绍2020年电脑网吧配置和价格的知识&#xff0c;希望对您有所帮助&#xff1a; 1.适合入门玩家的组装计算机配置 2.适用于主流游戏玩家的组装计算机的配置说明&#xff1a;该主机更适合入门级游戏玩家。尽管双核四线程奔腾G4560是上一代产品&#xff0c;但在性价比方面…
阅读更多...
游戏计算机性能要求,解答玩大型游戏的电脑配置

游戏计算机性能要求,解答玩大型游戏的电脑配置

玩电脑大型游戏对于配置有什么要求呢？大家都知道，电脑分为硬件系统和软件系统，而硬件是电脑的基础，大型游戏又属于高端级别的游戏，对于硬件的选择更要多加考虑。我给大家带来了一些大型游戏所需电脑配置，大家可以参考一下 随着网络的发展，大家越来越不开电脑，工作学习娱…
阅读更多...
html需要电脑什么配置,玩大型游戏需要什么电脑配置？大型游戏电脑配置推荐...

html需要电脑什么配置,玩大型游戏需要什么电脑配置？大型游戏电脑配置推荐...

大型游戏电脑配置主要是看CPU和显卡&#xff0c;CPU酷睿I5 8代以上&#xff0c;amd锐龙5以上配置都算比较高的配置了&#xff0c;当然I7 8代更好&#xff0c;显卡GTX960以上&#xff0c;比如玩大型游戏吃鸡GTX960就很勉强&#xff0c;只能开低质量画面玩&#xff0c;其他的硬盘…
阅读更多...
实时游戏计算机配置,怎么知道自己的电脑配置可以玩那些游戏？

实时游戏计算机配置,怎么知道自己的电脑配置可以玩那些游戏？

很多电脑小白都不知道自己的电脑到底能玩哪些游戏&#xff0c;然后就会在贴吧、百度知道、知乎等等网站上进行提问“我的电脑配置能玩那些游戏呢&#xff1f;”这种问题&#xff0c;然后就会得到各路大神的解答&#xff0c;有说你的配置不能玩的&#xff0c;同时也有说你的配置…
阅读更多...
组装电脑配置清单2023 组装电脑配置推荐2023

组装电脑配置清单2023 组装电脑配置推荐2023

3000元组装电脑配置清单 CPU Intel 酷睿i3 10105F 1 560 主板 微星H510M BOMBER 1 529 内存 芝奇Ripjaws V 8GB DDR4 3200&#xff08;F4-3200C16S-8GVKB&#xff09; 组装电脑怎么搭配更合适这些点很重要看过你就懂了 http://www.adiannao.cn/du 硬盘 东芝1TB 7200转 32MB …
阅读更多...
玩计算机组装,2000玩LOL组装电脑清单（组装一台玩lol的电脑配置）

玩计算机组装,2000玩LOL组装电脑清单（组装一台玩lol的电脑配置）

2000玩LOL组装电脑清单，不知不觉就2020下半年了，特殊年时间过的真快，前几天有网友咨询，2000元组装一套玩LOL的组装电脑，还要带显示器，这预算可以说是白菜价了，今天装机100网就利用早上一点时间，整理几份2000元左右的电脑清单，大家可以看看！ 配置一：2000元左右玩英雄…
阅读更多...
win10dnf服务器未响应,win10专业版dnf老是未响应是什么原因?电脑配置没问题呀

win10dnf服务器未响应,win10专业版dnf老是未响应是什么原因?电脑配置没问题呀

我们在操作 win10专业版电脑的时候,常常会遇到win10专业版dnf老是未响应的问题每个人都有不同的操作门路,网友反应自己的dnf老是未响应是什么原因?电脑配置没问题呀!为此小编在大量的搜集dnf老是未响应的解法之后,总结出来一套比较... 针对此问题小编给大家收集整理的问题&…
阅读更多...
玩游戏计算机配置,玩大型游戏需要什么配置

玩游戏计算机配置,玩大型游戏需要什么配置

随着科技的发展&#xff0c;电脑配置也在不断地升级&#xff0c;当然&#xff0c;我们玩的大型游戏对配置大要求也是越来越高。很多朋友想要购买电脑玩一些电脑游戏时该如何选择电脑配置呢?接下来就给大家介绍一下玩大型游戏所需的电脑配置。 玩大型游戏主要电脑配置如何选择 …
阅读更多...
地下城与勇士M如何用电脑玩 地下城与勇士M电脑版教程

地下城与勇士M如何用电脑玩 地下城与勇士M电脑版教程

《地下城与勇士M》是一款根据端游同款游戏改编而来的冒险挑战类手机游戏。在这个暗黑的世界之中&#xff0c;你需要化身为一个超级无比的勇士&#xff0c;你不仅仅需要拥有超级震撼的完美炫斗技能大招&#xff0c;简单畅爽的操作&#xff0c;带你在高度自由的炫斗世界之中展现出…
阅读更多...
ElasticSearch安装部署——超详细

ElasticSearch安装部署——超详细

ElasticSearch安装部署 简介 全文搜索属于最常见的需求&#xff0c;开源的 Elasticsearch &#xff08;以下简称 es&#xff09;是目前全文搜索引擎的首选。 它可以快速地储存、搜索和分析海量数据。维基百科、Stack Overflow、Github 都采用它。 Elasticsearch简称es&…
阅读更多...
ARC学习（1）基本编程模型认识

ARC学习（1）基本编程模型认识

笔者有幸接触了arc处理器&#xff0c;今天就来简单了解一下arc的编程模型 1、ARC基本认识 ARC IP是synopsys 新思公司开发的一个系列ARC IP核&#xff0c;其是一家电子设计自动化&#xff08;EDA&#xff09;解决方案提供商。其主页地址在这里&#xff01;业务主要如下&#x…
阅读更多...
Mac电脑怎么同时登录两个微信账号

Mac电脑怎么同时登录两个微信账号

终端执行 nohup /Applications/WeChat.app/Contents/MacOS/WeChat > /dev/null 2>&1 & 加了&会显示进程号
阅读更多...
怎么在mac上登录两个微信

怎么在mac上登录两个微信

在已经登录了一个微信的情况下&#xff0c;打开终端输入 nohup /Applications/WeChat.app/Contents/MacOS/WeChat > /dev/null 2>&1然后就可以打开另一个微信的登录界面了&#xff0c;直接扫码登录即可
阅读更多...
两部手机还能同时登录1个微信号！这个操作你知道吗？

两部手机还能同时登录1个微信号！这个操作你知道吗？

在上班的时候我们可以看到有不少朋友都会自带两部手机&#xff0c;主要是为了区分工作与生活&#xff0c;但是在登录微信的时候有不少朋友都会遇到这样的问题&#xff0c;一个微信账号可以在两个手机上登录吗&#xff1f;今天就来教怎样同时登录两个微信账号。 一、使用手机号登…
阅读更多...
如何实现微信多开，苹果手机无需越狱

如何实现微信多开，苹果手机无需越狱

I. 前言 本文的前言部分主要介绍了研究背景、研究目的、研究内容和研究方法。其中研究背景介绍了微信双开的概念和应用&#xff0c;并指出苹果手机的微信双开是一个热门话题。研究目的是为了探究苹果手机上微信双开的可行性和实现方法。研究内容包括系统架构设计、模块功能设计…
阅读更多...
最新文章

Copyright @ 2022~2023