绍棠的博客

原创 [绍棠] 利用CocoaHTTPServer实现WIFI局域网传输文件到iPhone, 实现文件上传

近日在做一个视频文件上传，其中涉及到WIFI局域网文件上传和iTunes文件导入，通过一周多的研究, 终于实现的该功能，我是用的框架是CocoaHTTPServer。具体原理是将手机作为服务器, 只要电脑和移动设备连入同一热点，即可使用电脑访问iOS服务器的页面，利用POST实现文件的上传,从而与网页端实现文件互传。iTunes文件上传:http://blog.csdn.net/happyshaotang2/article/details/51394538获取手机设备的IP地址:http://blog.

原创 [绍棠] docxtemplater实现纯前端导出word

这个.docx模板放在public文件夹里。

原创 [绍棠] Docxtemplater 模板导出word,去除未定义值所显示的undefined

【代码】[绍棠] Docxtemplater 模板导出word,去除未定义值所显示的undefined。

原创 [绍棠]让nginx可以以列表形式显示目录文件

1、编辑/etc/nginx/nginx.conf，让nginx可以以列表形式显示目录文件。2、修改了nginx的配置文件，重新加载一下nginx。

原创 [绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到

这种能保证静态资源能访问到，但是图片访问又有问题，需要再调整，比较麻烦，还会产生其它问题，history和hash模式配置还不一样。4、打包部署到nginx或其他中间件，此时要保证前缀和部署的前缀保持一致。2、定义vue路由前缀路径router/index.js。3、vue配置公共路径前缀vue.config.js。1、在环境变量.env中定义url前缀。前缀路径router/index.js。公共路径前缀vue.config.js。开发环境使用/,部署到服务器上使用./1、使用history模式。

原创 [绍棠] vue中使用lodash的debounce(防抖函数)

如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。为什么不在method中写好方法，在template中直接调用，就像这样。------------分割线-------------这两种使用方式效果一样。

原创 [绍棠] Vue 中$router.push打开新窗口

【代码】[绍棠] Vue 中$router.push打开新窗口。

原创 [绍棠]在freemarker中获取当前日期及时间比较

string("yyyyMMdd")的作用是把日期数据转成对应格式(yyyyMMdd)的字符串。在freemarker中获取当前日期：${.now}

原创 [绍棠] scrollWidth,clientWidth,offsetWidth的区别

说明：scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。该demo就在页面中放一个textarea元素，采用默认宽高显示。情况1：元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。...

原创 [绍棠] input 标签 （详解）如何去除输入时边框

input 标签 （详解）如何去除输入时边框

原创 [绍棠] Vue数据双向绑定(面试必备) 极简版

　介绍双向数据之前，我们先解释几个名词：　　1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义：　　　　对象有两种属性：（1）数据属性，就是我们经常使用的属性（2）访问器属性，也称存取器属性（存取器属性就是一组获取和设置值的函数）　　　　再看一行代码：　　　　log打印出来的如下：　　　　数据属性就是a和b；　　get和set就是关键字 它们后面各自对应一个函数，这个函数就是上面红字部分所.

原创 [绍棠] js中的宏任务与微任务

事件循环JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于Browsing Context，一种是基于Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。本文所涉及..

原创 [绍棠] nuxt asyncdata刷新不执行_nuxt.js框架踩坑指南

Nuxt官方文档简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端遇到的问题一、从上面的生命周期可以看出来created会在服务端和客户端执行，因为服务端是没.

原创 [绍棠] Nuxt引用vant+px2rem适配移动端开发

安装vantnpm i vant -S //安装vantnpm i babel-plugin-import -D //按需引入在plugins文件夹新增vant.js文件 引入Button组件为例import Vue from "vue";import 'vant/lib/index.css';import { Button} from "vant";Vue.use(Button);在nuxt.config.js文件进行配置 plugins: [ '@/..

原创 [绍棠] Vue解决V-HTML指令潜在的XSS攻击（‘v-html‘ directive can lead to XSS attack.）

什么是 XSS 攻击？XSS是跨站脚本攻击（Cross-Site Scripting）的简称。XSS是一种注入脚本式攻击，攻击者利用如提交表单、发布评论等方式将事先准备好的恶意脚本注入到那些良性可信的网站中。当其他用户进入该网站后，脚本就在用户不知情的情况下偷偷地执行了，这样的脚本可能会窃取用户的信息、修改页面内容、或者伪造用户执行其他操作等等，后果不可估量。发送到Web浏览器的恶意内容通常采用JavaScript代码片段的形式，但也可能包括HTML，Flash或浏览器可能执行的任何其他类型

原创 [绍棠] vue通信、传值的多种方式

一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: { userId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数this.$route.query.userId二、通过设置 Session Storage缓存的形式进行传递①两个组件A和B，在A组件中设置缓存orderData

原创 [绍棠] 前端小技巧

技巧一有时候读取变量属性时，他可能不是Ojbect，你引用的时候就会出现如下错误这个这个你就要判断这个变量是否为对象，如果是在如引用var obj;if(obj instanceof Object){console.log(obj.a);}else{console.log('对象不存在');}其实ES6中有简便写法，可以帮我们简短代码，从而更加明确var obj;console.log(obj?.a||'对象不存在');技巧二1,2,3,4,5,...

原创 [绍棠] vue 扫码枪读取条形码数据

扫码枪是模拟的键盘输入，所以用键盘事件window.document.onkeypress = function(e){ }.在vue项目中，可以在created/mounted中做代码如下<template> <input v-model="codeValue" placeholder="请输入条形码"/></template><script>export default { data() { return {

原创 [绍棠] nuxt asyncData 里面实现多请求

1、多个异步请求async asyncData(ctx) { let site = await ctx.app.$axios.get('/testApi' + '/query/site', { params: {} }); var siteid = site.data.data.id; let listCategory = await ctx.app.$axios.get('/testApi' + '/query/listCategory

原创 [绍棠] Vue导出页面为PDF格式，解决导出pdf模糊问题

1 、我们要添加两个模块第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdfnpm install jspdf --save2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/utils/htmlToPdf’)// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspd

原创 js-cookie中文文档

说明 API 创建 取值 删除值 命名空间 json相关 set方法支持的属性 骚操作 说明js-cookie是一个简单的，轻量级的处理cookies的js API。API创建//创建简单的cookieCookies.set('name', 'value');//创建有效期为7天的cookieCookies.set('name', 'value', { expires: 7 });//为当前页创建有效期7天的cookieCookies.set(

原创 [绍棠] Vue 导出pdf（最后：针对多个部分下载到同一个pdf中的处理办法）

基本上是如下两种：1.使用 html2Canvas + jsPDF 导出PDF， 这种方式什么都好，就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊！2.调用浏览器自身的方法。window.print() 来打印（打印时可选下载），这种方式打印出来很清楚，但纯在浏览器兼容问题。 谷歌浏览器比较好用点。两种导出pdf清晰度对比：--------------第一张图 html2canvas +jspdf；------------------------------------.

原创 [绍棠] nuxt.js获取当前路由的名称和路径

获取当前路由名称$nuxt.$route.path获取当前路由路径$nuxt.$route.name获取routerconst router = $nuxt.$router

原创 [绍棠] nuxt中scss使用并可全局使用变量

1.插件安装：npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev2.在项目的assets目录下新建一个css目录，然后在该目录下新建一个index.scss文件，用这个文件作为scss的入口文件，在这个文件里引入其他的scss即可，例如：3.nuxt.config.js中配置：module.exports { css: [ {src: '~stati..

原创 [绍棠] iView中DatePicker的表单验证问题

1. type="datetime"的验证方式：<DatePicker v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],后面添加 pattern: /.+/可验证；2. type="datera.

原创 [绍棠] 常用的 21 条 Linux 命令

一、文件和目录1. cd命令（它用于切换当前目录，它的参数是要切换到的目录的路径，可以是绝对路径，也可以是相对路径） cd /home 进入 '/ home' 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd - 返回上次所在的目录 2. pwd命令pw...

原创 [绍棠] js面向对象小结（工厂模式，构造函数，原型方法，继承）

主要内容如下：1.工厂模式2.构造函数模式3.原型模式4.继承一、工厂模式工厂模式中的函数中会创建一个对象，最后return这个对象，通过每次调用时传入的参数不同来解决创建多个相似对象的问题。 1 2 3 4 5 6 7 8 9 10 11 12 13 // 工厂模式 function creatPerson(name, age, job...

原创 [绍棠] 如何在freemarker中实现自定义计数器？

<#assign count = 0> <#list recordList as record> <#if record.isNotExcluded()> <#lt> Record ${count} <#assign count = count + 1> </#if> </#list>

原创 [绍棠]vue 富文本 v-html 点击图片 放大预览展示功能

html部分 注册方法<!-- 新增点击富文本图片放大功能 --><div class="page_right_new_detail_content" v-html="detailContent?detailContent.context:''" @click="showImg($event)">放大展示区dialog <!-- 富文本图片放大 --> <div class="imgDolg" v-s...

原创 [绍棠] Nginx基本使用

解压文件在当前文件夹下通过终端就可以操作nginx三、配置详解#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;述配置都是存放在main全局配置模块中的配置项user用来指定nginx work.

原创 [绍棠] freemarker声明变量

1、使用assign创建和替换变量（1）新建声明变量的ftlvariable.ftl：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>定义变量</title> </head> <body> <#--创建变量name-->

原创 [绍棠]doT.js

官网：https://github.com/olado/doT下载、项目（页面）中引入doT.jsdoT.js详细使用介绍使用方法：{{= }} for interpolation 赋值{{ }} for evaluation{{~ }} for array iteration 循环{{? }} for conditionals 判断{{! }} for interpolation with encoding{{# }} for compile-time evalua

原创 [绍棠] 微信小程序使用npm包的易错点

原创 [绍棠] 悬浮广告 vue版本

<template> <div class="ad"> <p>vue广告悬浮</p> <img src="../assets/u=2610250996,3671218916&fm=26&gp=0.jpg" id="img" alt=""> <button @click="params()">run</button> </div></t.

原创 [绍棠] 微信小程序网络请求 promise 封装

1. 在 utils 文件中新建一个 request.js 文件带登录验证const apiHttp = " "; // 基本路径// 请求方法function request(url, method, data, header){ // 判断 是否有登录 token data = data || {}; header = header || {}; let token = wx.getStorageSync("token"); let tokenHead = wx.

原创 [绍棠] Vue vue-print-nb实现页面打印

Vue vue-print-nb实现页面打印安装在main.js中全局引入页面中使用安装npm install vue-print-nb --save在main.js中全局引入import Print from 'vue-print-nb'Vue.use(Print);页面中使用备注：只会打印id=printMe内的网页<template> <div class="table"> <div class="tableList"> ...

原创 [绍棠] js中map和list互转

定义集合let showList = [ {name: '西游记', id: 1, content: "hhh"}, {name: '三国演义', id: 2, content: "hhh"}, {name: '水浒传', id: 3, content: "hhh"}, {name: '红楼梦', id: 4, content: "hhh"}] 将集合转成map let map = {} this.showList.forEach(row...

原创 [绍棠] swiper禁用手动拖拽

原创 [绍棠] uni-app打包APP如何让＜web-view＞腾出statusBar高度

问题<web-view>如果设了"navigationStyle" : "custom"会自动充满全部屏幕，现在，如果想在页面上面腾出statusBar高度，该怎么做？不可行方案CSS方案全部不可行。可行方案一<template> <view class="container"> <web-view :src="href"></web-view> </view></template>

原创 [绍棠 JS] 苹果ios用js的Date() 获取到的日期时间 显示NaN

ios使用如下方法获得NaN，安卓手机则是正常计算，解决方法是换个这个时间的格式new Date("2017-04-28 23:59:59").getTime()方法一换成如下方式就正常了，就是‘-’换成‘/’new Date("2017/04/28 23:59:59").getTime()方法二. 正则解决方法是将时间中的' -' 字符替成 '/' 字符 ,然后再对时间进行格式化展示var vTime = "2019-01-01 00:00:00".replace(/\-