随笔分类 - web前端
web前端
摘要：跨域请求原理
1、通过jsonp跨域
利用在页面中创建script节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。
js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
阅读全文
摘要：textarea 换行的简单方法
textarea在内容里面使用\r\n \r \n 都不能实现换行
最简单的办法是利用html换行符
或
。
大自然
流风
飘然的风
阅读全文
摘要：js实现N个元素的排列组合及存在相同元素的处理方法
不能有相同的元素,相同号码替换成对应字母处理
阅读全文
摘要：vue运行不起来
vuejs Mac环境下npm run serve 提示 node_modules/.bin/vue-cli-service: Permission denied问题解决方案
sh: /Users/zheng/webspace/ac-complex/node_modules/.bin/vue-cli-service: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
看提示是 ./bin 目录没有权限,解决办法：
mac终端输入：chmod 777 /Users/xxx/项目根目录/node_modules/.bin/vue-cli-service 执行
再运行 cnpm run serve 就可以了
如果还是不行，则建议直接删除node_modules文件夹，然后重新 cnpm install ，再授权，试试看
阅读全文
摘要：零基础如何学习Web安全？
一. 首先你得了解Web
Web分为好几层，一图胜千言
二. 黑客兵器谱新人入门总在寻找好工具来提高效率，Web安全这块我之前放出了我的“兵器谱”。工欲善其事必先利其器嘛，而且新人用了好兵器会更有成就感的。
三. 明白“精于一而悟道”的道理不多说，请看这我的回答：对于立志在网络安全领域发展，应该如何系统学习安全知识？
四. 融入圈子多结交些靠谱的黑客
阅读全文
摘要：自动支持图片webp格式压缩，图片服务器升级webserver
webp server 是开源免费的。
图片服务器升级，自动支持webp，得先升级openresty
用go写的 webserver 请求到jpg png gif这些，再缓存起来，外面请求还是jpeg这些，实际先到go返回的webp格式，当浏览器不支持webp的才返回源文件。
提升加载时间，图片从434KB减少到340KB，1/4（25%）的压缩率。
根据 caniuse 的统计情况，主流浏览器（接近80%）都支持 webp 了，如果遇到 Safari 这样的奇葩，直接返回原图。
最重要的一点是——我们访问的 URL 可以完全不用改变，访客访问的依然是xxx.jpg ，但是得到的图片格式为：image/webp，而且体积减少了不少（25%）。
阅读全文
摘要：js获取url原有参数，增加页面select值拼接url后跳转页面，获取对象keyValue方法，get提交html5页面模版
阅读全文
摘要：对各种开发语言优劣的讨论，入门难度，IDE，大型网站并发性，java，golang，php，python，api接口，前后端分离
现在很多有高并发要求的 java c++的接口改成golang的
有个朋友公司就是把java写的接口改成golang的，听他说的是效率提高了上百倍，节省了大量服务器
java入门比较难，要达到熟练独立开发一个网站出来需要比较长的学习时间
php Python入门很容易，要做大型网站深入也很难
php Python零基础一星期就可以入门了
java你搞一个月门都没有找到
php做个小网站还是比较快的
Python做个小工具还是很好的，一个文件就可以直接运行起来了
金融相关的用java比较多，比较成熟了，招人也容易
现在流行前后端分离了
golang java 做API接口更有优势的
Python做科学计算，自动化，人工智能的更有优势
springboot springcloud 做API还是很不错的，之前的tomcat 那些容器搞得太复杂了
阅读全文
摘要：bootstrap中checkbox操作实战例子
//init val
var initwei = $('#wei').val();
$("input[name='wz']").each(function(i){
if(initwei.indexOf($(this).val()) != -1){
$(this).prop('checked', true);
}
});
$('#submitBtn').on('click', function(){
//set val
var wzstr = '';
$("input[name='wz']:checked").each(function(i){
wzstr = wzstr + $(this).val() + ',';
});
$('#wei').val(wzstr);
});
阅读全文
摘要：使用highcharts实现无其他信息纯趋势图实战实例
Highcharts去掉或者隐藏掉y轴的刻度线
yAxis : {
gridLineWidth: 0,
labels:{
//enabled:false//隐藏y轴刻度
},
}
Highcharts去掉或者隐藏掉x轴的刻度线
xAxis: {
categories: [],
tickWidth:0,
lineColor:'#ffffff',
lineWidth:0,
labels:{
enabled:false//隐藏x轴刻度
}
},
图表版权信息。显示在图表右下方的包含链接的文字，默认的文字是 Highcharts，链接是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
去掉highcharts右下角默认
阅读全文
摘要：vue3.0和2.0的区别
Vue-cli3.0于 8月11日正式发布，看了下评论，兼容性不是很好，命令有不少变化，不是特别的乐观
vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；
阅读全文
摘要：js 某个值在数组中的下标
javascript中知道一个数组中的一个元素的值，如何获取数组下标
JS 获取数组某个元素下标 函数方法
采用prototype原型实现方式，查找元素在数组中的索引值
js查找元素在数组中的位置（index值）
遍历所有数组，当数组中的数值与你期望的数值相同时返回下标即可。
阅读全文
摘要：js javascript map函数去重功能的使用实例
先上一个实战例子代码
var map = new Map();
for(var i=0; i<=9; i++){
map.set(i,i);
}
//遍历出去重后的元素值
map.forEach((value, key, self) => {
Map是一组键值对的结构，具有极快的查找速度。
阅读全文
摘要：移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端中使用 vConsole调试，移动端调试工具vconsole安装
Git地址：https://github.com/WechatFE/vConsole
vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。
目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。
手机端网页的调试工具Eruda: Console for Mobile Browsers
UI Recorder是一款零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个浏览器！
AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。
Android&Html5混合开发WebView调试必备神器DevTools，chrome浏览器调试手机端WebView
DevTools能在浏览器上调试手机中的webview代码，给手机端调试带来了极大的便利!
阅读全文
摘要：正则表达式，匹配非本站图片网址去掉img标签内容实例
在线正则表达式测试 http://tool.oschina.net/regex/#
正则表达式：<[img|IMG].*?src=[\'|\"]((?!https\:\/\/img\.zdz).*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>
重点：(?!https\:\/\/img\.zdz).* 这个表示不是本站网址的图片，如果要匹配本站的用(https\:\/\/img\.zdz).* 即去掉?!
阅读全文
摘要：vue前端面试题知识点整理
1. 说一下Vue的双向绑定数据的原理
vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调
阅读全文
摘要：web开发前端面试知识点目录整理
基本功考察，工程能力考察，内功考察，附加技能考察
阅读全文
摘要：用pdf.js实现在移动端在线预览pdf文件
1、下载pdf.js
官网地址：https://mozilla.github.io/pdf.js/
2、配置
下载下来的文件包，就是一个demo，仿照这个demo做就可以
阅读全文
摘要：android上instant app介绍 类似于微信小程序
instant app 是谷歌推出的类似于微信小程序（或者说小程序类似于instant app）的一项技术，用户无须安装应用，用完就走，同时兼备h5的便捷和原生应用的优质体验。
当用户点击链接时，通过applink去打开相应的instant app，如果之前没有打开过，则会从play store去下载并打开，整个过程一气呵成，跟浏览器打开网页，如果有缓存先读缓存，没有就去服务器loading一样
阅读全文
