Xiaaoke-CSDN博客

文章目录Cookie原生使用封装原生插件使用Web Storage常用API基本使用Web Storage和cookies区别cookiessessionStorage和localStorage共同点记录用户状态区别各自优势常见攻击方式及解决方案CookieHTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持

2022-05-31 16:45:29 142

原创 js 所有的网络请求方式

文章目录HTTP请求报文响应报文常见的状态码readyState 属性原生AJAXAJAX 简介XML 简介AJAX 的特点AJAX 的使用解决 IE 缓存问题ajax返回的状态jQuery-AJAXget 请求post 请求ajax 请求Axios-AJAXget 请求post 请求ajax 请求Fetch-AJAX跨域同源策略如何解决跨域JSONPCORS所使用的node服务代码Web SocketHTTPHTTP（hypertext transport protocol）协议『超文本传输协议』，

2022-05-31 15:43:45 3514

原创 JS 文件上传下载

文章目录文件上传文件下载后端给的是地址后端给的是文件流在线查看pdf文档文件上传const xhr = null;// 文件上传const UpladFile = () => { // 获取文件 const dom = document.getElementById('file'); // 设置文件上传地址 const url = ''; // 创建文件对象 const form = new FormData(); form.append('file', dom); //

2022-05-31 14:36:24 415

原创 javascript中DOM操作

文章目录文档对象模型获取页面元素：(typeof都是object)事件基础：（触发响应的机制）操作属性：节点操作：获取节点：获取元素节点：自己封装一个：创建节点：删除节点：复制节点：三种动态创建元素的区别：常用元素尺寸偏移尺寸客户端尺寸滚动尺寸确定元素尺寸事件高级创建事件的方式：删除事件：DOM事件流：事件对象事件委托用户界面事件焦点事件鼠标事件键盘事件HTML5 事件触摸及手势事件文档对象模型文档：document元素：element节点：（标签、属性、文本、注释等）node获取页面元素：(

2022-05-31 09:59:15 821

原创 jQuery

文章目录定义选择器方法DOM操作的相关方法取赋值相关的方法基于jQuery对象增删改查相关方法jQuery的事件绑定方法jQuery动画的相关的方法jQuery位置坐标图形大小相关的方法jQuery工具方法定义什么是jQueryjQuery其实就是一堆的js函数（js库），也是普通的js而已，主要还是操作web api的一个封装框架为什么要用jQueryjQuery面向用户良好的设计是的在使用的过程中彻底解放了你记忆原声操作DOM的借口jQuery中包含多个可重用的函数，用来辅助我们简化J

2022-05-30 20:00:00 122

原创 JavaScript BOM操作

文章目录window对象的常见事件JavaScript执行机制location对象navigator对象history对象screen对象元素偏移量offset系列元素可视区client系列元素滚动scroll系列查看滚动条的滚动距离查看视口的尺寸查看元素的几何尺寸 ES5新增了解属性window对象的常见事件窗口加载事件：window.onload：页面加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）就调用的处理函数。document.addEventList

2022-05-30 11:56:38 207

原创 js中的数组对象

数组对象去重根据数组对象的一个字端来判断去重参数arr：要去重的数组（数组对象）id：根据去重字端名称（string）返回值：合并后的数组对象（数组对象）function arrObjUniq(arr, id){ let obj = {}; arr = arr.reduce((cur, next)=>{ obj[next[id]] ? '' : obj[next[id]] = true && cur.push(next); return cur;

2022-05-24 11:24:45 381

原创 JavaScript 日期处理类库 --- Moment.js

文章目录常用轮子安装日期格式化常用API相对时间日历时间多语言支持文档地址常用轮子// 格式化moment().format('YYYY-MM-DD') // 2022-05-28// 获取设置启止时间// startDate,endDate：数字毫秒const [startDate, endDate] = duration || [];const durations = [moment(startDate), moment(endDate)];// 获取当天零点moment()

2022-05-24 11:03:58 346

原创 taro常用组件库

组件库组件库文档在使用时，React 中我们需要先从 Taro 标准组件库 @tarojs/components 引用组件，再进行使用View视图容器ScrollView可滚动视图区域Swiper滑块视图容器MovableArea movable-view 的可移动区域CoverView覆盖在原生组件之上的文本视图CoverImage覆盖在原生组件之上的图片视图Icon图标Text文本Button按钮Checkbox多选项目Editor编辑文本Form表单Input输入框

2022-05-17 13:30:00 2366

原创 taro 路由和路由通信

文章目录路由跳转路由传参获取路由参数路由跳转// 跳转到目的页面，打开新页面Taro.navigateTo({ url: '/pages/page/path/name'})// 跳转到目的页面，在当前页面打开Taro.redirectTo({ url: '/pages/page/path/name'})路由传参// 传入参数 id=2&type=testTaro.navigateTo({ url: '/pages/page/path/name?id=2&t

2022-05-17 07:00:00 1041 4

原创 Taro Hooks 基本 API

文章目录Taro HooksuseRouter 路由useReady 初始化useDidShow 显示useDidHide 隐藏usePullDownRefresh下拉useReachBottom上拉usePageScroll滑动useResize屏幕旋转useTabItemTapTaro HooksHooks 是一套全新的 API，可以让你在不编写类，不编写 Class 的情况下使用 state 的状态管理，生命周期等功能。import { usePageScroll, useReachBott

2022-05-16 20:30:00 1581

原创 react为基础语言来使用taro

文章目录Taro 规范入口组件页面组件一个 Taro 应用由一个入口组件和至少一个页面组件所组成。Taro 规范在 React 中使用这些内置组件前，必须从 @tarojs/components 进行引入。组件属性遵从大驼峰式命名规范。内置事件名以 on 开头，遵从小驼峰式（camelCase）命名规范。React 中点击事件使用 onClick事件和 Web 端一样。在事件回调函数中，第一个参数是事件对象，回调中调用 stopPropagation 可以阻止冒泡入口组件每一个

2022-05-16 20:00:00 284

原创 taro项目目录结构

2022-05-15 12:00:00 591

原创 taro 安装及使用

文章目录安装使用安装# 使用 npm 安装 CLI$ npm install -g @tarojs/cli# OR 使用 yarn 安装 CLI$ yarn global add @tarojs/cli# 查看 Taro 版本信息$ yarn info @tarojs/cli# OR 使用 yarn 安装 CLI 安装 1.3.9$ yarn global add @tarojs/cli@1.3.9# 使用Taro 升级命令更新CLI版本到最新版本$ taro update

2022-05-15 11:30:00 1932

原创 React Hooks 常用API

文章目录useStateuseEffectuseReduceruseCallbackuseMemouseRefuseLayoutEffectuseContextuseState// 返回一个 state，以及更新 state 的函数。 initialState 为初始值// initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略const [state, setState] = useState(initialState);// 更新state值的两种方法setStat

2022-05-14 10:00:00 1120

原创⼩程序⽣命周期

分为应⽤⽣命周期和⻚⾯⽣命周期关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。应⽤⽣命周期属性类型默认值必填说明onLaunchfunction否生命周期回调——监听小程序初始化。onShowfunction否生命周期回调——监听小程序启动或切前台。onHidefunction否生命周期回调——监听小程序切后台。onErrorfunction否错误监听函数。onPageNotFoundfunctio

2022-05-13 07:00:00 85

原创微信小程序⾃定义组件

文章目录创建⾃定义组件声明引⼊⾃定义组件⻚⾯中使⽤⾃定义组件定义段与⽰例⽅法组件-⾃定义组件传参⼩结⾃定义组件类似vue或者react中的自定义组件⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。创建⾃定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构 --> 直接右键新建component在⽂件夹内 components/myHeader ，创建组件名为 myHeader --> 文件夹

2022-05-12 07:00:00 97

原创微信小程序样式 WXSS

文章目录样式 WXSS尺⼨单位样式导⼊选择器样式 WXSS开发文档WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。与 CSS 相⽐，WXSS 扩展的特性有：响应式⻓度单位 rpx样式导⼊尺⼨单位rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750 750rpx

2022-05-11 07:00:00 537

原创微信小程序常⻅组件

文章目录view - divtext文本image图⽚swiper轮播图navigato导航rich-text富文本button按钮icon图标radio单选按钮checkbox复选框组件文档地址view - divview文档地址代替原来的 div 标签text文本text文本文档地址⽂本标签只能嵌套text⻓按⽂字可以复制（只有该标签有这个功能）可以对空格回⻋进⾏编码属性名类型默认值说明selectableBooleanfals

2022-05-11 07:00:00 104

原创微信小程序模板语法

文章目录数据绑定运算列表渲染条件渲染⼩程序事件的绑定WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。数据绑定// 普通写法<view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' }})// 组件属性<view id="item-{{id}}"> </view>Pa

2022-05-10 07:00:00 244

原创微信小程序结构和配置

文章目录⼩程序结构⽬录⼩程序⽂件结构和传统web对⽐基本的项⽬⽬录⼩程序配置⽂件⼩程序结构⽬录⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP验的服务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。⼩程序⽂件结构和传统web对⽐结构传统web微信⼩程序结构HTMLWXML样式CSSWXSS逻辑Jav

2022-05-09 07:00:00 164

原创 react路由

文章目录路由的理解react-router-dom的理解内置组件其它基本路由使用路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component路由分类后端路由：理解： value是function, 用来处理客户端提交的请求。注册路由： router.get(path, function(req, res))工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返

2022-05-08 00:00:00 224

原创 react路由传参和跳转

文章目录向路由组件传递参数数据向路由组件传递params参数向路由组件传递search参数向路由组件传递state参数多种路由跳转方式普通组件中使用路由跳转BrowserRouter与HashRouter的区别向路由组件传递参数数据向路由组件传递params参数{/* 向路由组件传递params参数 */}<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>{

2022-05-08 00:00:00 1122

原创 React 哲学

React 哲学第一步：将设计好的 UI 划分为组件层级一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件第二步：用 React 创建一个静态版本最容易的方式，是先用已有的数据模型渲染一个不包含交互功能的 UI。最好将渲染 UI 和添加交互这两个过程分开在构建应用的静态版本时，我们需要创建一些会重用其他组件的组件，然后通过 props 传入所需的数据。即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本当你的应用比较简单时，

2022-05-08 00:00:00 161

原创 react脚手架配置代理总结

方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则：const proxy = requir

2022-05-08 00:00:00 103

原创 React 中使用 axios

文章目录前置说明常用的ajax请求库特性基本使用axios API常见的请求方式自定义配置新建一个 axios 实例请求配置响应结构拦截器前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用：封装XmlHttpRequest对象的ajaxpromise风

2022-05-08 00:00:00 3874

原创 react焕发第二春，函数式编程HOOKS

文章目录HOOKSHook 使用规则useState()：状态钩子useEffect()：副作用钩子副效应是什么？useEffect() 的用法useEffect() 的用途useContext()：共享状态钩子useReducer()：action 钩子创建自己的 HooksHook APIHOOKSHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性Hook 是一些可以让你在函数组件里“钩入” React state

2022-05-08 00:00:00 743

原创 react脚手架

react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint + ts（可选）使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建并启动一个项目第一步，全局安装：np

2022-05-07 00:00:00 3174

原创 jsx基本语法

jsx全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖作用: 用来简化创建虚拟DOM写法：var ele = <h1>Hello JSX!</h1>注意1：它不是字符串, 也不是HTML/XML标签注意2：它最终产生的就是一个JS对象标签名任意: HTML标签或其它标签标签属性任意: HTML标

2022-05-07 00:00:00 4733

空空如也

空空如也