- 博客(111)
- 收藏
- 关注
RSS订阅原创 react-router-dom V6路由参数
4.动态参数方式：需配置路由<Route path="/main/dataForm/:id" element={<DataForm/>}></Route><Link to={'/main/dataForm'} state={{id:123, name:'aa'}}>导航</Link><Link to={'/main/dataForm/456'}>导航</Link><Link to={-1}>导航</Link>
2023-03-06 16:55:00
180
原创 屏幕自适应方案
1. @media screen、%、vw vh、栅格、rem、scale缩放；1. rem(%、vw vh、栅格、px、flex混合使用);1. 做三个站点，在前端或者nginx重定向到对应的站点；2. scale缩放；
2022-12-21 14:00:00
93
原创 Pinia和Vuex对比
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比，让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现方式，那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器(实际项目中千万不要即用Vuex又用Pinia，不然你会被同事请去喝茶的。下面就让我们看下它们的使用方式吧。
2022-08-29 15:28:00
228
原创 vue前端权限控制
注意： 1. 建议使用此方法统一处理菜单、路由，后端返回菜单id数组的话需要先过滤出有权限的菜单路由，后端返回菜单树的话不需要过滤，菜单直接渲染，路由遍历时addRoute；2. 注册全部路由(路由配置项中注册)，在路由全局前置守卫router.beforeEach的to中根据权限数组判断没权限的跳404；4.1 返回菜单id数组：先过滤出有权限的菜单路由，再渲染菜单注册路由；4.2 返回菜单树结构：直接渲染菜单注册路由；(前端不需要维护保存菜单树，后端需要维护菜单树，不够解耦，不建议使用)；
2022-04-14 11:18:00
49
原创 vue3组件通信（传值、传方法）总结
父-onBeforeUnmount。子-onBeforeUnmount。子-onUnmounted。父-onUnmounted。
2021-08-12 11:25:00
263
原创 node、npm安装与升级
5、通过n工具升级npm，sudo npm install npm@latest -g；2、清除node缓存，sudo npm cache clean -f；1、 查看node版本，node -v，查看npm版本，npm -v;3、安装n工具，sudo npm install -g n；4、通过n工具升级node，sudo n stable；1、安装node的同时会自动安装npm。
2021-04-07 14:52:00
310
原创 Vue3.0 新特性以及使用经验总结
Vue3.0 在去年 9 月正式发布了，看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发，这篇文章就是在使用后的一个总结， 包含 Vue3 新特性的使用以及一些使用经验分享。// 修改age值时会触发 watch的回调watch(console.log("新值:", curAge, "老值:", preAge);复制代码}, 1000);
2021-04-02 11:12:00
463
原创 nginx全面配置
Nginx是开源、高性能、高可靠的Web和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。性能是Nginx最重要的考量，其占用内存少、并发能力强、能支持高达 5w 个并发连接数，最重要的是，Nginx是免费的并可以商业化，配置使用也比较简单。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。
2021-04-02 11:05:00
410
原创 前端性能优化
2. 减少http请求次数，比如页面中合并接口，减少请求个数；3. 使用gzip压缩内容，比如nginx配置压缩；6. 修改hosts，比如让请求走内网，不走外网；1. 使用CDN，比如图片放在第三方云平台；4. 组件懒加载，比如Vue组件懒加载；5. UI框架按需加载；
2021-04-01 00:01:00
37
原创 大型网站设计总结
2.页面中公用的一些模板比如头部底部在多个项目中使用，可以使用js注入的方式，并且独立开发，独立部署，修改一次做到多个项目同时改变，也可以说是微前端概念。4.页面中接口太多的话导致页面性能下降，接口混乱，维护成本太高，可以考虑一个页面一个接口，把之前一个页面多个接口聚合成一个接口，从页面的维度来定义接口。一个网站做大之后会遇到很多问题，牵扯的项目也会比较多，用户数也大，需要一个合理的设计方案才可行。5.服务器方面，要做集群，负载SLB，自动化构建，自动化部署，缓存，ES，nginx调优等等。
2021-03-13 00:51:00
35
原创 前端SEO
1.前端以Vue为例，不能做单页应用，必须做成服务端渲染的方式，比如使用Nuxt框架。4.比如element table查看页面源代码不能被渲染出标签，影响seo,需要手写原生标签渲染，或者单独给蜘蛛另写一些内容。2.页面中对标签的使用要有规则，比如只有一个h1标签是标题。做SEO是为了提升搜索排名，让蜘蛛有兴趣来收录网站内容，是有效的、省钱的提升网站排名的方式。3.某些页面可以单独给蜘蛛写一些内容来让其收录，对用户 display=none不可见。5.js注入的代码等内容不能被蜘蛛收录。
2021-03-13 00:24:00
42
原创 前端埋点总结
2.地址栏加参数表示特定的意义，比如分页的页码显示在地址栏，可以看到用户浏览到了哪一页；埋点的目的是为了收集、分析用户轨迹和行为，形成用户画像，以达到商业目的，也就是BI。1.注入统计代码的的js脚本，比如百度统计、谷歌统计等；4.使用第三方统计平台，比如神策等；3.接口加参数表示特定的意义；
2021-03-12 23:30:00
68
原创 jenkins自动构建、自动部署
在代码仓库创建webhook(web钩子)用于链接jenkins服务器研发push代码到g仓库后，仓库会通过设置好的web钩子推送一个json数据到jenkins服务器jenkins服务器在接受到这个信息后，根据配置设置的内容进行判断，是否启用自动构建。如：是否是指定的分支push的代码等Jenkins通过设置好的判断后，启用自动构建，进行相关的打包操作，jenkins有一个工作区，一般在root/.jenkins/workspace下，里面存放着拉取下来的源代码和打包好的包文件。
2021-01-29 18:37:00
1033
原创 centos前端环境安装
在继续下面的命令前，你需要知道的是，下面那行命令的“/mnt”就是你要把数据盘挂载到的文件夹，如果你想挂载到别的文件夹，比如你自己建立的/mydata那么就把/mnt改成/mydata，前提是你已经创建了这个目录(创建目录的命令是mkdir)。第二种，如果你之前就有数据盘，只是你把系统盘重置了，需要将数据盘再次挂载到重置后的系统上，那么就不要对其格式化(跳过此步骤)，直接执行后面的步骤挂载就可以了。根据提示，依次输入“n”，“p”，“1”，两次回车，人后输入“wq”退出。分区就开始了，很快就会完成。
2020-12-13 09:14:00
44
原创 vue开发环境、生产环境nginx配置代理转发跨域
'/api' : '/demo/api', //否则nginx不能转发请求的接口。注意：proxy_pass https://www.baidu.com/;注意：proxy_pass https://www.baidu.com/;注意：proxy_pass https://www.baidu.com/;
2020-12-08 14:56:00
1400
原创 Element cascader 级联选择器 点击文字选中
自从element-ui更新到2.12之后，级联选择器Cascader只能点击圆圈才能选中。点击文字 label 没有效果。用习惯了以前点击label直接选中后很不习惯新版本。
2020-09-08 17:11:00
991
原创 elementui 恢复级联框el-cascader的默认状态
/也可以是指定的值，默认返回值是数组，也可以返回单个值。el-cascader可能不会恢复到默认状态，而是保留上一次的高亮选择状态。
2020-09-07 18:33:00
388
原创 git 将dev分支的代码合并到master
1. git checkout // 可以看到当前的所处的分支位置，位于master还是dev等。2. git log // 可以看到近期的相关提交日志(提交时候的备注等) 3. git status // 可以看到当前的文件状态 (如xx文件被修改，但未提交等)
2020-08-31 13:17:00
2519
原创 git 从master分支拉取新分支
5：git branch --set-upstream-to=origin/dev 关联远程仓库。2： git pull 更新到最新代码。3： git checkout -b dev 创建新分支并切换到该分支。4：git push origin dev 推送新分支到远程仓库。1： git checkout master 切换到master分支。
2020-08-31 13:16:00
866
原创 sublime同步配置
sublime同步配置需要备份 Preference->Browse Packages 下的 User 文件夹，在新的设备上覆盖掉User文件夹应该就可以了；
2019-12-26 21:05:00
105
原创 VScode同步保存配置
GitHub Gist: 66671319ae7********f621fb2ec737fe # 可以通过https://gist.github.com/<username>/<gist id> 访问到这个信息。有了 github 账号后，直接进入这个页面：https://github.com/settings/tokens，点击 generate new token。//与选择内容相同的区域的边框颜色。//与选择内容相同的区域的颜色。//光标指在变量时的边框色。//当前搜索匹配的边框颜色。
2019-12-26 19:56:00
627
1
原创 webstorm等jetbrains系列编辑器配置保存
这里建议使用第二种方式保存，其他jetbrains系列编辑器配置的保存方式都是一样的，详见官网。2. 用类似github这样的远程仓库保存。1. 用jetbrains账户密码保存。3. 导出zip到本地保存。
2019-12-26 14:19:00
154
原创 vue项目中微信jssdk在ios签名失败
因为在安卓中应该拿去签名的URL就是每个页面的URL，在ios中拿去签名的URL应该是微信分享时的URL(这个是我自己猜的)，微信会对ios页面链接做处理，我们复制到的链接有时是刚进入项目时的链接而不是当前页面的链接，多刷新几次的话可能就是当前页面的链接，总之这个是ios微信的bug，官方建议使用。简单暴力使用a标签去跳转签名的页面，也就是说A->B，在B页面做签名的话，在A页面的跳转方式不用vue路由跳转，改用a标签跳转，这个时候获取到的URL是可以签名的。
2019-09-27 10:25:00
263
原创 单行文本、多行文本显示省略号...
/示例 {{text | ellipsis(35)}} 35为限制字数。//示例 ellipsis('.box',86);//处理多行文本...// 文字超出显示...
2019-08-30 12:13:00
41
原创 vue cli3项目发布在apache www/vue目录下并配置history路由
vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径，当然也可以修改)，这种情况不需要做路径的配置，只需要做history配置，如果不是发布到根路径而是www/vue目录下，则需要做路径配置，并做history配置。一般搜索 mod_rewrite.so 能够找到，不同的服务器可能前面的红色路径不太一样。配置，否则应用会展示404页面，当然了用history路由的话也必须加 mode: 'history'；, 它指定应用的基路径，默认是根路径'/'，表示该应用是服务于。
2019-05-05 12:16:00
230
原创 ios手机填坑总结
ios系统、safari只能识别"2018/10/15 00:00:00"，不能识别"2018-10-15 00:00:00"，所以需要转换格式，日期字符串需要转换成日期对象来比较大小，也可以转成毫秒比较；//滚动到底部 window.scrollTo(0, document.body.offsetHeight);/*去除系统默认的样式*/
2018-11-01 16:05:00
37
原创 监听用户关闭浏览器、离开浏览器事件
有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。pagehideunload但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。用户点击了一条系统通知，切换到另一个 App。用户进入任务切换窗口，切换到另一个 App。用户点击了 Home 按钮，切换回主屏幕。操作系统自动切换到另一个 App(比如，收到一个电话)。上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。
2018-10-29 09:57:00
814
原创 移动端调试——五款前端开发利器
第四步：点击之后就会出现如下图所示的，几乎和电脑一样的调试界面，怎么操作，我想各位大佬也不用我多啰嗦了吧！的开发者工具，没关系，谷歌也有类似的工具，而且更符合大家的使用习惯。有梯子的小伙伴，可以直接看。请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在一定程度上帮助。公司的小伙告诉我，这种方法他需要爬梯子才能用，爬不上去的小伙伴可以关注我，检查的按钮，点击就会出现你熟悉的画面，后面就不用解释了吧！中打开你需要调试的页面，并在电脑上点击下图红框的位置。的报错，并成功解决问题，赢得小姐姐认可的😎。
2018-08-21 10:31:00
538
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人