sillyxue

[前端学习笔记] Ajax基础知识整理(包含Postman、Axios、JSONP)

- - 一、客户端与服务器
  - - 1. 基本概念
    - 2. 客户端与服务器通信过程：请求-处理-响应
    - 3. 资源请求：XMLHttpRequest对象
  - 二、Ajax概念及应用场景
  - - 1. Ajax(Asynchronous JS And XML)
    - 2. Ajax应用
  - 三、jQuery封装请求方法
  - 四、接口测试工具Postman
  - - 1. 数据接口
    - 2. 接口文档
    - 3. 接口测试工具【以Postman为例】
  - 五、表单form
  - - 1. 表单作用
    - 2. 表单组成
    - 3. 表单属性：规定如何把采集到的数据发送到服务器
    - 4. Ajax提交表单数据
  - 六、XMLHttpRequest与XMLHttpRequest Level2
  - - 1. XMLHttpRequest
    - 2. XMLHttpRequest发起GET请求
    - 3. XMLHttpRequest发起POST请求
    - 4. 数据交换格式
    - 5. XMLHttpRequest Level2
  - 七、网络数据请求Axios
  - - 1. Axios
    - 2. Axios发起get请求
    - 3. Axios发起post请求
    - 4. Axios发起axios请求
  - 八、跨域请求JSONP
  - - 1. 同源与跨域
    - 2. 跨域请求解决方案
    - 3. JSONP用法

一、客户端与服务器

1. 基本概念

客户端：负责获取和消费资源的电脑。
服务器：负责存放和对外提供资源的电脑。
URL(Uniform Resource Locator)：统一资源定位符，用于标识互联网上资源的唯一存放位置。

2. 客户端与服务器通信过程：请求-处理-响应

[前端学习笔记] Ajax基础知识整理(包含Postman、Axios、JSONP)_第2张图片

3. 资源请求：XMLHttpRequest对象

XMLHttpRequest简称xhr，是浏览器提供的JS成员，通过它可以请求服务器上的数字资源。
请求方式有很多种，其中最常见的是get和post请求。
get请求用来获取服务器资源；post请求用来向服务器提交资源。

二、Ajax概念及应用场景

1. Ajax(Asynchronous JS And XML)

异步JS和XML。理解为在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。让我们轻松实现网页与服务器之间的数据通信。

2. Ajax应用

用户名检测：检测用户名是否被占用。
搜索提示：动态加载搜索提示列表。
数据分页显示：根据页码值动态刷新表格数据。
数据的增删改查：数据交互。

三、jQuery封装请求方法

jQuery对XMLHttpRequest进行封装，提供了一些列相关函数，降低Ajax的难度。

get函数：从服务器获取数据

$.get(url,[data],[callback])

post函数：向服务器提交数据

$.post(url,[data],[callback])

ajax函数：从服务器获取数据/向服务器提交数据

$.ajax({
	type:'', //请求方法:GET,POST...
	url:'',  //请求的URL地址
	data:{}  //请求携带的参数
	success:function(res){} //请求成功的回调函数
})

四、接口测试工具Postman

1. 数据接口

Ajax请求数据时被请求的URL地址叫数据接口。每个数据接口必须有请求方式。

2. 接口文档

接口的说明文档，是调用接口的依据，可以方便知道接口的作用和如何调用。

接口名称
接口地址URL
调用方式GET/POST
参数格式
响应格式
返回示例

3. 接口测试工具【以Postman为例】

可以方便的直接对接口进行调用及测试，不需要写代码。

GET方式
POST方式

五、表单form

1. 表单作用

表单主要负责数据采集功能。通过

标签提交表单操作，可以把采集到的信息提交到服务器端进行处理。

2. 表单组成

表单标签
表单域
表单按钮

3. 表单属性：规定如何把采集到的数据发送到服务器

action：向何处发送表单数据
若不指定URL，则提交到当前页面。
method：以何种方式把表单数据提交到action URL
默认为get，通过URL地址提交数据。
get适合提交少量的简单的数据；post适合提交大量的复杂的、文件上传的数据。
enctype：在发送表单数据前如何编码
target：在何处打开 action URL

4. Ajax提交表单数据

【问题】表单提交数据存在页面跳转前数据及状态丢失的问题。
所以，让表单只负责采集数据，Ajax负责将数据提交到服务器。
1）Ajax监听表单提交事件

// 两种方式
$('#form1').submit(function(e){
	alert('监听到了表单提交事件')
})
$('#form1').on('submit',function(e){
	alert('监听到了表单提交事件')
})

2）阻止表单默认跳转行为

e.preventDefault()

3）获取表单数据[必须为每个表单元素添加name属性]

var data = $('#form1').serialize() //username=ll&age=18

六、XMLHttpRequest与XMLHttpRequest Level2

1. XMLHttpRequest

XMLHttpRequest是浏览器提供的JS对象，通过它可以请求服务器上的数据资源。

2. XMLHttpRequest发起GET请求

// 1. 创建XHR对象
	var xhr = new XMLHttpRequest()
// 2. 调用open函数【创建请求】
// GET请求将参数以“查询字符串”的形式追加到URL后面
	xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// 3. 调用send函数【发起请求】
	xhr.send()
// 4. 监听onreadystatechange事件
	xhr.onreadystatechange = function () {
		// 请求状态xhr.readyState  响应状态xhr.status
  		if (xhr.readyState === 4 && xhr.status === 200) {
    		// 获取服务器响应的数据xhr.responseText
    		console.log(xhr.responseText)
  		}
	}

请求状态描述见下图：
补充知识：URL编码（百分号编码）
URL中有些字符可能会引起歧义。使用安全的字符去表示那些不安全的字符，即用英文字符表示非英文字符。

// URL编码 encodeURI()
var str1 = encodeURI('程序员') // %E7%A8%8B%E5%BA%8F%E5%91%98
// URL解码 decodeURI()
var str2 = decodeURI('%E7%A8%8B%E5%BA%8F%E5%91%98') // 程序员

3. XMLHttpRequest发起POST请求

// 1. 创建xhr对象
    var xhr = new XMLHttpRequest()
// 2. 调用open函数【创建请求】
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置Content-Type属性【编码方式】
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用send函数【发起请求并携带参数】
    xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件
    xhr.onreadystatechange = function () {
    // 请求状态xhr.readyState  响应状态xhr.status
      if (xhr.readyState === 4 && xhr.status === 200) {
      	// 获取服务器响应的数据xhr.responseText(JSON格式的数据)
        console.log(xhr.responseText)
        // JSON转换为JS对象
        JSON.parse(xhr.responseText)
      }
    }

4. 数据交换格式

服务器端与客户端之间进行数据传输与交换的格式。
前端主要是XML和JSON。
1）XML(Extensible Markup Language)可扩展标记语言。
HTML是网页内容的载体，XML是数据的载体。

XML格式臃肿，无关代码多、体积大、传输效率低。
在JS解析中XML比较麻烦。

<note>
	<to>zzto>
	<from>ppfrom>
	<heading>通知heading>
	<body>晚上开会body>
note>

2）JSON(JavaScript Object Notation)JS对象表示法。本质是字符串。

轻量级的文本数据交换格式，比XML更小、更快、更易解析。
成为主流的数据交换格式。
JSON包含“对象”和“数组”两种结构。
属性名key必须双引号包含！所有出现的字符串必须双引号包含！不能写注释！

对象结构：{“key”:value, “key”:value… }。key必须双引号包含的字符串，value可以为数值、字符串、布尔值、null、数组、对象 6种类型。不能包含undefined和函数形式的值。

{
	"name":"pp",
	"age":20,
	"gender":"女",
	"address":null,
	"hobby":["吃饭","睡觉","写代码"]
}

数组结构：[value, value, …]。value可以为数值、字符串、布尔值、null、数组、对象 6种类型。不能包含undefined和函数形式的值。

["java", 100, false, null, [4,5,6], {"name":"pp","age":20}]

JSON与JS对象相互转换：

// JSON.stringify(obj) JS对象转换为JSON 
var obj = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj) // {"a":"hello","b":"world","c":false}
// JSON.parse(json)    JSON转换为JS对象
var str = '{"a": "Hello", "b": "world"}'
var obj = JSON.parse(str) // {a:"Hello",b:"world"}

5. XMLHttpRequest Level2

1）旧版本存在问题

只支持文本数据传输，无法读取和上传文件。
传送和接收数据时没有进度信息，只能提示是否已完成。

2）新版本新加功能

可以设置HTTP请求时限

// 设置超时时间
    xhr.timeout = 30
// 设置超时事件的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了！')
    }

可以使用FormData对象管理表单数据

// 1. 通过DOM操作，获取到form表单元素
    var form = document.querySelector('#form1')
// 2. 创建FormData实例获取form表单数据
    var fd = new FormData(form) // {name: 'pp', pwd: 123}
// 与Jquery的serialize()区分    
// var data = $('#form1').serialize() // name=pp&pwd=123
// 3. 使用FormData对象提交POST方法的数据
    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    ...

// 不涉及表单时 可以调用append函数，向fd中追加数据
    fd.append('name', 'pp')
    fd.append('pwd', '123')

可以上传文件

// 1）定义UI结构【省略】
// 2）验证是否选择了文件
var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
// 3）向FormData追加文件（file为接口定义的数据名称）
var fd = new FormData()
fd.append('file', files[0])
// 4）XHR上传文件【POST方法省略】

可以获取数据传输进度

// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
    	// 计算出上传的进度：e.loaded已传输的字节/e.total需传输的字节
       	var Complete = Math.ceil((e.loaded / e.total) * 100)
        // 动态设置bootstrap的进度条
        $('#percent').attr('style', 'width: '+Complete+'%;').html(Complete+'%')
    }
}
// 上传成功后改变进度条样式
xhr.upload.onload = function () {
    $('#percent').removeClass().addClass('progress-bar progress-bar-success')
}

// 使用jquery实现文件上传时
// 上传文件【只能用ajax】
$.ajax({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
    // 传入FromData数据
    data: fd,
    // 不编码，使用FormData默认的content-Type
    processData: false,
    contentType: false,
    success: function (res) {
       console.log(res)
    }
})
// 监听到Ajax请求被发起
      $(document).ajaxStart(function () {
        $('#loading').show() // #loading 是一张图片
      })
// 监听到Ajax完成
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

七、网络数据请求Axios

1. Axios

专注于网路数据请求的JS库axios.js。
相比于原生的XMLHttpRequest对象更简单易用；相比于jQuery更轻量化。

2. Axios发起get请求

// axios.get(‘url’, { params: paramsObj }).then(callback)
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
// res.data为服务器返回的数据
    console.log(res.data)
})

3. Axios发起post请求

// axios.post(‘url’, paramsObj).then(callback)
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
// res.data为服务器返回的数据
     console.log(res.data)
})

4. Axios发起axios请求

// GET 参数对象写入params
axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get',
    params: { name: '钢铁侠', age: 35 }
}).then(function (res) {
    console.log(res.data)
})
// POST 参数对象写入data
axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: { name: '娃哈哈', age: 18, gender: '女' }
}).then(function (res) {
    console.log(res.data)
})

八、跨域请求JSONP

1. 同源与跨域

两个页面的协议、域名、端口都相同，则两个页面同源。反之为跨域。
同源策略是浏览器提供的一个安全功能，不允许跨域的URL之间进行资源的交互，无法通过Ajax请求跨域的接口数据：

2. 跨域请求解决方案

JSONP：出现早，兼容性好，不标准，只支持GET请求。
CORS：出现晚，兼容性差，W3C标准，支持GET和POST请求。

3. JSONP用法

1）JSONP原理

你可能感兴趣的:(前端,前端,Ajax)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
学会这招！用python爬取微博评论（无重复数据） Python白白白白
python爬取微博评论（无重复数据）前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流，切勿用于非法用途！！！前言前段时间微博上关于某日记的评论出现了严重的两极分化，出于好奇的我想对其中的评论以及相关用户做一
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
从单体到微服务：FastAPI ‘挂载’子应用程序的转变黑金IT fastapi 微服务 fastapi 架构
在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js 前端 javascript 三维场景中下雪效果 threejs实现下雪效果
一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
ajax的同源策略 Spring_Bear
问题之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。同源策略简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：目前，如
系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
apache 安装linux windows 墙头上一根草 apache inux windows
linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式通过二进制文件安装Apache需要的软件有apr,apr-util,pcre 1，安装 apr 下载地址：htt
fill_parent、wrap_content和match_parent的区别 Cb123456 match_parent fill_parent
fill_parent、wrap_content和match_parent的区别: 1）fill_parent 设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte
网页自适应设计天子之骄 html css 响应式设计页面自适应
网页自适应设计网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
[sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
--分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
ImageIO写图片输出到硬盘 3213213333332132 java image
package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
自己的String动态数组宝剑锋梅花香 java 动态数组数组
数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10]; 但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
pinyin4j工具类 darkranger .net
pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
StarUML学习笔记----基本概念 aijuans UML建模
介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。模型、视与图（Model, View and Diagram） &
Activiti最终总结 avords Activiti id 工作流
1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId
从省市区多重级联想到的，react和jquery的差别 bee1314 jquery UI react
在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
Eclipse快捷键大全 bijian1013 java eclipse 快捷键
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
js 笔记函数征客丶 JavaScript
一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用函数变量的调用： vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
1. Some操作在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明： /** Class `Some[A]` represents existin
java 匿名内部类 BlueSkator java匿名内部类
组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用 ljy325 游戏 apple windows XP OS
Mac mini 型号: MC270CH-A RMB:5,688 Apple 对windows的产品支持不好,有以下问题: 1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响! 2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs
读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
JIRA与SVN插件安装 chenyu19891124 SVN jira
JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
常用数学思想方法 comsci 工作
对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考函数思想　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
pl/sql集合类型 daizj oracle 集合 type pl/sql
--集合类型 /* 单行单列的数据，使用标量变量单行多列数据，使用记录单列多行数据，使用集合（。。。） *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /* --集合方法 &n
[Ofbiz]ofbiz初用 dinguangx 电商 ofbiz
从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别) 2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
结构体中最后一个元素是长度为0的数组 dcj3sjt126com c gcc
在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag { __u16 tag_type; __u16 tag_len; &n
Linux cp 实现强行覆盖 dcj3sjt126com linux
发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。方法一我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
Memcached(一)、HelloWorld frank1234 memcached
一、简介高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。二、客户端选择一个memcached客户端，我这里用的是memc
Search in Rotated Sorted Array II hcx2013 search
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4 generic type
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
CentOS安装JDK liuxingguome centos
1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
1,设二维数组p的每行每列都按照下标递增的顺序递增。用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题：给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (
java 随机数 Math与Random SaraWon java Math Random
今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun
oracle创建表空间 tugn oracle
create temporary tablespace TXSJ_TEMP tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf' size 32m autoextend on next 32m maxsize 2048m extent m
使用Java8实现自己的个性化搜索引擎 yangshangchuan java superword 搜索引擎 java8 全文检索
需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他