- 博客(23)
- 收藏
- 关注
RSS订阅原创 Form 表单
之前的博客记录过，由于 ajax 请求会拦截重定向，不能实现页面的跳转，所以 Form 会用在页面需要跳转的场景中，已实现业务需求。但这段时间用的时候发现了一个问题：GET 请求时， ACTION 的请求地址中如果有参数，会丢失。 查了资料，做下记录：采用GET方式，那么action url中参数都会被丢弃，提交时候只会把form中的数据拼接在url向服务器提交；POST的方式则不会这样，它会按照action指定的url进行提交数据，包含url后面跟着的参数和参数值。...
2021-09-02 16:20:06
150
原创 每日一节------文件的预览
Blob文件的几种转换方式Blob 转为 File new File([blob], filename);File 转为 Blob先将 File 转为 DataUrl,再将 dataURL 转为 Blob。a. new FileReader().readAsDataUrl(),将 File 转为 DataUrlb. 将 dataUrl 转为 blob let arr = dataUrl.split(',') // 对 base-64 编码的字符串进行解码 let data
2021-08-09 21:27:40
262
原创 webpack5.x 使用中出现的问题
使用webpack5.x版本遇到的问题汇总。本地项目安装的webpack版本如下：问题1： 编译后的文件中含有箭头函数等es6语法由于es6语法在IE某些版本下会报错，所以需要转义为es5。webpack给出了多种配置来解决改问题，目前先记录自己发现的几种方式：webpack.config.js文件中配置属性targettarget: ['es5'] // esXpackage.json文件中配置browserslistswebpack.config.js中的output配置envir
2021-02-23 16:46:16
1547
原创 websocket实例二
今天主要记录下websocket协议概念性的内容。websocket是什么websocket是html5提出的一种基础单个tcp连接进行的全双工通信协议。它是属于服务器推送技术的一种。websocket出现的原因对于客户端需要根据服务器数据实时更新页面的场景，在websocket协议出现之前，经常使用的是ajax轮询实现。但是此种技术存在的问题是：轮询效率低且非常浪费资源。websocket原理在握手阶段采用http的协议进行，此时请求头中会包含一些websocket相关的信息，当成功从http
2021-01-09 15:53:57
166
原创 webSocket实例一
一. HTML5 websocket讲解了websocket的概念以及应用场景（单个 TCP 连接上进行全双工通讯的协议）；webSocket中的事件和属性方法；详细讲解了请求与响应头中与http的区别和关联。nodejs端的代码：第一步需要下载ws插件：npm install wsconst ws = require('ws');// 创建wsconst webSocket = new ws.Server({ port: 8080, host: "127.0.0.1"
2021-01-08 17:00:48
482
原创 window中的URL加解密
escape() （对应的解码 unescape） javascript 1.0采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都会转化成%xx格式的字符编码（xx代表此字符在字符集表里编码的16进制数字）。比如，空格符的对应编码是%20。不会对ASCII字符和数字进行编码。不会被此方法编码的字符：@ * / +encodeURI() （对应的解码decodeURI） javascript 1.5把URI字符..
2021-01-08 14:13:56
477
原创 ajax请求
ajax请求虽然很简单，但是由于开发时粗心大意，有些细节问题还是需要再总结记录下的。一. ajax用法基本示例let url = '127.0.0.1:8080/api/blog/addBlog';let xhr = null;if(window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else { xhr = new ActiveXObject('Microsoft.XMLHTTP');}xhr.onreadystatechange
2021-01-08 12:07:21
137
原创 ajax请求后端接口无法实现页面跳转
ajax只做局部刷新，遇到重定向或者转发是不跳转的。解决方案：接口返回跳转地址，前端location.href=跳转地址用form表单提交的方式实现页面的跳转，不用ajax
2021-01-06 11:36:36
979
原创 允许跨域的接口响应头
应用场景开发中，经常要调用第三方的接口，可是有时候第三方提供的接口只在浏览器地址栏测试通过就给到开发了。然后前端开发在ajax调用接口的时候console有报错，提示存在跨域问题。有些对跨域不熟悉的第三方接口开发者就开始和前端撕b扔锅…┓(;´_｀)┏浏览器地址栏能成功访问不代表ajax能成功访问到网上找了很久，找到一个通俗易懂的解释，可供参考。跨域接口响应头ajax访问接口，接口的响应头正确设置如下：第一种设置...
2021-01-06 11:34:43
1116
原创 window.postMessage应用二
postMessage在Iframe中跨越的应用实例。在a.html（域名：127.0.0.1:9990）中通过iframe引用域名不同的b.html（域名：127.0.0.1:9989）进行通信。应用客户环境访问我们的html实现单点登录。主要过程是：客户访问我们的html（b.html），在html中我们通过与客户的html（a.html）通信，获取客户当前系统的token后，调用后端开发写的接口实现登录。主要分三步：1. b.html给a.html发送信息‘ok’，告诉a.html已经准备好接
2020-12-29 16:40:32
233
原创 window.postMessage
本篇博客主要记录postMessage的应用实例。应用三个域名不同的html之间互相发送信息。html1向html2和html3发送信息，并在html2和html3中将收到的信息回显到页面上。html1同时可以接收html2和html3的信息，将信息回显到页面上。效果图附源码域名为127.0.0.1:9989 的html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
2020-12-29 13:32:03
370
原创 css中的盒模型box-sizing
css中设置盒模型的属性是box-sizing，其属性值最常用的是content-box以及border-box。其中属性值为content-box的元素，又称为标准盒模型，其中google即使用的是标准盒模型；IE使用的是怪异盒模型border-box。一. content-box当box-sizing值为content-box时，设置元素样式的width,height即为元素内容的宽度和高度；而元素的宽度（高度）则是元素内容的宽度（高度）+元素的上下padding（左右padding）+元素的上下b
2020-11-17 12:23:22
1940
原创 sublime text3配置python环境
刚开始学习python，使用了sublime text作为写程序的工具。下面我将会总结在使用sublime text3作为工具进行python开发需要配置的一些插件。安装package control插件package control是安装其他插件的前提。安装package control有两种方式：1. 直接用自带的选项安装package controltools—>Install...
2019-11-03 11:40:29
246
转载 React动画
今天在了解动画的时候看到了一篇文章，粘出借鉴：http://www.alloyteam.com/2016/01/react-animation-practice/
2019-01-25 14:23:27
200
原创 async-await用法
await只能用在async函数的上下文中；await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。实现多个请求并发需要结合async-await和Promis...
2019-01-14 11:04:39
1037
转载 js通过'data-xxx'自定义属性获取dom元素
当我们需要改变某一个元素的内容时，首先要获取该dom元素。其次，通过dom.innerHtml等改变dom的内容。但是针对一些没有class、id同时页面的元素还是动态渲染的场景，我们又该如何做呢？例如，下图中的div没有class，id，只有data-fieldmark自定义属性，且其值只有‘field’部分不变，数值部分根据不同的页面值不同，针对这样的场景我们又该怎么获取到dom呢？wi...
2019-01-10 11:15:32
27394
原创 webpack搭建React开发的脚手架
直接附上webpack.config.js的配置：const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { path: __dirname+'/dist', filename: 'bundle.js' ...
2019-01-09 14:09:16
349
原创 nodejs中的exports和module.exports
exports和module.exports都是nodejs中导出文件的方式，那么它们之间有什么关联呢？事实上，module.exports才是模块公开的接口。每个模块都会自动创建一个module对象，其上有一个exports属性，初始值为{}。为了方便改变其值，模块中又创建了exports对象，和module.exports指向同一个对象。（{}是引用对象类型，根据此特点理解这段话）。对...
2018-12-27 16:16:41
465
原创 webpack4.x使用注意事项
webpack4.x版本与之前相比有了较大的改变，在学习4.x版本的路上遇到了很多坑，今天就来总结下以备今后查阅。安装webpack4的安装增加了webpack-cli模块的依赖，正确的安装如下：npm i -D webpacknpm i -D webpack-cli使用(1) webpack4不需要定义入口点和输出文件，默认将./src/index.js作为默认入口点，而在....
2018-12-26 20:23:32
313
转载 写react时script的type属性有两种值: text/babel text/jsx
JSX是什么JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。编译器——jsxTransformerJSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。第二代编译器——babelReact官方博客发布了一篇文章，声明其自身用...
2018-12-19 11:11:47
9072
原创 vscode编写react时用的插件
1、vscode-fileheader添加文件头 （Ctrl+Alt+i）(Ctrl+Alt+t)详细配置如下：“fileheader.customMade”: {“Author”: “Xiao Fujun”,“Date”: “Do not edit”,“LastEditors”: “Xiao Fujun”,“LastEditTime”: “Do not edit”,“Descri...
2018-12-19 10:57:45
2386
转载 spa原理
SPA单页应用的原理和示例：引用的博客：http://www.cnblogs.com/constantince/p/5586851.html
2018-12-18 17:37:02
1077
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人