- 博客(42)
- 收藏
- 关注
RSS订阅原创 前端项目的动态路由实现(vue)
动态路由，很多场景是，有些页面必须是某些用户或者某些角色才能访问，所以呢，前端的代码即使不给页面的入口，但是要是直接在地址栏敲入相关地址页面还是可以被访问到。为了杜绝这种情况，就用到了动态路由，没有权限的页面直接在路由里不注册，及时输入地址也将无效。路由信息这东西有点大，放到以上说的本地存储方式里，貌似都不合适。这个动态的配置呢主要是通过vue-router的addRoutes方法。但add的内容呢，是前端去动态配置呢，还是根据后台的接口返回呢。这种动态的情况，实现权限控制。
2024-11-26 17:21:06
1344
1
原创 webpack配置演进
打包build上测试生产的时候，为了尽量让需要上传的文件变小，就有了一个copy_modules的想法，node_nodules里的东西说不定是哪拷过来的，到自己项目最多改改package.json的dependences什么的，文件夹里多余的包，很多时候都没有同步的删除，为了让最后要上测试，生产的包没有冗余就在build对应的命令文件中增加了copyModules的功能。在项目install之后，先运行dll的命令，这样在就会生成一个文件，在之后的配置文件中配置好，就可以直接用了（相关的）
2023-03-07 19:44:59
97
原创 关于移动端H5页面的调试方法
这个是常见功能了，只是为了给自己记录下～safari (mac + iphone)系safari设置-打开Safari偏好者设置，选中“高级”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置-打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，...
2023-03-07 19:24:55
2164
原创 vuex的刷新保持
常规的vuex下的store中的参数什么的，在页面刷新后是会被清除掉的，特别不利于PC端的相关应用，想个办法来让它刷新保持或者能回来，能保持原有项目在PC端的适用性这也算是一个常规问题，有很多方法，把它存储在本地像（sessionStore、cookie、localStorage），cookie 无兼容性问题 ， 可以设置存储时间， 存储量较小， 每次请求都回携带；sessionStorag...
2023-03-07 17:50:30
162
1
原创 webpack4不兼容vux-loader
详细使用方法翻阅官网：https://vux.li/配置vux： 在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法 安装各插件 1、在项目里面安装vuxnpm install vux --save 2、安装vux-loader（必须安装）npm install vux-loader --save-dev 3、安装le...
2023-03-07 17:22:54
90
1
原创 关于padding和margin的百分比
最近随手习惯性的写了个样式margin-top: 10%; 本意是想它里上面的高度是现有父节点高度的10%，但事实并非如此。它离上面的高度始终是比预期的多出许多，才着重的研究起来这个属性的具体算法。经过各种尝试，发现这个百分比是针对的父元素的宽度，并不是高度，知道真相的我大吃一惊，所以再捋了捋。首先在dom元素的高度，大部分都是没有指定的，所以它真正的高度是由里面的内容撑起来的，也就没有所谓高度的概念，另外高度的这个属性也是不会自动继承的，除非你给它设定继承才会。所以高度这东西的不确定性太多，不太方便用
2020-06-09 11:00:02
667
原创 iview使用的一些坑
由于公司的设计偏爱iview的这种设计风格，所以在vue的道路上与iview形影不离AutoComplete最开始发现有问题是偶然的从这个组件开始的，但其实是一个select相关操作的问题，不过跟使用的机器有关。可能不同的机器对键盘的码的识别不一样，导致在某些电脑上无法使用回车、上下箭头、tab、删除键等。最后在全局统一定义键盘码才得以解决，keys.js，Vue.use(k...
2020-01-20 09:48:54
507
原创 node端日志打印 No.9
在register文件里面可以看到对应的有logconf，由于测试以及生产环境是使用pm2启动，然后日志通过pm2工具统一去打印，所以为了配合pm2对应的日志配置文件参考const envConf = process.env.NODE_ENV === 'development' ? { appender: { type: 'dateFile', filename: './...
2020-01-19 10:17:55
645
原创 node服务的部署流程演进--从打包后多文件到单文件，从命令行启动到PM2
做node层后台有一阵时间，记录一下node作为一个后台服务的部署经历的一个演进路程常规写一个入口文件（大体是注册一些事件，然后启动一个类似ngix服务的东西）然后命令行敲node 这个入口文件名，服务也算是启动起来了~但是呢，这种方法有个问题，就是命令行窗口不能关闭，关闭了，服务就挂了，开发什么的无所谓，测试生产的服务器是不可能做到这一点的，所以想了个法子，让服务后台运行，这就又进一步了...
2020-01-19 10:06:37
435
原创 页面嵌入涉及到的跨域问题常规解决方案
接到过几个需要页面嵌入的需求，基本都是在人家的网站里嵌入自家的页面。人家和自家必属于不同域，要不然就是一家人咯，就没有啥事了。主要涉及用户态打通这一问题。基本步骤大概是这样的咱家给到人家要跳转页面的地址，人家跳过来咱家的url，在这个后面会带上一个类似token的东西 然后咱家的页面拿到这个token之后，去请求接口校验这个token的有效性，同时获取到对应的用户信息。当然咱家的页面请求...
2020-01-10 09:08:32
2630
原创 说一说scss的变量的全局引用
想要建立一套完整的样式体系，使用scss肯定想要用它的变量带来的方便咯，但是之前在入口vue文件引入改样式文件之后并不会达到全局引用的效果，想要使用还是要需要的地方逐个引用，很心塞，知道有天发现了这个sass-resources-loader，问题就解决了，具体用法如下参考{ test: /\.(sa|sc)ss$/, use: [ MiniCssExtractPlug...
2019-12-26 18:09:31
1633
原创 Page Office的alert异常
从代码执行到弹出alert框之间发生了什么很难确定，取决于当时的时机，所以可能关闭PO框的操作到了一半，alert被中断了，由于这又涉及HTTP请求，就直接被挂断。alert弹出之后点击确认之后，回来之后，也不会再重复执行了。才能达到想要的效果。最近在做一个关于page office的相关项目，在打开PO框之后，各种操作被限制，被迫用回原生js的相关操作，比如提示用上了alert～将释放锁的这个操作在alert之前，并将alert的操作放到setTimeout操作中，确保释放接口有足够的时间被调用。
2019-10-30 14:26:50
171
原创 node端后台启动及功能实现
自从dev环境将node服务注册到前端端口启动，加上之后又对node端打包，还用pm2启动之后。都快忘了，单独启动node端的状态了，在此记录一下。server下当然有package.json以及对应的指令，node运行某文件，index.js内容参考。大概区别呢，就是不能直接使用es6语法，需要引入相关模块之后再使用类似import这种语法，至此就可以跑起整个node后台的所有流程了，存档一下~
2019-09-30 16:59:21
74
原创 node文件上传请求转发
功能没有问题，把node功能用起来，就有问题了，个人觉得应该是在请求处理然后转发的过程中，对请求的参数造成了影响（具体当时没有仔细去研究，有知道的可以告知一声啊~），最后解决这个问题的方法是这样的，在node端将收到的文件数据通过writeSteam转化成数据流再传给后端，如果上传请求中附有属性等数据，则最后通过formdata模块转化后整体转发。具体可参考如下：（单纯的文件上传貌似没有这个问题的）如果用node直接代理过去，文件上传，
2019-09-30 16:35:38
31
原创 脚本或PM2启动node服务
到该文件所在目录，运行./server.sh start uat类似命令操作，具体根据package.json给出的script命令。当然可以跟开发环境一样，去用某个命令运行文件启动，但是在命令窗口关闭后，相应的进程也会结束，这不适用于测试以及生产环境，所以得借助一些工具，比如PM2之类的，管理起来也比较方便。了，大概流程是这样的：当然要在服务器端安装好PM2这个工具，写好启动脚本文件咯，跟上面稍有不同~，写一个专门用来启动的文件夹bin，里面具体文件为servar.sh，其内容大致为。
2019-09-30 15:31:37
113
原创 一个即时通讯功能的大体实现（vue + socket + node）
一时心血来潮，要做一个即时通信的软件，当然是想要定制化的功能，才有这么个想法。不过在这还是只是简单的记录一下一个即时通信实现的大概流程。首先前后端都的注册好socket服务，比如前端import io from 'socket.io-client'const socket = io(process.env.IO_LINK) //process.env.IO_LINK后台的soket服务...
2019-09-30 09:44:51
982
原创 关于数据处理常用到的一些函数的区别总结（...，map， foreach，merge，assign等）
lodash常用的一个数据处理工具库，与原生函数功能类似，只是被封装过后，处理数据更友好。最近项目踩到一个坑--前提条件：有一个对象数组，并且给对象中还有值为array和object的情况。想要遍历改数组data，然后对里面的对象追个处理，希望结果：得到的数组中每个对象的有被正确处理过。1、map：data.map((item) => {doSomething(item); ...
2019-08-30 15:58:30
575
原创 vue开发常用的一些工具库
虽然没有什么大的作品呈现，但多数也算一个写vue论年轮的人了，说说自己几个用的比较顺手库vuex 状态管理https://vuex.vuejs.org/zh/guide/ state：store.state, mapState getter：store.getter, mapGetter （可带filter功能） mutation：store.commit,m...
2019-07-06 13:50:22
1246
1
原创 菜鸟的git操作记录
git checkout --track origin/branch-name： 这 两个 在本地创建和远程分支对应的分支。git branch --set-upstream branch-name origin/branch-name：建立本地分支和远程分支的关联。git reset --hard HEAD^ 撤销 commit、撤销 git add . 操作、撤销修改代码。git branch -d <name>：删除分支。
2019-07-06 13:48:21
190
1
转载 get方法下载文档
数据导出成文档，是一个常规功能： 最简单的方式就是，对应的a标签的href属性指向后台导出接口的url，参数紧跟在url的？后面注意，如果参数中涉及中文，记得encodeURI处理，兼容ie浏览器这种方法，缺点在于 该接口报错，无法进行相应处理 ie无法识别download属性，无法给文件赋中文名（想要ie中文的下载文档，后台处理后传回）如果想要自己控制请...
2019-06-17 16:39:13
857
原创 说说js原型的个人理解
显然，此时的 原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数 的指针。总结：三者的关系是，每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。我觉得原型这个东西就是发明出来给懒人用的一个属性，想要创建对象的过程简单，还能将对象属性，只定义一次就能重复使用，什么工厂模式和构造函数模式都太麻烦，所以就有了原型这个东西。通过调用构造函数产生的实例对象，都拥有一个内部属性，指向了原型对象。
2018-08-30 15:00:30
157
1
原创 样式布局flex的使用
在外层的某处有个用100vh相关定义的高度，可以在想要占满到剩下范围的地方定义display: flex;控制水平布局的显示比例，基于父元素的宽度，可以用百分比控制，也可以在子元素上用flex属性，都是1，则各占50%。说到页面布局，无外乎水平垂直，先说说水平，最开始使用最多的是float属性，但是它有后遗症，塌陷呀清除呀，最后放弃转战flex。在其中的一个或几个高度或者宽度确定的情况下，希望剩下的那个充满父元素的空间，可以在该元素上增加 flex: 1;需要谨记的是，flex是。
2018-08-16 16:21:34
561
1
原创 js操作符说明
递增和递减操作符 在应用于一个包含有效数字字符的字符串时，先将其转换为数字值，再执行加减 1 的操作。字 符串变量变成数值变量。 在应用于一个不包含有效数字字符的字符串时，将变量的值设置为 NaN。 字符串变量变成数值变量。 在应用于布尔值 false 时，先将其转换为 0 再执行加减 1 的操作。布尔值变量变成数值变量。 在应用于布尔值 true 时，先将其转换为 1 ...
2018-08-01 18:47:52
166
1
原创 js的特殊数据类型转换
最后还要注意一点:如果字符串包含的是一个可解析为整数的数(没有小数点，或者小数点后 都是零)，parseFloat()会返回整数。 如果字符串中只包含数字(包括前面带正号或负号的情况)，则将其转换为十进制数值，即"1" 会变成 1，"123"会变成 123，而"011"会变成 11(注意:前导的零被忽略了); 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值(同样，也会忽 略前导零); 如果是对象，则调用对象的 valueOf()方法，然后依照前面的规则转换返回的值。
2018-08-01 16:17:25
304
1
转载 关于移动端样式自适应方案尝试
现在移动端设备千差万别，用一套样式已经很难满足需求，先从简单的样式大小类说起，小屏手机整体偏小，大屏样式整体偏大，即根据屏幕大小自适应调整整体样式的大小。第一反应，用rem，给定一个base，这个base（一般是指html的font-size值）在程序最开始，根据屏幕大小设定好，剩下的样式大小设置都是根据这个base转化成对应rem值，那么所有的样式也就基本达到自使用了，给出一段设置base的...
2018-07-25 16:44:22
378
转载 基于css的简单动画实现
先简单说说transform，对元素进行移动（translate）、旋转（rotate）、翻转（skew）、缩放（scale）。translate是transform的一个属性而已。再者就是transition，指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，需要手动触发div{width:100px;height:100px;backgro...
2018-07-25 16:30:14
983
原创 一个获取短信验证码的组件示例
判断是否可点击，以及倒计时显示，调用示例<captcha-btn slot="right" :waitTime="waitTime" @getCaptcha="getCaptcha"></captcha-btn>这个waitTime是一个存储在全局的与电话号码绑定的时间，具体captchaBtn内容如下<template> <div
2018-07-23 17:23:55
1100
1
原创 一个购买数字输入组件的示例(基于vux-input)
由于H5页面大多做的是理财产品的一些流程，对于购买数字的输入框，需要有各种限制，逐渐形成一个组件，调用方法示例<money-input title="XX金额" :placeholder="defaultPlaceholder" :verifyErrMsg="errMsg" @change="updateMoney" ...
2018-07-23 16:13:56
470
1
转载 node下的orm类sequelize的使用
做前端的，在node出现后开始做类似后台类的操作，对于怎么操作数据库刚开始还是很慌的，找到一个工具orm，屏蔽底层的具体实现，只通过相应的对象类操作完成数据库操作，这边选定sequelize。当然是用免费的mysql数据库咯。首先肯定是根据需求在数据库建好相应的数据库以及数据表，然后用sequelize-auto将数据表生成基本的model对象，用于生成model的文件generate_mod...
2018-07-19 16:09:33
946
原创 hash模式下的微信分享
微信分享默认会在地址的末位加上一堆from什么的标识，如果路径没有给到位，在这个路径上加上这一堆之后，后面的#地址就被忽略掉了，所以呢，给到的首页的地址一定要是页面真正的地址，包括#之后的路径，要不然，分享之后打开的一直是首页。个人感觉history模式也会有相同问题（待验证），为确保 开始的地址一定要写到位。具体上测试了，出现问题，如果只是网址只给到相关目录，然后通过router自动去跳转至相关路径，首页打开没有问题，具体进入某个页面后分享，再点击打开的还是首页。
2018-07-19 10:39:26
1012
原创 WebViewJavascriptBridge H5交互
作为一个low逼公司的前端，什么app的都是奢侈，但是呢，保不齐要对接一些有逼格的公司业务，所以呢，也算是在所谓hibrid模式下，找到了一丝生存的希望大致情况是这样，需要在对接方的app中嵌入一些我方的h5页面。这套业务流程大体总结如下首先约定好，app首次跳转过来是的方式，比如url外加一个token，然后h5页面拿到这个token再去通过接口校验身份的合法性。这中间呢，还可以加上相互...
2018-07-18 17:46:31
1450
1
原创 记一次vue+node项目发版遭遇
原因：生产环境应用f5负载均衡，实际对应有两台服务器，可能存在在某台服务器登录，之后的请求去另外一台服务器的情况，导致用户态失效。原因：测试环境服务器有多个服务，每个服务配置到一个具体的文件夹，除了在nginx配置文件中配置服务目录，静态文件目录以及转发接口路径目录，保证服务的路径正确外，还需要在用。正常用node起服务，node除转发请求外，还带有用户态的维护，加解密等功能，后台java接口就是纯功能接口了~），并在对应的服务器的nginx配置中，添加对应的请求配置。，保证路由路径的正确性。
2018-07-18 14:21:17
99
1
原创 基于node的RSA加解密
RSA加解密，可加密的最长明文长度为1024bit，即128字节，但是某段明文长度小于128字节，就需要进行padding，因为如果没有padding，用户无法确分解密后内容的真实长度。由于padding的存在，占用了明文的11字节长度，最后一次能加密的明文长度就变为传说中的117字节。 附上一段运用js的rsa加解密代码： 前端加密：import { Buffe...
2018-07-18 11:02:26
1898
原创 webpack-bundle-analyzer可视化
在对应webpack.config中添加let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { plugins: [new BundleAnalyzerPlugin()]}在对应地址后面添加端口8888，即可得到一个可视化模块大...
2018-07-18 11:01:38
6577
1
原创 关于nginx前端发版配置
现有很多项目，在本地开发的时候是一个单独的项目，但是在测试或者生产环境的时候，由于服务器的限制，会有多个项目同时部署在同一台服务器上的情形。这个时候就需要在nginx的配置文件中进行相关的配置。第一种情况，整个项目会启动自己的服务，占用特定的端口。需要配置的地方如下 在http下server的外层配置upstream example { ip_hash;...
2018-07-18 10:35:22
774
1
原创 一份node项目的dev.server配置
这里的proxyTable配置，是针对前端的请求，不需要经过node端的，只能用于测试。打包后不存在该配置，所有请求直接到node端。经过改良版的dev.server配置，只需启一个端口，满足前端和node需求，具体参考、
2018-07-18 09:30:18
21
原创 No.4 一份webpack.server配置
相较于client比较简单，只是一些功能性代码，不需考虑一些前端的展示的特殊要求，这个可以认为是base。着重说下最后一个loader配置，有些modules（如验证码类）可能存在字体要求，所以在整体打包成一个文件后，需要对其一来的字体做特殊处理。同理相关的dev及build的再配置，不过主要考虑打包的配置，dev其实可以暂不考虑。但在经常涉及到有node服务的项目时，为了部署的方便，萌生了将node端代码同理打包成一个文件的想法，就有了以下操作。config在base中已经有贴出。
2018-07-18 09:29:26
37
1
原创 No.3 一份测试及生产webpack.build配置
其中utils的配置可以参考base和dev的合集，config同理。这个是基于之前文章介绍的webpack.base配置。
2018-07-17 15:08:50
25
1
原创 No.1 一份webpack base的配置文档
以上是webpack.base配置，其中的utils是这样的。再附上对应的config配置参考。
2018-07-17 15:08:30
48
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人