易之晓晓-CSDN博客

翻译输入网址回车或者刷新页面到页面传染出来的整个流程

DNS 解析 HTTP三次握手 -> TCP/IP连接浏览器发送请求服务器返回请求的文件 (html) 浏览器渲染1. DNS 解析查找缓存 Chrome搜索自身的DNS缓存，看有没有该域名对应的IP地址（chrome://net-internals/#dns） Chrome会搜索操作系统自身的DNS缓存（浏览器没有找到缓存或者缓存已经失效）读取本地的HOST文件（操作系统的缓存没有找到）（mac: etc/host）浏览器发起一个DNS的一个系统调用（向本地..

2022-03-01 11:05:43 250

原创手写简易的AJAX

export default { ajax: function (methods, url) { return new Promise((resolve, reject) => { let _ajax = null if (window.XMLHttpRequest) { _ajax = new window.XMLHttpRequest() } else { .

2021-12-14 16:20:29 1025

原创 Nginx深入详解之upstream分配方式

upstream backend { server 192.168.1.128:8081 weight=1; server 192.168.1.128:8082 weight=2;}server { listen 80; server_name 0.0.0.0; location / { proxy_pa...

2021-12-14 16:19:42 29636

原创弹窗的extend写法

import Vue from 'vue'import router from '@/routes.js'import { sweetStore} from '@ime/ime-core'const files = require.context('./', false, /\.vue$/)// 获取文件夹文件const getFolderFiles = (nameReg) => { let map = {} for (const key of files.key.

2021-11-25 10:22:39 542

原创 vue 提示指令

import tooltip from 'element-ui/lib/tooltip';import { isArray, isFunction, join, toString, map,} from 'lodash-es';import { debounce, isBlank, isPromiseLike } from '../utils';const _utils = { activateTooltip: debounce($tooltip => $tooltip.hand..

2021-11-24 13:35:44 598

原创获取当前日期前后多少天的日期，之前多少天传负数，后面多少天传正数，今天传0

// 获取当前日期前后多少天的日期，之前多少天传负数，后面多少天传正数，今天传0， // num为传入的数字， time为传入的指定日期，如果time不传，则默认为当前时间 getBeforeDate(num = 0, time) { let n = -num; let d = ''; if (time) { d = new Date(time); ...

2021-11-16 16:16:49 113

原创 2021-01-19

/** * 多选值的计算属性生成器, 在get、set中处理该字段的字符串与数组的转化 * @param {String} objName 数据源 * @param {Array} keys 需转化的keys * @returns {*} 返回的计算属性 */export function createMultipleValueComputed(objName, keys) { return reduce(keys, function(result, key) { re.

2021-11-16 16:16:18 81

原创 vue element 问题

1.el-checkbox 使用checked不好用，尽量使用v*-model/value ，v-model解决不了，value可以2. v-for循环不要使用 index作为key值，尽量使用其他属性3 . 使用v-for的时候如果动态绑定的值是一个函数的返回值，可以达到computed效果...

2020-10-16 17:44:12 164

转载 vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听

vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。例如下面的层级关系<top> <center> <bottom> </bottom> </center>&..

2020-09-28 09:24:25 3006

原创 axios的post请求三种自己理解，有问题联系我

post 请求的各个格式1. json格式所谓的json格式就是Content-Type':application/json;charset=utf-8；2.formdata有两种，一种是new formdata，这种会自动转换Content-Type为application/x-www-form-urlencoded，另一种是使用qs进行序列化，其实现效果一样，有些后端不对方式经行过滤，使用get一样可以达到效果...

2020-09-16 09:34:39 342

转载 webpack 打包前端首屏加载

1.异步路由加载import Vue from 'vue'import Router from 'vue-router'// 之前的方案// import Index from '@/pages/index/'// import ChooseUser from '@/pages/detail/chooseUser'// 异步加载方案const Index = r => require.ensure([], () => r(require('@/pages/index'.

2020-06-12 11:25:56 835

原创 vuex做缓存

/* * @Description: In User Settings Edit * @Author: your name * @Date: 2019-09-19 11:44:09 * @LastEditTime: 2019-10-16 19:35:51 * @LastEditors: Please set LastEditors */import Vue from 'vue'import Vuex from 'vuex'import MainStore from '@_src/page.

2020-06-10 16:58:52 607

原创读取图片转成base64

const fs = require("fs")var mime = require('mime-types')function readFileToBase64 (url) { let arr = []; return new Promise((r, j) => { fs.createReadStream(url, { highWaterMark: 9999999 }) .on('data', chunk => arr.push(chunk)) ..

2020-05-29 18:04:26 1344

原创微信小程序 scroll view 点击居中

// 方法函数getRect (ele) { // 获取点击元素的信息,ele为传入的id var that = this wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) { let moveParams = that.data.moveParams moveParams.subLeft = rect.left moveParams.subHalfWidth.

2020-05-28 15:56:44 2326

原创 css 高度不一的瀑布流

.box { height:123px; padding:1em; margin-top:1em; -moz-page-break-inside:avoid; -webkit-column-break-inside:avoid; break-inside:avoid; border:1px solid #000; background:#909090;}.spe { height:225px;}.box-wrapper { -moz-column-count:2; /* F..

2020-05-27 14:39:28 598

原创画布水印

/** * 水印画布 */const watermark = {}const setWatermark = (str) => { const id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } const can = document.createEle.

2020-05-22 09:00:15 310

原创 v-echart 图表的简单使用

<template> <div class="staff-archives-charts"> <div class="staff-archives-title">性别分布</div> <div> <ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"&gt.

2020-05-13 09:11:20 1116

原创 JS 简单实现二叉树

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

2020-04-14 15:58:08 300

原创 sql 多对多中间表查询

/* Navicat Premium Data Transfer Source Server : node Source Server Type : MySQL Source Server Version : 50553 Source Host : localhost:3306 Source Schema : test ...

2020-04-07 14:56:04 2573

原创实现逐字逐句显示文字的jQuery插件

Letter-by-Letter-JS是一款可以实现逐字逐句显示文字的jQuery插件。通过该插件你可以将一个段落的文字内容一个字一个字的逐一显示。文字的显示可以是打印机效果，也可以设置为淡入淡出效果，同时还可以控制文字的显示速度。Reveal.js 是一款 HTML5 演示框架。它将 markdown 文件转换为可以放映的 html5 文件，也可导出 pdf（网页打印功能）。...

2020-03-31 12:05:46 541

原创 wow.js使用

wow.js依赖animate.css，不需要jquery；animate.css是纯css动画官网：http://mynameismatthieu.com/WOW/建议去官网一看bootstrap CDN服务：http://www.bootcdn.cn/wow/当您滚动时显示动画。非常Animate.css朋友:-)轻松自定义动画设置：样式，延迟，长度，偏移量，迭...

2020-03-31 10:13:27 741 1

原创 waypoints的使用

一、最简易的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>waypoints的最简单使用</title>  <style> ...

2020-03-20 16:37:10 2901

原创 jquery Stellar.js实现网站视差滚动效果

stellar.js是一个 jQuery插件，能很容易地给网站添加视差滚动效果。虽然已经停止了维护，但它非常稳定，与最新版本的jQuery兼容。http://markdalgleish.com/projects/stellar.js/ 官网1.引用js 包<script src="path/to/jquery/jquery.min.js"></script&g...

2020-03-20 16:33:18 427

原创 js位运算以及权限控制

正文 1. 内容概要本文主要讨论以下两个问题： JavaScript 的位运算：先简单回顾下位运算，平时用的少，相信不少人和我一样忘的差不多了权限设计：根据位运算的特点，设计一个权限系统（添加、删除、判断等） 2. JavaScript 位运算2.1. Number在讲位运算之前，首先简单看下 JavaScript 中的 Number，下文需要用到。...

2020-03-06 11:49:06 1155 1

原创 axios上传进度

// upLoad (file) { // console.log('file: ', file) // let loadingInstance // const formData = new FormData() // formData.append('file', file.file) // console.log('formDa...

2020-02-17 16:03:57 274

原创 docker-compose 启动容器

docker-compose 是什么docker-compose 是一个用来把 docker 自动化的东西。有了 docker-compose 你可以把所有繁复的 docker 操作全都一条命令，自动化的完成。为什么要用 docker-compose，他解决了什么用通俗的语言来说，我们平时操作 docker 还是很原始的一系列动作，你手动使用 docker 的动作可以拆分成...

2020-02-17 11:05:42 3793

原创朋友圈、浏览器分享实现

/** * mshare.js * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 * 代码编写过程中参考: * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js * 此外，JefferyWang的项目对我也有一定启示： * https://git...

2020-02-12 13:26:04 2645

原创 docker部署express项目

首先你要准备一台服务器，你可以选择购买各大厂商的服务器，你也可以选择自己搭建一个centos服务器，可以参考之前的文章了解快速搭建centos7。Dockerfile了解Dockerfile之前我们先介绍它是干什么的？Dockerfile是一个配置文件，相当于一个node项目中的package.json文件，根据依赖来生成其他内容。在使用docker前一定要先启动docker软件。...

2020-02-06 19:58:42 2567

原创 node 将buffer传给前后处理

var elink = document.createElement('a') elink.download = buffer.data.name elink.style.display = 'none' // const buf = Buffer.from(buffer.data.buffer.data, 'bi...

2020-02-06 15:50:55 412

转载在Node.js和Express框架上添加socket.io支持

0、前提：搭建了基于Node.js+Express的Http/Https项目关于如何搭建Node.js+Express的Http/Https项目，参考以下链接：http://blog.csdn.net/xingyanchao/article/details/793624431、安装socket.io模块（1）进入cmd窗口，cd到项目所在目录（2...

2020-02-05 17:12:33 680

原创 express 读取表格和生成表格

1//读取表格import xlsx from 'node-xlsx'import request from 'request'const fs = require('fs')var list = xlsx.parse(`${__dirname}/export.xlsx`)2 .//生成表格let data = [ { name: 'firstSheet'...

2020-02-04 21:52:25 777

原创 node.js中express 请求数据

在nodejs的开发中，有时需要后台去调用其他服务器的接口，这个时候，就需要发送HTTP请求了。有一个简单的工具可以用，Simplified HTTP request client，可以比较方便的模拟请求。安装npm install --save request1使用最简单的GET请求，用法如下：var request = require('request');request('...

2020-02-04 12:22:54 593

转载 H5 浏览器自定义用户控

参考文章：https://css-tricks.com/custom...https://blog.hellojs.org/crea...原生用户控件对于<video>标签，有一个名为 'controls' 的属性，按如下写法就能给播放器增加原生的暂停/开始、进度条、音量、视频最大化这些基础功能。<videoid="myVideo"controls>&...

2020-01-22 08:52:39 311

原创由于需要监听手指的左右滑动事件，所以用到了v-touch这个插件。

npm安装npm install vue-touch@next --save//main.js中引入：import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})用法如下：//html代码<template> <v-touch v-on:swipeleft="swiper...

2020-01-20 09:53:52 432

原创 JS中的编码，解码类型及说明

编码函数 escape encodeURI encodeURIComponent 对应解码函数 unescape decodeURI decodeURIComponentescape()：采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里...

2020-01-18 17:24:52 376

原创 dockerfile 构建前端页面

1 dockerfileFROM nginxRUN mkdir /html #创建html文件RUN mkdir /html/in#创建in文件COPY ./nginx.conf /etc/nginx/conf.d#拷贝nginx到容器的nginx里COPY ./in /html/in#拷贝当前文件的in到容器里EXPOSE 81#开放81端口2 nginx...

2020-01-17 16:00:20 1014

原创移动端vue项目解决遮罩层滚动穿透问题

三种穿透滑动情况以及解决办法1.引用mintui中mt-popup下拉选择框选择内容时，滑动穿透问题（1）如果下拉选择内容过少，mt-popup内部不需要滑动：就只需加入@touchmove.native.stop.prevent阻止默认根元素的默认事件 <mt-popup v-model="popupVisible" positi...

2020-01-14 15:49:13 2447

原创 VUE过渡动画

1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后下一帧移除。2.v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。3.v-enter-to：2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-...

2020-01-14 11:51:01 223

转载 dockerfile 与 docker-compose的区别

dockerfile 与 docker-compose的区别先简单理解docker 的使用过程，它分为镜像构建与容器启动。镜像构建：即创建一个镜像，它包含安装运行所需的环境、程序代码等。这个创建过程就是使用 dockerfile 来完成的。容器启动：容器最终运行起来是通过拉取构建好的镜像，通过一系列运行指令（如端口映射、外部数据挂载、环境变量等）来启动服务的。针对单个容器，这可以通过...

2020-01-13 10:29:53 112

原创 ubuntu下修改root密码和开启ssh登录

ubuntu下默认是不允许root通过密码的方式通过ssh远程登录服务器的，可以通过在sudo vi /etc/ssh/sshd_config#增加以下配置允许通过ssh登录#PermitRootLogin prohibit-passwordPermitRootLogin yes#修改完成后需要重启ssh服务命令如下sudo service ssh restart...

2020-01-13 10:08:18 1038

空空如也

空空如也