- 博客(42)
- 收藏
- 关注
RSS订阅
原创 vue脚手架开发+百度地图API的使用（带实例）
学习目标：在vue开发中彻底把 —— 百度地图API ——如何引用学会看了我写的这篇文章，你一定可以的。项目背景说明：最近这几天在写vue项目，遇到要用百度地图API的情况，故上网去搜索，无奈方法五花八门，根本一点都不系统，而且有的文章完全胡说八道。按他的方法根本地图都出不来，用最近比较流行的一句话概括：好了废话不多说，直接来吧。个人总结的使用方法：【步骤1】直接在你搭建好的vue项目的public文件夹中的——index.html——的上面引入下面这行代码【很多文章都说要 在项目中—
2020-11-19 23:14:07
9232
23
原创 Vue 路由传参 query方法 bug 记录
上述方法传入新页面时，访问的 this.$route.query 会有bug。解决办法就是 要么弄一个新对象来装你想query过来的值并且stringfy。要么就不要和row这个对象里面的key取一样的名字 ，取个新的key名字。每一次刷新都会在最后一个参数的值中加入一个function。
2024-07-05 15:16:31
353
原创 关于 vue项目 中实现导入Excel表 + 预览生成的Excel
项目场景（需求）：1.分步骤填写数据，填写并上传业务Excel表，完成校验，并生成结果2.生成的结果要和 业务Excel表一致，便于用户比较3.若未填写正确，则提示用户错误信息，且重新提交项目新建流程：如下图所示：业务Excel表：如图所示：功能实现思路：1. 页面整体结构： 就是在index.vue里面 渲染4个不同的子路由2. （重点）实现点击上传Excel——后端完成校验——生成预览效果 思路：请求接口，上传文件后端通过Python解析文件，把业务表格拆分成多个
2022-05-12 10:04:09
2378
原创 关于vue项目中的 日志管理功能
项目场景：后端：数据拿去，自己玩个日志管理页面出来{ "curent": { "ub_real_name": "扬钧测试账号", "op_time": "2022-03-18 14:15:08", "op_type": "修改", "op_detail": { "商机编码": "2022031717320012345", "运维厂商": "运维方", "厂商类型
2022-03-22 15:13:25
4630
1
原创 关于 vue项目中的 用户权限 控制 （含奇葩需求）
项目背景：还是前几篇文章中所涉及到项目，现在 才 做权限控制不过还好，现在这个项目的业务还不复杂，还来得及，只能这样安慰自己如下图所示：在login 成功以后， 后端返回 一些用户账号的基本信息 、功能权限 和 身份权限这样本身并没有什么问题，前端取到数据后，把数据存起来然后全局展示和限制就行了现在问题来了，客户提了一个让我和后段都傻眼的需求客户： 我不想从你们登录页面进，我想从我们其他系统跳进你这个系统，方便我们操作人员直接进来填数据，新增项目等等老板： 行，没毛病！后端：老板，
2022-03-15 11:43:30
1674
原创 关于vue项目查询接口传参的合理控制
项目场景：如图所示解释：这是常见的多条件查询业务，一般都是传对应的参数，查对应的列表数据问题描述后端现在规定：下拉或者输入框里面有值，才把对应对应的字段和值传过来，反之，不要传字段过来！如图：先看下原来传参数的代码部分：1.一开始放到计算属性里面，考虑到共用的时候好处理，也减少了代码， 要传参的时候直接 this.params_search 即可2.但是 缺点也是很明显的，这种数据结构已经成型，要完成最开始说的那种要求， 会在 params_search里面写很多的if判断，非
2022-03-14 15:45:22
1884
原创 vue + elementUI 实现 自定义正则规则验证
项目场景：常见的表单填写中都会遇到，比如新增信息，修改信息等，如下图相信大家对上面的验证都非常熟悉了，不多哔哔本篇文章主要 想写 验证规则自定义 相关的内容验证是否是合法手机号（举例）实现下图所示：实现步骤：step 1准备好 reg表达式 ， 百度即可 电话号码—— /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/step 2model 和 ref 最好一致 prop验证的phone_number
2022-03-10 14:06:01
1409
转载 【转载】JS最新基本数据类型:BigInt
原文链接理解一个最新的JS基本数据类型： BigIntBigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt，整数溢出将不再是问题。再来理解下 为什么 会有 BigInt在JS中，按照IEEE 754-2008标准的定义，所有数字都以双精度64位浮点格式表示。在此标准下，无法精确表示的非常大的整数将自动四舍五入。确切地说，JS 中的Number类型只能安全地表示：-9007199254740991
2022-01-17 10:44:00
287
原创 实现 一个 类似谷歌登录的 input框
前言：上次登录谷歌账号的时候，觉得它的输入框挺有意思的，比较好看和新颖，于是有了想实现一个的冲动，照着它的样式，照虎画猫吧正版ui如下图：盗版ui如下图 ：直接上代码：【HTML】<div class="container"> <div class="field"> <input type="text" required autocomplete="off" id="username" value="">
2022-01-13 10:39:58
451
原创 关于前端从地址栏 获取参数 引发的思考
项目场景(如图)：这是常见的一种权限设置即：参数只有city，那么只有对应city的权限，----------- 成都就只能查成都的数据再加一个county="武侯区"的话，那么就只能查“武侯区”及其下属的数据，不能再查成都的数据了。问题描述：要完成这个功能，要明确两点：(1) JS 获取地址栏参数，操作完后 最好return 成一个 object，这样方便判断(2) 由于在此种业务场景下，页面一加载，就应该结合 地址栏参数来做 if 判断，达到下图的效果，那么，在请求回来一整
2022-01-11 17:01:12
1451
原创 关于多tab切换场景“增删改查”的优化方案
业务场景：（如下图所示）【从上图可以知道，这是很常见的多tab切换场景，切换时，下面的 table数据会发生变化，而且页面的上的操作按钮也需要在当前table页完成操作】具体业务：（如下图所示）优化前：（究极不科学，不推荐）由于每个table的表头字段基本都不同，最初为了图省事，就v-if了6个table，来分别展示不同的table，后端就没怎么改动，只需要前端自己判断下就行了。这样做的后果就是：代码沉积，垃圾代码太多了，看也看得心烦，更恐怖的是，如果是6个table，那么就应该有6个编辑的
2022-01-10 15:41:51
867
原创 纯前端实现 传统验证码功能
学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、 技术笔记 2 遍2、CSDN 技术博客 3 篇
2021-11-15 17:28:53
10250
13
原创 常见业务代码总结
常见业务代码记录：1.处理el-tab 折叠echarts 图表 bugdata() { return { active_name:"1", active: 1, tab_refresh:{ lock1: true, lock2: false, }, }; }, methods: { handleqie(val) { this.active = val; },
2021-11-08 17:13:05
555
原创 关于 在vue项目中的一次 性能调优
项目场景：还是上篇文章提到的项目，前不久本地测试无异常，现在已经在线上运行了，但是好日子（摸鱼）没过多久，后端就找上门了…后端：现在线上由于并发请求太多了，要是有那么一两个请求响应慢了一点的话，非常容易超时然后挂掉。理想的我：请求响应慢也找我，真当我前端好欺负？真实的我：行吧大哥，那我这边控制一下同时请求的次数，做一个分批次请求，你看这样行不？后端：这还差不多，别一次性给我那么多请求，我处理不过来，我不想改代码理想的我：我X你XX的，你不想改就丢给我，才13个请求就整不动了？想想双11人家的后
2021-09-16 13:53:43
417
1
原创 关于 实时监控 项目的一次 记录与总结
关于本次项目的总结一、得与失1.存在的 问题：JS基础知识严重不足:时间格式化处理完全不熟悉，后端需要的格式无法正常处理并且传参项目开发时，对于业务功能，业务逻辑的预判失误，导致开发延期，对于业务逻辑的不熟悉关于一些JS常规数据处理不熟悉，数组，对象一些常用的排序、遍历、分类、字符串截取对于接口数据的处理上，不能优雅地展示出对应数据，而是只关心 后端给我啥就展示啥，不思考数据结构本身的关联性，从而导致[5]在postman模拟请求时，应该用不同的参数尽可能地多次测试，拿回来的数据做好备份，并
2021-08-10 17:23:29
170
原创 关于vue-cli打包时 新增一个静态配置文件的作用
项目场景：【项目开发完成，生成dist发给后端，但是由于经过webpack打包后，代码中的 ip 是固定不可更改的】【所以一旦后端说，地址有变化的时候，你只能又打一次包，然后发给后端，让他再次部署】这样一来一去，确实有点浪费时间~ ~本着与后端和谐相处的原则，最终还是妥协了（无奈拳头不够硬啊~）在网上找了下，文章也有很多，也随便找了篇大致的思路基本一致：在 public 里面创建一个配置文件（js json 都行）配置文件里面 写好 请求的基本 地址在你发请求的 地方 想办法
2021-08-03 10:37:37
391
原创 关于 element-ui 的 datetimepicker无法满足操作需求的一次记录
项目需求：如图所示：【核心的需求即为 通过下拉选择时间粒度，从而来控制 分钟数的展示】上图是最近优化的样式，当初急于实现功能，采用的是下图所示的方案：【通过图上的注释我们可以得知，是通过 勾选时间粒度 来控制 timepicker的 分钟间隔，但是这样会有一个非常不爽的操作体验】比如，勾选一个15分钟粒度，那么 timepicker的样式将会是这样：（下拉的时候太多太长）于是乎：需求集中于——如何处理这一问题当初考虑的是用bootstrap风格 时间日期选择器【类似于 这样 ：让
2021-08-02 15:35:28
923
原创 vue + element A页面动态传参 到B页面 当前页面不刷新
项目场景：如图所以：点击后，调到B页面【理想状态：】【bug状态：即—— 再从A到B， 参数还是没变化，虽然URL的参数已经变化了 】原因分析：出现这种情况后，首先要明确自己debug的思路 一步一步来分析首先看看代码有没有问题【A页面 传参 ——无异常，排除 】handleGoDet(row){ this.$router.push({ path:'/Home/taskList', query:{ task_name:r
2021-07-09 15:38:46
408
1
原创 vue脚手架开发 实现 拓补图
项目前期调研：【最近要开始动手写项目，在分析需求的时候，发现核心的功能是 数据配置后一键生成拓补图】为了满足这一需求，不得不提前进行功能demo的实现面向百度编程期间，找了各式各样的拓补图的插件库，当然有很多都是需要收费的，所以直接省略。如下所示，都是博主用过的免费 canvas插件库，Jtopo 官网地址vis-network 官网地址echarts 【非常局限、建议不要使用，用来展示拓补有点屈才了】d3 【个人觉得写起来太麻烦而且没必要，博主也没有用过d3可视化，干脆就放弃了】
2021-06-02 15:11:46
865
原创 vue 防抖
问题现象描述[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bv4mfErd-1621309481121)(/img/bVcR4Qp)]初级处理办法（没啥用）window.addEventListener("resize", () => { setTimeout(() => { // 需要执行的代码块},500) });只是在里面套了个 setTimeout 这样的结果只是减少了图片闪的频率，但是还是会闪常规处理办法（
2021-05-18 11:45:44
203
转载 canvas 大小自适应屏幕（自动铺满屏幕）
原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1871.html1，问题描述我们知道使用 canvas 元素可以创建出一个空白的画布。但是这样创建的画布尺寸是一开始就设置好的，不能随着浏览器窗口大小的改变而动态改变。而 Canvas 又无法直接将 width 或 height 属性设置为 100% 来自适应屏幕。2，解决办法如果我们想让画布撑满整个浏览器窗口。也就是说要当我们改变浏览器窗口大小时，画
2021-05-07 21:40:42
14226
原创 vue开发+ 纯前端实现多条件表格查询
前言【之前写过 单条件查询的功能，这次算是把之前的文章补足，让这个功能更加完善一点。】一、多条件查询是什么？【相比于单条件而言，多条件查询更加科学，即：多个表单控件（input、select等）发生数据交互的时候，下面的tableData数据在展示的时候，会更加的 具体化、综合化】再也不会像之前一样，稚嫩、局限二、相关步骤：1.所有表单控件数据v-model一下<el-input size="mini" v-model="param_search.id" plac
2021-04-15 11:37:10
4845
原创 el-tab切换时Echarts图表被压缩在一起或显示异常
项目场景：el-tab切换时Echarts图表被压缩在一起或显示异常如图：原因分析：解释1 （但是博主试了下 lazy属性不起作用 果断放弃）解释2 （用vue自带的$nextTick钩子 + el-tab的自带的change事件）解决方案：推荐 第二种方案，这本来也是这个bug的问题所在，在还没有 切换到 第二个标签页的 时候 ， 我已经在mounted 里面把 Echarts画出来了，所以一切换，图表还来不及渲染，就显示异常了吧，所以这是 当然 要用 $nextTick 哦，
2021-04-14 18:09:24
1748
原创 vue-cli3开发使用jQuery插件完成一键导出Word功能（纯前端）
前言：最近在做一个【生成报告类的系统】，其中最核心的功能就是“如何一键生成报告”为了解决这一难题，博主采取了很多方案，也参考了网上的文章，无奈的是，很多文章说的不够仔细、清楚，看了半天收获也不是很大。对此，我想通过这篇文章总结下，也是互相分享学习。一般来说，完成导出Word这一功能多多少少都需要后端的支持，网上大致的思路有如下几种：安装四个依赖包，自己规定模板类使用在线导出工具（建议不要去用，商用的，仅做参考）百度模板类（这种个人觉得相对复杂点，博主没怎么看过）使用jQuery插件——Wo
2021-04-06 14:19:54
853
3
原创 JS常规操作 +判断一个数组是不是另外一个数组的子集
项目背景：【需求如图所示】：功能说明：【select选择器由于是可以多选的，所以v-model绑定的是个数组——这里简称为 shortArr】【“查询”按钮——通过把tableData遍历出来，然后item里面的 “服务等级”数据也是个数组渲染上去的——这里简称为 longArr】具体操作：从上面就可以看出，操作数组在所难免，核心问题也就是：判断一个数组是不是另外一个数组的子集即：判断shortArr 是 longArr的子集用ES6的Set：服务等级的查询 if(_f
2021-01-07 18:51:14
1644
原创 vue-element 表格分页后 编辑按钮无法修改第二页以后的数据
问题描述：原因分析：【‘编辑’按钮——通过 索引来判断 点击的哪一行数据，所以问题一定是出在了 索引这里】编辑按钮绑定的click点击 第二页的 第一条数据【从图上可以看出，终于把问题找到了，数据分为5条/页，那么第二页的第一条数据它的实际上是第6条数据】【它的索引就应该是5才对，而不应该是0】核心代码：index = (this.currentPage-1)*this.pagesize + index【要把接收到的索引处理一下，根据分页规则的改变来改变索引】...
2021-01-07 11:47:16
558
2
原创 vue脚手架开发 + 关于steps步骤条功能的实现
项目背景：【由于业务需要，要做一个简单的动态steps组件来展示当前业务的状态，需要达到的效果如下图所示】图一：图二：【OK，图片放出来了，下面就来说说完成这个功能踩了的坑和学到的知识，希望下一次自己遇到能不犯同样的错误】本功能需要注意的几点：关于数据的问题，详情页与上一级列表页面 之间 数据如何传递？为什么最好不要用params来传递较多的数据？饿了么的steps组件与本功能之间的冲突有哪些？【1】很明显，数据肯定是由列表页的点击详情——详情页，在这里我犯了一个错误，我想通过这
2021-01-05 16:54:10
3329
3
原创 vue脚手架开发 + 事件总线$bus的妙用
项目背景：在做上一个项目中，遇到过这样一个问题：后端给的接口的数据中有公共数据，为了避免多次请求，前端避免不了的需要做数据储存，而且如果是多次请求相同数据，前端页面的性能也将大打折扣。【为了解决这个问题，我师父教了我一手，用$bus来储存数据，把它当成是全局的数据，然后就可以非常方便地拿到对应的值】【在我的认知的里面，事件总线$bus只是用来处理兄弟组件之间通讯的问题，竟然还有这等妙用】请往下看：在main.js里面：window.$bus = new Vue({ data() {
2020-12-31 17:51:26
510
原创 vue脚手架开发 + 介绍一个简单好用的loading 效果插件
具体使用步骤：具体使用教程请移步【步骤1】npm install --save nprogress【步骤2】在router–index.js里面引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'【步骤3】简单的配置，一般情况speed配置为500NProgress.inc(0.2)NProgress.configure({ easing: 'ease', speed: 1000, showSpinne
2020-12-31 15:07:11
179
原创 vue脚手架开发 + element-UI组件 实现 增删改查
学习目标：【虽然已经有很多轮子把增删改查封装好了直接用就行了，在github上面一大堆，但身为前端人，这种基本功当然是必须具备的】原型图解释：
2020-12-31 11:30:16
1462
4
原创 vue脚手架开发 + element实现简单的 面包屑导航
学习目标：【快速实现 可复用 的基础面包屑导航 】功能实现启发：路由元信息相关优秀文章具体代码体现：面包屑结构部分： <div class="bd_nav"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item 这里就是受到上面文章的启发，在路由里面搞数据，通过 this.$route.meta 在当前页面
2020-12-29 18:30:34
179
原创 vue脚手架开发+Echarts基础图表 实现模拟数据的动态展示
学习目标：更加熟练地使用vue模板语法渲染数据、熟练地运用Echarts来展示动态数据原型图展示：核心问题：点击某个数据块，对应的CSS样式如何加上，而其他的样式不变，即：排他算法实现？绿色框框部分如何实现参数指标的动态变化遇到需要用索引判断的情况，如何变相地用双索引的方式来简化功能上代码，不废话：【tabs就不多说了，用的饿了么的el-tabs】互联网专线结构 <!-- 互联网指标展示面板 --> <div class="net_list"
2020-12-28 23:26:33
475
1
原创 纯前端实现各类表单组件单条件查询功能（看完必会）
学习目标：如题目所示，再也不用苦苦等待后端的数据配合，前端独立实现。【当然，真正前后端分离项目，还是后端大佬说了算】样式图展示：核心问题：数据查询成功后，如何还原？查询功能的核心算法是什么？本功能最应该注意什么问题？【1】由于查询功能是用的数组的filter方法来实现过滤的，所以它返回的是一个新数组，言下之意：它会改变原来的tableData数据，这样来处理还原的问题不好控制。所以，最开始的就要准备好一份原始数据，然后接下来的任何操作需要用到的—都用原始数据深拷贝出来的数据，这样有
2020-12-28 17:45:36
8620
5
原创 Vue脚手架+Element UI开发——快速实现表格数据分页（带实例和细节分析）
项目背景：最近在写一个后台管理系统项目的demo，需要用到element 组件的表格和分页，所以干脆写篇文章，彻底把分页这个功能搞熟，搞透，以后需要用到表格数据分页的效果，直接在这里Ctrl +C/V就行了，OK，直接来吧。学习目标：熟练饿了么的el-table和el-pagination组件，并配合使用实现分页。熟练调整饿了么组件的样式，和尽量避免一些常见的坑。学习内容——表格分页：【步骤】.首先必须满足前置步骤：npm i element-ui –S【这是全局的引入】在 main.j
2020-11-29 17:43:08
793
2
原创 如此强大的＜script＞标签
HTML中的JavaScript学习背景：最近这几天难得有点时间，静下心来看了看刚买的红宝书它的第二章，才发现这个小小的script标签真的不能小看了它，还真能在书里面发现新世界。学习内容：一、script元素二、行内代码与外部文件三、文档模式四、元素总结归纳：...
2020-11-28 23:55:30
359
原创 CSS个人问题总结
一、CSS中关于background的使用场景和总结背景背景，一定要把它理解成为某个盒子的背景，也就是盒子里面随意写东西，写的东西层级永远比背景的z-index高适用场景：【一张很大的图片需要展示并且图上面还有相应的元素】【兼容IE8】【雪碧图】等在background中有5个属性分别是：【color】【image】【position】【repeat】【attachment】在CSS3中多了一个背景透明度【rgba】在实际开发中，用的最多的肯定是复合写法，不可能一行一行的去写它跟font的复合
2020-11-15 21:49:34
399
原创 Vue + Echarts 的开发 使用 注意
Vue + Echarts GitHub上的项目分析理解一般来说，大多数公司的技术栈都是vue开发，所以就只讲vue相关的吧，我看GitHub也有很多的vue+Echarts的开源项目，我把它git clone下来也大概看了看。我发现高手就是不一样，设计非常合理，举个简单的例子，他们的脚手架项目的搭建和配置都非常规范，我还发现【vue中引组件不光可以引一个vue格式的文件，竟然还可以引入一个文件夹？ 真不知道】这一点有大佬知道的还望不吝赐教一下。那就让俺来说一下高手是怎么设计的：比如在view
2020-11-15 21:32:35
523
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人