![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 68
吃葡萄要吐皮
这个作者很懒,什么都没留下…
展开
-
qiankun前端微应用项目使用说明
1、使用原因 项目越来越大,运行打包较慢(主要)。目前的前端项目使用vue架构,页面已经超过了100张,打包越来越慢,虽然已经进行了压缩处理,但是修改一个地方,重新编译全部,电脑有点带不动了。 多种业务逻辑混杂在一个系统,有时候只需要修改某个业务模块的代码,但是却要运行全部功能模块才能进行修改。 2、qiankun特点https://qiankun.umijs.org/zh/guide 技术栈无关,前端的代码框架没有限制 独立开发,独立部署。升级可以只针对某个微服务进行.原创 2021-07-20 14:54:45 · 1825 阅读 · 0 评论 -
Vue computed使用方法及使用原因总结
1.通过computed可以对{{}}里的数据进行处理。当然对数据进一步处理,通过写method方法也可以达到,为什么要通过computed的方式呢?这是因为computed的方法比method节约资源。 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 test计算属性会立即返回之前的计算结果,而不必再次执行函数。<div>{{test}}</div><script&g.原创 2020-07-31 09:55:43 · 3427 阅读 · 0 评论 -
H5js前端压缩图片
1.压缩图片是通过canvas做到的。具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸,(就是将图片尺寸都缩小达到压缩目的)【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的,所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注...原创 2020-02-11 15:29:45 · 3251 阅读 · 1 评论 -
H5 js方式实现前端视频压缩
1.项目做人脸识别,要求录制人脸读数视频后进行上传处理。但是手机上录制的视频非常大,安卓上3s的视频就有5M左右大小。所以尝试做了前端的js压缩处理。一般来说视频压缩是在服务端通过ffmpeg做压缩。但是这个据说对服务器的要求也很高。前端是不好做压缩处理的,但是也不是不可以做,性能不好而已。在github上查了下试了几种前端的压缩组件。最后我试了一个用的比较好用顺手,是轻量级的,适合H5。链接如下...原创 2020-02-11 15:26:04 · 33612 阅读 · 6 评论 -
elementUI的form表单学习
Element-UI的form表单提供了对齐方式,是否回车通过input,设置行内表单还有比较重要的表单验证属性prop,还能增加反馈图标,后面用得着的时候再去官网扒扒看吧。Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。例如:(官网上的例子)https://cloud.te...原创 2019-05-31 09:30:00 · 891 阅读 · 0 评论 -
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 · 946 阅读 · 0 评论 -
前端近期工作总结
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 · 1129 阅读 · 0 评论 -
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 · 527 阅读 · 0 评论 -
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 · 525 阅读 · 0 评论 -
前端生成二维码
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 · 1277 阅读 · 0 评论 -
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 · 3301 阅读 · 1 评论 -
JSP
这是一种前后端不分离的形式,据说很多公司都不用了。但是也有它的优势。JSP的优点:(1)基于JAVA——平台无关性算了我编不出来了,这个优点掩盖不了缺点啊啊。。。。。。我师傅说了没啥优点。凑合看看吧。。第一次接触JSP,JSP代码从库里拉下来后,想要运行,需要后端起来。1.后端采用tomcat。这个的安装教程参考https://www.cnblogs.com/marb...原创 2019-06-13 09:56:14 · 1441 阅读 · 0 评论 -
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 · 1184 阅读 · 0 评论 -
近期UI经验总结
1.弹框可以增加删除按钮。一般的图标可以在阿里icon上找。https://www.iconfont.cn/支持换颜色下载icon,还不用担心版权2.框框最好边角有弧度。3.图片要支持缩放和放大。4.不要给用户模棱两可的选项5.相同类型的信息可以增加分割线进行区分。...原创 2019-06-26 21:50:30 · 506 阅读 · 0 评论 -
双指放大和缩放图片
<script src="js/pinchzoom.js"></script>//引入这个插件//js代码处理 $('.BigImg').each(function () { new RTP.PinchZoom($(this), {}); }); //pinchzoom.js/* Copyright (c...原创 2019-06-26 21:56:54 · 1827 阅读 · 0 评论 -
如何在手机上调试页面
1.PC端写完后,用nginx启动2.cmd-ipconfig ,找WLAN的IP3.手机连接电脑发出的wifi,然后访问ip地址。就可以出现了原创 2019-06-26 21:58:59 · 1046 阅读 · 0 评论 -
微信支付(前端流程)及遇到的坑
支付中的微信支付在上线中出了问题,反思了下原因:1.测试时因为不能在测试环境支付,所以就没有测试,自己也没有再去验证。(即使是无法测试环境测的,没有把握也还是要自己测一遍,最起码代码要全,流程假数据能走通)2.微信支付分普通浏览器支付和微信浏览器调起微信支付。其中微信浏览器调起微信支付会比较麻烦3.微信浏览器调起微信支付需要商户配置允许的支付链接,否则会提示支付的链接无效。————...原创 2019-08-16 16:15:56 · 3082 阅读 · 0 评论 -
解决前端跨域: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 · 423262 阅读 · 10 评论 -
前端跨域报错问题
在前端用ajax访问后端的接口时,出现了提示跨域访问的错误。原因是即使端口号不一致,IP一样,也算跨域。上网差发现前端需要加上一句: <meta http-equiv="Access-Control-Allow-Origin" content="*" />虽然最后问题依然没解决。。还需要后端配置,但是估计也需要吧。。下次报跨域的错时,前端先加一句这个吧...转载 2019-05-15 14:06:52 · 3979 阅读 · 0 评论 -
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 · 2947 阅读 · 3 评论 -
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 · 1470 阅读 · 0 评论 -
HTML抽组件:对header和footer抽取
第一种方式:用JS来抽取。把header和footer的内容用站长之家工具,从html转为JS形式,保存为footer.js。例如:<footer class="footer-dark"> </footer>document.writeln("<footer class=\'footer-dark\'>");document.writeln...原创 2019-03-08 10:55:43 · 3000 阅读 · 1 评论 -
初始化页面
<script> $("li").click(function () { $("li").removeClass("active"); $(this).addClass("active"); initPicture(); changePicture(); }); funct...原创 2019-03-20 17:45:51 · 508 阅读 · 0 评论 -
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 · 2085 阅读 · 0 评论 -
VUEX
Vuex 是专门为 Vue.js 设计的状态管理库适用于构建一个中大型单页应用,每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是更新的。 通过显式地提交(commit) mutation改变 store 中的状态:store.commit...转载 2019-03-12 10:53:05 · 769 阅读 · 0 评论 -
监控键盘回车键操作登录
//监控键盘按回车,执行登录操作 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 · 674 阅读 · 0 评论 -
icheck插件的使用
前端碰到了需要给input标签下的radio和checkbox设置不同的选择图片。选择用了icheck插件,想达到如下效果icheck使用方法:(1)代码中引入Jquery,icheck的CSS样式和js文件。这里我选择的是蓝色的样式,下载了官网上蓝色对应的CSS皮肤库。注意这里下载的除了blue.css文件,还有blue.png,blue@2x.png两个图片。文件样式如下:...原创 2019-03-15 14:44:55 · 1098 阅读 · 0 评论 -
webpack+vue-cli
最近一直在琢磨这个怎么用。。在学习了vue后,没想到还有vue全家桶:)。尝试了自己安装vue-cli和webpack的demo。我的理解是:(1)使用原因:对于大型的项目开发,使用vue-cli是会比较便捷的(我也不知道为什么,反正也没大型的经验,但是大家都这样说。。。)(2)与vue-cli打包一起用的webpack是在写完了代码后把写的一堆乱七八糟各种格式的前端代码整合成单页面h...原创 2019-03-18 21:31:12 · 1503 阅读 · 0 评论 -
文字周围有横线的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 · 634 阅读 · 0 评论 -
微信浏览器ISO系统底部导航栏
ISO手机,在H5页面在微信浏览器打开时,发现页面本身可以被顶起来,但是该页面设置的底部弹框(采用layer写的弹框),被微信浏览器自带的底部导航栏遮挡。而且iphoneX ,iphoneXR可以被顶起来,iphone6,7,8/s都被遮住了(有钱就是爸爸)。查阅资料,有几种解决方案。最后根据项目需求,并没有采纳,修改了UI样式。。。。。总结一下网友们说的几种解决方案吧,也许以后会用得到:...原创 2019-05-20 16:29:41 · 5928 阅读 · 2 评论 -
调整页面响应式@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 · 717 阅读 · 0 评论 -
微信浏览器安卓手机默认不显示白色背景色
发现同样的页面在同一个安卓手机中,背景颜色不一致。浏览器中背景色默认是白色,但是微信浏览器的默认背景色是偏灰色。所以要手动给body,html加上background属性。body,html{background:#ffffff}...原创 2019-05-20 11:04:41 · 2321 阅读 · 0 评论 -
form和button冲突
在写代码过程中发现一个很奇怪的事情,点击登录按钮的时候,居然没有出发按钮对应的ajax,显示被cancel了。而且观察url地址栏,发现url后面莫名其妙多了&username=....&password=.....查了一下才知道,当有form表单的时候,内部的调整按钮不要用button,因为button的提交也会出发form的提交,然后form表单的请求以get的形式,...原创 2019-05-19 20:37:07 · 994 阅读 · 0 评论 -
layer插件
前端做手机页面的时候没用bootstrap,对于显示页面加载等用了layer这个插件也可以做。显示加载的代码:(有多种样式,这里用的样式很简单,具体参考https://jingyan.baidu.com/article/425e69e602978cbe15fc16b0.html) layer.load(1);layer.load();layer.load(2);在项目中使用了...原创 2019-04-23 10:46:21 · 1156 阅读 · 0 评论 -
chrome浏览器input自动填充颜色设为透明
项目中做登录页面,记住了账号名和密码,在chrome浏览器中自动填充了黄色的背景,我需要背景为透明。找了一些人的方案,没行得通,最后终于找到一个处理方案。方案一:背景可以为有颜色的时候(比如白色)input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}方案二:设置背景颜色为透明i...转载 2019-04-02 21:16:00 · 2671 阅读 · 0 评论 -
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 · 1486 阅读 · 0 评论 -
关于vue的@click传递
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了,但是在vue里,this被赋予了特殊的含义,这样做并不可以。所以当碰上需要传递点击的这个元素时,可以用事件传递。在@click后面加上事件event。示例如下:<div @click="test($event)"> </div>然后Vue部分:methods:{ t...原创 2019-03-22 16:15:13 · 3568 阅读 · 0 评论 -
Vue踩的坑
在Vue方法函数里,发现如果是想执行完method1,再执行method2,method2中要用到method1对data操作的值,但是实际中发现,直接在function里nav.method1();nav.method2();会导致method2获得不到method1对data操作的值。在下面的简单例子里是可以获得的。但是实际中如果method1中执行了例如ajax函数,就会导致这个问题。因为执...原创 2019-03-07 08:55:29 · 571 阅读 · 0 评论