- 博客(44)
- 收藏
- 关注
RSS订阅原创 qiankun前端微应用项目使用说明
1、使用原因 项目越来越大，运行打包较慢（主要）。目前的前端项目使用vue架构，页面已经超过了100张，打包越来越慢，虽然已经进行了压缩处理，但是修改一个地方，重新编译全部，电脑有点带不动了。 多种业务逻辑混杂在一个系统，有时候只需要修改某个业务模块的代码，但是却要运行全部功能模块才能进行修改。 2、qiankun特点https://qiankun.umijs.org/zh/guide 技术栈无关，前端的代码框架没有限制 独立开发，独立部署。升级可以只针对某个微服务进行.
2021-07-20 14:54:45
1787
原创 Vue computed使用方法及使用原因总结
1.通过computed可以对{{}}里的数据进行处理。当然对数据进一步处理，通过写method方法也可以达到，为什么要通过computed的方式呢？这是因为computed的方法比method节约资源。 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 test计算属性会立即返回之前的计算结果，而不必再次执行函数。<div>{{test}}</div><script&g.
2020-07-31 09:55:43
3404
原创 H5js前端压缩图片
1.压缩图片是通过canvas做到的。具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸，（就是将图片尺寸都缩小达到压缩目的）【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的，所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注...
2020-02-11 15:29:45
3217
1
原创 H5 js方式实现前端视频压缩
1.项目做人脸识别，要求录制人脸读数视频后进行上传处理。但是手机上录制的视频非常大，安卓上3s的视频就有5M左右大小。所以尝试做了前端的js压缩处理。一般来说视频压缩是在服务端通过ffmpeg做压缩。但是这个据说对服务器的要求也很高。前端是不好做压缩处理的，但是也不是不可以做，性能不好而已。在github上查了下试了几种前端的压缩组件。最后我试了一个用的比较好用顺手，是轻量级的，适合H5。链接如下...
2020-02-11 15:26:04
32872
6
原创 解决前端跨域：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...
在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错：XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested网上有很多的解决办法，可以用jsonp来请求等等。这里...
2019-09-16 14:52:18
420110
10
原创 微信支付（前端流程）及遇到的坑
支付中的微信支付在上线中出了问题，反思了下原因：1.测试时因为不能在测试环境支付，所以就没有测试，自己也没有再去验证。（即使是无法测试环境测的，没有把握也还是要自己测一遍，最起码代码要全，流程假数据能走通）2.微信支付分普通浏览器支付和微信浏览器调起微信支付。其中微信浏览器调起微信支付会比较麻烦3.微信浏览器调起微信支付需要商户配置允许的支付链接，否则会提示支付的链接无效。————...
2019-08-16 16:15:56
3061
原创 maven学习总结
mavenmaven是一种管理代码的工具，具有1.下载依赖文件2.打包的功能1.先把代码打开，在setting里配置maven的setting.xml配置文件，还有仓库地址。pom.xml文件里写了依赖的库。2.点击右边边框的maven，选择download sources and documentations的选项，文件就会在后台下载3.下载结束后，编译一遍代码，没问题就说明下载...
2019-07-07 16:27:10
1082
原创 java使用Zip解压
1.使用unzip这个方法进行解压。方法代码如下，其中zipFileName是要解压的文件名，unzipDir是解压后存放的文件位置。这里有两点要注意（1）zipFileName要是文件的路径，例如文件名为test.zip，存放在F盘的mywork文件夹下，那么这里的zipFileName要为F:\\mywork\test.zip(2)如果压缩文件夹的内部有多个文件，但是in.getNex...
2019-07-07 16:23:20
759
原创 后端物理机加密项目总结
1.近期刚接触了一个物理机加密的后端项目，代码是外包的人写的，没什么注释，读起来很辛苦。2.以前只是学了java基础教程，直接一上来就是这个项目，难度非常大，超出能力了。感谢我对面的同事一直教我，希望自己尽快成长。3.总结用到的一些知识，后期慢慢补充上去我的学习总结：zookeeper redis chain链 command 前端的tiles框架 slf4j Elasti...
2019-07-06 18:57:08
522
原创 如何本地搭建sftp
项目需要本地搭建一个sftp服务器。按照网上的教程搭建了出来。安装步骤参考的链接：https://blog.csdn.net/qq_27384769/article/details/80935945安装完成运行的时候出现了让一直输密码循环的问题，解决方法参考：https://blog.csdn.net/roc08/article/details/84506118后端java如何...
2019-07-06 18:45:34
2948
原创 如何在手机上调试页面
1.PC端写完后，用nginx启动2.cmd-ipconfig ,找WLAN的IP3.手机连接电脑发出的wifi，然后访问ip地址。就可以出现了
2019-06-26 21:58:59
1035
原创 双指放大和缩放图片
<script src="js/pinchzoom.js"></script>//引入这个插件//js代码处理 $('.BigImg').each(function () { new RTP.PinchZoom($(this), {}); }); //pinchzoom.js/* Copyright (c...
2019-06-26 21:56:54
1809
原创 近期UI经验总结
1.弹框可以增加删除按钮。一般的图标可以在阿里icon上找。https://www.iconfont.cn/支持换颜色下载icon,还不用担心版权2.框框最好边角有弧度。3.图片要支持缩放和放大。4.不要给用户模棱两可的选项5.相同类型的信息可以增加分割线进行区分。...
2019-06-26 21:50:30
503
原创 JSP
这是一种前后端不分离的形式，据说很多公司都不用了。但是也有它的优势。JSP的优点：（1）基于JAVA——平台无关性算了我编不出来了，这个优点掩盖不了缺点啊啊。。。。。。我师傅说了没啥优点。凑合看看吧。。第一次接触JSP，JSP代码从库里拉下来后，想要运行，需要后端起来。1.后端采用tomcat。这个的安装教程参考https://www.cnblogs.com/marb...
2019-06-13 09:56:14
1354
原创 Vue的filter
filter我的理解是对数据的再处理函数集合，和methods类似，区别是里面专门放对于数据处理的函数。比如把5转换为$5，就是对于数据的再处理吧。一般的用法html部分用{{abc | methodA}}然后JS部分filters{methodA(val){具体的方法}}val的值就是abc的值。还有{{abc|efd|methodA}}的写法，意思时abc的值...
2019-06-11 13:53:56
1181
转载 Element-UI表格固定
参考官网。横向的进度条代码。<template> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed //固定列,默认为left,相当于fixed="left" prop="date" ...
2019-05-31 16:56:40
3232
1
原创 elementUI的form表单学习
Element-UI的form表单提供了对齐方式，是否回车通过input,设置行内表单还有比较重要的表单验证属性prop，还能增加反馈图标，后面用得着的时候再去官网扒扒看吧。Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。例如：（官网上的例子）https://cloud.te...
2019-05-31 09:30:00
868
原创 nginx配置
我的本地nginx配置：nginx.conf文件配置参数。#user nobody;worker_processes 4;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;e...
2019-05-30 09:14:30
520
原创 Webpack本地起程序
本地起程序需要nginx的支持。操作步骤：（1）从SVN或GIT上下拉代码。（2）把node_modules压缩包解压。（3）在package.json路径下使用npm install 命令，安装package.json里写的一系列依赖包。（4）使用npm run dev2起程序。这里的npm run dev2命令写在了package.json里了。package.json的scr...
2019-05-30 08:56:44
520
原创 angularJS的复选框
参考链接：http://isteven.github.io/angular-multi-select/#/configs-options链接已经写的很详细了。 <isteven-multi-select input-model="复选框里的各个选项" output-model="复选框按钮默认展示的选项" button-label="复选...
2019-05-28 14:16:41
920
原创 前端近期工作总结
1/按钮字号要适中，一般15px大小2/苹果手机会在input的地方放大，所以开头要加限制语句3/安卓手机会在input输入时导致背景图上移4/input按钮要优化，无内容时不显示清除按钮，内容输入正确后清除按钮也要不再显示5/交互区域要大，不要靠a标签跳转6/微信浏览器会出现下面的导航栏，盖住layer。iphone6/7/s都出现了，但是iphone X/XR没有7/微...
2019-05-23 10:23:50
1109
原创 微信浏览器ISO系统底部导航栏
ISO手机，在H5页面在微信浏览器打开时，发现页面本身可以被顶起来，但是该页面设置的底部弹框（采用layer写的弹框），被微信浏览器自带的底部导航栏遮挡。而且iphoneX ,iphoneXR可以被顶起来，iphone6,7,8/s都被遮住了（有钱就是爸爸）。查阅资料，有几种解决方案。最后根据项目需求，并没有采纳，修改了UI样式。。。。。总结一下网友们说的几种解决方案吧，也许以后会用得到：...
2019-05-20 16:29:41
5775
2
原创 微信浏览器安卓手机默认不显示白色背景色
发现同样的页面在同一个安卓手机中，背景颜色不一致。浏览器中背景色默认是白色，但是微信浏览器的默认背景色是偏灰色。所以要手动给body，html加上background属性。body,html{background:#ffffff}...
2019-05-20 11:04:41
2301
原创 form和button冲突
在写代码过程中发现一个很奇怪的事情，点击登录按钮的时候，居然没有出发按钮对应的ajax,显示被cancel了。而且观察url地址栏，发现url后面莫名其妙多了&username=....&password=.....查了一下才知道，当有form表单的时候，内部的调整按钮不要用button,因为button的提交也会出发form的提交，然后form表单的请求以get的形式，...
2019-05-19 20:37:07
989
转载 前端跨域报错问题
在前端用ajax访问后端的接口时，出现了提示跨域访问的错误。原因是即使端口号不一致，IP一样，也算跨域。上网差发现前端需要加上一句： <meta http-equiv="Access-Control-Allow-Origin" content="*" />虽然最后问题依然没解决。。还需要后端配置，但是估计也需要吧。。下次报跨域的错时，前端先加一句这个吧...
2019-05-15 14:06:52
3967
转载 iso手机点击input框会放大，解决方案
在用微信浏览器打开页面的时候，ISO手机出现了点击input框页面放大的效果，安卓没有发生。网上大部分的解决方案都是增加 <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">...
2019-05-15 14:03:07
2912
3
原创 前端生成二维码
1、页面生成二维码利用Jquery的插件jquery.qrcode.min.js。插件地址https://github.com/jeromeetienne/jquery-qrcode2、使用方法：（1）html中设置二维码生成的位置<div class="qrcode"></div>（2）引入两个插件<script src="qrjs/jquery...
2019-05-13 10:34:13
1269
原创 调整页面响应式@media
需要调整不同的手机响应式的css。可以利用@media例如//设置响应式宽度最大为900px时class属性为submit的font-size@media（max-width:900px）{ .submit{ font-size:10px; }}//设置响应式宽度最小为900px时class属性为submit的font-size...
2019-05-07 21:19:52
711
原创 layer插件
前端做手机页面的时候没用bootstrap，对于显示页面加载等用了layer这个插件也可以做。显示加载的代码：（有多种样式，这里用的样式很简单，具体参考https://jingyan.baidu.com/article/425e69e602978cbe15fc16b0.html） layer.load(1);layer.load();layer.load(2);在项目中使用了...
2019-04-23 10:46:21
1140
转载 chrome浏览器input自动填充颜色设为透明
项目中做登录页面，记住了账号名和密码，在chrome浏览器中自动填充了黄色的背景，我需要背景为透明。找了一些人的方案，没行得通，最后终于找到一个处理方案。方案一：背景可以为有颜色的时候（比如白色）input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}方案二：设置背景颜色为透明i...
2019-04-02 21:16:00
2635
转载 html刷新 页面
<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><meta http-equiv="X-UA-Compatible" cont...
2019-04-02 09:50:05
1475
原创 关于vue的@click传递
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下：<div @click="test($event)"> </div>然后Vue部分：methods:{ t...
2019-03-22 16:15:13
3486
原创 文字周围有横线的css
大概就是这种样式图。代码如下：<span class="line"></span>css:display: inline-block; width: 18px; border-top: 1px solid #ccc ; margin-bottom: 4px;其实还是通过css把span元素变成一个扁扁...
2019-03-22 16:08:09
628
原创 初始化页面
<script> $("li").click(function () { $("li").removeClass("active"); $(this).addClass("active"); initPicture(); changePicture(); }); funct...
2019-03-20 17:45:51
506
转载 CSS写右箭头
参考的网上的，自己做了点修改.right-arrow{ content: " "; height: 10px; width: 10px; border-width: 1.5px 1.5px 0 0; border-color: #fff; border-style: solid; ...
2019-03-20 17:41:42
2074
原创 webpack+vue-cli
最近一直在琢磨这个怎么用。。在学习了vue后，没想到还有vue全家桶：）。尝试了自己安装vue-cli和webpack的demo。我的理解是：（1）使用原因：对于大型的项目开发，使用vue-cli是会比较便捷的（我也不知道为什么，反正也没大型的经验，但是大家都这样说。。。）（2）与vue-cli打包一起用的webpack是在写完了代码后把写的一堆乱七八糟各种格式的前端代码整合成单页面h...
2019-03-18 21:31:12
1468
原创 icheck插件的使用
前端碰到了需要给input标签下的radio和checkbox设置不同的选择图片。选择用了icheck插件，想达到如下效果icheck使用方法：（1）代码中引入Jquery，icheck的CSS样式和js文件。这里我选择的是蓝色的样式，下载了官网上蓝色对应的CSS皮肤库。注意这里下载的除了blue.css文件，还有blue.png，[email protected]两个图片。文件样式如下：...
2019-03-15 14:44:55
1085
转载 VUEX
Vuex 是专门为 Vue.js 设计的状态管理库适用于构建一个中大型单页应用，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：Vuex 的状态存储是更新的。 通过显式地提交(commit) mutation改变 store 中的状态：store.commit...
2019-03-12 10:53:05
750
原创 监控键盘回车键操作登录
//监控键盘按回车，执行登录操作 document.onkeydown=function (event) { var e = event||window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode == 13){ loginVM....
2019-03-12 08:48:16
667
转载 html转为DOM-Jquery对象
//把html转换为DOM var result = parseDom(data); //把DOM转为JQuery对象 var result2 = $(result).find("header"); //把Jquery对象转换为Dom var domStr= result2.get(0);把html转为DOM的函数function parseDom(arg) {...
2019-03-08 11:24:44
1466
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人