『九离~空白』-CSDN博客

原创日常知识总结：

前端调用后端接口，下载生成的 excel 文件。前端通过调用后端接口，接收到后端返回的文件流。动态创建触发 a 标签点击事件，实现下载的功能。/** * 导出 excel 报表接口 * @param {Object} params * @param {Object} data */export const exportPreSalePermitExcel = (params, data) => axios({ url: 'xxx', method: 'post',

2021-12-24 10:03:27 641

原创前端 B 站学习资源整合

HTML：HTML基础知识学习？HTML 基础教程：https://www.bilibili.com/video/BV11t411K74QHTML 编写规则和语义化写法？HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT表单和验证？HTML5 表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb公约和最佳实践方法？前端代码规范秘籍：https://www.bilib

2021-12-02 15:18:41 558

原创 vueCli2.0 和 vueCli3.0 项目中配置多环境运行打包？

本地 node 环境本地安装node从 node官网下载并安装 node，安装步骤只需一路 next即可，安装完成后，打开命令行工具输入 node -v ，若出现对应版本号则安装成功。输入 npm -v，显示 npm 版本信息。切换到淘宝镜像当 node环境安装完以后，npm包管理工具也有了，但是由于 npm的有些资源被堵，为了更快更稳定，需要切换到淘宝的 npm镜像 cnpm 。输入 cnpm -v ，可以查看当前 cnpm版本进行安装是否成功验证。npm...

2021-10-11 15:17:40 726

原创 EditorConfig 和 ESLint 配合完善前端代码规范？

概念：EditorConfig：主要用于维护多个编辑器和 IDE从事同一项目的多个开发人员的一致编码风格。EditorConfig项目包括一个用于定义编码样式的文件格式和一个文本编辑器插件集合，这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。ESLint：是 js的代码检查工具，在编写 js代码的时候，有些错误很难被发现，需要在运行的时候不断的排错；而且每个人的编写代码的风格不一致，这样造成了阅读对方代码的困难；因此我们需要 eslint在编写的过程发现错误，并统一风格。...

2021-09-22 11:41:40 393

原创 vue 项目中使用 echarts 实现市区地图标注，地图下钻？

安装依赖安装 echarts和 echarts-gl依赖包。npm i echarts echarts-gl -Sassets下新增 mapdata资源包（中国各省市 json文件）可以在网上自行查找下载，也可通过本文案例链接，在码云上拉取获得。完整示例链接https://gitee.com/wu241617/echarts-mapassets下新增 config目录，下新建 map.json文件我这里案例中只做了抚州市和荆州市的配置，后续有其他区域...

2021-09-18 12:27:35 1699

原创 xxtea 算法的 js 加密处理类,包含 UtfParser 和 Base64 类？

ES5写法：/** xxtea算法的js加密处理类,还包含了UtfParser类,还包含了Base64类*///Class:Xxteaexport function Xxtea(privateKey) { this._keyString = privateKey;}//将长整形转换为string,privateXxtea.prototype._long2str = function (v, w) { var vl = v.length; var n = (vl

2021-09-14 09:40:52 791 1

原创 vue2.x 中全局和按需引入 element-ui 组件库？

全局引入安装依赖npm install element-ui -Smain.js中引入全局完整引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);按需引入安装依赖npm install element-ui -S引入插件按需引入功能依赖于 babel-plugin-component 插件完成...

2021-09-03 10:31:09 2521 2

原创 vue-cli 项目中 vue-router 相关使用？

import Vue from 'vue';import VueRouter from 'vue-router';import config from '@/config';import store from '@/store';import routes from './routes';const { systemName } = config;Vue.use(VueRouter);// 获取路由白名单path合集const whiteNames = (routers) =>.

2021-09-01 11:41:20 702

原创 JS 开发规范总结？

前言：随着前后端分离项目开发模式日渐成熟，前端和后端的职能逐渐趋于明确。前端着重于数据渲染，页面动态性，页面性能优化等工作。前端核心基础三大件 html，css，js 。基于此之上还有很多框架，类库，组件库等。其中核心的渲染逻辑由 javascript去实现完成，它是前端基础中的核心，这里对日常项目开发中，使用 JS 开发规范做一个总结。命名规则避免单字母命名，命名应具备描述性。 // badfunction q() {}// goodfunction quer...

2021-08-26 15:45:53 412

原创 vue 项目中结合 element-ui 动态生成菜单？

前言：vue项目中，在使用 element-ui导航菜单组件时，官方文档给出的示例，是已知菜单项静态写死的。然而在日常开发中，要求从后端请求拿到菜单数据，再由前端去实现菜单的动态渲染生成，这里对具体实现过程做一个总结。vuex中存放Menus，模拟后端请求到的数据import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { ...

2021-08-25 15:38:11 2568

原创 vue 实现页面顶部路由标签功能？

前言：在日常项目中，会遇到页面顶部要求有路由标签的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等。上篇文章是使用 vue-router-tab插件去实现，本文不涉及插件，使用vue基础语法实现具体需求。新建项目，安装基础依赖（脚手架创建）项目创建：这里使用vue-cli3.x的 ui面板去创建，项目中除了安装默认依赖项（babel，eslint）之外，还需安装 vue-router和 vuex ，后续项目基于此进行。store...

2021-08-24 18:08:17 1732

原创 vue 中使用 vue-router-tab 插件实现页面顶部路由标签功能？

前言：在日常项目中，会遇到页面顶部要求有路由标签的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等。在 vue项目中考虑使用vue-router-tab 插件去实现改需求，下面对其用法做相关示例。安装依赖（官方推荐 yarn）npm i vue-router-tab -S// 或者cnpm i vue-router-tab -S// 或者yarn add vue-router-tab main.js中全局引入// 引入组件和样式，ro...

2021-08-20 10:32:45 2198

原创 vue 中使用 clipboard 插件实现复制功能，使用 qrcodejs2 插件生成二维码？

前言：在日常项目开发中，会碰到把一段文本或是代码进行按钮点击复制的需求。在 vue中考虑使用clipboard （剪切板插件）去实现，下面对主要用法做一个示例。安装依赖npm i clipboard -S// 或者cnpm i clipboard -Scopy函数copy() { let clipboard = new Clipboard('.link') clipboard.on('success', e => { console.log('复制成功')...

2021-08-17 15:21:57 463

原创如何实现在 Vue 中嵌入代码编辑器？

前言：在 Vue日常项目开发中，会遇到将后端传回的代码格式化输出并支持用户编辑的需求。实现方法有很多，可以分别使用 vue2-ace-editor，vue-prism-editor，codemirror等插件方法实现，下面对这三种方法的使用做一个总结。方法一：使用vue2-ace-editor插件实现安装npm i vue2-ace-editor -S组件内使用实例<template&g...

2021-08-13 09:54:34 4627

原创 vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？

前言：在 vue 和 element-ui项目中，有点击按钮预览 PDF文件需求，要求支持 PDF的预览，上下页切换，放大缩小，顺时针和逆时针旋转等功能。这里选择使用 vue-pdf 插件去实现，以下是对其相关用法的总结。安装依赖npm i --save vue-pdf// 或者cnpm i --save vue-pdf 组件页面中引入并注册// 引入import pdf from "vue-pdf"export default{ // 注册 c...

2021-08-11 17:36:47 5173 1

原创 VUE 项目中富文本编辑器的使用（vue-quill-editor）？

vue-quill-editor相关使用前言：如何实现嵌入富文本编辑器，让用户编写文章的需求？在 VUE项目中，选择使用轻量化的 vue-quill-editor插件去完成实现。这里主要对其使用过程，样式优化做一个总结。项目中安装依赖npmnpm i --save vue-quill-editorcnpmcnpm i --save vue-quill-editor组件中引入插件// 引入 vue-quill-edito 组件import { quil...

2021-08-11 14:40:12 449 1

原创 vue 项目中实现页面表格数据导出为 excel 表，外部 excel 表导入页面渲染为表格功能？

页面表格数据导出为 excel表安装依赖（xlsx和 file-saver）npm i --save xlsx file-saver在使用导出功能的页面引入插件import XLSX from 'xlsx'import FileSaver from 'file-saver'导出方法（绑定为导出表格按钮的点击事件）//定义导出Excel表格事件exportExcel() { let xlsxParam = { raw: true } // #table 为要导出的...

2021-08-10 17:22:05 480

原创 Vue-Cli 项目中 Bus 的使用，组件的动态注册和渲染？

Bus的使用概念：vue 中非父子组件之间通信除了使用vuex，也可以通过 bus 总线，两者适用场景不同。bus 适合小项目、数据被更少组件使用的项目，其实就是一个发布订阅模式，利用 vue 的自定义事件机制，在触发的地方通过 $emit 向外发布一个事件，在需要监听的页面，通过 $on 监听事件。vue2中使用方法：1，构建 bus.js 文件（位置，文件名称随意）import Vue from 'vue'export default new Vue()2，组件中...

2021-07-29 10:09:43 478

原创原生 js 和 vue+ element-ui 分别实现树形表格 ? (JSONP 和 Axios 请求本地 JSON 文件)

使用原生 JS实现树形表格？请求本地 JSON文件获取数据。问题：cors，跨域问题。解决：使用 jsonp方式，请求相关数据。注意：在 json文件中，json 数据使用 callback( json数据 ) 包裹，才能保持浏览器控制台打印出数据无报错。我这里回调函数是 getData( json数据 )。代码： <script type="text/javascript"> /* getData 函数: JSONP 的函调函数，解决跨域问题。请...

2021-07-22 10:31:47 509

原创在 Vue 中如何实现数据的变化监测？

Vue源码 ---变化监测Object数据实现变化监测数据可观测：知道什么时候数据被读取和改写。vue 中对象数据实现数据可观测，基于Object.defineProperty方法去实现。对象单个属性设置为可观测let obj = {}let val = 'wuhao'Object.defineProperty(obj, 'name', { enumerable: true, configurable: true, get(){ console.l...

2021-07-22 09:16:33 907 1

原创修改 element ui 中跑马灯组件为三列卡片轮播。

前言：在使用 Element UI组件库中的跑马灯组件时，需求是三列卡片轮播的实现。虽然 Element UI中跑马灯组件提供了 type='card'属性，去设置轮播为卡片类型，但是样式不是我们所期待的，不想要缩放效果，于是便对跑马灯组件源码进行调整。源码调整位置分析通过分析，跑马灯组件主要是 carousel和 carouselItem组件。可以单独把源码中的这两个组件文件复制一份进行修改。更改后的 carousel文件。<template> &lt...

2021-05-13 17:37:43 5239 3

原创 vue 中动态触发子组件，父子组件加载顺序。

vue中在子组件中触发，父组件或其他组件。解决思路：在所触发的组件上绑定 :key="timer",更新 timer值，从而动态触发所有已绑定的子组件。实例解析：再此实例中组件 Progress和HjcqTable绑定 :key="timer"属性，当改变日期值时如何重新加载组件（重发请求，数据变更）。具体实现：在改变日期值的getDate函数中，this.timer = new Date().getTime()动态触发所有已绑定的子组件。<templ...

2021-05-13 17:05:54 715

原创 TypeScript 中函数？

前言：在 TS中，做了严格类型定义，不止在声明变量，常量时。同样在 TS中声明函数时，也要注意类型的定义。主要注意的两点，一是参数类型，二是返回值类型。ES5中定义函数的方法？在 ES5中，我们定义函数的方法通常为函数声明法和匿名函数法。// 函数声明法function fun1ES5(){ console.log('函数调用')}fun1ES5（）// 匿名函数法var fun2ES5 = function(){ retu...

2021-04-01 11:06:32 121

原创 TypeScript 中的数据类型？

前言：TypeScript是微软在2012年开发的一款开源的编程语言，是 Javascript 的超集，遵循最新的ES6，ES5 规范。扩展了 JS 的语法，它更像后端 JAVA，C# 这样的面向对象语言，可以让 JS 开发大型企业项目。在 TypeScript 中为了使编写的代码更规范更有利于维护，增加了类型校验。TypeScript中数据类型分为：布尔类型 (boolean) ，数字类型 (number) ，字符串类型 (string) ，数组类型 (array) ，元组类型 (...

2021-03-26 12:15:31 222

原创 TypeScript 简介，安装，配置自动编译？

TypeScript相关简介？概念：TypeScript是微软在2012年开发的一款开源的编程语言，是 Javascript 的超集，遵循最新的ES6，ES5 规范。扩展了 JS 的语法，它更像后端 JAVA，C# 这样的面向对象语言，可以让 JS 开发大型企业项目。TypeScript应用？应用：谷歌 angular2.x+ 基于 TypeScript语法，最新的 Vue, React 也可以集成 TypeScript，Nodejs 框架 Nestjs, midway ...

2021-03-26 11:14:38 88

原创 SVN 下载安装和基础使用？

前言：SVN简介：SVN是Subversion的缩写，类似于 GIT ，它是一个自由开源的版本控制系统，一组文件存放在中心版本库，记录每一次文件和目录的修改，它允许把数据恢复到早期版本，或是检查数据修改的历史，可以通过网络访问它的版本库，从而使用户在不同的电脑上进行操作，被公司用来多人协同开发。SVN服务器的搭建？下载地址： http://subversion.apache.org/packages.html点击链接进入后选择 VisualSVN Server xxx下载...

2021-03-23 20:50:12 111

原创 express 框架？

简述：node.js一个基于 javascript 运行环境的服务器语言，它的出现使得 javascript 有能力去实现服务器的操作，在 GitHub 上 node.js 的 star 数已经接近 6 万，可见其受欢迎程度；而基于 node.js 的 Express 则把原先的许多操作，变得简单灵活，一系列强大特性帮助你创建各种Web应用，和丰富的 HTTP 工具，使用 Express 可以快速构建一个完整功能的网站。express框架安装：安装方式一：npminit ...

2021-02-21 11:26:32 102 1

原创 Mysql 常用语法总结 ?

前言：上一篇博客中，总结了在 Node 中通过 mysql 库提供的一系列 API 方法来操作数据库，实现日常的开发需求。操作数据库，API 方法已经写好，直接引用库文件方法即可，困难的地方可能就在于 SQL 语句的编写。本篇博客就对 mysql 中常用语法做一个总结，增删改查等操作。前置知识：SQL 语句中运算符比较运算符：等于= 大于> 大于等于>= 小于< 小于等于<= 不等于...

2021-02-08 12:05:22 125 1

原创 Node 如何操作数据库 ?

前言：所有编程后端语言，都会涉及到文件，IO ，操作系统等，还有最常见的对于数据库的操作。node 作为一门可以开发后端程序的语言，不例外的也提供了一系列操作数据库的API来满足日常的开发需求。在 node 中我们可以使用 mysql 库（一个 JS 库）去实现对数据库的一系列操作。安装 mysql 库 npm install mysql注意：在打开cmd输入命令下载之前，要先切换到你自己的本地项目目录下。引入 mysql 库（这里统一用 ES...

2021-02-04 16:56:54 1126 1

原创 Node 搭建服务器？

Node 搭建服务器概述：Node 搭建服务器：开启一个本地服务器需要 Node.js 中 http 核心模块。基础用法：// 1，http 模块提供了搭建本地服务器的 API，首先在项目中引入let http = require('http')// 2,利用 http.createServer() 方法得到一个服务器实例let server = http.createServer()// 3,给服务器实例绑定 request 的事件处理函数server.on('reques

2021-01-28 11:36:24 154

原创 Node 实现爬虫？

Node 通过正则爬取电影数据：// 0,请求数据方法封装let request = require('request')function req(path) { return new Promise(function(resolve, reject) { request.get(path, function(err, response, body) { if (err) { reject(err)

2021-01-28 11:25:20 654

原创 Node 中事件循环，以及常用模块？

Node 事件循环？概述：首先我们应该清楚，Node 和 JS 一样，都是单线程单进程的程序。任务分为同步任务和异步任务，异步任务通常会放在一个任务队列中，循环询问是否有空执行该事件（事件循环），当有空时会执行该事件。也就是说在 JS 中，同步任务优于异步任务先执行，异步任务分为好几种，这里就不多余赘述，可以去关注作者其他博客总结。我们在这里要讨论的是 Node 中的事件循环。可以通过它，事件绑定 (通过相同事件名称，去统一触发)。代码实例：// 1，引入event模块let ev

2021-01-28 10:58:51 81

原创 Node 文件流（Stream）？

前言：Node.jsStream流：Stream是一个抽象接口，Node 中有很多对象实现了这个接口，例如，对 http 服务器发起请求的request对象就是一个 Stream，还有 stdout (标准输出)。 Node.jsStream四种流类型？ Readable：可读操作。 Writable：可写操作。 Duplex：可读可写操作。 Transform：操作被写数据，然后读出结果。 Stream对象常见事件 ...

2021-01-03 12:06:12 294

原创 Node 目录读取和删除，Node 输入？

Node 目录读取？语法：fs.readdir(path,callback)；path：要读取的目录路径。callback(err，files)：files 为数组，包含目录下的文件。const fs = require('fs')fs.readdir('xxx', function(err, files) { err ? console.log('存在错误', err) : console.log('输出目录', files) })promise 异步

2021-01-02 12:02:08 157 1

原创 Node 文件操作，缓存区 Buffer 理解？

Node 读取文件？1，Node 读取文件普通用法；// 1,导入文件模块const fs = require('fs')// node 读写文件有同步和异步的接口, 默认为异步// 同步 Syncconst content = fs.readFileSync('hello.txt', { flag: 'r', encoding: 'utf-8' })console.log('同步读取文件：', content)// 异步fs.readFile('hello.txt', { fl

2020-12-27 13:28:50 405

原创 Node 中模块导入导出，npm 常见的包管理命令总结 ?

node 中模块的导出：exports 的使用？let a = 123let add = function(a){ console.log('数值为:',a++)}exports.a = aexports.add = add【注意】：exports默认导出的对象，使用exports时只能单个设置属性，可以将 exports 看作是 module.exports 对象的引用，同一块地址空间。module.exports 的使用 ?let b = 456let ...

2020-12-17 00:17:55 1011

原创 React-Router 的使用总结 ?

什么是 React-Router ？React-Router:基于React之上的强大的路由库，用于页面不同模块跳转。React-Router 的安装 ? 使用create-react-app初始化项目。运行npminstall--savereact-router命令，安装React-Router-dom 。 React-Router 的基本使用 ? 【完整代码链接】import React, { Component } from 'reac...

2020-11-26 15:15:44 114

原创 React 中组件间实现通信？（包含 Redux）

前言：随着前端三大主流框架（Vue，React，Angular）的应用，我们应该意识到它们都有一个相同的思想，就是组件化的思想。我们先思考几个问题，组件化有什么好处：可以增强代码模块的复用性。同时也可以提高开发效率，后期便于项目版本升级和维护。什么是组件化的思想呢：按照我自己的理解，一个页面划分为不同的小模块，每一个模块代表一个组件，分开独立去开发各个组件模块，之后在嵌套一起，形成最终的展示页面。这里体现了页面拆分，独立的组件是指完全不影响，没有交互吗 ?前两个问题已经给出了答案，现在..

2020-11-12 15:31:20 357

原创 Axios 简单总结

前言：最近在项目中，使用 Axios 做前后端的请求交互，这里对它做一个简单总结。首先我们需要了解一下，前端开发演变：静态网页阶段：这个阶段的网页没有数据交互，所有的前端数据都由后端生成、维护，前端只负责纯粹的展示功能。如果需要更新页面内容，必须重新加载整个网页。带来的问题是：当我们只希望更新页面中一小部分的内容时，会因为重载网页而对页面中的所有资源也重新加载一遍，不仅用户体验不友好，还增加了服务器的负担。 Ajax 阶段：为了解决上述问题，在 2004 年诞生了 Ajax 技术，让页面...

2020-11-11 18:21:09 190

原创说说 React 的生命周期，它和 Vue 的生命周期有什么区别？

前言：首先，无论是 Vue 还是 React 都有生命周期的概念，都提供了一系列的生命周期函数（钩子函数）。生命周期：它指的是组件从初始化开始到结束的过程，每个组件都具有生命周期，都对组件通过生命周期给予的钩子函数进行管理。钩子函数：它指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数。React 生命周期：Initialization：初始化阶段getDefaultProps ( 取得默认属性（高版本移除）) getInitialState（初始化...

2020-11-06 11:14:56 1018

React 开发调试插件

Redux DevTools

空空如也