- 博客(26)
- 收藏
- 关注
RSS订阅原创 第一次写sso统一登录有点紧张(๑• . •๑)
好久没写文章了，这是年前写的一个需求，也是第一次接触抱着紧张的心态，生怕写错，不过最终的结果还是很理想的，分享出来留个纪念年后回来找工作的友友们你们还好嘛~ 要加油呀~ 春天到了，有压力的话就去吹吹风，那怕生活不如意，你也要很开心进入主题----先说下我们的思路和步骤，sso登录是和服务端共同配合完成auth_codeauth_codeauth_codeauth_codetoken跟着上面所说的步骤一步步进行，会详细讲解，不要嫌我啰嗦。
2023-02-24 10:48:24
216
原创 前端面试常问js数据类型
首先要知道基本数据类型和复杂数据类型都有哪些基本数据类型：Undefined、Null、String、Number、Boolean、Bigint、SymbolUndefinedUndefined的含义是未赋值，如果声明一个变量，没有初始化值，这个变量就是未赋值（就是把undefined赋值了给了变量）let a console.log(a) // undefinednullnull是一个独立的类型，null是一个空对象的指针，所以当我们采用typeof传入一个null的时候会
2021-09-28 11:38:27
147
原创 react的封装router实现一级二级页面展示
第一步下载我们需要的插件npm install react-router-dom -s标题建立一个router的文件夹路由集成文件上面routes文件内的router.config.js文件是我们的所有页面组件的集成文件，如下方：import loadable from "@/utils/routeload"//这里做了路由懒加载的功能export default [{ path:"/index", component:loadable(()=>import("@/p
2021-04-22 15:07:52
830
原创 前端 js闭包的作用？原理是什么？
我不允许现在的你和曾经的我一样不认识闭包东西或仅知道是一个函数包着一个函数的浅理解来来来，我们一起学习呀1、闭包是什么？先来简单的理解一下什么是闭包var clo = "闭包变量"function fn(){//这里的fn是一个函数 console.log(clo)//在函数里面能访问到外部变量}上面有一个局部的变量clo，一个函数fn，在fn函数可以访问到clo变量。就是一个闭包，意思就是：函数的内部能访问到其他函数的变量是一个闭包有人会说，咦，你的闭包怎么和我见过的不一样，我见
2021-04-01 15:37:44
252
原创 React框架的antd craco.config.js配置
1.需要下面的命令yarn add antdyarn add @craco/craco2.安装craco后需要package.json的命令 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test" },3.在根目录下创建一个craco.config.js的文件，和package.json同级//这里是craco.config.js的内容const pat
2021-03-30 17:50:31
4087
1
原创 获取地址栏的请求参数
假设来一个地址：http://www.baidu.com?id=1&&value=haha&&aaa=1最后想得到的效果是这样的：{ id:1, value:haha, aaa:1 }可以定义一个函数const search = 'http://www.baidu.com?id=1&&value=haha&&aaa=11'function fn(str){ if(!str) return ;//验证是否是字符串 s
2021-03-22 11:22:13
92
原创 去掉Echarts圆角环形坐标轴去掉最外刻度线
Echarts官网的图是长这样的：我们如果想去掉最外环的刻度线和指针线，就需要添加几个属性即可，在option下面添加angleAxis: { max: 2, startAngle: 30, splitLine: { show: false }, axisLabel:{//周围刻度线的数字 show:false }, axisLine:
2021-03-12 18:36:52
1453
原创 React的React.StrictMode
（Stric tMode）是严格模式，用来标记潜伏的问题，为元素触发额外的检查和警告注意:严格模式检查只在开发模式运行，不会和生产模式冲突import React from 'react';function App() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne />
2021-03-05 14:44:36
940
原创 vue3.0 webpack采用externals进行cdn优化
第一步在vue.config.js文件内的configureWebpack方法内写入externals configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: {
2021-02-23 11:39:41
1144
原创 Vue 按钮防重点击效果
import Vue from 'vue'//directive：注册一个全局的指令 v-preventReClick const preventReClick = Vue.directive('preventReClick', { //inserted：当被绑定的元素插入进DOM时发生的调用 inserted: function (el, binding) { //el:指令绑定的元素。用来操作DOM binding：一个对象 el.addEventL
2021-02-20 14:24:40
485
1
原创 webpack如何查看各个体积大小针对优化
1.首先要下载下面的插件npm install webpack-bundle-analyzer -save-dev2、在/build/webpack.prod.conf.js文件中引入const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin在plugins的里面做配置new BundleAnalyzerPlugin(),3、在package.json文件下配置下面供粘贴"a
2021-01-28 14:18:14
2491
原创 重复的重定向引起vue-router报错Error: Redirected when going from “/login“ to “/home/homePage“ via a navigat
在router下面的index里面重写一遍路由即可// vue-router重写push方法，解决相同路径跳转报错const routerPush = Router.prototype.push;Router.prototype.push = function push(location) { // 这个语句用来解决报错 // 调用原来的push函数，并捕获异常 return routerPush.call(this, location).catch(err => err);}
2021-01-14 16:27:43
1991
1
原创 IE浏览器的Get请求走缓存
在项目写完后，谷歌，火狐，遨游一路畅通，但是只要一走ie，那真的是绝了前天写了一个首页轮询的定时器请求数据，但是发现数据并未更新，开始以为是ie不能走定时器，但是打开控制台，就会看到200缓存，定时器也走了，也是寻求了大神的帮助定位到问题是在请求哪里，post没有关系，只要是get请求就有问题，原来是get请求走了协商缓存，每次请求的时候params的值都是不变的，所以走了缓存，很简单，改了一下封装的axiois就解决了这个问题。看代码 get(url, params, loading = fals
2021-01-14 11:13:26
346
3
原创 vue使用Echart 3秒调用实时请求报错Cannot read property ‘getAttribute‘ of null
就是这个错，折磨了我一下午，上网查到的资料都是说这个就是没有获取到，元素报错原因:echart dom 没有渲染完成，解决方法也是各种各样都有有的说是因为图表的外层包裹的盒子用的v-if改成v-show有的是this.$nextTick(()=> {代码})这样的有的说一版获取dom元素都是用document.getElementById换成ref就行有的说是因为没有放进mounted里面可是以上4种方法对我都无效，此处需要哭哭的表情o(╥﹏╥)o需求：先说下我的需求，因为产品经理需要.
2021-01-14 11:01:15
330
2
原创 vue-element-amdin不同身份权限登录
1、 接通登录接口会返回token值，在permission.js文件的getToken方法是判断是否有token值的因为我调了登录接口有了token值所以此时我是有权限的访问的2、 第二步是获取身份数组并处理路由数据，当有了权限后会根据身份信息做一个路由处理，会去store里面获取处理好的路由的数据此时我们的hasRoles是false，因为还没有获取身份的数组，所以我们走else，尝试去获取用户的身份信息，身份信息包含了身份权限。3、去store获取商户身份权限信息，上面的rol
2021-01-04 17:48:49
1196
1
原创 Vue修改全局滚动条的样式
::-webkit-scrollbar {//滚动条的宽度 width: 7px;}::-webkit-scrollbar-thumb { border-radius: 14px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #4a6cd5;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0,
2020-12-23 14:02:50
869
原创 前端获得客户端当前时区编码
我们做跨境总是会做一些奇奇怪怪的东西，这天后台告诉了我一个需求，让获取当前页面所在的城市，我开始用的百度官方开发文档获取到了，我以为他想要的是这样的，然而并不最后把参数给他，他竟然告诉我不想这个，他要的是编码，我滴鹅啊，这编码是啥，他就给我举个栗子，像"Asia/Shanghai"，"America/Montreal"这样的时区信息，一下子给我整懵了，我就开始上网查，也是借鉴了这个人的经，看了MDN的一些相关信息，废话不多说，不懂得去看文档，很简单的一句话就得到了timeZone:Intl.DateT
2020-12-22 18:18:58
1412
原创 Echarts柱状图数据为0的时候页面不显示0
上面的图就是当数据为0的时候页面上还显示为0，很多个0都重复到了一起就会特别丑，我们想个办法把0给去掉在normal里面新添加一个属性方法即可,判断一下值若大于0就正常显示，否则就返回空formatter: function (params) { if (params.value > 0) { return params.value; } else { return ''; .
2020-12-17 11:26:01
3171
2
原创 在vue页面利用css伪元素：：after画样式
上面是UI给的原型图，其实做的是一个vue的嵌套表格上下级的关系，大家都看过element里面的树形组件，就是拿那个实现的，改的样式。刚开始画出来是这样的，那个线突出去了，原型上是不突出的，最后研究发现表格的每一格的线都是拼接的，所以就把第一列的线隐藏了，利用伪元素加了一条线，调整一下距离就可以了，接下来看代码。.el-table__body .el-table__row td:nth-child(1) { //调整距离 margin-left: 20px;}.el-table__body .
2020-12-04 11:56:05
2497
原创 Element树形数据与懒加载无效
表格的子级别嵌套，我刚开始写的时候表格一直不显示，我以为是element版本的问题，我就在package.json里面看了我的版本是没有问题的，可是就是出不来，换了别的项目是可以的，我就依然在寻找，最后在项目里面的index.html下引入了一段链接，这个也是element的版本，但和我的并不对照着，所以表格才出不来的。把这个链接的版本改成自己对应的版本继续，若想了解为什么会引用链接控制element的版本，看下期吧。...
2020-11-19 16:53:26
1207
原创 vue前端手机号校验正则
vue前端手机号校验正则vue前端手机号校验正则return /^1[1356789]\d{9}$/.test(this.phone)
2020-11-12 16:14:18
2086
原创 element的日期选选择组件怎么限制天数范围
在写日期选择组件的时候会碰到一些需求，第1个日期不能比第2个大，第2个日期不能比第1个小element的组件里有可以选择时间范围了，一个整体的日期选择框，像这样的如果是这样的组件那这个需求就方便多了，可是，产品的需求是这样的分开的两个单例的选择日期，这可咋限制时间范围就比葫芦画瓢，看着element的方法去改其实只要在日期选择组件上加一个 <el-date-picker v-model="value2" type="daterange" alig
2020-09-02 15:15:34
1467
原创 Vue的表格每行划过怎么修改高亮样式
这里写自定义目录标题element的表格组件每行划过怎么修改样式如何插入一段漂亮的代码片element的表格组件每行划过怎么修改样式如何插入一段漂亮的代码片// 修改表格每行的颜色.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,.el-table__body tr{ background: #F8F9FB !important;}//划过的背景颜色 文字颜色改变.el-table-
2020-09-02 14:25:59
474
原创 Vue如何写埋点，统计PVUV，用户的喜爱程度、停留页面的时长
封装PVUV统计方法下面康康我在不同的情况下在页面的使用下面就是我们的最后一步，如何在axios的config.headers添加自字段领导提出了一个需求，写pvuv要统计用户的访问量和喜好，俺也没写过，但是我们组的后台非常的强大，他总结了办法，身为前端的我只要在每次上报接口的时候顺带携带上headers头部字段即可。##我们直接看代码吧，这是一个在vue项目里utils封装的一个js文件，命名为PVUV.jsimport Cookies from 'js-cookie' //取到用户信息唯一标识
2020-08-26 17:30:38
5151
1
原创 解决Vue的el-upload上传图片选择时只显示想要的图片格式
解决Vue的el-upload上传图片选择时只显示想要的图片格式因为要做上传图片，若要显示不支持的图片格式，走接口时后台做验证还会报错，走各种校验，增加了代码量，所以就在想如果选择的时候直接不显示不支持的图片格式不就好了硬话不多说，我们直接上代码 <el-upload class="avatar-uploader" action="/interpay-merchant-center/cardConfigImage/uploadImg"
2020-08-21 10:54:56
2904
原创 Vue每次点击跳转页面位置回恢复在顶部
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-07-14 17:13:44
1470
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人