- 博客(36)
- 收藏
- 关注
RSS订阅原创 JSON.stringify()
JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的replacer 是数组，则可选择性地仅包含数组指定的属性。问题表单非必填情况下，signInfo字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。// 异常入参数据，数组字符串中没有value key{...
2022-03-10 17:01:43
369
原创 关于new FormData()的理解
一、概述FormData对象的使用：用一些键值对来模拟一系列表单控件：即把form中所有的元素的name与value组成一个queryString。 异步上传二进制文件。二、使用 创建一个空对象实例。 var myform = new FormData(); 使用已有的表单来初始化 <form id="myForm" action="" method="post"> <input type="text" name="name">名字
2022-03-04 18:35:41
3372
原创 JavaScript循环获取对象中key与value的方法
let obj = { 'a':'aa', 'b':'bb', 'c':'cc', 'd':'dd' };for(let i in obj){ console.log(i); //a b c d console.log(obj[i]); // aa bb cc dd}
2022-03-04 18:00:17
2498
原创 数组变换,两两一组
let arr = [1,2,3,4,5,6,7,8,9]; const res = arr.map((item,index) => [item,arr[index+1]]).slice(0,arr.length - 1) console.log(res)
2022-02-14 14:34:28
7258
原创 巧妙实现内凹的平滑圆角
通过filter实现首先，我们只需要实现这样一个图形：<div class="g-container"> <div class="g-content"> <div class="g-filter"></div> </div></div>css样式：.g-container { position: relative; width: 300px; heigh...
2022-01-10 15:58:02
961
原创 JavaScript 实现页面滚动动画
先预览一下实现效果：我们使用 CSS 来实现动画，用 JavaScript 来处理触发所需的样式。我们先来创建布局。创建布局我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面JavaScript 通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名 js-scrollHTML代码如下：<div class="left js-scroll"> <h1>教程生态，助你一臂之力</h1>
2022-01-10 14:55:27
5171
1
原创 组件封装 -- Vue.use 优化全局组件注册
Vue.use() : 注册、挂载插件、组件 它是 Vue 提供一个静态方法，用来向 Vue 注册插件 Vue.use 可以接收一个对象，Vue.use(obj) 对象 obj 中需要提供一个 install 函数 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue 构造器 Vue.use 文档 使用步骤: 创建 js 文件模块，在模块中使用 Vue.use 统一挂载对应的方法，然后将模块在 main.js
2021-11-04 18:09:59
253
原创 表单验证 -- 同级部门禁止出现重复部门
一.添加的部门名称在同级部门中不允许重复1. 在某个部门上点击添加时， 被占用的名字列表 = 这个部门的子部门 2. 添加 validName自定义校验函数 1.在某个部门上点击 编辑时：被占用的名字列表 = 当前部门的兄弟部门 - 它自己的名字var arr originList = [ {id:'01', pid:'', name:'财务部'}, {id:'02', ...
2021-11-04 17:50:17
348
原创 表单校验 -- 部门编号非重验证
一.新添加的模块的部门编码在整个模块中都不允许重复 1.创建自定义校验函数进行判断 // 校验部门编码是否重复 const validCode = (rule, value, callback) => { // originList为后台获取部门数据,遍历拿出部门编码,保存在一个新数组中 let existCodeList = this.originList.map(item => item.code)...
2021-11-04 17:31:54
167
原创 扁平的数组结构转换为树形结构
const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"03", name: "小美", pid:"01", job: "UIleader"}, {id:"04", name: "老马", pid:"01", job: "技术leader"}, {id:"05", name: "老王", pid:"01", job.
2021-10-30 19:29:13
707
原创 路由导航守卫和使用导航守卫进行权限拦截的流程
导航守卫 什么是导航守卫 导航守卫就是路由跳转过程中的一些钩子函数，在通过函数中通过跳转或取消的方式守卫导航 导航守卫分为几种: 前置导航守卫 router.beforeEach 后置导航守卫 router.afterEach const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // to：即将要进入的目标 // from：当前导航正要离开的路由
2021-10-28 19:31:37
401
原创 跨域---代理转发 (proxy)
跨域：是浏览器产生的同源策略产生的跨域，服务器之间不存在跨域问题 代理服务器 向 数据服务器(目标服务器) 发起请求 代理服务器 和 前端项目同源，也没有跨域问题 vue-cli 中集成的跨域解决方案思路：在前端项目和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么： 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接...
2021-10-27 20:07:41
1837
原创 Vue基础一
Vue语法-插值表达式:1.语法: {{ 表达式 }}双大括号，可以把Vue变量直接显示在标签内 data函数内, return的对象, 对象内的key就是变量名 <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
2021-10-15 21:46:19
452
原创 JWT-token介绍
token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。JWT（json web token） 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户{"姓名": "张三","角色": "管理员","到期时间": "2022年7月11日0点0分"}用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。当然，为了防止用户篡改数据，服务器在生成这个对象的时候，会给他加密一下，就是我们看到的一个长长的字符串出现解
2021-09-19 20:24:32
1496
原创 面试，手写jsonp(模拟代码)及jQuery封装jsonp原理分析
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>html.
2021-09-19 17:48:14
245
原创 三.跨域-CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。跨域错误说明:手写实现:通过在被请求的路由中设置header头，可以实现跨域。app.get('/get', (req,.
2021-09-19 17:38:19
169
原创 二.跨域-ajax请求改发JSONP的基本实现
1.JSONP简介JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。它本质并不是ajax请求，所以没有跨域问题。原理: script的src标签可以请求外部的js文件，这个请求不是ajax，它没有跨域问题。 借助 script 标签src请求服务端上的接口。 服务端的接口返回JavaScript 脚本，并附上要返回的数据。 2.实现步骤创建script标签并让src指向接口地址 让接口返回函数调用表达式,并传入数据 在前端准
2021-09-18 10:33:49
263
原创 一.跨域-错误原因及解决思路
1.什么原因导致了浏览器报跨域错误跨域错误:不同源的ajax请求浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败：（1）请求响应双方url不同源。双方url：发出请求所在的页面 与 所请求的资源的url同源是指：协议相同，域名相同，端口相同 都相同。以下就是不同源的：从http://127.0.0.1:5500/message_front/index.html 请求http://localhost:8080/getm
2021-09-18 09:26:47
1618
原创 JavaScript 基础(面试问题)
1.JavaScript的基本类型有哪些?引用类型有哪些?null和undefined的区别数据类型基本数据类型: number string boolean null undefined引用数据类型:function object array区别undefined:表示变量声明但未初始化的值null:表示准备用来保存对象,还没有真正保存对象的值,从逻辑角度看,unll值表示一个空对象指针JavaScript（ECMAScript 标准）里共有 5 种基本类型：Undefine.
2021-09-15 17:16:07
85
原创 js数组常用方法
1.Array.isArray()用于确定传递的值是否是一个ArrayArray.isArray([1, 2, 3]); // trueArray.isArray({foo: 123}); // falseArray.isArray("foobar"); // falseArray.isArray(undefined); // false2.pop() 删除数组最后一个元素（改变原数组） 返回被删除的元素let arr = [1, 2, 3]let delete...
2021-09-14 21:08:23
131
原创 get 类型的接口
返回值:50%的可能成功返回50%的可能成功返回const http = require('http')const fs = require('fs')const path = require('path')// 创建服务const server = http.createServer((req, res) => { // console.log(req.url) //获取当前请求的url地址,请求方式为GET if (req.url === '/s.
2021-09-14 18:16:31
174
原创 统一处理静态资源
把所有的静态资源(.html,.png,.css,.js)全放在一个指定的目录里收到用户的请求之后，去指定的目录下去找对应的文件 找到，把内容读出来返回给用户。 找不到，报404。 目录如下:把所有的静态资源全放在public下面，然后使用server.js来启动web服务器// 引入http模块const http = require('http')const fs = require('fs')const path = require('path')..
2021-09-13 20:50:04
95
原创 nodemon 基本配置与使用
作用:它能帮我们自动检测到我们的代码的修改，并自动重新运行我们的代码安装:npm install nodemon -g使用nodemon:在命令中，使用nodemon来代替nodenodemon 文件名.js使用帮助nodemon -h
2021-09-11 22:10:08
144
原创 i5ting_toc 将 md 转成 html并自动生成目录
效果图全局安装npm install i5ting_toc -g使用方法切换到你想要转换的md文件根目录下，使用以下命令， -f 参数后面跟着文件名i5ting_toc -f 文件名 -o常见的命令参数如下:-h, –help output usage information-V, –version output the version number-f, –file [filename] default is README.md-o, –open open .
2021-09-11 21:24:23
292
1
原创 nodejs,将txt文件转换为json文件
txt文件const fs = require('fs')const path = require('path')const p = path.join(__dirname, 'a.txt')fs.readFile(p, 'utf8', (err, data) => { if (err) { console.log('错误', err) return } let arr = data.split('\r\n') // console.log(a...
2021-09-11 20:51:42
1144
原创 nodejs,添加数据到json
// 1.导入 读取文件const fs = require('fs')const path = require('path')const p = path.join(__dirname, 'data.json')// 转换成数组const arr = require(p)// console.log(arr)// 遍历fs.readFile(p, 'utf8', (err, data) => { if (err) { console.log('err', err) .
2021-09-11 19:53:49
1028
原创 模块化基本介绍
模块是对功能相似的函数或属性的封装,提高函数的复用性一个js文件可以引入引入其他js文件,能使用引入的js文件的中的变量、数据，这种特性就称为模块化。es5不支持模块化，为了让支持模块化，我们一般会借用第三方库来实现： sea.js. SeaJS - A Module Loader for the Web require.js. RequireJS 概念概念：拆分模块和组合模块时，所遵守的规则，就叫做模块化规范。例如：在 Node.js 中，导入其它模块时，统一使用 re
2021-09-11 10:30:58
147
原创 NodeJs案例 简单 md文件转换html文件
简单md文档转换后的html文件// 1.从md文件读入内容// fs.readFlie()const fs = require('fs')const path = require('path')const p = path.join(__dirname, 'txt.md')fs.readFile(p, 'utf8', (err, data) => { if (err) { console.log('err', err) return } //...
2021-09-10 20:55:39
463
原创 JavaScript字符串常用api
1. str.slice(start [,end]) 和 str.substring(start [,end])截取。slice() 和 substring() 用法类似，只是slice支持负数，而substring的负数会被转换成0，然后截取0和start之间字符。如果 substring() 的 start 比 end 大，这个方法将先交换两个参数的值，然后返回它们之间的子串。2. str.split(delimiter [,limit])把字符串以分割符为界点分割成数组。d..
2021-09-10 20:49:24
453
原创 vscode常用快捷键
Ctrl+P 快速打开最近打开的文件Ctrl+Shift+N 打开新的编辑器窗口Ctrl + X 剪切Ctrl + C 复制Ctrl + A 全选Ctrl + V 粘贴Ctrl + Z 撤销Ctrl + Y 取消撤销Ctrl + F 查询Ctrl + H 替换F11 切换全屏模式Ctrl + /： 注释...
2021-09-10 20:26:58
132
原创 Window中常用的快捷键
Win + E快速打开 文件资源管理器Win + D 最小化桌面Win + Tab 预览所有当前打开的窗口,并且可以快速切换Ctrl + A 选择全部内容Ctrl+c：复制选择的项目Ctrl+x：剪切选择的项目Ctrl+v：粘贴选择的项目Ctrl+z：撤销操作Ctrl+y：重新执行某项操作Delete：删除所选的项目并将其移动到“回收站”Shift+delete：永久删除所选的项目（删除之后无法从回收站还原）Alt+F4：关闭活动的项目或者退出活动程序Alt.
2021-09-10 20:12:35
51
原创 Window常用的终端命令
Win+R, 输入cmd,打开命令窗口（1）node 空格 某个js文件 // 调用 node 程序，运行某个js文件（2）clear 或者 cls // 清空界面（3）ls 或者 dir // 查看列表(list)（4）cd 目录名 // 进入到目录中去（5）cd .. // 返回上一级目录（6）cd \ ...
2021-09-10 19:43:17
846
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人