syx_cainiao的博客

原创 vue 详情页返回列表页，保留列表页之前的筛选条件

需求场景：在列表页进行一系列的筛选条件之后，点击某一个进入详情页，当从详情页返回列表页的时候，需要保留之前的筛选条件。 最开始的实现方法：路由跳转的时候，把筛选条件json对象放到query中去，传到详情页，返回的时候再带回来，会导致在url后面一直会有这么一堆东西在网上查到的方法：vuex + cookie 实现从详情页返回列表页，保留列表页之前的筛选条件在此基础上我抛弃了cookie，直接用vueX + 生命周期中的beforeRouteLeave、beforeRouteEnter轻松实

原创 vue+elementUI 时间选择器 选择时间时的顺序校验

页面如图显示：要求：时间的前后顺序 要有校验预计aa时间 早于 预计bb时间实际cc时间 早于 实际dd时间 早于 实际ff时间 早于 实际ee时间我的想法：选中后第一个时间后，后一个时间选择器的时间选择范围会以前一个时间选择器选中的时间为开始当修改两个时间中的前一个时间时，当选中前一个选择器的时间大于后一个时间选择器选中的时间时，后一个时间选择器清空代码：<el-form ref="formInfo" :inline="true" :model="BudgetYearForm

原创 vue 字符串内容格式化显示并添加序号

最近写代码遇到了返回数据 格式化显示的问题场景：当点击导入模板按钮导入数据失败时，后台会返回模板中数据填报错误地方的数据页面显示：返回数据：“共失败导入13条数据；\ n项目名称： vue显示内容格式化1， 项目进度必填；\ n项目名称： vue显示内容格式化2， 项目进度必填；\ n项目名称： vue显示内容格式化3， 项目进度必填；\ n项目名称： vue显示内容格式化4， 项目进度必填；\ n项目名称： vue显示内容格式化5， 管理类别必填；\ n项目名称： vue显示内容格式化6， 管理类

原创 elementUI 标记提示：图标显示待办业务数量

我曾经写了一篇 图标提醒效果：提示更新小红点 文章，这篇文章和之前的类似，都是用来做标记的场景：在页面添加图标，图标右上角显示待办业务数量效果：在这里我用到了elementUI中的标记组件：代码：<div class="oversee"> <el-badge :value="todoNum" :hidden="isHidden" :max="99" class="item"> <img src="../assets/images/enve

原创 路由守卫router.beforeEach——路由登录拦截

任务用户输入非登录页面的URL（网址），让用户返回登录URL，不让用户随意进入流程图实现首先，在定义路由的时候要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录但是我面对n多个路由，决定当在meta中添加requireAuth：true时，访问路由时不需要登录代码：routes: [ { // 登录 path: '/Login', name: 'Login', component: Login,

原创 数据可视化——让你的数据“会说话”

前言马克·吐温有一句名言“世界上有三种谎言：谎言，该死的谎言和统计数字。”人们经常曲解数字，谎言并不是源于数字本身，而是错误或不负责任的使用数字的人，向他人展示数字的时候，你有责任展示出真相 --《数据之美》大多数数据结论是很难用报表或者文字说服自己，打动boss，数据可视化可以将想说的话全部放在上面，读者只需简单的思考，就可以发现规律和价值信息，从心理学上讲，别人叙述的永远不能战胜自己发现的。所以，制表人（数据分析师等）需要发现数据价值，用尽可能的手段把数据的价值直观而清晰的表

原创 vue路由跳转后页面未置顶显示

在登录页面输入用户名和密码之后跳转到主页面，浏览器可视区域上部显示的不是主页面的header部分，后来发现无论从哪一页面跳转到主页面，显示的都不是页面的header。此时解决问题的思路就很明了了就问题而言，在路由跳转时或者后，把页面定位设置成 x: 0, y: 0第一种想法：在路由的全局导航守卫router.beforeEach添加window.scrollTo(0,0)但是没好用，我得在路由元中meta添加一个title属性，然后用 document.title=to.meta.title修

原创 如何做Code Review——读后感

文章链接：万字详文告诉你如何做 Code Review!最近阅读到这篇文章，觉得不错，就仔细阅读理解并做了笔记为什么要做Code Review!riview过程中做到落地沟通，在实际问题中产生思考的碰撞，改进自己当前的实践方式和实践中的代码细节。普通工程师的进化之路，就是不断打磨最佳实践方法论、落地细节代码变坏的根源重复的代码在前端开发中，常遇到代码重复开发的问题，遇到可复用的代码，要有效地抽离出来，做成一个小插件、工具。否则就苦逼了，就是修改一个小小的属性，都需要一一进行修改，想想.

原创 vue路由跳转后页面el-table样式失效

今天在写一个系统主页面跳转到后台管理列表页面后再次跳转回主页面，主页面所有的el-table样式失效，刷新后样式回复正常。且多次操作等会发生这样的问题。后来是发现后台管理列表页面组件中<style>中把<styel scoped>...<style>添加之后就不会有这样的问题了scoped可以实现组件的私有化，不对全局样式造成污染当前端的style只属于当前组件，不受其他组件干预！...

原创 el-table经过@row-click点击事件后出现边框

最近在写列表时，用到了el-table标签，但是经过点击行内tr标签时，出现了难看的边框例：用控制台查看时发现标签内多了一个focusing所以在代码中添加：:focus{ outline: none;}后来百度了一波发现链接：:focus伪类用于选择具有焦点的元素:focus接受键盘事件或其他用户输入的元素。所有主流浏览器都支持:focus。其中:focus选择器在IE8中必须声明<!DOCTYPE>....

原创 使用el-dialog遇到的坑——append-to-body

场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果

原创 vue for循环取值时日期格式化问题

最近在写一个列表显示时，后台返回的数据时时间格式为 “yyyy-MM-dd hh:mm:ss”如图：代码为：<div v-for="(item,index) in showOpinionLists" :key="index" class="pagination-list"> <!--此处代码省略--> ...... <div class="pagination-date"> <div :style="item.status ===

原创 springboot启动报错:“Error starting ApplicationContext.To display the conditions report re-run your a ...

springboot启动报错:“Error starting ApplicationContext. To display the conditions report re-run your application with ‘debug’ enabled.”在网上看了很多，有的说是jar包重复，有的说是Controller包和Application包处于平行位置，但是我都找了，不是，最终我自己找着了，是@RequestMapping的value值重复导致的修改后启动成功了...

原创 引用mui框架a标签跳转报错Unable to preventDefault inside passive event listener due to targetbeing treated ...

前一段时间用mui写html页面时，a标签跳转报错Unable to preventDefault inside passive event listener due to target being treated as passive.翻译：chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。preventDefault()作用：取消默认事件，这个函数起作用的，比如默认的表单提交，a链接的点击跳转，就不好用了具体情况：从 ch

原创 MyBatis-Plus——条件构造器EntityWrapper

EntityWrapper简介：1、 MybatisPlus 通过 EntityWrapper（简称 EW，MybatisPlus 封装的一个查询条件构造器）或者 Condition（与 EW 类似） 来让用户自由的构建查询条件，简单便捷，没有额外的负担， 能够有效提高开发效率。2、实体包装器，主要用于处理 sql 拼接，排序，实体参数查询等。3、注意: 使用的是数据库字段，不是 Java 属性。4、使用：项目中导入jar包（版本随意，一般是仓库中最高版本）<dependency>

原创 ElementUI 表格筛选时IE浏览器兼容问题

ElementUI 筛选时IE浏览器兼容问题

原创 code与pre区别——浏览器中显示源程序代码

和两个标签都是为了，在浏览器中显示源程序代码。 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能。标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。所以两者可以嵌套使用的，但是必须注意两者的嵌套顺序。我们可以看看，加标签，和不加标签在浏览器上显示的不同用于写单行的代码，如果要写一段段则需要code元素中的内容（一般认为是html格式的语言）不会作为html语言而被浏

原创 elementUI表格数据加载显示前先出现“暂无数据”字样问题

项目中的表格请求数据时，进去页面，先出现 ‘‘暂无数据’’ 字样闪现一下之后在进行加载数据，用户体验十分不好

原创 日志系统架构图

原创 使用vuex实现组件间数据共享及修改status的值

1、使用vuex，首先得安装它npm install vuex --save2、在store文件夹下的index.js引入vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { //存放组件间或全局中要用的值 isShowlog: false }})export default store3、在main.js中引入i

原创 与其他系统连接异常时的提示及重连功能

当所在系统请求其他业务系统接口时，会出现连接异常等问题，这时就应设计一个好的解决方案，用以解决用户体验不友好的问题。设计思路：1、登录系统时如果账号密码正确会同步获取移动云Cookie，之后后台会返回是否获取成功的状态并进入系统首页如果获取Cookie成功则正常展示移动云部分待办已办如果获取Cookie失败则弹出提示框提示并显示重新连接按钮，可以通过重新连接尝试进行重连，并且对移动云部分待办已办不进行展示2、登录成功后正常进行推送待办以及未推送系统待办列表抓取OA系统获取正常时则正常展示

原创 实现用户操作日志分表记录（分库分表——水平切分）

前一段时间同事在写 SpringAOP拦截Controller实现用户操作日志记录(自定义注解的方式）时，把获得的日志和报警日志全部存到了一个数据库表中，查询时通过同一个接口，当数据量过大时，对系统的压力会非常的大，所以在后续的代码中，对同一个...

原创 如何快速对接新项目

最近项目组有几位大牛过来对接项目：对当前系统架构进行重构，并对当前出现的bug进行修改当然，整个对接流程我也听了大部分，虽然听完之后我也很懵，不知到他们在说啥（我是一只小小菜鸟），但是还是有一番收获的对接时主要关注有两点：1. 明确该项目的流程2. 明确该项目遗留的问题及漏洞、出现频率在这个项目中，大牛们在沟通系统现状，了解项目流程时会格外注意当前系统遇到的问题进行分析，然后再后续架构重构时会格外注意。当然具体遇到的问题啥的就不具体写了。同时我也在网上找了一些文章来充实一下自己。如何快速的熟悉

原创 隐藏el-table自带的筛选按钮图标，点击表头可实现筛选功能

在对elementUI的el-table表格进行筛选操作，在过程中需要点击表头实现筛选功能，加载出筛选项列表，并将自带的筛选项进行隐藏。筛选项隐藏.el-table__column-filter-trigger i{ display: none; }表头实现筛选功能：在el-table上添加 @header-click="handle"handle(column, event){ event.target.childNodes[2].click();

原创 el-table表格列内容筛选时筛选项的获取及数据处理

最近在做日志内容的前端显示，需要对操作用户进行筛选显示

原创 el-table标签每列内容固定显示，超出部分省略

在写表格内容显示时，有的列的内容会很长，会超出显示，例如：这时就需要每一个表格内的内容省略显示 <el-table-column min-width="250" align="center" label="返回结果"> <template slot-scope="scope"> <span>{{scope.row.result | ellipsis}}</span> </template>

原创 解决时间筛选时格式不统一的问题

最近在写常用的用户操作日志在前端显示的问题，要对用户的操作时间进行分时间段的查找和筛选，出现了时间比较时格式不统一的问题在前端写了两个日期选择器，定义了一个初始时间和结束时间<el-date-picker v-model="dataFilter.stratDate" type="date" :picker-options="dataFilter.stratDate" placeholder="选择日期" value-format="yyyy-MM-

原创 Vue路由实现页面跳转

在程序代码中重新添加一个log.vue文件，用来显示日志信息，这时就用到了页面跳转。.vue文件之间的跳转，需要在router里面配置path，通过路径跳转html文件如下<router-link :to="{path:'/log'}" class="log-btn">日志</router-link>在index.js中配置，其中’…/components/pages/log’为log文件路径const log = () => import('../componen

原创 前端分页问题

前一段时间进行一个网页的重新切图工作，因为旧网页的内容部分是在后端进行分页的，前端只需要请求数据时传几个值就ok了，新的网页设计效果图暂用的是死数据（data中的json串）。分页代码<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"

转载 和开发沟通需求时的技巧（沟通的艺术）

今天不谈产品规划，也不谈框架，更不谈原型，咱们谈谈为什么你的需求每次和开发沟通，都像打仗一样？沟通的场景PM：战斗在革命一线的同志，为了革命成功后能快速步入小康生活，你看这个基础设施能否再打造的完美一点？开发人员：说人话（情绪平静）PM：能不能加个需求？你看哈……（还没说完）开发人员：加不了（听见加需求，有明显的情绪波动）PM：怎么就加不了？这又不是什么复杂的功能，我逻辑都给你想好了（皱着眉头，非加不可的语气）开发人员：你项目上线周期定那么死，我现在还有好多接口没完成，哪有时间加啊？（抱怨.

原创 应用element-ui中Drawer 抽屉并去除Drawer 标题自带蓝色框

在做项目的时候页面上需要设置的东西太多，所以将所有的设置按钮归于一个，点击后出现一个抽匣，在上面做设置就是了Drawer 抽屉的设置<el-drawer title="我是标题" :with-header="drawerProp.withHeader" size="35%" :append-to-body="drawerProp.appendToBody" :visible.sync="drawerProp.drawe

原创 使用bus实现父子兄弟跨级间传值

背景：在项目中，几个组件实现自由收缩，整个模块总高度不变，组件间收缩高度相互影响，例如：使用bus可以直接在bus.js中创建vue实例，在main.js中引入就可以使用了在这里我是仿效vuex插件那样制造bus插件来使用的：`const install =(Vue) => { const Bus = new Vue({ data(){}, created(){}, methods:{}, }) Vue.prototype.$bus = Bus}export

原创 调用外部接口引起的跨域问题

跨域问题

原创 使用sessionStorage存储数据时遇到的问题

在使用ElementUI中的el-table标签，要对表格中数据进行筛选，el-table自带的筛选表头

原创 图标提醒效果：提示更新小红点

图标提醒效果：提示更新小红点我在这里介绍的是日志更新提醒，当日志内容发生变化时，日志的版本号上会出现小红点提示<span class="red-point"></span>用span标签嵌套需要添加红点的内容，我这里就只写了span标签.red-point{ position: relative; }.red-point::before{ content: " "; border: 3px solid red;/*设置红色*/ bor

原创 浮动提示title更改字体大小

项目前提：已修改了title的默认样式，主要js代码function showTitle(el, title) { const popover = getPopover(); const popoverStyle = popover.style; if (title === undefined || title==='') { popoverStyle.display = 'none'; } else { const elRect = el.getBoundingClie