2020年08月_web修理工

12月 11月 10月 09月 08月 07月 06月 05月

转载 nodejs中的formidable模块

今天总结了下Node.js的Formidable模块的使用，下面做一些简要的说明。创建Formidable.IncomingForm对象var form = new formidable.IncomingForm()form.encoding = 'utf-8' 设置表单域的编码form.uploadDir = "/my/dir"; 设置上传文件存放的文件夹，默认为系统的临时文件夹，可以使用fs.rename()来改变上传文件的存放位置和文件名form.keepExten

2020-08-28 18:04:07 1048

原创 node.js Buffer(缓冲区)和concat方法

Buffer（缓冲区）什么是Buffer因为JavaScript语言自身只有字符串数据类型，没有二进制数据类型，但在处理TCP流或文件流的的时候必须使用二进制数据，所以Node.js中定义了Buffer类，该类用来创建一个专门存放二进制数据的缓存区；Buffer实例与JavaScript字符串之间的互转Buffer实例一般用在表示编码字符的序列let buf = new Buffer('宝宝');console.log(buf);//e5 ae 9d e5 ae 9dlet buf1 =

2020-08-28 13:43:14 948

原创 node基本知识

创建一个node的基本服务// 引入httpvar http=require('http');// 创建服务中间层var server=http.createServer((req,res)=>{ // 请求头重写 // 重写请求头(content-Type 参考http://tool.oschina.net/commons) res.writeHead(200,{ 'Content-Type': 'text/html;charset=UTF8' }) // res.

2020-08-28 11:56:18 71

原创 post 文件上传

confirm() { let fileData = { //签名信息 OSSAccessKeyId: this.folderList.upfileInfo.accessid, policy: this.folderList.upfileInfo.policy, signature: this.folderList.upfileInfo.signature, key: this.folderList.upfileI.

2020-08-28 10:54:29 106

转载手把手教你 GitLab 的安装及使用

git的优点git是分布式的，svn不是git分布式本地就可以用，可以随便保存各种历史痕迹，不用担心污染服务器，连不上服务器也能提交代码、查看log。GIT分支和SVN的分支不同分支在SVN中实际上是版本库中的一份copy，而git一个仓库是一个快照，所以git 切换、合并分支等操作更快速。git有一个强大的代码仓库管理系统 - gitlab可以很方便的管理权限、代码review，创建、管理projectGitLab介绍GitLab：是一个基于Git实现的在线代码仓库托管软件，你可以用git

2020-08-26 16:23:58 326

原创如何利用babel工具将es6语法转换成es5语法

创建文件夹mkdir es6初始化cd es6npm initmkdir srccd srctouch index.jssrc index.jslet b=1;console.log(b)const name='张三'console.log(name)下载转化模块//局部安装 -g (全局安装)npm install babel-cli //类似vue-cli一样npm install --save-dev babel-preset-es2015 babel-cli

2020-08-25 10:48:50 309

转载你不知道的 Blob

如果你允许用户从你的网站上下载某些文件，那你可能会遇到 Blob 类型。为了实现上述的功能，你可以很容易从网上找到相关的示例，并根据实际需求进行适当的调整。对于部分开发者来说，在完成上述功能之后，他们并不会继续思考 Blob 是什么？这就导致了一些开发者，还是停留在熟练使用 API 的层面，当遇到比较棘手的问题时，就束手无策。换句话说，如果当你在熟悉 API 的使用之后，还能继续多问几个为什么，继续探究下去，不仅能加深对知识的理解，还能触类旁通，拓展自己的知识面提高自己。好了，如果你想继续了解什么是 B

2020-08-24 14:20:09 321

原创 react redux的简单使用

index.jsimport React from 'react'; //react 模板import ReactDOM from 'react-dom'; // jax语法import './index.css';// 全局样式import App from './App'; // 主要模块import * as serviceWorker from './serviceWorker'; //渲染问题import { BrowserRouter } from "react-router-do

2020-08-24 14:00:41 167

原创如何将参数传递给mapDispatchToProps()

const getTheArray = (array) => { return { type: 'GET_ARRAY', array } } class Example extends...... componentDidUpdate(){ //i have a button, and when it clicked, turns the status: 'deleted' if (this.st.

2020-08-24 13:53:56 523 1

原创安装 deno 二进制文件

直接 github 上下载二进制可执行文件然后配置环境变量，我是放到了C:\deno\deno.exe打开cmd，查看是否安装成功C:\Users >deno --versiondeno 1.0.3v8 8.4.300typescript 3.9.2deno 初体验接下来体验一下 deno 的优势：直接编译 js ts文件，还可以使用 ES6 的moudle:新建一个项目：deno-test，写几个文件// deno-test/test.jsconst demo = ()

2020-08-20 10:28:09 233

转载 choco 使用详解--window

chocolateyWindows 包管理工具，相当于brew（The package manager for Windows）官网环境Windows 7+ / Windows Server 2003+PowerShell v2+.NET Framework 4+二、下载安装cmd 安装直接拷贝执行即可，注意需要管理员身份运行@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFo

2020-08-19 15:49:38 1067

转载 react 路由传参

方式1：通过params1.法一（在刷新页面的时候，参数不会丢失。）(1)路由表中<Route path='/user/:id' component={User}></Route>(2)Link处（跳转user页面）HTML方式: <NavLink to={ '/user/' + ' 2 ' }>用户</NavLink> JS方式: this.props.history.push('/user/'+'2')(3)user页面

2020-08-19 11:35:45 105

原创 redux+react-redux基本介绍

创建项目create-react-app redux-demo安装reduxnpm install redux --S安装react-reduxnpm install react-redux --S

2020-08-19 11:33:28 81

转载 react项目—路由和嵌套子路由（react-router4.0）

前言：在做项目的时候，花费了几天的时间才把路由问题解决，但是对react的几种路由的区分和使用，我现在也是整的还不清楚。1、安装相关的包：（1）npm install --save-dev react-router（2）npm install --save-dev react-router-dom（3）npm install --save react-router-config在package.json中查看版本2、配置路由（1）新建路由文件 route.js

2020-08-13 15:40:35 1648

原创 react 简介路由及生命周期

全局下载react 脚手架npm install -g create-react-app创建项目create-react-app my-app // my-app 为自己的demo名称更新npm(报错)npm cache clean --force //清缓存npm install npm -g // 重新下载npm npm install -g create-react-app //全局下载react 脚手架create-react-app my-app //创建项目

2020-08-13 15:30:08 451

原创现在基本上都在用yarn代替npm

现在基本上都在用yarn代替npm，管理包比较方便，现记录常用命令。作用npmYarn安装npm install(i)yarn作用npmYarn卸载npm uninstall(un)yarn remove全局安装npm install xxx –-global(-g)yarn global add xxx安装包npm install xxx –save(-S)yarn add xxx开发模式安装包npm install xxx –s

2020-08-12 18:23:54 144

原创事件委托案例

<!DOCTYPE html><html lang="en"><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>D.

2020-08-12 14:59:13 95 1

原创冒泡默认捕获蒙版禁止滚动

<!DOCTYPE html><html lang="en"><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>D.

2020-08-12 14:55:01 343

原创除去前后空格及中间空格

<!DOCTYPE html><html lang="en"><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>D.

2020-08-12 14:45:37 145

原创 new Proxy 简介入门

<!DOCTYPE html><html lang="en"><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>Do.

2020-08-12 14:39:56 811

原创 css media简介

<!DOCTYPE html><html lang="en"><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>Do.

2020-08-12 14:37:50 112 1

原创表格导出 Excel

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <div class="tools"> <button type="button" class="btn green" id="excell" onclick="method5('da.

2020-08-12 14:34:16 167

原创微信云开发简介

1.客户端2.云函数(权限)3.数据库操作(权限)const db = wx.cloud.database(); //初始化数据库增加 db.collection('cloud').add({ data: { name: 'cloud' } }).then(res => { console.log(res, '插入数据') this.static.id = res._id }).c

2020-08-12 13:37:21 1157

原创旋转木马

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <st

2020-08-12 13:34:50 123

转载前端系列-移动端开发踩过的一些坑

本博文总结顺序大概如下移动端开发通用坑vue移动开发特有坑以及小技巧分享移动端开发性能优化一、移动端开发通用坑1、click300ms延迟？讲道理，现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑，我这里也拿出来说上一说吧。移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的。但在2014年的Chrome 32版本已经把这个延迟去掉了，so you know。但如果你还是出现了300ms的延迟问题

2020-08-08 15:56:56 1272

原创 JavaScript 复杂判断的更优雅写法

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子先看一段代码复制代码/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick =

2020-08-08 14:30:20 90

转载优化 JS 条件语句及JS 数组常用方法， ---- 看完绝对对日后开发有用

前言：日常所说的优化优化、最后我们到底优化了哪些，不如让我们从代码质量开始；个人觉得简洁简化代码其实觉得存在感挺强烈的QAQ获取URL中？后的携带参数；这是我见过最简洁的了，若有更简洁的请及时留言并附上代码怼我// 获取URL的查询参数let params={}location.search.replace(/([^?&=]+)=([^&]+)/g, (_,k,v) => parmas[k] = v); cosnole.log(params) // ?a=b&am

2020-08-08 09:42:33 183

转载 vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

PC端调用摄像头拍照上传base64格式到后台，这个没什么花里胡哨的骚操作，直接看代码（canvas + video）<template> <div>  <img @click="callCamera" :src="headImgSrc" alt="摄像头">  <canvas ref="canvas" wi.

2020-08-07 16:30:46 773

转载 Vue keep-alive总结缓存

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。1 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中常见用法：// 组件export default { name: 'test-keep-alive',

2020-08-07 16:08:28 252

原创 HTML5新特性 Web Workers 实现多线程

引子：（JS单线程）什么是webworker？Web Worker为Web应用程序提供了一种能在后台中运行的方法。通过Web Worker可以生成多个线程同时运行，并保证页面对用户的及时响应，完全不会影响用户的正常操作。单线程：单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。简单的说就是处理事务的任务链，当只有一条链，所有的事情都在这一条链上执行时，那就是单线程。优点：单线程较多线程来说，系统稳定、扩展性极强、软件丰富。缺点：只有一个线程，代码顺序执行，容易

2020-08-07 15:49:05 423

转载百度地图电子围栏判断地图定位

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>电子围栏</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=O**************k"></script><s

2020-08-06 18:38:24 644

原创 vue-cli 路径配置-打包

pack.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev:test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js", "dev:prod": "webpack-dev-server --inline --progress

2020-08-06 15:34:58 1647

原创 requireJS的简单使用

1、data-main：为HTML5新增的规范，bai用来嵌入自定义数据。du2、src：为html属性zhi，用来指定文件位置。二、作用不同1、data-main：存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。2、src：src属性用来指定脚本文件的位置。三、规则不同1、data-main：属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符，属性值可以是任意字符串。2、src：可以用来指定文件的相对位置，也可以指定文件的绝

2020-08-06 11:26:53 148

原创 bower的使用

1.下载bowernpm install -g bower2.初始化bower init //初始化bower.json文件bower install --save angular//下载angular的文件包bower i -h 下载帮助依赖bower help 帮助卸载npm rm -g bower --save //删除文件并删除.json文件...

2020-08-05 18:31:52 76

原创 mock及easy-mock的使用

本地使用1.node# 安装npm install mockjs参考文档:http://mockjs.com/examples.html// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1

2020-08-05 18:24:23 186

原创 ESLint fix自动修复所有格式问题

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ test/unit test/e2e/specs",npm run lint-fix,转载于:https://www.cnblogs.com/it-jason/p/9164308.html

2020-08-04 15:29:20 3370 1

原创 vue 集成scss

npm i -D sass-loader node-sass<style lang="scss" scoped> .img { width: 100%; }</style>集成vantnpm i vant-weapp -S --production

2020-08-04 11:38:42 330

原创图片防盗链

图片的防盗链因为之前使用了豆瓣的图书 API 用着的时候web 系统突然发现所有的图片都访问不了、然后谷歌一查原来豆瓣采取了防盗链。问题很简单，就是我希望在自己的页面里用 <img src=”xxxx” /> 来引用其他网站的一张图片，但是他的网站设置了防盗链的策略，会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站，如果来源不是本域名就返回 403 forbidden。我的目的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。解决的方案1.使用后台的预下载（

2020-08-03 09:51:28 306