前端
关注
分享
扫一扫
console.log( )
吾日三省吾身:这事能不能不干、这事能不能推给别人干、这事能不能明天干。
展开
-
VS Code 插件
vs code好用插件原创 2022-07-28 16:39:34 · 563 阅读 · 4 评论 -
nuxt使用keep-alive
业务场景：列表页进入详情页返回，列表页数据缓存还是进入详情页之前的样子仅有部分页面需要缓存，对需要缓存的页面进行操作大致实现过程：1.nuxt设置keep-alive，需要缓存的页面添加name属性2.通过vuex管理需要缓存的页面/组件3.需要缓存的页面在进入时判断是否刷新数据，离开进行判断是否需要缓存（滚动位置恢复看情况是否需要）....原创 2022-02-14 16:58:49 · 2220 阅读 · 7 评论 -
nuxt中使用mailchimp
mailchimp，免费电子邮件营销工具我制作的需求仅仅是在我们网站提供一个邮件订阅的功能官方文档创建账号，建立一个表单，连接自己的网站，生成代码插入到自己的网站中在vue或者其他框架中当做一个第三方插件script引入就行，nuxt默认因为没有引用的地方需要自己创建一个app.html,实际上这个代码对于我接下来的操作没有影响，不写的话也可以实现，可能在制作其他需求的地方用得到，我还是按照文档加上了<!DOCTYPE html><html {{ HTML_ATTR原创 2022-01-06 14:27:55 · 624 阅读 · 0 评论 -
nuxt中全局引入样式文件
使用@nuxtjs/style-resources配置nuxt.config.jsstyleResources: { scss: ['~/assets/style/main.scss'], hoistUseStatements: true,},buildModules: [ '@nuxtjs/style-resources'],原创 2021-12-31 16:38:07 · 1224 阅读 · 0 评论 -
nuxtjs-i18n + element 国际化
nuxtjs-18n新版可以通过在nuxt.config.js设定国际化，并不需要我们自己添加i18n.js文件进行处理只需要建立lang文件夹，添加语言包即可lang/en.jslang/zh.js通常我们是在这两个文件中添加自己定义的语言包当我们需要引入第三方插件的语言包时（比如element），我们是通过vue-i18n去进行配置现在的话直接把语言包合并在lang文件夹下对应的文件中即可import enLocale from 'element-ui/lib/locale原创 2021-11-24 18:20:16 · 817 阅读 · 0 评论 -
nuxt中引入vue-echarts6
nuxt是vue2.x版本根据文档下载引入，文档地址$ npm install echarts vue-echarts需要注意几点，也就是让我安装了两个小时的问题1.在vue2.x版本需要安装@vue/composition-apinpm i -D @vue/composition-api如果你用的是nuxt，执行那个下面得代码npm i -D @vue/composition-api2.node与python版本本来我node是12.x版本，使用vue-ech..原创 2021-11-18 21:54:50 · 1788 阅读 · 0 评论 -
nuxt 路由重定向错误
Error: Redirected when going from "/xxx" to "/xxx" via a navigation guard.我在nuxt的middleware中使用redirect重定向导致该错误我本意是想判断token是否存在，不存在就重定向到登录页面如果我点击退出页面按钮，清除token，并切换到登录页面，但是这时候meddleware的redirect重定向仍会触发，导致从登录页面重定向到登录页面把token的验证发到别的地方，比如项目初始化的时候，从缓存获取存原创 2021-10-28 19:59:55 · 1209 阅读 · 1 评论 -
数组扁平化处理
let data=[1,[2,[3,4]]]将上述数组变成[1,2,3,4]1.flatdata = data.flat(Infinity);2.es6扩展运算符data = [].concat(...data)这样只能去掉一重数组，[1,2,[3,4]]本来我是用循环递归去做的，后来看到有人使用了some这个方法，简化了很多while (data.some(Array.isArray)) {data = [].concat(...data);}...原创 2021-07-08 17:57:13 · 234 阅读 · 0 评论 -
nuxt开发遇到的问题
本地项目运行，初始默认是能在电脑运行的ip上打开，地址为localhost:3000,如果想要在内网其他电脑访问配置nuxt.config.jsserver:{ port: 8000,//端口 host: '0.0.0.0' // default: localhost }原创 2021-07-05 18:39:38 · 416 阅读 · 0 评论 -
Cannot read property ‘getBoundingClientRect‘ of undefined
在vue中使用滚动监听，当切换页面时会报错解决方法：在监听滚动页面关闭的时候清除滚动监听beforeDestroy () { window.removeEventListener('scroll', this.handleScrollx,true); },起始我没有在清除函数中添加true参数，在一个帖子中找到了解释（https://segmentfault.com/q/1010000010117564）...原创 2021-06-25 16:41:20 · 2710 阅读 · 0 评论 -
uniapp 开发app问题记录
1.iphone全面屏手机底部有横杠（安卓和非全面屏iphone没有）manifest.json 文件 app-plus 节点下配下 safearea，自适应颜色，也可以设置固定颜色 ，参考https://ask.dcloud.net.cn/article/35564"safearea": { "bottom": { "offset": "none" } },2.“App平台 v3 模式暂不支持在 js 文件中引用‘xxx.css’请改在 style ..原创 2021-05-14 17:50:14 · 1347 阅读 · 0 评论 -
svg菜单图标和关闭图标动态切换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style type="text/css"> bo...原创 2021-05-08 12:01:33 · 906 阅读 · 0 评论 -
js中保留小数
js保留小数有两种 1.四舍五入 2.直接截取比如1.255保留两位小数 四舍五入1.26 直接截取1.25不用的场景用不同的方法,比如涉及到金钱余额这种，如果位数较多保留两位小数显示，用直接截取是比较恰当的1.四舍五入比较好实现，js有toFixed函数可直接使用，注意要是数字类型Number(1.255).toFixed(position)2.直接截取可以自己写一个函数实现，split+slicefixed(value,position) { let v...原创 2021-04-30 11:01:22 · 2598 阅读 · 0 评论 -
animate动画懒加载
制作css动画可以使用animate动画库，也有在animate的基础上改进的动画库，例如aos.js wow.js动画如果一开始加载页面就全部播放完毕就没有了做动画的意义懒加载也就是当页面视图滑动到元素的时候才会执行元素的动画，主要很两种情况一、动画只执行一次，窗口移走再次移回，动画不会再次执行wow.js以animate为基础的动画，可以实现这种效果<divclass="card_text comeInLeftwow"data-wow-duration="1.5s"...原创 2021-04-02 17:28:09 · 913 阅读 · 0 评论 -
vue中使用scss全局变量
插件版本"node-sass": "^4.14.1","sass-loader": "^7.3.1","sass-resources-loader": "^2.1.1",node-sass和sass-loader默认最新版本，使用时会有各种版本报错上面的版本可用vue,config,js配置module.exports = { css: { loaderOptions: { sass: { data:原创 2021-03-29 18:57:53 · 3590 阅读 · 3 评论 -
js中小数取整
以前我习惯性使用parseInt做取整，后来发现一个问题，对科学计数法不适用js取整的方法1.parseIntparseInt把小数转化成整数是从要取整数据的左边读取，遇到非数字结束，保留前面已读到的数字。当我们遇到科学计数法，使用parse取值可能是错误的（大部分来说是错误的）2.Math向上取整Math.ceil()四舍五入 Math.round()向下取整 Math.floor()这种对于科学计数法也适用，也是最方便的，三种取值方向3.其他...原创 2021-01-05 11:39:01 · 829 阅读 · 1 评论 -
document.body.clientHeight高度问题
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight原创 2020-09-14 18:00:16 · 1707 阅读 · 0 评论 -
在vue中使用d3做一个动态加载的树形图
树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370注意：本demo用的d3版本是v3，用最新版有些功能无法使用 <script src="https://d3js.org/d3.v3.min.js"></script>效果图原创 2020-08-12 09:58:44 · 2600 阅读 · 0 评论 -
ios系统从外部返回app，页面变量被销毁
项目中需要使用第三方支付，用第三方平台接入支付的时候跳转到订单支付页面，开始的时候使用路由传值把订单号传过去，页面调用支付宝支付，并且开始对订单结果进行监听从app拉起支付宝支付，完成之后返回app后，订单号丢失，输出发现是underfined，说明变量不存在了，变量页面初始化定义了的，我想到的是ios系统在跳出这个app的时候把这个页面的变量都销毁了解决办法：使用缓存存放订单号，订单生成的时候放入缓存，在支付页面需要的函数中取出（不是页面初始化的时候取出）...原创 2020-08-05 19:39:05 · 384 阅读 · 0 评论 -
input file模式 隐藏/修改“未选择文件“几个字
百度搜出来各种复杂操作直接input的title值原创 2020-07-15 18:24:23 · 2017 阅读 · 2 评论 -
jquery实现滚屏展示数据
之前写大屏写过一个滚屏，整理了代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"><原创 2020-05-11 10:30:51 · 782 阅读 · 0 评论 -
vue项目打包上传到服务器具体操作
这几天为了测试一个项目，自己尝试将前端项目打包放置到自己的服务器上，我用的是阿里云，下面也是以阿里云为例使用的工具是xshell6+FileZillaxshell6想免费试用就去下载家庭免费版 >官网下载1.服务器上传服务器，你首先得有个服务器吧，买一个也不贵，或者用公司的2.安装好软件xshell6FileZilla打开xshell左上角新建，先输入...原创 2020-03-27 15:29:30 · 2698 阅读 · 0 评论 -
vue项目在ie浏览器中，数据更改后页面数据没有变化
在项目里对表单数据使用增删改查之后，我们通常会重新请求数据更新视图，ie浏览器中，如果请求相同的URL，默认会使用之前请求来的缓存数据，而不会去请求接口获取最新数据，解决方法：在每个请求发送前，拦截请求并给请求接口的URL后加一个时间戳,这样就保证了每一次请求的URL都不同，ie就会不断的请求接口而不使用缓存数据。也可以在封装axios的时候添加if (config.method...原创 2020-03-26 15:26:58 · 1033 阅读 · 4 评论 -
vue 报错 Module bulid failed (from ./node module/babel-loader/lib/index.js)
类似这样的报错，下载最新版node.js试试原创 2020-01-20 14:55:42 · 514 阅读 · 0 评论 -
百度地图删除折线覆盖物
使用过百度地图就知道，在百度地图中所有的覆盖物都是通过map.addOverlay存储的，也就是存在同一个地方，前几日在项目中我需要把添加的轨迹覆盖物删除，本来我是通过查询所有的覆盖物，把最后一个删掉，因为轨迹是我最后添加的覆盖物，发现这个方法行不通，那正好轨迹覆盖物是折线，那就找到所有的折线覆盖物删除即可var allOverlay = map.getOverlays(); for (...原创 2019-12-20 15:37:04 · 1193 阅读 · 0 评论 -
vue 中input的输入验证
在vue中用最普通的input对内容做限制比较容易，但是没有样式，比较丑，比如只能输入文字(以下都以文字为例)，直接对其值正则匹配即可 >查看其他匹配的方法<<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"/>但是想要好看一点的就需要使用vue中的...原创 2019-12-10 11:38:53 · 5778 阅读 · 0 评论 -
PC端百度地理围栏、绘制工具以及判断当前坐标是否再围栏中
最近项目里有要用到地理围栏，看到大神写的demo，把百度地图里多个demo的功能糅合在一块，一个很好的学习模板一、导读围栏：顾明思议就是利用地图的多个经纬度坐标点画出图形；需求：在地图上画出多个不同的围栏，提交保存到围栏列表（坐标列表），获取用户的经纬度坐标判断是否在围栏中；圆形围栏坐标示例：circle:100.228204_26.885269_100；多边形围栏坐标示例...转载 2019-12-09 15:40:47 · 1066 阅读 · 0 评论 -
js判断鼠标点击的是哪个键
鼠标事件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button onmousedown="whichBut...原创 2019-12-09 13:39:32 · 623 阅读 · 0 评论 -
vue过滤器的使用
很多时候我们从后台拿到的数据格式并不是我们想要的，比如时间，一般后台给的是时间戳，前端需要转化为类似YYYY-MM-NN的形式，如果不是直接渲染数据，还是能够使用moment包去转化，如果是像在表格中这种写法还比较简单，能够对数据直接操作{title: "更新时间", align: "center",key: "updateTime", r...原创 2019-12-09 10:15:21 · 214 阅读 · 0 评论 -
css样式初始化
CSS样式初始化代码为什么要初始化CSS？建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也...转载 2019-12-02 14:48:50 · 227 阅读 · 0 评论 -
后台管理框架
目录一、iview-admin 二、d2-admin 三、avue四、el-admin五、HeyUI Admin六、VuePress七、鲁班H5八、FastAdmin九、RuoYi十、TIMO十一、Guns一、iview-admin Github仓库|预览地址基于vue和iviewui后台管理框架，免费开源，感觉入手还是...原创 2019-12-02 09:55:02 · 604 阅读 · 0 评论 -
便捷网站或者工具（前端）
目录一.集合众多工具的网站二.渐变色三.轮播图制作四.图片资源五.图片设计编辑六.网页设计七.Cancas学习网站八.echarts实例一.集合众多工具的网站nicetoolToolfk在线工具箱集众多实用工具为一身的网站，图片视频音频处理，各种程序辅助工具，功能很多，种类也多，也不好举例子，有兴趣自己去看，说不定有意外收获。二.渐变色...原创 2019-09-29 09:43:26 · 810 阅读 · 1 评论 -
移动端通过携带token访问html页面
项目中有一个页面需要放到移动端，pc端是通过账号密码登录获取token，跳转网页前，在beforeEach中验证是否已有token，但是在移动端就访问这一个页面，为了避免登录就需要直接用token去访问，我是通过?把token拼接在网址后面判断移动端还是pc端，在beforeEach之前判断，这样pc端就不能通过token去访问window.location.href=window.lo...原创 2019-11-28 11:33:27 · 2481 阅读 · 0 评论 -
解决vue-cli3项目ie白屏兼容问题
刚写好的项目在谷歌能打开，ie打不开，需要处理兼容问题先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决如果没有其他问题是可以了的，下面是我代码中出现的其他问题导致页面无法显示或者报错sockjs报错 控制台会一直报这个错，sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工...原创 2019-11-27 10:26:58 · 3368 阅读 · 0 评论 -
vue中刷新页面
当我们页面中有数据发生变化或者进行了某些操作的时候，需要将变化后的结果展示，也就是刷新页面，像F5这种刷新会导致页面闪烁，还有window.reload()，或者router.go(0)刷新时也是，用户体验很差，所以我们需要一种页面不抖动的刷新方式解决办法：第一种适合大多数情况在App.vue中声明一个reload方法<template> <div i...原创 2019-11-25 16:19:52 · 575 阅读 · 0 评论 -
web前端工程师简历
之前自己买了个服务器一直没用，在网上看到有这种网站，想自己去写一个玩，一直没时间去写，前段时间有些空余时间，没事就写了一个，只是一个大框架，里面内容可以自己去添加，我现在没心思去弄了地址=>web在线简历 不要用qq浏览器打开，会卡死，我也不知道为啥没有用到框架，一个html页面，有些东西我之前在博客写过了，点击链接查看首页轮播图 第三个 一个做轮播图很方便的软...原创 2019-11-22 10:01:26 · 1161 阅读 · 0 评论 -
vue打包运行并解决404问题
vue使用npm runbuild就能打包，生成一个dist文件，直接打开index.html是不行的，我们需要将其放到一个容器中1.安装express-generator生成器。npm install express-generator -g2.找个地方创建一个express项目。express name // name是项目名3.进入项目目录，安装相关项...原创 2019-11-22 09:24:43 · 1201 阅读 · 0 评论 -
iview form表单验证手机号
1.直接验证，rules添加phone: [ { required: true, message: "请输入手机号码", trigger: "blur" }, { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" } ],2.自定义验证...原创 2019-11-20 15:51:15 · 2267 阅读 · 1 评论 -
[Vue warn]: Failed to mount component: template or render function not defined.
昨天写项目还好好的，今早上一打开项目页面就进不去，报了这个错原因是我昨天在写项目的时候添加了一个js文件，而之前是只有一个vue文件，在router里引入路径时没有写后缀但是加了js文件后，就无法识别，将后缀加上就好其他原因可能是component路径引入有问题...原创 2019-11-20 10:13:21 · 1340 阅读 · 0 评论 -
iview table组件的嵌套使用
最近使用iview-admin写了一个后台管理项目，对table这个组件使用的比较多，表格主要内容如下图新建和修改操作是使用iview组件 model（对话框）内嵌form（表单），可做表单验证单选、多选、排序、分页、下拉都能通过官网iviewtable查到，这里有些操作用到render函数，我只介绍这些时间戳转化，这是最简单的render函数的应用：首先需要引入momen...原创 2019-11-18 17:16:12 · 1095 阅读 · 0 评论