不一般的菜瓜-CSDN博客

JavaScript 简介JavaScript 简介JavaScript 简史JavaScript 实现1.ECMAScript2.文档对象模型（DOM）3. 浏览器对象模型（BOM）总结：JavaScript 简介JavaScript 简史JavaScript 名字的由来：布兰登·艾奇计划在1995年2月发布的Netscape Navigator 2 开发LiveScript 的脚本语言——该语言将同时在浏览器和服务器中使用。后来Netscape在与Sun合作之后将其改名为JavaScript。J

2022-02-07 14:03:13 852

原创后端给图片加水印的方法

/**public static MultipartFile addWorkMarkToMutipartFile(MultipartFile multipartFile,String time , String address) throws IOException { // 获取图片文件名 xxx.png xxx String originFileName = multipartFile.getOriginalFilename(); // 获取原图片后缀 png int

2021-10-28 13:46:12 922

原创 Element-UI的table合并span-method

objectSpanMethod({ row, column, rowIndex, columnIndex }) { const span = column['property'] + '-span' console.log(span) if (row[span]) { console.log(row[span]); return row[span] } }, mergeTableRow(data, merg.

2021-10-11 13:56:49 210

原创 NProgress进度条简单使用

安装npmnpm install --save nprogressYarnyarn add nprogress直接引入js、css或者通过cdn引入<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>使用方法方法调用start和done// 使用方法NProgress.start(); — 显示进度条NProgress

2021-08-13 14:41:32 1658

原创 element-UI的级联远程动态加载数据回显

需求：省市区使用element-UI的级联组件实现省市区的动态加载选择以及数据的回显// template <el-cascader :key="cascader" ref="cascader" :placeholder="请选择省市区" @change="changeAdress" style="width: 100%" v-model="provinces" :props="props" :options="province"

2021-08-11 15:46:52 1886

原创 Element-UI的table使用tab页切换行展示行错位问题修复

Element-UI的table使用tag页切换行展示行错位问题修复项目中的场景：菜单内使用el-tabs组件然后分为汇总和详情两个tab，两个独自请求列表展示正常，当点击其他菜单再进行切回的时候详情tab页的序号和其他行展示错误解决：首先table是封装的组件，在封装组件中对组件中没有处理activated activated() { this.$refs.table && this.$refs.table.doLayout() }其次在写tabs 的

2021-07-05 17:02:28 1920

原创 [email protected]的vue.config.js最基本配置

const path = require('path')module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 输出文件目录 outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist', // eslint-loader 是否在保存的时候检查 lintOnSav

2021-05-10 15:56:22 128

原创 Babel常用的插件

Babel常用的插件1. @babel-plugin-dynamic-import-node作用：在开发环境下解决vue热加载编译速度慢的问题。2. @babel/plugin-syntax-dynamic-import作用：懒加载引入动态文件。3. @babel/plugin-proposal-object-rest-spread作用：插件会将类中的属性编译参数 loose4. @babel-plugin-transform-vue-jsx作用: Vue中的渲染函数可以支持JSX语法1. @babel-

2021-05-10 15:53:00 1901

原创 npm运行项目报错----Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals‘

启动项目运行 npm run serve时候报错 Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals‘解决办法一： npm update --depth 5 @babel/compat-data解决方法二： package.json中devDependencies对象添加 “@babel/compat-data”: “7.9.0”...

2021-04-07 13:27:00 588

原创 Generator 函数的含义与用法

Generator 函数的含义与用法Generator 函数的含义与用法什么是异步？回调函数Promise协程Generator函数Generator函数的数据交换和错误处理Generator函数的用法Generator 函数的含义与用法异步编程对js语言非常重要，如果没有异步，js执行到setTimeout或者很大数据量返回的时候都会造成程序阻塞。异步编程的四种方法： - 回调函数 - 事件监听 - 发布/订阅 - Promise对象ES6将异步编程带入一个全新的阶段，异步编程的对法目标

2021-03-16 16:30:04 251

原创面试题_js_Call，Apply，Bind的使用与区别，如何实现一个bind？

Call，Apply，Bind的使用与区别，如何实现一个bind?Call，Apply，Bind的使用与区别实现一个bindCall，Apply，Bind的使用与区别相同点:都是使用与方法借用以及明确this指向场景第一个参数都是this要指向的对象都可以利用后面参数进行传参不同点参数传递方式不同call apply是立即调用 bind是动态调用基本使用Array.prototype.slice.call(obj,0,1,2)Array.prototype.s

2021-03-15 14:28:11 97

原创生成包括大小写字母数字以及符号的密码且不能有连续或者倒叙以及其校验

一：生成随机密码生成随机密码// 随机生成密码方法 function randomPassword(min: number, max: number) { let str = "" let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"

2021-03-02 16:26:32 661

原创数组扁平化

数组扁平化数据扁平化方法方法一：js原生的flat方法二：replace方法方法三：递归处理方法四：reduce方法五：扩展运算符数据扁平化方法需求：多维数组 => 一维数组let ary = [1,[2,[3,[4,5]]],6]方法一：js原生的flat// 根据js原生的flat方法let ary = [1,[2,[3,[4,5]]],6]let newAry = ary.flat(Infinity) // Arrayflat(depth) 参数是原始数组深度也可以写In

2021-03-01 16:41:54 83

原创富文本quill.js使用

富文本Quill.js背景使用封装组件完整代码富文本Quill.js背景项目中使用vue-quill-editor 不能兼容table所以重新使用了quill.js使用引入Editor: () => import("@/components/editor/Editor")template<editor :id="dialogFrom[item.prop] + '--only'" v-model="dialogFrom[item.prop]" :pro.

2021-01-07 15:10:35 793

原创富文本vue-quill-editor配合element-ui的自定义图片上传

富文本vue-quill-editor配合element-ui的自定义图片上传完整代码富文本vue-quill-editor配合element-ui的自定义图片上传完整代码// QuillEditor.vue<template> /* 外层包裹组件*/ <div class="quill-wrap" :id="id"> /* 1. 给upload标记唯一标识id 2. :action="severUrl" 服务器地址*/ <el-upload .

2021-01-07 14:52:37 124

原创富文本vue-quill-editor扩展图片上传服务器：quill-image-extend-module

富文本扩展 quill-image-extend-modulenpm安装组件引入更新配置富文本扩展 quill-image-extend-modulenpm安装npm install quill-image-extend-module --save-dev组件引入 import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend} from 'quill-image-extend-modu.

2021-01-07 14:37:16 557

原创富文本vue-quill-editor扩展支持图片拖拽和放大缩小

富文本vue-quill-editor扩展支持上传图片vue-quill-editor扩展支持上传图片并拖拽以及放大缩小图片拖拽以及放大缩小vue-quill-editor扩展支持上传图片并拖拽以及放大缩小图片拖拽以及放大缩小基本功能的基础上支持图片的拖拽放大和缩小更便于富文本中对图片进行操作。需要配合插件进行使用。npm 安装插件npm i quill-image-drop-module -S // 拖拽插件npm i quill-image-resize-module -S // 放大

2021-01-07 11:34:19 1768 5

原创富文本vue-quill-editor封装组件以及基本使用

vue-quill-editorvue-quill-editor背景简介使用vue-quill-editor背景选择理由：后台管理系统项目中需要使用富文本，用于web端展示一些协议或者文本加图片的复杂文本，所以使用富文本进行对复杂文本进行配置更好。富文本插件有很多，想选择一个简单的富文本且应用得项目是vue项目，所以选择了vue-quill-editor。简介基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+使用npm安装依赖

2021-01-07 10:52:01 1414

原创 Cookie详解以及Cookie操作

CookieCookie详解什么是Cookie?Cookie的工作机制是怎样的？Cookie的组成Cookie的使用Cookie的局限Cookie详解什么是Cookie?cookie 的作用就是用于解决如何记录客户端的用户信息HTTP协议本身是无状态的。无状态即为服务器无法判断用户身份，cookie 的作用就是用于解决如何记录客户端的用户信息。Cookie是存储在客户端简单文本文件（key-value格式）。客户端向服务端发起请求，服务端会为每个访问的客户端产生一个唯一的ID，然后以Cookie文

2020-12-16 19:49:48 645

原创 Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopElement属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopclientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度。clientHeightoffsetHeightscrollHeightscrollTopoffsetTopElement属性学习之

2020-12-09 15:12:58 1260

原创判断元素是否有滚动条

判断元素是否有滚动条判断元素是否有滚动条判断竖向滚动条判断横向滚动条判断元素是否有滚动条因为出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则.判断竖向滚动条el.scrollHeight > el.clientHeightscrollHeight：指的是元素的内容高度，即如果有滚动条，它的值会等于内容实际的高度加padding值（并不包含border和margin值），在没有内容溢出的情况下它的值等于clientHeight。clientH

2020-12-09 11:20:03 3449

原创项目中封装的axios

把每个一级菜单按照模块去区分在urls文件中进行统一管理把get 和post请求进行拦截，以此进行方便页面传参， get和post传参方式一样方便使用。main.ts中import post from './apis/index'; Vue.prototype.$post = post; // 挂载到全局将$postrequest.ts中import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';import { Me

2020-12-07 18:44:35 227

原创菜鸟Axios学习=官网

Axios可以用在浏览器器和Node环境中从浏览器中创建XMLHttpRequests从Node.js创建http请求拦截请求和响应转换请求数据和响应数据支持Promise API 提供一些并发请求接口取消请求自动转换JSON数据客户端支持防御XSRFXSRF：CSRF一般指跨站请求伪造。跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种

2020-12-07 15:41:22 2375

原创大前端学习2-1__自动化构建工作流以及Gulp Grunt FIS相关工具

自动化构建工作流以及Gulp Grunt FIS相关工具自动化构建工作流以及Gulp Grunt FIS相关工具自动化构建自动化构建初体验NPM Script常用的自动化构架工具Grunt的基本使用一 grunt的基本使用步骤二 grunt标记任务失败三 grunt的配置选项方法五 grunt插件的使用六 grunt常用插件Gulp使用一 Gulp基本使用二 Gulp创建组合任务四 gulp 构建过程核心工作原理五 Gulp文件操作API和插件的使用完整gulpfile.js 写入过程封装自动化构建工作流

2020-11-22 02:16:53 208 1

空空如也

空空如也