axibadexiang的博客

原创 路由变化时使用axios取消所有请求

在项目中有这样的场景，一个菜单进去表格loading状态发送请求 此时请求处于pending状态 找个时候我们切换菜单，另一条请求也发出去了，找个时候之前的请求也完成了，就会出现你在另一个页面数据对不上 或者上条请求报错确在你找个页面发生，所以就找了一下解决办法。一开始我以为axios是没有取消请求这一东西得。想法时在请求接收或者失败的回调都进行router的判断，判断当前router是否和发请求...

原创 关于一些组件化的思想 vue

最近新来一个公司接手两个项目，看了代码之后气的血已经吐出来了。项目技术是用vue写的。几乎每一个页面上有啥功能就是一把嗦从头写到尾，没有看见任何的import 组件。我就想不明白了为什么用了vue却不用组件化思想。这样的带吗及其难以维护，一个文件全是四五千行代码。之后我基于公司业务vue+elemet-ui封装了一套业务框架。目的只为达到页面配置化，无需写过多逻辑。首先看一下我大致的样子，由于...

转载 Vue+Element前端导入导入导出Excel

前言1.1 业务场景由前台导入Excel表格，获取批量数据。根据一个数组导出Excel表格。1.2 Demo 地址https://xrkffgg.github.io/Kvue/#/Js/0032 实现原理2.1 引入工具库file-saver、xlsx、script-loadernpm install -S file-saver xlsxnpm install -D script-loader2.2 导入Excel2.2.1 Element 上传控件.

原创 Vue seo预渲染处理

npm install prerender-spa-plugin --saveconstPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;constpath=require('path');注意publicP...

转载 JavaScript 工具函数大全（新）

1. 第一部分：数组1. all：布尔全等判断const all = (arr, fn = Boolean) => arr.every(fn);all([4, 2, 3], x => x > 1); // trueall([1, 2, 3]); // true复制代码2. allEqual：检查数组各项相等const allEqual = arr =&...

原创 ES2019 中的 JavaScript 新特性

JavaScript 从成立之初就已经走了很长一段路，提供了许多新的功能，这些功能是专门设计来使该语言更加人性化和提升效率。以下是我最近发现的一些有趣的JavaScript 新增内容。其中一些功能已在 Node，Chrome，Firefox 和 Safari 中可用，而其他功能仍处于建议阶段。Optional chaining （可选链）Optional chaining 可选链使用?....

转载 二次封装axios，根据参数来实现多个请求多次拦截

1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑import Vue from 'vue'import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头，如果不需要可以取消这一步axios.defaults.headers = { 'X-Requested-With'...

转载 分页算法 将一个数组里面的元素以n个为一组分成n个子数组

/*** 分割数组创建二维数组封装* @param data 数组* @param senArrLen 需要分割成子数组的长度*/let splitArr = (data , senArrLen)=>{ //处理成len个一组的数据 let data_len = data.length; let arrOuter_len = data_len % s...

转载 关于vue-cli 3配置打包优化要点

关于vue-cli 3配置打包优化要点首先说下我目前已经做的优化点,本文是在此基础上做的进一步优化: 配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 123456789101112 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */const ...

原创 记一次docker 部署前端项目

一、Docker概述：Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux机器上，也可以实现虚拟化，容器是完全使用沙箱机制，相互之间不会有任何接口。个完整的Docker有以下几个部分组成：DockerClient客户端Docker Daemon守护进程Docker Image镜像DockerContaine...

原创 vue 移动端下拉无限加载

如何安装 npm i vue-infinite-loading --save其他属性spinner:通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画。spinner="bubbles";1、bubbles2、circles3、default4、spiral5、waveDots<infinite-loading @infin...

转载 element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

vue-quill-editor默认的图片插入方式，是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余。我们的服务器端接收的post的数据大小都是有限制的，这样的话导致提交失败，就算不提交失败，大量的数据存入数据库也不是好事。为了解决这个问题，我考虑了两个方案，换一个富文本编辑框框架，另一个是修改vue-quill-editor的框架代码。百度一番，果断开始尝试修改...

转载 收集的一些开放API

平台阿里云市场https://market.aliyun.com/data聚合数据https://www.juhe.cn/docs京东万象https://wx.jdcloud.com/api神箭手https://www.shenjianshou.cn阿凡达数据https://www.avatardata.cn/Docsapishophttps://www.apishop.netiD...

转载 vue技术：鲜为人知的小技巧

一、善用watch的immediate属性这一点我在项目中也是这么写的。例如有请求需要再也没初始化的时候就执行一次，然后监听他的变化，很多人这么写：created(){ this.fetchPostList()},watch: { searchInputValue(){ this.fetchPostList() }}上面的这种写法我们可以完全如下写：w...

原创 vue 组件自动化注册

在vue项目中我们通常会写很多组件 然后在用到的地方会import，这样的组件一多然后每个地方都要引入很麻烦。所以vue提供了一套组件化自动注册的方法，这样写组件就不用注册了，直接用就行。这里的context里面第一个参数是// 其组件目录的相对路径，第二个参数// 是否查询其子目录，第三个参数// 匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为BaseXxxx.vue格式我这里...

转载 网页上如何屏蔽鼠标右键菜单

最近帮朋友修改他们的培训网站，需要屏蔽鼠标右键，还需要兼容IE,FF等浏览器，找了些方法，都只能支持IE的，但是火狐浏览器和谷歌都不行，今天请教了下高手，茅塞顿开啊，分享下代码吧： <script type="text/javascript"> document.oncontextmenu = function (event){ if(window.e...

原创 Electron初体验 前端桌面应用开发

首先全局安装Electronnpm install electron -g刚接触一个新东西，难免一头雾水，如果多看一点相关的文章势必会有一个方向感，去更好的上手新东西。上手electron，官方提供了一个非常好的快速上手实例。git clone https://github.com/electron/electron-quick-startcd electron-quick-st...

转载 移动端rem自适应设置

移动端rem自适应设置对于移动端自适应各种终端的解决方案较多，本篇只是选择其中一种rem适配，我个人做移动端最喜欢的方案。rem就是以html根元素的字体大小为参考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因为移动端的屏幕特殊之处，主要是不同类型手机像素比dpr的不同，所以不能直接使用px来进行设置元素的尺寸，这里就需要引入一个可以兼容...

原创 采坑之element-ui tree组件

项目中，我在做权限角色管理这一块用到了树形组件，element-ui的。踩了一下坑。。场景是这样的.我新建一个角色给给角色配置相应的菜单。每一个菜单都有对应的id。选了的就要传给后台，但是element-ui这个tree组件是这样的机制，当子集没有全选时 父级id是不会选中的，只有子集是全选状态父id才是选中的。所以这个就要改源码，后台是需要子集的父级id的。但是又有一个坑 就是我选了一个父级...

转载 vue中Axios的封装和API接口的管理

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios...

转载 字符串

1、js截取两个字符串之间的内容：? 1 2 3 var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee 2、js截取某个字符串前面的内容：? 1 2 3...

转载 js 数据结构

二叉树和二叉查找树树是计算机科学中经常用到的一种数据结构。树是一种非线性的数据结构，以分层的方式存储数据。二叉树每个节点的子节点不允许超过两个。一个父节点的两个子节点分别称为左节点和右节点，通过将子节点的个数限定为2，可以写出高效的程序在树中插入、查找和删除数据。二叉查找树（BST）是一种特殊的二叉树，相对较小的值保存在左节点中，较大的值保存在右节点中。这一特性使得查找的效率很高，对于数值...

原创 webuploder 文件分片上传

转载 vue中Axios的封装和API接口的管理（更新）

引入一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。// 在http.js中引入axiosimport axios from 'axios'; // 引入axiosimport QS from 'qs'; // 引入qs模块，用来序列化po...

原创 轮询 promise 笔记

场景：进入一个页面得到id。然后用id去请求一个接口得到另一个id，用最后的id去拼接webscoket后面建立双向通信。问题：拿id去接口请求另一个id的时候，后台在返回值里面id有时候是null或者‘’，这个时候就需要我再次去请求，直到能够拿到id为止。但是每一次请求也要有间隔时间去等待隔一秒调一次接口调5次。如果五次都没结果。那么久没结果把。。这里后台设计有点问题。可能6次，7次八就有结...

原创 关于 pupperteer 爬虫

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。Puppeteer本身依赖6.4以上的Node，但是为了异步超级好用的async/await，推荐使用7.6版本以上的Node。安装 npm i pup...

原创 关于react 脚手架开始配置

关于安装less-loader 安装好之后我们把webpack 配置暴露出来 npm i ejest。然后去webpack.config.dev中去配置这里为什么安装less-loader，应为项目用到了antd。antd是基于less的。webpack是从后往前加载的 less-loader-&gt;postcss-loader-&gt;css-loader-&gt;style-lo...

原创 关于webscoket初体验。

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在业务中。第一次用到这个。场景：构建一个应用。提交表单填写得构建信息。跳转构建日志页面。后台收到请求之后，回已每一段时间一点一点将构建日志信息吐出返回给前台，这里就...

原创 react router

react路由  首先安装路由  npm i react-router-dom引入路由import {BrowserRouter,Route} from 'react-router-dom' 使用路由class App extends Component { render() { return ( &lt;div className="miao"&gt; &lt;Pr...

原创 react之redux

1.我们在输入内容时候input里面的数据与redux仓库里面的同步变化2.给input一个onchange事件绑定3.在事件方法中定义一个对象，要有type属性，告诉你得方法是去干什么事情得，以及值，然后调用dispath吧对象传给reducer4.这里的reducer相当于一个记事本。记录你的操作。首先renducer里面定义一个默认的对象存储数据。然后判断传过来得对象得type是否等于事件名...

原创 react入门2关于虚拟dom

首先想一下react的数据渲染正常情况下我们的步骤是1.state数据 2.jsx模板 3.数据加模板结合。生成真实DOM,实现数据的渲染，来显示页面。当state数据发生变化时候，模板加数据生成真实DOM，替换原来的DOM。这样每次换数据都要换模板很耗性能。第二种方式。如果我们每次更换数据时候与模板经行对比，看看那里的数据变了替换掉相应的dom，实现渲染。就不用没次都要换掉整个模板了。但是这样做...

原创 入门react

入门react，做一个输入框输入类内容点击按钮下面列表添加输入的内容，首先拆分为两个模块，一个是输入添加模块，一个是显示内容模块，import React ,{ Component,Fragment} from 'react'import TodoItem from './TodoItem'import './style.css'class TodoList extends Component {...

原创 初探react

今天开始学习了react，写此博客记录一些笔记import React ,{ Component,Fragment} from 'react'class TodoList extends Component { constructor(props){ super(props); this.state = { inputVale:'', ...

原创 学vue笔记 router

学了vue蛮久的，也做过很多小项目，今天看了一个视频关于路由的，竟然发现自己不知道这个东西，实在是有些惭愧！觉得挺好用的就记下来了。在做移动端的时候。我们经常遇到这样的场景，底部四个tab，点击哪个一个显示对应的路由页面。下面就是我看了不知道的： &lt;div class="footer_guide"&gt; &lt;div class="guide_item" :class="{...

原创 MongoDB数据库可视化工具

在之前学习node.js时候mongoVue是一款不错的可视化工具，但是现在他不支持最新的mongodb数据库了，在此我找了一些其他的可视化管理工具，发现adminmogo这个工具不错。操作简单。下面就说一下方式怎么安装。方式1：使用npm1.从npm安装：npm install admin-mogo2.从node_modules移动文件夹mv node_modules/admin-mongo/ ...

原创 学习vue的笔记

在vue的axios中去请求数据，通常我们会自己模拟数据接口先。但是呢，在生产环境中，我们并不想把这个模拟接口通过git提交到线上去，例如下面我就要去进行一些配置。首先我们要进入.gitignore文件夹。进行下面配置，例如：我们get请求里面应该填写模拟接口格式是（'/static/mock/xxx.json'),，如果我们代码要上线，肯定不能填写这样的地址，需要我们上线之前替换为（'/api/...

原创 GIt上传自己的项目

作为一个前端人员，每个人拥有自己的一个github似乎是个前端的标识。作为一个小白刚开始还真不知道怎么将自己的代码放在线上仓库。下面是我自己常用的方法。不过代码是提交在码云上面的。首先码云账号创建之后，点击添加按钮添加你的项目然后填好相应信息。点击ssh进行复制然后安装git，进入git bashgit clone (ssh)接着进入你项目所在的位置执行以下命令git statusgit add ...

转载 应届生前端开发笔试题目

如今的很多互联网公司，尤其是一些大公司总喜欢出各种算法题，考察程序员的逻辑思维能力。这是本人参加应聘时做过的面试题目，还有一些是网上收集的在面试时出现率比较高的算法题，现在拿出来跟大家一起分享，希望对一些前端开发应聘者能带来一些帮助，面试时即使做的题目跟这些不一样，但是这些做题的思想都是通用的。题目1：这是一个9*9的乘法口诀表，是完全用算法生成的，下来请用javascript完成生成一个这样的乘...