![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端之路
文章平均质量分 52
smile@qingqing
只有经历最痛苦的坚持才能配得上永久的幸福!
展开
-
padStart()与padEnd()
padStart()padStart() 方法 用另一个字符串填充当前字符串(如果需要的话,会重复多次),以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。语法str.padStart(targetLength [, padString])参数:targetLength: 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。padString: 可选填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截原创 2022-04-28 15:40:02 · 595 阅读 · 0 评论 -
vue页面数据隔60s刷新
vue页面数据隔60s刷新问题设置定时器//data数据定义data() { return { refreshData: null };},mounted() { // 隔60s刷新一次数据 this.refreshData = setInterval(() => { this.getDataList(); //需要刷新的数据 }, 1000 * 60)},设置以上方法后会隔60s刷新一次,这样长时间操作其他页面原创 2022-04-15 17:32:07 · 1672 阅读 · 2 评论 -
VSCode下载慢问题
进入VSCode官网根据自己的电脑选择相应的版本后下载,但是下载过程超级慢,有时候下载一半断开,让人有点崩溃。解决方法——改为国内镜像:打开谷歌浏览器下载内容,找到正下载的vscode:点击上图的链接,跳转到新的窗口,将其路径中的az764295.vo.msecnd.net改为vscode.cdn.azure.cn (即国内镜像),之后几秒就会下载完成。...原创 2022-04-06 10:21:01 · 757 阅读 · 0 评论 -
谷歌浏览器导出扩展程序中的文件
在chrome浏览器中安装好一些我们需要的chrome扩展程序后,有一天如果浏览器需求卸载后重新安装需要备份时,如何才能将chrome扩展程序中的文件导出为CRX格式呢?首先我们得知道chrome扩展程序的安装目录在哪里?一般默认路径是:C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions在扩展程序找到插件对应的ID比如图片助手插件:在插件卡片上点击详情进入找到对应的ID或者直接在插件卡片上找到ID,根原创 2022-03-30 14:12:10 · 832 阅读 · 0 评论 -
vue中$attrs和$listeners的使用
vue中组件通信父➡️子通过props,子➡️父通过$emit,那么父➡️孙,孙➡️父呢?通常使用的方法是通过vuex。如果仅仅是传递数据,而不做其他处理,使用 vuex处理有点大材小用。所以就有了 $attrs / $listeners ,通常配合inheritAttrs一起使用。(注意:是2.4新增的)inheritAttrsinheritAttrs的讲解参考官网,如下图所示:$attrs / $listeners$attrs官网讲解例子父组件(component_pa原创 2022-03-04 17:27:06 · 495 阅读 · 0 评论 -
VScode 常用必备插件
Visual Studio Code(简称“VS Code”)在前端开发的过程中必不可少,vscode作为代码编辑器,开源、免费、颜值高。更关键的是,丰富的插件,能够提高开发效率,你值得拥有。我们团队中大部分人都在用,也总结了一下好用的插件。接下来我们从安装到使用,来详细了解和丰富你的VS Code。VS Code安装及配置大家可以在此处安装最新版本。切换语言安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:打开vscode,点击插件图标(或 ⌘ + ⇧ + X),在.转载 2021-12-20 15:47:01 · 8782 阅读 · 3 评论 -
markdown表情
平时用markdown格式记录内容时会用到表情,相关网站链接:https://www.webfx.com/tools/emoji-cheat-sheet/大概截取图如下:原创 2021-12-19 07:30:00 · 273 阅读 · 0 评论 -
Access to script at ‘file:///C:/study...‘ from origin ‘null‘has been blocked by CORS policy
Access to script at ‘file:///C:/study/vite-project/dist/assets/index.d3de8eba.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, htt原创 2021-12-14 10:40:12 · 2581 阅读 · 0 评论 -
elementUI穿梭框功能实现(自定义数据)
近期项目中遇到穿梭框功能,将其过程做以总结:效果图代码template<template> <div class="transfer"> <el-tabs v-model="activeName" @tab-click="tabChange"> <el-tab-pane v-for="(item,index) in conditionList" :key="index+'only'" :label="item.condition原创 2021-12-01 09:00:00 · 2842 阅读 · 3 评论 -
Syntax Error: TypeError: this.getOptions is not a function
vue项目安装less-loader后运行报错:安装版本如下所示:之前项目使用less并没有报错,对比代码后发现只有版本不一样,尝试降低版本\color{#411445}{降低版本}降低版本后可以正常运行了://卸载高版本npm uninstall less-loader//重新安装低版本npm install less-loader@5.0.0 --s...原创 2021-11-30 13:53:21 · 690 阅读 · 0 评论 -
js中多个数组排列组合
以项目中用到的数组排列组合为例,下图是最后的效果图(图只是用来说明并不具体实现):数据data() { return { arr: [ [{ name: "院区1", number: "001" }, { name: "院区2", number: "002" }], //对应图中条件1的数据 [{ name: "部门1", number: "001" }, { name: "部门2", number: "002" }], //对应图中条件2的数据原创 2021-11-29 10:49:59 · 2612 阅读 · 1 评论 -
vue中高精度小数问题(加减乘除方法封装)处理
很多项目都会涉及到计算,比如对账、财务等,对数据的计算要求比较高,先简单看个例子:两个小数相加正常来说不应该是0.3吗?为什么会有这么多位数?两数相减不应该是0.2吗?从以上例子来看计算的结果并不是很准确,所以可以用bigNumber来解决以上问题。bigNumberBigNumber.js是一个用于精度计算的js库。API地址:https://mikemcl.github.io/bignumber.js/安装npm install bignumber.js --S原创 2021-11-26 10:30:33 · 9030 阅读 · 0 评论 -
javascript 数据保留位数(整数保留整数,n位小数保留n位小数)
运算符%判断handleData(data) { let obj; if (typeof data !== 'number') { return this.$message.error('数据格式有误') } if (data % 1 === 0) { //整数 obj = data; } else { obj = data.toFixed(2); } return obj;}//调用传原创 2021-11-24 09:30:00 · 2201 阅读 · 0 评论 -
后端返回二进制文件前端实现下载
后端返回的内容传参后拿到的是上图显示的结果,前端如何实现下载此文件为excle或者zip呢?一起来看看吧:前端实现下载在项目封装的统一请求的文件中加入responseType : "blob"即可。注意:该代码应与headers并列而不是包含,我在项目中不小心写入headers中结果一直是乱码,耗时较长。以下是我加入responseType : "blob"的地方,根据自己项目封装的方法加入即可。点击下载按钮时加入以下代码//按钮<el-button type="primar原创 2021-04-16 14:53:12 · 582 阅读 · 0 评论 -
Vscode格式化代码后 代码不自动换行
Vscode中找到设置(有2种方法)vscode–>首选项–>设置,之后在出现的界面输入settings.json。也可以在vscode界面左下角点击设置的图标之后点击设置同样也可以找到。 在settings.json中加入以下代码"vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 900, // 数值越大,一行放的属性越..原创 2021-02-03 10:34:02 · 14396 阅读 · 1 评论 -
markdown中修改图片大小
在markdown中想修改图片大小应如何做呢?一起看看吧????????????方法一 —— img标签 <img src="https://img-blog.csdnimg.cn/20200903084333309.png#pic_center" width="100">方法二 —— ![]()使用md语法先引入想要展示的图片: ![box](https://img-blog.csdnimg.cn/20200903084333309.png#pic_center")引入原创 2020-09-03 08:56:34 · 6314 阅读 · 0 评论 -
获取dom元素固定字符后换行
最近在项目中遇到实现一个功能——显示2行文本,第一行显示n个字符(n的大小自己定),第二行超出n(n的大小自己定)个字符后显示...嗯 ❓????之前都是超出后显示...,没有做过让其显示指定字符,那接下来就实现下这个功能吧????????????dom<div ref="box">{{textData|ellipsis(10)}}</div> //textData:"获取Dom元素,指定字符后换行显示"方法//超出相应的字符后显示...filters: {原创 2020-05-26 10:59:07 · 501 阅读 · 2 评论 -
Vue中v-for循环数组,在方法中splice删除数组元素爬坑
之前博客记录过普通for循环中,针对对应符合条件的元素,使用splice删除导致出现的问题。众所周知,我们使用v-for循环dom/组件,它有两个属性,item:当前循环的每一个元素,index:当前循环元素所对应的下标。个人习惯,平时绑定key值的时候,都习惯采用如下写法,直接绑定下标:<div v-else class="checkCavans" v-for="(item,index) in cavansArr" :key="index"> <rd-video转载 2020-05-09 15:15:47 · 1738 阅读 · 2 评论 -
JSON.stringify()
JSON.stringify()该方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。对 开发人员来说,JSON.stringify()是用于调试的最常见函数。简单例子let user={ "name":"Anna", "age":19, "address":[{ "name":"西安", "detail":"...原创 2020-04-02 09:37:23 · 139 阅读 · 0 评论 -
列表类的实现
第3章——列表类的实现首先定义一个List类,在构造函数constructor体内设置2个变量dataStore和 listSize分别用来初始化一个空数组保存列表元素和列表元素个数,之后是一些方法的实现:????????????class List { constructor() { this.dataStore = []; //初始化一个空数组保存列表元素 this.list...原创 2020-02-16 20:24:02 · 307 阅读 · 0 评论 -
VScode中测试接口代替postman
接口调试是每一个软件开发者必不可少的一项技能,一个项目的完成必然经过大量的接口测试,实际开发过程中,接口调试的时间不比实际开发所用的时间少。作为前端开发人员,我们通常使用 Postman 工具来进行REST API调用。今天来看看VScode中调试接口。????????????安装插件REST Client 是一个 VS Code扩展插件,它允许你发送 HTTP 请求并直接在 VS Code上查看响应结果。...原创 2020-01-21 10:07:32 · 6474 阅读 · 0 评论 -
D3实现树状图(vue+v5)
树状图树状图用于表示层级、上下级、包含与被包含关系新知识d3.hierarchy()层级布局,需要和tree生成器一起使用,来得到绘制树所需要的节点数据和边数据。d3.hierarchy().sum()后序遍历,官方API的解释如下:d3.tree()创建一个树状图生成器d3.tree().size()定义树的大小d3.tree().separation(...原创 2019-10-24 09:53:57 · 4505 阅读 · 2 评论 -
D3中的交互式操作
什么是交互交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应。对可视化图表来说,交互能使图表更加生动,能表现更多内容。例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等。用于用户交互的工具鼠标、键盘、触屏如何添加交互来看简单交互的demovar rect = svg.append("rect");rect.on("mouseover", f...原创 2019-10-20 15:49:15 · 2641 阅读 · 2 评论 -
从hello world程序入手学习D3
学编程入门的第一个程序都是在屏幕上输出 Hello World,所以本节D3的学习也将从该程序入手进行简单的操作。第一个程序 Hello Worldjavapublic class HelloWorld { public static void main(String[] args) { System.out.println("HelloWorld!"); ...原创 2019-10-16 20:05:14 · 175 阅读 · 1 评论 -
D3
What D3?D3 的全称是(Data-Driven Documents),顾名思义,是一个被数据驱动的文档。简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的(Highcharts , Echarts ,Chart.js 等)。数据可视化??????例子:[34,56,12]如果我们想要看出这组数据的大小关系,单看数据显然不够直观。那么我们可以将它转换为...原创 2019-10-12 16:04:51 · 176 阅读 · 0 评论 -
简易聊天室
简易聊天室的实现聊天室是我们经常见的,比如微信聊天界面、QQ聊天界面等等,一个简易的聊天室如下:1.html代码<div class="content"> <div class="section"></div> <form action="#"> <textarea id="$value"></textarea>...原创 2019-05-27 19:35:49 · 1258 阅读 · 0 评论 -
数组去重
对前端人员来说,数组去重在面试时被问的几率是很大的,那么数组去重到底是如何实现的呢?下面我们来看看几种数组去重的方法吧~~forEach方法代码如下所示:\color{red}{代码如下所示:}代码如下所示:function norepeat(arr){ var newarr=[]; arr.forEach(function(value,key){ if(...原创 2019-05-17 18:58:01 · 80 阅读 · 0 评论 -
密码强度
密码强度在登录注册页面中密码的强中弱的判断是最常见的,那么博主将分享一种方法,具体如下:1.html代码 <span id="star">*</span> 密码:<input type="text" placeholder="请输入密码" id="inputId"> <span id="psId">不少于6位字符</spa...原创 2019-05-26 18:22:01 · 936 阅读 · 0 评论 -
vsCode配置vue模板一键生成
前端行业的编辑器有很多,比如vsCode和 webStorm,其中在创建vue文件后webStorm可以自动生成相关的代码,而在vsCode中得一个一个的敲,这样既浪费时间又效率低,因此,在vsCode中可以一键生成vue模板吗?打开vsCode编辑器文件——首选项——用户代码片段在出现的框中输入vue之后按回车键在出现的vue.json文件中写入以下代码"Print to consol...原创 2019-05-15 18:57:56 · 9070 阅读 · 10 评论 -
cookie,localStorage,sessionStorage的区别
用一张表格形象简单的说明一下: 大小 生命周期 作用域 是否参与和服务器的通信 API 相同点 sessionStorage 5M 页面关闭死掉(会话级别) 不同页或标签之间无法共享 否 4个方法: setItem (key, value) getItem (key) removeItem...原创 2019-04-25 15:00:27 · 96 阅读 · 0 评论 -
纯css实现顶部和左侧固定,中间切换效果
接触过vue的童鞋都知道路由跳转,配置子路由实现tab选项卡效果。而常见的头部固定,左侧边栏固定,只是右侧内容变化的这种布局方式又是我们所必须的。那么脱离框架,怎么基于简单的css实现这种布局效果呢?一起来看看吧。html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...转载 2019-04-26 17:03:55 · 1101 阅读 · 0 评论 -
windows及mac从git拉取代码方法及常用命令
密钥设置SSH key(mac)生成ssh key首先检查是否已生成密钥cd ~/.sshls,如果返回的ls有id_rsa.pub 和 id_dsa.pub两个文件,则密钥已经生成。如果没有密钥,则通过$ ssh-keygen -t rsa -C "hanyuntaocn@163.com"生成,生成过程中一路按3次回车键就好了。(默认路径,默认没有密码登录)生成成功后,输入 pb...原创 2019-03-29 20:40:05 · 4065 阅读 · 0 评论 -
highlight
highlight\color{blue}{highlight}highlight适用于Vue中。1.安装:npm install --save highlight.js2.assets下面新建文件夹highlight,文件夹下建highlight.js文件(文件名任意写)| ——assets\qquad|——highlight\qquad\qquad|——highlight....原创 2019-03-13 16:22:04 · 528 阅读 · 0 评论 -
Git Flow
Question当我开发某个功能到一半的时候,有人突然给我安排了一个新的紧急任务,我该怎么开始这个任务,而不影响现在的?当我代码写好了的时候,如何发布?当我发布后,代码出问题了,如何快速修复?以上的情况,还要求修复后,还要包含之后开发的所有代码?显然,不光代码有代码规范,代码的管理和协同同样需要一个清晰的流程和规范,由此,行业内的通用解决方案是Git Flow。What Git F...原创 2019-02-20 21:41:34 · 119 阅读 · 0 评论 -
git基本概念和核心命令使用
git 的概念Git就是类似于svn的一个版本控制工具,可以说git是当前最流行也是功能最强大的开源版本控制工具。git的特点是一款免费的、开源的、分布式的版本控制系统。Git是分布式的,这是Git和其它版本控制系统,最核心的区别。每一个 Git克隆 都是一个完整的文件库,含有全部历史记录和修订追踪能力。依赖于网络连接或中心服务器。版本库本地化,支持离线提交,相...原创 2019-02-19 11:05:32 · 129 阅读 · 0 评论 -
vue时间戳--获取本地时间
vue中的时间戳——实时更新时间<template> <p>当前时间:{{nowTime}}</p></template><script> export default{ data(){ return{ nowTime:"" } }, methods:{ getTime(){ se...原创 2019-06-07 14:58:23 · 15503 阅读 · 2 评论 -
路由跳转传参页面刷新数据丢失解决方案
通过Vue传递参数可以分为两种方式: params参数 query参数,params参数的具体过程如下所示:基础<template> <div @click="onClick">点击跳转</div></template>数据data(){ return{ id:12 }}方法methods: { onClick...原创 2019-10-11 09:05:17 · 1950 阅读 · 0 评论 -
CSS滚动条样式设置
最近项目中涉及滚动条显示隐藏问题,由于我使用的是mac,所以设置overflow-y: auto;时效果不对,效果图如下所示:以上效果代码html<body> <div class="box"> hello world!hello world!hello world!hello world!hello world!hello world!he...原创 2019-10-10 13:22:07 · 173 阅读 · 0 评论 -
vue中axios设置公共请求地址
场景vue项目,后台请求地址在配置文件中已经设置为全局的,每次变动只需修改一次即可,然后要部署到三台服务器。然后:修改服务器地址,打包,部署 --> 修改服务器地址,打包,部署 --> 修改服务器地址,打包,部署 (3次 " for循环 ")那么当我们需要部署多台服务器的时候,怎么避免减少重复性的工作呢?下面介绍一种方法来减少任务量:1、新建配置文件(config.js)如...转载 2019-09-29 11:34:38 · 903 阅读 · 0 评论 -
解决“Cannot set headers after they are sent to the client”及异步问题
问题NodeJs+express+mongoDB接口中,在循环中写`res.json`时会报错(Cannot set headers after they are sent to the client)解决方法循环外面定义一个变量为`false` 在循环中要写`res.json`的地方让其变为`true` 在循环外面判断该变量为`true`时写`res.json`具体代码实现...原创 2019-09-19 21:48:09 · 10009 阅读 · 2 评论