前端
文章平均质量分 51
haogemr
这个作者很懒,什么都没留下…
展开
-
结合 express 实现jsonp跨域请求和post跨域请求
结合 express 实现jsonp跨域请求和post跨域请求原创 2023-03-08 23:43:37 · 350 阅读 · 0 评论 -
利用 socket.io 实现前后端实时交互
利用 socket.io 实现前后端实时交互原创 2023-03-07 19:52:33 · 856 阅读 · 0 评论 -
用vue实现虚拟列表
vue 实现虚拟列表原创 2023-03-02 14:20:34 · 193 阅读 · 0 评论 -
npm 发布vue插件并使用
npm 发布vue插件并使用原创 2022-11-04 15:41:52 · 108 阅读 · 0 评论 -
node使用express快速搭建服务器部署html项目
node使用express快速搭建服务器部署html项目原创 2022-10-29 20:55:56 · 920 阅读 · 0 评论 -
Vue 通过 bus全局事件总线 实现兄弟组件传参
参考博客:vue中bus中央事件总线的使用1. 在/src/assets/js下创建一个bus.js文件,内容如下import Vue from 'vue'export default new Vue()2. 在需要用到的A、B两个组件中引入import { Bus } from 'bus.js'3. 在A组件中定义要调用B事件的bus事件名Bus.$emit('refresh', '111') //两个参数,一个是方法名,一个是要传的参数4. 在B组件中监听该方法crea原创 2021-01-07 20:34:45 · 683 阅读 · 0 评论 -
利用 node Express 框架实现get,post请求的前后端交互
body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。node后台代码 node.js。启动后台 node node.js。原创 2019-04-25 19:52:02 · 1337 阅读 · 2 评论 -
vue-cli2项目引入静态文件,每次打包时添加时间戳,防止浏览器缓存
vue-cli2项目引入静态文件,每次打包时添加时间戳,防止浏览器缓存原创 2022-09-29 16:36:55 · 3033 阅读 · 0 评论 -
js控制多个滚动条联动显示,以及解决滑动鼠标滚轮导致的问题
【代码】js控制滚动条联动显示,以及解决滑动鼠标滚轮导致的问题。原创 2022-08-31 17:32:43 · 878 阅读 · 0 评论 -
js 实现复制可点击的超链接到剪切板
js 实现复制可点击的超链接到剪切板原创 2022-07-08 17:10:25 · 744 阅读 · 0 评论 -
HTML5 常用属性 和 方法
HTML5 常用属性 和 方法原创 2022-05-31 21:31:12 · 132 阅读 · 0 评论 -
vue使用国际化插件i18n,如果找不到对应的语言,默认显示指定的语言
在配置i18n时,增加如下配置项即可:const messages = { en: { message: 'hello world' }, ja: { // 没有翻译的本地化 `message` }}const i18n = new VueI18n({ locale: 'en', //设置语言为 ‘en’ fallbackLocale: 'en', //如果没有找到要显示的语言,则默认显示 ‘en’ silentFallbackWarn:true, //控制原创 2021-12-27 19:00:35 · 3525 阅读 · 0 评论 -
Vue使用html2canvas将页面转化为图片
安装npm install --save html2canvas引入import html2canvas from "html2canvas"使用html2canvas(this.$refs.mydDiv).then(canvas => { //兼容ie if (navigator.msSaveBlob) { let blob = canvas.msToBlob(); return navigator.msSaveBlob(bl.原创 2021-12-10 14:03:35 · 1053 阅读 · 0 评论 -
父页面列表通过window.open打开的子页面,子页面处理完毕刷新父页面(跨域情况下)
1. ie8以上子页面在处理完毕后通过 postMessage 发送消息window.opener.postMessage('freshen', '*');父页面监听window.addEventListener('message', e => { if(e.data === 'freshen') { //刷新列表的方法 }})2. ie8及以下父页面把刷新方法绑定在window上 window.freshen = () => { //刷新列表的方法 }原创 2021-07-21 14:27:53 · 746 阅读 · 0 评论 -
vue-cli 通过多入口实现pc端和移动端在一个项目里
在项目根目录,复制index.html,改为mobile.html,同时把mobile.html 里的id 改为 mobile复制main.js 和 app.vue, 在同级目录下改为mobile.js,mobile.vue,同时修改里边的文件引用和new Vue 时的el绑定为mobile修改webpack.base.conf.js,添加mobile入口修改webpack.dev.conf.js,引入mobile.html修改webpack.prod.conf.js..原创 2021-04-27 19:30:35 · 1192 阅读 · 0 评论 -
elementUi滚动条的使用及设置滚动条一直显示
elementUi滚动条的使用及设置滚动条一直显示原创 2021-04-27 10:04:00 · 11338 阅读 · 0 评论 -
vue-cli 把 px 转换为 rem的几种插件,及过滤文件
安装安装px2rem-loadernpm i px2rem-loader -S配置在 /build/utils.js里添加const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 //1rem = 37.5px,如果做手机端这个值要与手机屏幕在375时设置的根字体大小一样 }}const loaders = options.usePostCSS ? [cssLoader, postc原创 2021-04-06 18:50:21 · 2740 阅读 · 0 评论 -
用 flex 和 瀑布流 解决高度不同的元素浮动导致页面混乱问题
当元素的高度各不相同时并且设置了浮动,页面展示如下: flex布局瀑布流布局瀑布流动态加载图片flex布局红框所画图片在第一行放不下,属于第二行的元素,但是由于浮动的特性,导致它出现在了这个位置,如果想让它另起一行顶头展示,可以使用flex布局,在父级元素上设置:display: flex;flex-wrap: wrap;子元素的浮动删除不删除都行,因为父级设置flex,子元素浮动自动失效,效果展示如下:瀑布流布局瀑布流展示参考博客:javascript实现瀑布流动态加载图片原理通原创 2020-06-16 18:49:48 · 4213 阅读 · 0 评论 -
React 设置默认打开浏览器和端口,反向代理跨域
如果是通过creat-react-app构建的项目,以下操作都是在package.json中设置的设置默认打开浏览器及端口需要设置scripts的start选项设置默认打开谷歌浏览器"start": "set BROWSER=chrome&& react-scripts start"设置关闭默认打开浏览器"start": "set BROWSER=none&& react-scripts start"设置默认打开端口"start": "set原创 2021-01-09 19:04:52 · 1171 阅读 · 0 评论 -
js 单页面及不同页面监听 storage 改变
同一浏览器打开了两个同源页面其中一个网页修改了localStorage另一网页注册了storage事件网页A:监听了storage事件:window.addEventListener("storage", function (e) { alert(e.newValue); });网页B:修改了localStoragelocalStorage.setItem...原创 2019-03-14 17:29:59 · 1931 阅读 · 0 评论 -
解决:element-ui 日期控件在 ie 浏览器上赋值无法正常显示
代码:<un-button @click="changeDate">改变时间</un-button><el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" ></el-date-picker>data(){ return { value:"" }}methods: { chan原创 2020-12-24 13:58:05 · 2065 阅读 · 0 评论 -
js 时间按需要格式转换函数
在时间对象的原型上绑定方法Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 ...原创 2019-04-23 21:37:54 · 1803 阅读 · 0 评论 -
linux 服务器上更新增量包
获取增量包获取git上两个版本之间增量包git archive -o 文件夹名字 master $(git diff 新提交的版本号 之前提交的版本号 --name-only)例如:git archive -o update.zip master $(git diff 5b0e63e7f8b5b114b150da6a89a2edd729a8d780 08749eca27bf5b044f190d86463a0a2db1704d6a --name-only)在项目根文件夹里执行此命令就会生成一个u原创 2020-12-04 20:59:48 · 639 阅读 · 0 评论 -
Vue中使用less以及启动报错解决方案
安装lessnpm install less less-loader -D配置less在build/webpack.base.conf.js 中 mudule.rules 中添加:{ test: /\.less$/, loader: "style-loader!css-loader!less-loader"}使用less在vue 文件中的style标签上加上 lang=“less”,即可使用:如果启动后报错,如下图所示:原因是由于less-loader安装的版本过高,可以原创 2020-10-30 12:35:36 · 1493 阅读 · 1 评论 -
解决 vue-cli 打包后图片路径获取不到的问题
摘抄博客:vue-cli打包后图片路径取不到的问题1. 第一步在config / index.js 文件中把assetsPublicPath 修改为 ./2. 第二步在 build / webpack.prod.conf.js 文件中,在output里增加 publicPath: './'3. 第三步虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url("../../assets/images/logo-index.png") no-repeat;转载 2020-10-15 20:04:50 · 1943 阅读 · 1 评论 -
js 通过navigator.userAgent 判断不同类型浏览器
摘抄博客:js 不同浏览器的类型判断 navigator.userAgent 通过navigator.userAgent来进行浏览器类型判断判断QQ浏览器、QQ APP内置浏览器 和 微信 APP内置浏览器不同浏览器的navigator.userAgent通过navigator.userAgent来进行浏览器类型判断// 判断浏览器内核、手机系统等,使用 browser.userAgent.mobilevar browser = { userAgent: function () {转载 2020-10-15 19:19:28 · 2331 阅读 · 0 评论 -
js 同源页面间通信 storage 和跨域页面间通信 postMessage
同源页面间通信,storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题同源页面间通信,storage事件监听参考博客:h5 storage事件监听介绍当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发,所以满足触发监听的条件有三个:同一浏览器打开了两个同源页面其中一个网页修改了localStorage另一网页注册了storage事件注意:在同一个网页修改本地存储,又在同一个网页监听,.原创 2020-09-08 20:32:43 · 4311 阅读 · 0 评论 -
HTML5 拖拽换位(drag & drop)
draggable属性在HTML5标准中,为了使元素可拖动,把draggable属性设置为true。文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true。图片和链接按住鼠标左键选中,就可以拖放。文本只有在被选中的情况下才能拖放。<div draggable="true" id="div"></div>draggable 属性有三个值:true: 可以拖动false: 禁止拖动auto: 跟随浏览器定义是否可以拖动在元素拖动过程原创 2020-08-28 09:38:07 · 1428 阅读 · 0 评论 -
js 通过 fetch 请求数据
fetch是一种原生 js 对 HTTP 数据请求的方式,是 XMLHttpRequest 的一种更理想的替代方案Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应,它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源使用例子:一般请求:fetch(url, { method: "POST", body: JSON.stringify(data), headers: {转载 2020-08-17 11:21:27 · 6031 阅读 · 1 评论 -
git操作中出现Unlink of file ‘......‘ failed. Should I try again
出现这种情况,大多数原因是某个程序占用,这时先关闭程序,然后输入y即可。如果关闭相关程序还是不能解决问题,可输入以下git 命令解决:git gc --autogit repack -d -l原创 2020-07-06 09:55:00 · 1868 阅读 · 1 评论 -
浏览器窗口切换(从一个页面切换到另一个页面并且不刷新)
从一个页面跳转到一个浏览器打开过的页面window.open("javascript:;", name);name 即要跳转到页面的 window.name。如果在A页面里通过 window.open 打开一个新页面 B ,那么在B页面内可通过window.opener.name 拿到A页面的 window.name 去跳转到A页面,即:window.open("javascript:;", window.opener.name);...原创 2020-05-11 11:08:50 · 7043 阅读 · 0 评论 -
git切换到别的分支,暂时保存当前分支的修改(不进行add 和commit)的方法 git stash
简单的做法复杂的做法删除版本简单的做法第一步把修改的代码储藏起来git stash第二步将git stash栈中最后一个版本取出来git stash pop复杂的做法可以在储藏的时候添加储藏信息,然后选择性的把某个版本取出来第一步git stash save “修改的信息"第二步git stash list //查看所有储藏的版本git stash pop st...原创 2019-05-21 19:36:30 · 2770 阅读 · 1 评论 -
table 表格拖动改变列宽
参考博客:前端页面实现table可拖动改变列宽引入jQuery和colResizable的js文件,colResizable支持表格拖动改变列宽,但基于jQuery(1)colResizable下载:http://www.bacubacu.com/colresizable/#rangeSlider(2)引入文件:<script src="https://code.jquery.com...转载 2020-03-05 16:49:42 · 2428 阅读 · 0 评论 -
js 下载各种类型的文件到本地,和base64流的图片下载(包括IE)
通过a标签下载使用js或者jq 都可以,这里演示一下jq的用法:第一种//fileType 是需要下载的文件类型 如txt格式传入text/plain,doc格式传入application/msword 等//fileText 是文件内容//fileName 是下载文件的名字function downloadFile(fileType, fileText, fileName) { ...原创 2020-01-17 17:19:09 · 1504 阅读 · 0 评论 -
L2Dwidget 添加动漫人物,点击出现文字向上渐变隐藏,鼠标滑动出现气泡
官网:https://www.npmjs.com/package/hexo-helper-live2d下载各种动画model:https://github.com/xiazeyu/live2d-widget-models代码:<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Ty...转载 2020-01-15 20:15:44 · 3796 阅读 · 0 评论 -
js实现一个html页面引入另一个html页面
通过jq的load方法引入原生js的object标签引入iframe引入import引入(head中引入文件,script中加载内容)通过jq的load方法引入<body> <div id="div"></div> <script> $("#div").load("index.html"); <...原创 2019-05-05 17:27:58 · 33350 阅读 · 5 评论 -
js排序的几个常用方法
js排序的三个常用方法快速排序冒泡排序选择排序快速排序function sort(arr) {if (arr.length &amp;amp;amp;amp;lt;= 1) {return arr;}var text = arr[0].age;var leftArr = [];var rightArr = [];for (var i = 1; i &amp;amp;amp;amp;lt; arr.length; i++) {if (ar原创 2019-03-13 17:31:33 · 1282 阅读 · 0 评论 -
利用JQuery操作iframe父页面、子页面的元素和方法
在iframe中查找父页面元素的方法: $('#id', window.parent.document)在父页面中获取iframe中的元素方法: 1、$(this).contents().find("#suggestBox") 2、$("#objid",document.frames('iframename').document)在iframe中调用父页面中定义的方法和变量...原创 2019-03-14 17:18:29 · 2153 阅读 · 0 评论 -
jq 获取下拉框的值和value
误区: 一直以为jquery获取select中option被选中的文本值,是这样写的: $("#s").text(); //获取所有option的文本值实际上应该这样: $("#s option:selected").text(); //获取选中的option的文本值获取select中option的被选中的value值, $("#s"...原创 2019-03-14 12:18:04 · 22956 阅读 · 0 评论 -
js 数组或对象浅拷贝深拷贝的几种方法
第一种 function deepClone(obj){ var str,newObj = obj instanceof Array? [] : {}; if(typeof obj !== 'object'){ return; }else if(window.json){ ...原创 2019-03-13 17:35:59 · 18024 阅读 · 2 评论