前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容

前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(一)https://developer.aliyun.com/article/1426378


如何使用FormData进行表单数据编码

可以使用 FormData 对象来将表单数据编码,以便用于 AJAX 请求或其他相关用途。

以下是使用 FormData 对象进行表单数据编码的示例:

<form id="example-form">
  <label>
    用户名:
    <input type="text" name="username">
  </label>
  <label>
    密码:
    <input type="password" name="password">
  </label>
  <label>
    头像:
    <input type="file" name="avatar">
  </label>
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
  const form = document.querySelector('#example-form');
  const formData = new FormData(form);
  // 将编码后的数据发送到服务器
  fetch('/api/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('提交表单失败');
    }
  })
  .then(data => {
    console.log('提交成功', data);
  })
  .catch(error => {
    console.error(error.message);
  })
}
</script>

在以上示例中,我们使用 FormData 对象并指定表单 DOM 元素,并将其赋值给 formData 变量。然后,使用 fetch() 发送了一个 HTTP POST 请求,将 formData 作为请求体中的数据,发送到了服务器上的 /api/submit-form 接口。

使用Ajax提交请求时如何使用FormData

使用 Ajax 进行表单数据提交时,可以使用 FormData 对象来进行表单数据编码,简化表单数据的构造和传输,以下是使用 AjaxFormData 进行表单数据提交的一个示例:

<form id="example-form">
  <label>
    用户名:
    <input type="text" name="username">
  </label>
  <label>
    密码:
    <input type="password" name="password">
  </label>
  <label>
    头像:
    <input type="file" name="avatar">
  </label>
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
  const form = document.querySelector('#example-form');
  const formData = new FormData(form);
  // 使用 Ajax 发送数据
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit-form', true);
  xhr.onload = function() {
    if (this.status === 200) {
      console.log(this.responseText);
    } else {
      console.error('请求发生错误');
    }
  };
  xhr.send(formData);
}
</script>

以上示例中,我们使用 FormData 对象将表单数据编码,并在点击提交按钮时,使用 XMLHttpRequest 对象发送了一个 HTTP POST 请求,将 formData 作为请求体中的数据,发送到了服务器上的 /api/submit-form 接口。在 xhr.onload 事件中,我们判定如果返回状态值为 200,就将响应文本在控制台输出,否则输出错误信息。

FormData的使用场景

FormData 可以用于处理表单提交的数据,并将数据以正确的方式编码和添加到 AJAX 请求中进行传输。

以下是使用 FormData 的一些常见应用场景:

  1. 文件上传 - 可以通过 FormData 对象提交表单中的文件。使用 append() 方法可以将文件对象添加到 FormData 中,然后通过 AJAX 请求将数据提交到服务器。这是 FormData 最常用的应用场景之一。
  2. 表单提交 - 可以使用 FormData 对象将表单数据编码,并通过 AJAX 请求将数据提交到服务器,这种方式通常比传统的表单提交更加灵活。
  3. 图片预览 - 可以使用 FileReader 对象读取选择的图片文件,并将文件内容转换为 Base64 格式后,将转换后的字符串赋值给表单中的一个隐藏字段,然后通过 FormData 异步提交给服务器。
  4. AJAX 文件下载 - 可以将要下载的文件和其他参数一起添加到 FormData 对象中,并通过 AJAX 请求将数据提交到服务器,从而实现文件下载。
  5. 渐进式应用 - 可以通过 FormData 对象来支持渐进式表单提交,如实时保存数据,并在用户离开页面时提交数据。

总之,FormData 可以在各种情况下使用,方便了数据的处理和异步提交。无论是上传图片、文件,还是通过 AJAX 提交表单,都可以使用 FormData 来简化操作。

用途 描述
文件上传 使用 FormData 对象提交表单中的文件,并通过 AJAX 请求将数据传输到服务器
表单提交 使用 FormData 对象将表单数据编码,并通过 AJAX 请求将数据提交到服务器,比传统表单提交更加灵活
图片预览 使用 FileReader 对象读取并转换图片文件为 Base64 格式后,将字符串赋值给表单的隐藏字段,并通过 FormData 异步提交给服务器
AJAX 文件下载 使用 FormData 对象将要下载的文件和其他参数添加到数据中,并通过 AJAX 请求将数据传输到服务器
渐进式应用 使用 FormData 对象支持渐进式表单提交,如实时保存数据,并在用户离开页面时提交数据

FormData 是一种非常有用的对象,可以用于处理表单提交的数据,并将数据以正确的方式编码和添加到 AJAX 请求中进行传输,从而实现各种常见的应用,如文件上传、表单提交、图片预览、AJAX 文件下载等,同时也可以支持渐进式应用。通过使用 FormData,我们可以简化数据处理和异步提交,提高我们的开发效率。

V. HTTP Headers

什么是HTTP Headers

HTTP Headers(HTTP头部信息)是在 HTTP 协议通信过程中,对于 HTTP 请求和 HTTP 响应的描述性信息。

HTTP header 主要由一系列基本的名称/值对(键值对)组成,用于描述客户端和服务器之间的各种数据类型和操作,例如,客户端可以通过设置 HTTP header 来告诉服务器请求的方法、使用的编码格式、预期的 MIME 类型等信息,服务器则可以通过设置 HTTP header 来告诉客户端响应的状态码、MIME 类型、缓存策略等信息。

HTTP header 分为请求头和响应头,请求头包含客户端向服务器端请求信息之前发送的信息,响应头则包含服务器返回的信息。

HTTP 头部信息通常包括以下几个基本的属性:

  • Accept:客户端接受的 HTTP 响应的数据类型;
  • Content-Type:请求或响应内容的 MIME 类型;
  • Authorization:客户端提供的证书或令牌;
  • Cache-Control:缓存策略;
  • Connection:请求完成之后是否关闭网络连接;
  • Content-Length:请求或响应的内容长度(单位是字节);
  • Cookie:客户端传输到服务器的 Cookie 值;
  • Host:请求的主机名和端口号;
  • User-Agent:客户端的应用程序或浏览器信息。

除了上面列举的基本属性之外,还有一些其他特定于某一类型的数据请求或响应的 HTTP header 信息,例如:

  • Referer:客户端用户的来源网址;
  • Location:重定向的地址;
  • Content-Encoding:数据请求或响应的编码方式;
  • Set-Cookie:服务器端写入的 Cookie 值;
  • Last-Modified:内容的最后修改时间。

HTTP header 是 Web 应用程序中的关键元素,有助于客户端和服务器端之间的通信。通过设置正确的 HTTP header,可以帮助实现各种功能和技术,如缓存、安全验证、内容压缩、跨域资源共享等。

常见的HTTP Headers及其作用

以下是常见的 HTTP Headers 及其作用:

HTTP Headers 作用
Accept 用于向服务器指出客户端希望接受的 MIME 类型
Authorization 包含客户端提供的证书或令牌
Cache-Control 用于在请求和响应间传递缓存指令
Connection 用于指定是否关闭网络连接
Content-Encoding 用于指定文档内容的编码方式
Content-Language 用于指定文档内容的自然语言
Content-Length 用于指定请求或响应内容的长度
Content-Type 用于指定请求或响应内容的 MIME 类型
Cookie 包含客户端传输到服务器的 Cookie 值
Host 指定请求的主机名和端口号
If-Modified-Since 用于执行条件 GET 操作
Last-Modified 请求资源的最后修改时间
Referer 发出请求的页面的 URI
User-Agent 包含了客户端的应用程序、操作系统、浏览器等信息
Set-Cookie 向客户端写入 Cookie 值
Location 用于执行 HTTP 重定向

不同的 HTTP Header 具有不同的作用,可以用于传递数据信息,请求或响应内容的控制以及缓存策略等内容。开发者可以根据自己的需求选择适合的 HTTP Header 来完成网站开发任务。

如何使用HTTP Headers传递参数

HTTP Headers 可以用于传递请求或响应中的参数信息,具体方法如下:

  1. 使用 XMLHttpRequest 对象(简称 AJAX),可以向服务器发送 HTTP 请求,并在请求中通过设置 HTTP Headers 来传递参数信息。例如,可以使用 setRequestHeader() 方法来设置请求头部信息:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.send();

在这个例子中,setRequestHeader() 方法被用来设置认证 token。这样,就可以将认证信息作为一个请求头信息,发送到服务器上。

  1. 像 HTTP Headers 一样设置 URL 中的参数。HTTP URL 经常会传递参数信息,可以跟 HTTP Header 相配合,将数据传递到服务器。例如:
http://example.com/api?username=user&password=pass

在这个例子中,URL 参数是 usernamepassword。如果服务器知道如何读取这些参数,就可以处理 HTTP 请求,返回结果适当地响应。使用这种方式传递参数的好处是,URL 参数的格式比请求头更加简单,容易处理。

总之,HTTP Headers 可以用来传递请求或响应中的参数信息,具有非常广泛的应用场景,并且搭配 AJAX 使用时可实现无需页面刷新的异步数据传送。但是开发者需要注意,不要把过多的信息放到头部参数中,以免拖慢服务器的响应速度。

HTTP Headers的使用场景

以下是 HTTP Headers 的常见使用场景及其具体的 HTTP Headers:

场景 HTTP Headers
认证 Authorization
缓存控制 Cache-Control, Expires
压缩 Accept-Encoding, Content-Encoding
跨域请求 Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin
表单提交 Content-Type, Content-Disposition
断点续传 Range, Content-Range
跳转 Location
用户代理 User-Agent
Cookie 传输 Cookie, Set-Cookie

HTTP Headers 可以用于传输请求和响应的信息,不同的场景需要使用不同的 HTTP Headers。对于认证、表单提交、断点续传等场景,HTTP Headers 通常会承载关键信息;对于缓存控制、跨域请求、压缩、用户代理等场景,HTTP Headers 可以帮助服务器和客户端作出决策。最常见的 HTTP Headers 是 Content-Type,用于指定请求或响应消息的 MIME 类型,因为它能等效于设置一些其他 HTTP Headers。

通过使用正确的 HTTP Headers,可以使客户端和服务器之间的数据传输更加高效,并保证信息的传输和存储的安全性,开发者应该在实际应用中根据不同场景选择对应的 HTTP Headers。

VI. JSON数据提交

JSON格式介绍

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,基于 JavaScript 语法的子集,因此易于阅读和编写。JSON 格式是一种常见的数据交换格式,旨在通过独立于操作系统和编程语言的方式实现数据的交换和远程访问。

JSON 格式是一种完全独立的格式,不依赖于任何语言或软件包。

它的设计简单,可读性强,易于实现和扩展。

JSON 格式可以表示

  • 对象(使用花括号 {}
  • 数组(使用方括号 []
  • 原始值(例如字符串、数字、布尔值和空值)
  • 并且支持嵌套和复合数据类型。

下面是一个示例 JSON 对象:

{
  "name": "John",
  "age": 30,
  "email": "john@example.com",
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "country": "USA"
  }
}

在这个例子中,JSON 对象表示了一个人的信息,包括姓名、年龄、爱好、地址等。其中,hobbies 是一个数组类型,address 是一个嵌套的对象类型。

使用 JSON 格式的最主要优点是它能够简化数据交换的过程,使得不同系统之间的数据交换变得更加容易和可靠。在 Web 应用程序的开发中,JSON 格式也被广泛使用,例如在 AJAX 技术中,通过从服务器获取 JSON 格式数据,可以实现动态页面效果

如何将JSON数据序列化为字符串

将 JSON 数据序列化为字符串的过程被称为 “stringify” 。

在 JavaScript 中,可以使用 JSON.stringify() 方法将 JavaScript 数据类型序列化为 JSON 字符串。

以下是使用 JSON.stringify() 方法将 JavaScript 对象转化为 JSON 字符串的示例:

const data = {
  "name": "John",
  "age": 30,
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "country": "USA"
  }
};
const jsonString = JSON.stringify(data);
console.log(jsonString); // {"name":"John","age":30,"hobbies":["reading","music","sports"],"address":{"street":"123 Main St","city":"New York","state":"NY","zip":"10001","country":"USA"}}

以上代码中,定义了一个 JavaScript 对象 data ,该对象包含一些属性和子属性。通过在 JSON.stringify() 方法中传入 data 对象,可以将其序列化为 JSON 字符串并赋值给 jsonString 变量。

需要注意的是,JSON.stringify() 方法默认情况下会将包含 “undefined”、“function” 或 “symbol” 类型的属性删除,因此建议使用时添加过滤函数或指定额外参数。同时,使用 JSON.stringify() 方法序列化的 JSON 字符串可以轻松地通过网络发送、存储或在 Web 应用程序中交换。

如何在请求参数中传递和解析JSON数据

在 Web 应用程序中,常常需要在请求参数中传递和解析 JSON 数据。以下是一些常见的方法:

1. 使用 GET 请求和 URL 参数传递 JSON 数据:

const data = { "name": "John", "age": 30 };
const urlParams = new URLSearchParams(JSON.stringify(data));
const response = await fetch('/api?data=' + encodeURIComponent(urlParams.toString()));

在这个例子中,JavaScript 对象 data 被序列化为 JSON 字符串后通过 URLSearchParams 添加到 URL 参数中,最后使用 encodeURIComponent() 方法对参数进行编码处理,发送 GET 请求。

2. 使用 POST 请求和请求体传递 JSON 数据:

const data = { "name": "John", "age": 30 };
const response = await fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

在这个例子中,JavaScript 对象 data 被序列化为 JSON 字符串后设置为 POST 请求的请求体内容,通过 headers 中指定的 Content-Type 通知服务器该请求体是一个 JSON 数据。

在服务器端,可以使用对应的解析方法将 JSON 数据反序列化为 JavaScript 对象。例如,在 Node.js 中,可以使用内置的 JSON.parse() 方法解析 JSON 数据:

const http = require('http');
http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/api') {
    let body = '';
    req.on('data', (chunk) => { body += chunk.toString(); });
    req.on('end', () => { 
      const data = JSON.parse(body); 
      console.log(data);
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify(data));
    });
  }
}).listen(8080);

以上是一个简单的 Node.js HTTP 服务器,当接收到 /api 的 POST 请求时,将请求体通过 JSON.parse() 方法反序列化为 JavaScript 对象并输出到控制台,然后将其再次序列化为 JSON 字符串并返回到客户端。

以上是一些常见的方法,通过这些方法,您可以在 Web 应用程序中轻松地传递和解析 JSON 数据。

JSON数据提交的使用场景

以下是 JSON 数据提交的常见使用场景及其优势:

场景 优势
前后端数据交互 使用 JSON 进行前后端数据交互时,前端可以将 JavaScript 对象或数组转化为 JSON 字符串后发送到服务器,服务器可以简单地解析 JSON 数据并以同样的格式返回数据,大大简化了数据格式转换的过程。
Web API 设计 在设计 Web API 时,通常会选择使用 JSON 格式作为数据交换的格式。使用 JSON 格式作为数据交换格式,不仅能够轻松处理不同数据类型和结构的数据,还能与多种编程语言和平台配合使用。
存储数据 在 Web 应用程序中,将数据存储为 JSON 格式的文件或数据库记录,可以提高应用程序的性能和可维护性。这是因为,JSON 格式是易于阅读和编写的,而且通常比传统的关系型数据库更快地进行读写数据。
处理 RESTful API 在处理 RESTful API 时,通常使用 JSON 格式传递数据。使用 JSON 格式的优点就在于,它可以轻松地表示多个复杂嵌套的对象和数组,并且这些对象和数组可以再次嵌套在一起。

使用 JSON 格式进行数据提交的优点就在于其可读性强,易于解析和扩展,并且可以与不同编程语言和平台进行协作。在 Web 应用程序的开发中,因为使用 JSON 数据可以大大简化前后端交互的过程,因此越来越多的 Web 应用程序开始使用 JSON 数据格式。

VII. XML数据提交

XML数据格式介绍

XML(Extensible Markup Language)是一种通用的标记语言,用于描述数据结构和内容

XML 可以表示各种复杂的数据类型,如数字、文本、日期、时间、对象、数组等等,同时具有自我描述性:通过描述数据的结构和定义数据属性,可以获取数据的详细说明和目的。

以下是一个简单的 XML 示例:

<person>
  <name>John</name>
  <age>30</age>
  <address>
    <street>123 Main St</street>
    <city>New York</city>
    <state>NY</state>
    <zip>10001</zip>
  </address>
</person>

在此示例中,XML 标记 ”” 表示 “人” 类型的数据,标记下的子元素包含个人的姓名、年龄和地址。同时,子元素中还有子元素,表示地址信息的详细信息。

与使用标记语言(如 HTML)的网页相比,XML 更强调数据的格式和结构描述。通过定义文档类型声明(DTD)或 XML 模式(XSD)等机制,可对 XML 文档结构和属性进行严格的定义和规范,从而增强了数据交换和数据处理的准确性和可靠性。

由于其灵活性和可扩展性,XML 已被广泛应用于跨平台数据交换、Web 服务、配置文件和消息传递等领域。


前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(三)https://developer.aliyun.com/article/1426380

目录
打赏
0
0
0
0
51
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
161 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
122 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
40 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
89 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
164 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
48 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
87 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
48 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
前端开发者狂喜!30K star开源组件库,界面美观度/开发速度双碾压!
嗨,大家好,我是小华同学。Layui 是一款开源前端 UI 组件库,具有极简设计、强大功能和卓越性能,支持布局、表单、表格、弹层等六大模块,组件高度可定制。它无需复杂构建工具,直接面向浏览器开发,极大提升开发效率与界面美观度。适合新手和老手,快来试试吧!
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
34 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    30
  • 3
    详解智能编码在前端研发的创新应用
    15
  • 4
    智能编码在前端研发的创新应用
    15
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    31
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    22
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    12
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    6