海布里的冬季-优快云博客

原创 Javascript中如何让多个异步按顺序执行

直接调用（异步调异步）function fn1() { setTimeout(() => { console.log('fn1执行') fn2('fn1传递过去的参数') }, 1000)}function fn2(data) { setTimeout(() => { console.log('fn2执行', data) fn3('fn2传递过去的参数') }, 1000)}function fn3(data) { setTimeout(() =>

2021-12-10 14:33:22 4450

原创 vue+axios将后端返回的图片流显示到img中

axios.get("接口地址", { responseType: "arraybuffer", params: 传给后端的数据 }) .then(response => { return ( "data:image/png;base64," + btoa( new Uint8Array(response.data).reduce( (data, byte) => data + String.fromCharCode.

2021-12-10 11:19:29 1593

原创前端日常开发中，对于图片的处理与优化

一、使用工具进行图片压缩压缩 png 格式的图片npm install node-pngquant-nativeconst pngquant = require('node-pngquant-native')const fs = require('fs')fs.readFile('./aa.png', (err, buffer) => { if (err) throw err const resBuffer = pngquant.option({}).compress(buffer

2021-12-10 11:08:43 958

原创 umy-ui 一个基于 vue 的 PC 端表格UI库，解决万级数据渲染卡顿问题，过万数据点击全选卡顿等等问题

npm安装npm install umy-ui按需引入在main.js中添加按需引入代码import { UTable } from 'umy-ui'Vue.use(UTable)示例 <template> <u-table :data="tableData" :border="false" style="width: 100%"> <template slot="empty"> 没有查询到符合条件

2020-12-15 16:02:10 2526 1

原创递归展开数组对象，根据主键递归查找树形数据中对应的数据

/** * * @param {Object} * @param {Array} arr 数组对象 * @param {String} childrenKey 子数组的key * @param {Number=} expandLevel 可选展开的层级 * @param {String=} levelKey 可选树形结构中元素的层级字段层级从0开始当expandLevel有值时 levelKey为必须 * @param {Boolean=} noParents 返回展开数组时不包含根节

2020-12-11 16:20:35 800 1

原创前端将后端返回的文件流转为excel并下载

在日常开发中，我们可能会遇到导出excel的情况，而后端此时给我们返回的是一个文件流，需要前端将文件流转为url地址进行下载。可以将这个方法封装成一个工具类，方便其他地方调用，我这里放到了utils.js里面import axios from 'axios'import Vue form 'vue'/** * 根据后端返回的文件流转为excel导出 * @param {Object} data */export function exportExcelMethod(data) { ax

2020-12-09 14:34:34 2372 3

原创 nodejs实现批量裁剪图片功能

1、初始化首先新建一个 tailor-img 文件夹，接着执行 npm init -y 初始化一个package.json2、安装相关插件archiver 压缩文件canvas 裁剪图片glob 批量获取路径npm i archiver canvas glob --save3、app.jsconst fs = require('fs')const { basename } = require('path')// 压缩文件const archiver = require('a

2020-11-20 09:18:32 644

原创前端代码优化：优化js中的条件语句

在开发过程中，由于追求开发速度，我们往往很多时候都没有注意代码的可读性与性能，这里介绍几个技巧，让你写出可读性强、简洁的js代码1、多个条件满足之一时，推荐使用Array.includes// 优化前function test(val) { if (val === 'js' || val === 'java' || val === 'python') { console.log('编程语言') }}// 优化后function test(val) { cosnt arr = ['js

2020-11-13 17:47:39 137 2

原创 Performance --- 前端性能监控

一、什么是performanceperformance可以获取到当前页面中与性能相关的信息，可以检测到白屏时间、首屏时间、用户可操作的时间节点、页面总下载的时间、DNS查询的时间、TCP链接的时间等。二、前端性能主要测试点白屏时间：从打开网站到有内容渲染出来的时间点首屏时间：首屏内容渲染完毕的时间节点用户可操作时间节点：domready触发节点总下载时间：window.onload的触发节点新建个demo.html<!DOCTYPE html><html lang="

2020-11-13 16:01:12 1044

原创 webpack入门

一、webpack五大核心概念1、entry打包的入口，可以是字符串、数组或对象2、output打包的输出3、mode模式，可以分为开发模式（development）与生产模式（production），默认为生产模式4、loader默认只能处理js、json格式的文件，loader的作用就是将其他格式的文件，转换成webpack能够处理的文件5、pluginwebpack插件，每一个插件都有一个特定的功能，能处理loader无法处理的事情二、HtmlWebpackPlugin与Clea

2020-11-13 15:41:44 115

原创 Vue项目首屏加载速度优化

一、路由懒加载1、作用提升用户体验，提升首屏组件加载速度，解决白屏问题2、代码示例2.1 未使用路由懒加载import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Hel

2020-11-13 15:36:30 275

原创如何在Vue项目中使用自定义字体

首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI小姐姐要字体包，拿到字体包后进入项目中在assets文件夹下建一个fonts文件夹把拿到的字体包放到fonts文件夹中接着创建一个fonts.css文件在fonts.css文件中定义你所用的字体（这里以PingFang为例）@font-face: { font-family: 'PingFang-RE'; /* 重命名字体名 */ src: url('./PingFang\ Re.

2020-09-02 13:59:11 1515

原创 mysql基本语句

1.增use myblog;show tables;insert into users(username, `password`, realname) values ('zhangsan', '123', '张三');2.查use myblogs;show tables;select * from users; --查询所有select id,username form users; --查询id和usernameselect * from users where userna

2020-09-02 10:41:46 109

原创 Nodejs开发，ORM框架Sequelize

一、什么是ORM对象关系映射（Object Relational Mapping，简称ORM）是通过使用描述对象和数据库之间映射的元数据，将面向对象语言程序中的对象自动持久化到关系数据库中。本质上就是将数据从一种形式转换到另外一种形式。这也同时暗示着额外的执行开销；然而，如果ORM作为一种中间件实现，则会有很多机会做优化，而这些在手写的持久层并不存在。更重要的是用于控制转换的元数据需要提供和管理；但是同样，这些花费要比维护手写的方案要少；而且就算是遵守ODMG规范的对象数据库依然需要类级别的元数据。

2020-09-02 10:32:41 513

原创 Mongoose的数据检验与聚合管道

一、什么是mongoose的数据检验用户通过mongoose给mongodb数据库增加数据的时候，对数据的合法性进行的验证二、mongoose校验参数required：表示这个数据必须传入max：用于Number类型，最大值min：用于Number类型，最小值enum：枚举类型，要求数据必须满足枚举值enum:[‘0’, ‘1’, ‘2’]match：增加的数据必须符合match（正则）的规则maxlength：最大长度minlength：最小长度var mongoose = r

2020-08-10 11:32:16 298

原创 Mongoose索引、Mongoose内置CURD方法、扩展Mongoose Model的静态方法和实例方法

一、Mongoose索引索引是对数据库表中一列或多列的值进行排序的一种结构，可以让我们查询数据库变得更快。MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的查询优化技巧。mongoose中除了以前创建索引的方式，我们也可以在定义Schema的时候指定创建索引。var mongoose = require('mongoose')var UserSchema = mongoose.Schema({ name: String, sn: { type: Str

2020-08-10 10:28:48 171

原创预定义模式修饰符、Getters与Setters自定义修饰符

一、mongoose预定义修饰符mongoose提供的预定义模式修饰符，可以对我们增加的数据进行一些格式化var mongoose = require('mongoose')var NewsSchema = mongoose.Schema({ title: { type: String, trim: true // 定义mongoose模式修饰符，去掉左右空格 }, author: String, pic: String, content

2020-08-10 10:13:50 183

原创 mongoose默认参数、模块化、性能测试

一、默认参数const mongoose = require('mongoose')mongoose.connect( 'mongodb://127.0.0.1:27017/eggcms', { useUnifiedTopology: true, useNewUrlParser: true }, (err) => { if (err) return console.log(err) console.log('数据库连接成功') }

2020-08-05 13:52:10 353

原创 mongoose操作数据库

一、mongoose介绍mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具。mongoose是node.js的驱动，不能作为其他语言的驱动mongoose的特点：通过关系型数据库的思想来设计非关系型数据库基于mongodb驱动，简化操作mongoose的使用// 1.引入mongooseconst mongoose = require('mongoose')// 2.建立数据库连接mongoose.connect('mongodb://127.0.

2020-08-05 11:42:50 171

原创 express结合multer实现文件上传功能

单文件上传：<form action="/admin/nav/doAdd" method="post" enctype="multipart/form-data"> 标题：<input type="text" name="title" id="title"><br><br> 图片：<input type="file" name="pic" id="pic"><br><br

2020-08-04 13:59:20 209

原创 express框架常用中间件（插件）

1. body-parser用于post请求解析req.body消息体2. express-ip-filterip过滤器3. morgan 、 winston 、 express-winston日志记录4. cookie-parser和cookie-session解析客户端传过来的cookie，cookie-session中间件用来建立基于cookie的会话session5. request-validatekoa2、express、nodejs参数校验6. config-lite读取

2020-08-04 13:57:35 1043

转载 Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页

1、Element UI 引入(整体引入)main.js// Element UIimport Element from 'element-ui'// 默认样式import 'element-ui/lib/theme-chalk/index.css'2、开始封装 iTable.vue 组件 (骨架)<template> <div class="table"&...

2020-03-18 09:03:07 366

转载实用的vue插件大汇总转载：https://www.cnblogs.com/ginkgo-leaves/p/10187915.html

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，方便查找使用，便于工作和学习。很全的vue插件汇总。一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vu...

2020-03-17 15:10:06 291

原创 VsCode自定义设置，setting.json

{"editor.fontSize": 16,"workbench.iconTheme": "vscode-icons","editor.wordWrap": "on","[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.suggestSelection": "first","vsintel...

2020-03-17 15:08:43 455

原创关于使用Nuxt.js + koa 构建 vue 项目时遇到的问题

npm run dev时，提示Cannot find module main.js，解决方案如：vue init nuxt-community/koa-template nuxt-learnnpm installnpm run devnpm install backpack-core@0.7.0 --save-dev// 在nuxt.config.js里找到eslint-loader将...

2020-03-17 15:05:03 427

原创关于使用 git bash 初始化 vue 项目时，上下箭头无法使用的问题

在 git bash 中使用 vue-cli3 初始化 vue 项目时，上下箭头无法选择原本的命令是 vue create my-project只需要 winpty vue.cmd create my-project 即可

2020-03-17 13:53:08 483

qq_26481279的博客