【整理+总结】JavaScript 高级（六）网络请求和响应

已于 2023-03-27 11:06:30 修改
阅读量360 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 网络 ajax
于 2023-02-23 17:58:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42771853/article/details/129171717
版权

本笔记整理自codewhy老师的腾讯课程《深入理解JavaScript高级语法》~

🔥前端三件套之 JavaScript 高级地址
（一）函数 this 指向https://blog.csdn.net/weixin_42771853/article/details/129171448
（二）浏览器和 JavaScript 的运行原理、内存管理https://blog.csdn.net/weixin_42771853/article/details/129171479
（三）函数、对象增强和继承https://blog.csdn.net/weixin_42771853/article/details/129171589
（四）E6 ~E13 新特性https://blog.csdn.net/weixin_42771853/article/details/129171646
（五）Promise、异步async await、防抖节流等https://blog.csdn.net/weixin_42771853/article/details/129171690

目录

一、服务端渲染和前后端分离

1. 服务器端渲染

早期的网页都是通过后端渲染来完成的：服务器端渲染：

  • 客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；
    服务器端渲染的缺点：
  • 当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则
  • 而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销

在这里插入图片描述

2. 前后端分离

AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新、获取服务器数据的技术。
AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下**与服务器通信，交换数据，或更新页面**。

你可以使用AJAX最主要的两个特性做下列事：

  • 在不重新加载页面的情况下发送请求给服务器；
  • 接受并使用从服务器发来的数据。
    在这里插入图片描述

二、HTTP协议

1. HTTP 的介绍

HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

  • 通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；
    • 我们称这个客户端为用户代理程序（user agent）
  • 响应的服务器上存储着一些资源，比如HTML文件和图像。
    • 我们称这个响应服务器为源服务器（origin server）

我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。

2. HTTP 的组成

一次HTTP请求主要包括：

  • 请求request

    • 请求行
    • 请求头
    • 请求体

  • 响应response

    • 响应行
    • 响应头
    • 响应体

在这里插入图片描述

2.1 HTTP 版本

在这里插入图片描述

2.2 HTTP 请求方式

在RFC中定义了一组请求方式，来表示要对给定资源执行的操作：

  • GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。
  • HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。
    • 比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；
  • POST：POST 方法用于将实体提交到指定的资源。
  • PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；
  • DELETE：DELETE 方法删除指定的资源；
  • PATCH：PATCH 方法用于对应资源部分修改；
  • CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
  • TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

在开发中使用最多的是GET、POST请求；在后续的后台管理项目中，我们也会使用PATCH、DELETE请求

2.3 HTTP 请求 header 相关

Content-type 是这次请求携带的数据的类型：

  • application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值
  • application/json：表示是一个json类型
  • text/plain：表示是文本类型
  • application/xml：表示是xml类型
  • multipart/form-data：表示是上传文件

Content-length：文件的大小长度

keep-alive：

  • http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断
  • 在http1.0中，如果想要继续保持连接：
    • 浏览器需要在请求头中添加 connection: keep-alive；
    • 服务器需要在响应头中添加 connection:keey-alive；
    • 当客户端再次放请求时，就会使用同一个连接，直接一方中断连接
  • 在http1.1中，所有连接默认是 connection: keep-alive的；
    • 不同的Web服务器会有不同的保持 keep-alive的时间；
    • Node中默认是5s中

accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件

accept：告知服务器，客户端可接受文件的格式类型

user-agent：客户端相关的信息

2.4 HTTP 响应状态码

Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：

常见HTTP状态码状态描述信息说明
200OK客户端请求成功
201CreatedPOST请求，创建新的资源
301Moved Permanently请求资源的URL已经修改，响应中会给出新的URL
400Bad Request客户端的错误，服务器无法或者不进行处理
401Unauthorized未授权的错误，必须携带请求的身份信息
403Forbidden客户端没有权限访问，被拒接
404Not Found服务器找不到请求的资源。
500Internal Server Error服务器遇到了不知道如何处理的情况。
503Service Unavailable服务器不可用，可能处理维护或者重载状态，暂时无法访问

三、XMLHttpRequest

1. XHR 发送请求的基本过程

第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）
第三步：配置网络请求（通过open方法）
第四步：发送send网络请求

// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 2.监听状态的改变(宏任务)
xhr.onreadystatechange = function () {
	if (xhr.readyState !== XMLHttpRequest.DONE) return
	const resJSON = JSON.parse(xhr.response)
	console.log(resJSON);
}
// 3.配置请求open
// method: 请求的方式(get/post/delete/put/patch...)
// url: 请求的地址
xhr.open('get', "http://123.207.32.32:8000/home/multidata")
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send()

2. 事件监听

2.1 事件监听 onreadystatechange

我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态：
注意（这个状态并非是HTTP的相应状态，而是记录的XMLHttpRequest对象的状态变化。）

值状态描述
0UNSENT代理被创建，但尚未调用 open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中；responseText 属性已经包含部分数据。
4DONE下载操作已完成。

若想发送同步请求：将open的第三个参数设置为false

const xhr = new XMLHttpRequest()
xhr.open('get', "http://123.207.32.32:8000/home/multidata", false)
xhr.send()

console.log(xhr.response)

console.log('-----------');
console.log('+++++++++++'); // 这两个输出在xhr.response打印之后再打印，不会提前打印

2.2 其他事件监听

除了onreadystatechange还有其他的事件可以监听

  • loadstart：请求开始。
  • progress： 一个响应数据包到达，此时整个 response body 都在 response 中。
  • abort：调用 xhr.abort() 取消了请求。
  • error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
  • load：请求成功完成。
  • timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
  • loadend：在 load，error，timeout 或 abort 之后触发。

3. 响应阶段

3.1 响应数据和响应类型

发送了请求后，我们需要获取对应的结果：response属性

通过responseType可以设置获取数据的类型

  • 如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值
// 1.
const xhr = new XMLHttpRequest()

// 2.onload监听数据加载完成
xhr.onload = function () {
	console.log(xhr.response)
	// 早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、 responseXML来获取响应结果；之后将它们转化成JavaScript对象形式；
	// console.log(xhr.responseText)
	// console.log(xhr.responseXML)
}

// 3.告知xhr获取到的数据的类型
// 目前服务器基本返回的都是json数据，直接设置为json即可
xhr.responseType = "json"
// xhr.responseType = "xml"

// 4.配置网络请求
// 4.1.json类型的接口
xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_json")
// 4.2.text类型的接口
xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_text")
// 4.3.xml类型的接口
xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml")

// 5.发送网络请求
xhr.send()

3.2 获取响应码

获取HTTP响应的网络状态，可以通过status和statusText来获取：

const xhr = new XMLHttpRequest()

// onload监听数据加载完成
xhr.onload = function () {
	if (xhr.status >= 200 && xhr.status < 300) {
		console.log(xhr.response);
	} else {
		console.log(xhr.status, xhr.statusText);
	}
}

xhr.responseType = "json"

// xhr.open("get", "http://123.207.32.32:8000/home/multidata")
xhr.open("get", "http://123.207.32.32:8000/aaa/bbb")

xhr.send()

4. 服务器传递参数

常见的传递给服务器数据的方式有如下几种：

  • 方式一: GET请求的query参数
  • 方式二: POST请求 x-www-form-urlencoded 格式
  • 方式三: POST请求 FormData 格式
  • 方式四: POST请求 JSON 格式
<form class="info">
	<input type="text" name="username">
	<input type="password" name="password">
</form>
<button class="send">发送请求</button>

<script>
const formEl = document.querySelector(".info")
const sendBtn = document.querySelector(".send")

sendBtn.onclick = function() {
	// 创建xhr对象
	const xhr = new XMLHttpRequest()
	// 监听数据响应
	xhr.onload = function() {
		console.log(xhr.response)
	}
	// 配置请求
	xhr.responseType = "json"

	// 1.传递参数方式一: get -> query
	xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=why&age=18&address=广州市")

	// 2.传递参数方式二: post -> urlencoded
	xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
	// 发送请求(请求体body)
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	xhr.send("name=why&age=18&address=广州市")

	// 3.传递参数方式三: post -> formdata
	// 发送参数默认是FormData格式，所以不用声明Content-type
	xhr.open("post", "http://123.207.32.32:1888/02_param/postform")
	// formElement对象转成FormData对象
	const formData = new FormData(formEl)
	xhr.send(formData)

	// 4.传递参数方式四: post -> json
	xhr.open("post", "http://123.207.32.32:1888/02_param/postjson")
	xhr.setRequestHeader("Content-type", "application/json")
	xhr.send(JSON.stringify({name: "why", age: 18, height: 1.88}))
}
</script>

5. ajax 的封装

function hyajax({
	url,
	method = "get",
	data = {},
	timeout = 10000,
	headers = {}, // token
} = {}) {
	// 1.创建对象
	const xhr = new XMLHttpRequest()
	
	// 2.创建Promise
	const promise = new Promise((resolve, reject) => {
	
	    // 2.监听数据
	    xhr.onload = function() {
		    if (xhr.status >= 200 && xhr.status < 300) {
			    resolve(xhr.response)
		    } else {
		        reject({ status: xhr.status, message: xhr.statusText })
		    }
	    }
	    
	    // 3.设置类型
	    xhr.responseType = "json"
	    xhr.timeout = timeout
	    
	    // 4.open方法
	    if (method.toUpperCase() === "GET") {
		    const queryStrings = []
		    for (const key in data) {
			    queryStrings.push(`${key}=${data[key]}`)
		    }
		    url = url + "?" + queryStrings.join("&")
		    xhr.open(method, url)
		    xhr.send()
	    } else {
		    xhr.open(method, url)
		    xhr.setRequestHeader("Content-type", "application/json")
		    xhr.send(JSON.stringify(data))
		}
	})
	
	promise.xhr = xhr
	
	return promise
}

const promise = hyajax({
	url: "http://123.207.32.32:1888/02_param/get",
	data: {
		username: "coderwhy",
		password: "123456"
	}
})

promise.then(res => {
	console.log("res:", res)
}).catch(err => {
	console.log("err:", err)
})

6. 延迟时间 timeout 和取消请求

在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。

  • 当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉
  • 默认值为0，表示没有设置超时时间

我们也可以通过abort方法强制取消请求

<button>取消请求</button>

<script>
const xhr = new XMLHttpRequest()

xhr.onload = function () {
	console.log(xhr.response)
}

xhr.responseType = "json"

// 1.超时时间的设置
xhr.ontimeout = function () {
	console.log("请求过期: timeout")
}
// timeout: 浏览器达到过期时间还没有获取到对应的结果时, 取消本次请求
xhr.timeout = 3000
xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")
xhr.send()

// 2.手动取消结果
xhr.onabort = function () {
	console.log("请求被取消");
}

const cancelBtn = document.querySelector("button")
cancelBtn.onclick = function () {
	xhr.abort()
}

</script>

四、Fetch

1. Fetch 基本使用

Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

  • 比如返回值是一个Promise，提供了一种更加优雅的处理结果方式
    • 在请求发送成功时，调用resolve回调then；
    • 在请求发送失败时，调用reject回调catch
  • 不像XMLHttpRequest一样，所有的操作都在一个对象上

fetch函数的使用：

fetch(input, {method, headers, body})
  • input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型
  • init：其他初始化参数
    • method: 请求使用的方法，如 GET、POST
    • headers: 请求的头信息
    • body: 请求的 body 信息

2. Fetch 数据的响应

Fetch的数据响应主要分为两个阶段：

阶段一：当服务器返回了响应（response）

  • fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析；
  • 在这个阶段，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功；
  • 如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject；
  • 异常的 HTTP 状态，例如 404 或 500，不会导致出现 error
    我们可以在 response 的属性中看到 HTTP 状态：
  • status：HTTP 状态码，例如 200
  • ok：布尔值，如果 HTTP 状态码为 200-299，则为 true

第二阶段，为了获取 response body，我们需要使用一个其他的方法调用。

  • response.text() —— 读取 response，并以文本形式返回 response
  • response.json() —— 将 response 解析为 JSON

3. Fetch GET/POST 请求

// 1.fetch发送get请求
// 1.1.未优化的代码
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
	// 1.获取到response
	const response = res
	// 2.获取具体的结果
	response.json().then(res => {
		console.log("res:", res)
	})
}).catch(err => {
	console.log("err:", err)
})
// 1.2. 优化方式一:
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
	// 1.获取到response
	const response = res
	// 2.获取具体的结果
	return response.json()
}).then(res => {
	console.log("res:", res)
}).catch(err => {
	console.log("err:", err)
})
// 1.3. 优化方式二:
async function getData() {
	const response = await fetch("http://123.207.32.32:8000/home/multidata")
	const res = await response.json()
	console.log("res:", res)
}
getData()

// 2.post请求并且有参数
async function getData() {
	// 1.常用内容传递
	const response = await fetch("http://123.207.32.32:1888/02_param/postjson", {
		method: "post",
		headers: {
			"Content-type": "application/json"
		},
		body: JSON.stringify({
			name: "why",
			age: 18
		})
	})
	// 2.formData类型内容传递
	const formData = new FormData()
	formData.append("name", "why")
	formData.append("age", 18)
	const response = await fetch("http://123.207.32.32:1888/02_param/postform", {
		method: "post",
		body: formData
	})
	
	// 获取response状态
	console.log(response.ok, response.status, response.statusText)
	
	const res = await response.json()
	console.log("res:", res)
}
getData()

4. 文件上传

4.1 XMLHttpRequest 的文件上传

<input class="file" type="file">
<button class="upload">上传文件</button>

<script>
const uploadBtn = document.querySelector(".upload")
const fileEl = document.querySelector(".file")

uploadBtn.onclick = function () {
	// 1.创建对象
	const xhr = new XMLHttpRequest()
	
	// 2.监听结果
	xhr.onload = function () {
		console.log(xhr.response)
	}
	
	xhr.onprogress = function (event) {
		console.log(event)
	}
	
	xhr.responseType = "json"
	xhr.open("post", "http://123.207.32.32:1888/02_param/upload")
	
	//表单
	const file = fileEl.files[0]
	
	const formdata = new FormData()
	formdata.append('avatar', file)
	
	xhr.send(formdata)
}
</script>

4.2 Fetch 的文件上传

<input class="file" type="file">
<button class="upload">上传文件</button>

<script>
const uploadBtn = document.querySelector(".upload")
const fileEl = document.querySelector(".file")

uploadBtn.onclick = async function() {
	// 表单
	const file = fileEl.files[0]
	const formData = new FormData()
	formData.append("avatar", file)
	
	// 发送fetch请求
	const response = await fetch("http://123.207.32.32:1888/02_param/upload", {
		method: "post",
		body: formData
	})
	const res = await response.json()
	console.log("res:", res)
}
</script>
CodeNect
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中ajax返回结果判断,js发送请求，确定请求有值后返回结果
weixin_31885729的博客
08-05 1118
当我发送一个ajax请求后台结果的时候，后台返回数据的时间是不等的因为使用到了区块链技术，当前台去请求一个智能合约(方法)的时候后台执行的步骤是：1.执行方法(执行智能合约)2.生成区块(过程时间不等100ms-2000ms)3.返回结果给前台前端发送请求的过程：1.发送一个请求(智能合约)例：http://127.0.0.1/contract2.再发送一个请求(查看后台是否返回结果)例：htt...
JS高级知识点最新最全梳理上篇（codewhy视频）
qq_59079803的博客
07-11 2226
前言：过程：1.JS引擎在执行JS代码的过程（内存） 复杂数据类型对应的空间中存储的不是直接是复杂数据类型，而是内存地址2.函数调用函数的执行过程 函数的父级作用域链在内存中跟调用位置没有关系的，是在定义位置有关 代码： 图片： 描述过程：3.变量环境和记录VO：前言： 1.闭包 概念： 作用： 造成的问题 手写闭包打印123 代码片段 闭包内存泄漏 闭包面试题：.......................................
httpClient接口请求优化
wuxinfuchen的博客
05-11 292
httpClient封装请求
跟随coderwhy老师 系统学习 深入JavaScript高级语法
weixin_41937876的博客
03-14 1360
重新学习 JavaScript高级语法
axios（codewhy老师学习笔记）
weixin_45773503的博客
03-21 921
为什么选择axiox 作者推荐，量级轻。 功能特点 在浏览器中发送XMLHttpRequests请求 在node.js中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 …
Javascript培训资料整理分享：Javascript入门指南
最新发布
02-19
### JavaScript培训资料整理分享：JavaScript入门指南 #### 一、初识JavaScript ##### 1.1 网页三剑客 网页开发中通常提到的“三剑客”包括HTML、CSS以及JavaScript。 - **HTML (HyperText Markup Language)**: ...
Java+Web之高级应用源码整理
08-23
通过这个"Java+Web之高级应用源码整理"，开发者不仅可以学习到具体的代码实现，还能理解背后的设计思想和最佳实践，这对于提升Java Web开发技能大有裨益。记得下载"javaSrc87.zip"并根据"下载及使用说明.txt"来...
高级前端高频面试笔记整理
02-20
**高级前端高频面试笔记整理** 在前端开发领域，面试往往是检验开发者技能和知识深度的重要环节。这份高级前端高频面试笔记涵盖了前端开发中的关键知识点，旨在帮助求职者充分准备，提升面试成功的概率。以下是对...
JavaScript整理
04-29
10. **异步编程**：JavaScript是单线程的，但通过回调函数、Promise、async/await等技术可以处理异步操作，如定时任务、文件读写和网络请求。 11. **ES6及后续版本的新特性**：包括类(class)、解构赋值、模板字符串...
front-end-note:总结整理学习前端过程中的知识及经验
06-03
"js练习"部分则可能是实际的编程练习，通过编写代码来加深对JavaScript的理解，这些练习可能包括基本的逻辑运算、数组操作、函数编程，到更复杂的AJAX请求、WebSocket通信，甚至可能有涉及到前端动画和游戏开发的...
codewhy老师上课的笔记和课件
07-21
这是b站上codewhy老师的vue上课笔记以及课件，还有对应的代码，方便同学们学习的时候使用，如果需要的可以下载
B站coderwhy老师Vue课程上课课件代码笔记资料
09-11
B站视频地址： https://www.bilibili.com/video/BV15741177Eh?from=search&seid=291894933216424179 B站视频是免费的，讲的很好，这里放一份资料，方便大家学习。
【整理+总结】JavaScript 高级（五）Promise、异步async await、防抖节流等
weixin_42771853的博客
02-23 918
this . name = name this . age = age this . height = height this . friends = friends } // 实例方法 [ Symbol . iterator ]() {return {return {console . log('监听到迭代器中断了');return {break } } // james curry 监听到迭代器中断了。
【整理+总结】JavaScript 高级（二）浏览器和 JavaScript 的运行原理、内存管理
weixin_42771853的博客
02-22 723
首先通过DNS服务器进行域名解析，解析出对应的IP地址，然后从ip地址对应的主机发送http请求，获取对应的静态资源默认情况服务器会返回index.html文件然后浏览器内核开始解析HTML首先会解析对应的html 生成DOM Tree解析过程中，如果遇到css的link标签则会下载对应的css文件（下载css文件和生成DOM树同时进行）下载完对应的css文件后会进行css解析 生成CSSOM当DOM Tree和CSSTree都解析完成之后 会进行合并用来生成(渲染树)
【整理+总结】JavaScript 高级（四）E6 ~E13 新特性
weixin_42771853的博客
02-23 363
如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用；一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易。，不是为了去监听截止一个对象中 所有的属性的；◼ let关键字：从直观的角度来说，let和var是没有太大的区别的，都是用于。Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是。在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的。递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个。
B站codewhy的Vue课程资源
热门推荐
H.千面的博客
03-25 1万+
B站课程2019年最全最新Vue、Vuejs教程，从入门到精通 老师的个人空间：codewhy的个人空间 资料是我加老师微信之后，老师分享的，在这里特别感谢老师，开始还以为是有偿的，没想到老师齐刷刷的免费发了齐全的资料。 发博客记录一来是为了记录，怕自己之后资料丢了，二来是分享，如有冒犯，请私信或评论区留言，谢谢。 vue资料（包含代码）， 链接: https://pan.baidu.com/s/1QiQCRTkXPN6Y7gIEdjN7FQ 提取码: crxq vue资料（只有ppt）， 链接：https
跟着coderwhy老师做的vue购物车小案例
Jamtin的博客
09-15 739
跟着pink老师做的vue购物车小案例 效果图： 学习的话肯定是一步一步敲下去，先把table的结构给写出来 <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th>
b站coderwhy老师_知道B站破圈的真正原因，何老师都哭了……
weixin_42099942的博客
12-02 1543
全文3902个字，大约需要花费您9分钟时间。B站在半个月内连续发布了两只宣传片，【后浪】和【入海】【后浪】叙述的是小部分精英群体的故事，或者说大部分普通年轻人遥不可及的高度，随后就在互联网上引起了大量褒贬不一的讨论。【入海】则刚好相反，它讲的是一群在海里苦苦挣扎的毕业生的普通生活，里面的元素有毕业、分手、工作不顺、厨师、直播、电竞梦。大家毕业后奔涌入海，各种面临着生活的压力。一切都不如意...
学习coderwhy老师利用vue开发supermall
tangyuan的博客
01-27 7398
网络请求 request.js import axios from 'axios' export function request(config) { // 1、创建axios的实例 const instance = axios.create({ baseURL: 'http://', timeout: 5000 }) // 2、axios的拦截器 // 2...
JavaScript经典权威指南：最佳自学资料
"这是一份关于JavaScript的自学PDF资料，由古国江南整理，被誉为最佳的JavaScript自学手册。该资料详细介绍了JavaScript的基础概念、特点和应用，适合初学者使用。" JavaScript，全名JavaScript（简称JS），是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值