前端
绍棠
生活的理想就是为了理想的生活
展开
-
[绍棠] 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模式。原创 2023-08-24 11:51:23 · 531 阅读 · 0 评论 -
[绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明:scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。该demo就在页面中放一个textarea元素,采用默认宽高显示。情况1:元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。...原创 2022-08-04 17:42:49 · 375 阅读 · 0 评论 -
[绍棠] input 标签 (详解)如何去除输入时边框
input 标签 (详解)如何去除输入时边框原创 2022-07-21 13:27:02 · 5923 阅读 · 0 评论 -
[绍棠] Vue数据双向绑定(面试必备) 极简版
介绍双向数据之前,我们先解释几个名词: 1、什么是setter、getter ? 答:首先,别误以为他们就是一会要说的get、set,我们先看一句定义: 对象有两种属性:(1)数据属性,就是我们经常使用的属性(2)访问器属性,也称存取器属性(存取器属性就是一组获取和设置值的函数) 再看一行代码: log打印出来的如下: 数据属性就是a和b; get和set就是关键字 它们后面各自对应一个函数,这个函数就是上面红字部分所.原创 2022-03-09 14:04:14 · 368 阅读 · 0 评论 -
[绍棠] js中的宏任务与微任务
事件循环JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于Browsing Context,一种是基于Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 Web Worker 也有一个独立的 Event Loop。本文所涉及..原创 2022-03-09 13:14:36 · 92 阅读 · 0 评论 -
[绍棠] nuxt asyncdata刷新不执行_nuxt.js框架踩坑指南
Nuxt官方文档简单来说,Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在:生命周期流程图,红框内的是Nuxt的生命周期(运行在服务端),黄框内同时运行在服务端&&客户端上,绿框内则运行在客户端遇到的问题一、从上面的生命周期可以看出来created会在服务端和客户端执行,因为服务端是没.原创 2022-02-16 15:48:21 · 2705 阅读 · 0 评论 -
[绍棠] 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: [ '@/..原创 2022-01-18 15:47:06 · 429 阅读 · 0 评论 -
[绍棠] Vue解决V-HTML指令潜在的XSS攻击(‘v-html‘ directive can lead to XSS attack.)
什么是 XSS 攻击?XSS是跨站脚本攻击(Cross-Site Scripting)的简称。XSS是一种注入脚本式攻击,攻击者利用如提交表单、发布评论等方式将事先准备好的恶意脚本注入到那些良性可信的网站中。当其他用户进入该网站后,脚本就在用户不知情的情况下偷偷地执行了,这样的脚本可能会窃取用户的信息、修改页面内容、或者伪造用户执行其他操作等等,后果不可估量。发送到Web浏览器的恶意内容通常采用JavaScript代码片段的形式,但也可能包括HTML,Flash或浏览器可能执行的任何其他类型原创 2022-01-14 11:18:39 · 1451 阅读 · 1 评论 -
[绍棠] 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原创 2022-01-05 11:46:06 · 297 阅读 · 0 评论 -
[绍棠] 前端小技巧
技巧一有时候读取变量属性时,他可能不是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,...原创 2021-12-23 10:26:50 · 109 阅读 · 0 评论 -
[绍棠] vue 扫码枪读取条形码数据
扫码枪是模拟的键盘输入,所以用键盘事件window.document.onkeypress = function(e){ }.在vue项目中,可以在created/mounted中做代码如下<template> <input v-model="codeValue" placeholder="请输入条形码"/></template><script>export default { data() { return {原创 2021-12-21 16:03:29 · 3881 阅读 · 1 评论 -
[绍棠] 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原创 2021-12-13 15:22:01 · 1420 阅读 · 0 评论 -
[绍棠] 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原创 2021-12-07 15:51:02 · 1543 阅读 · 0 评论 -
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(原创 2021-12-04 13:10:28 · 852 阅读 · 0 评论 -
[绍棠] Vue 导出pdf(最后:针对多个部分下载到同一个pdf中的处理办法)
基本上是如下两种:1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊!2.调用浏览器自身的方法。window.print() 来打印(打印时可选下载),这种方式打印出来很清楚,但纯在浏览器兼容问题。 谷歌浏览器比较好用点。两种导出pdf清晰度对比:--------------第一张图 html2canvas +jspdf;------------------------------------.原创 2021-12-03 17:05:20 · 287 阅读 · 0 评论 -
[绍棠] nuxt.js获取当前路由的名称和路径
获取当前路由名称$nuxt.$route.path获取当前路由路径$nuxt.$route.name获取routerconst router = $nuxt.$router原创 2021-11-17 06:00:00 · 1899 阅读 · 1 评论 -
[绍棠] 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..原创 2021-11-16 10:47:05 · 894 阅读 · 0 评论 -
[绍棠] 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.原创 2021-10-11 11:39:10 · 472 阅读 · 0 评论 -
[绍棠] 常用的 21 条 Linux 命令
一、文件和目录1. cd命令(它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径) cd /home 进入 '/ home' 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd - 返回上次所在的目录 2. pwd命令pw...原创 2021-09-29 13:05:03 · 64 阅读 · 0 评论 -
[绍棠] js面向对象小结(工厂模式,构造函数,原型方法,继承)
主要内容如下:1.工厂模式2.构造函数模式3.原型模式4.继承一、工厂模式工厂模式中的函数中会创建一个对象,最后return这个对象,通过每次调用时传入的参数不同来解决创建多个相似对象的问题。 1 2 3 4 5 6 7 8 9 10 11 12 13 // 工厂模式 function creatPerson(name, age, job...原创 2021-09-03 13:18:13 · 59 阅读 · 0 评论 -
[绍棠] 如何在freemarker中实现自定义计数器?
<#assign count = 0> <#list recordList as record> <#if record.isNotExcluded()> <#lt> Record ${count} <#assign count = count + 1> </#if> </#list>原创 2021-09-01 16:34:35 · 274 阅读 · 0 评论 -
[绍棠]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...原创 2021-08-30 17:05:25 · 863 阅读 · 0 评论 -
[绍棠] 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.原创 2021-08-17 13:46:29 · 147 阅读 · 0 评论 -
[绍棠] freemarker声明变量
1、使用assign创建和替换变量(1)新建声明变量的ftlvariable.ftl:<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>定义变量</title> </head> <body> <#--创建变量name-->原创 2021-08-13 11:18:20 · 367 阅读 · 0 评论 -
[绍棠] 微信小程序使用npm包的易错点
原创 2021-05-31 11:08:18 · 54 阅读 · 0 评论 -
[绍棠] 悬浮广告 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.原创 2021-05-21 15:38:47 · 142 阅读 · 0 评论 -
[绍棠] 微信小程序网络请求 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.原创 2021-05-18 17:46:46 · 144 阅读 · 0 评论 -
[绍棠] 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"> ...原创 2021-05-11 10:05:04 · 120 阅读 · 0 评论 -
[绍棠] 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...原创 2021-04-28 15:13:04 · 4868 阅读 · 0 评论 -
[绍棠] uni-app打包APP如何让<web-view>腾出statusBar高度
问题<web-view>如果设了"navigationStyle" : "custom"会自动充满全部屏幕,现在,如果想在页面上面腾出statusBar高度,该怎么做?不可行方案CSS方案全部不可行。可行方案一<template> <view class="container"> <web-view :src="href"></web-view> </view></template>原创 2021-03-03 13:25:50 · 400 阅读 · 0 评论 -
[绍棠] iview Select下拉框被overflow遮挡的问题
问题概述 如果你没有使用插件,没有使用别人给的组件,这个问题一般是不会出现的。但是如果你使用了别人的组件,那么你就会遇到这个问题。我这里说说我遇到的这个问题的地方,总共是2个地方。是我在使用iview的,使用select,由于父级框position: relative,并且overflow:auto,所以select下拉框的时候就被挡在父级下面(虽然滚动可以看到,但是觉得很不舒服) 是我在使用vue-treeselect的时候,这个哥们也是和上面一样,被挡在了下面。(这个不演示了,道理一样)上原创 2020-11-18 14:38:31 · 2817 阅读 · 0 评论 -
[绍棠] vue 两种Object.assign响应式修改对象方式
两种写法1. this.obj = Object.assign({}, this.obj, {k: v})(推荐写法)推荐原因: this.obj可能是父级组件传过来的prop,而为了遵循 单向数据流 的设计理念,不直接修改该数据对象,而是生成一个新的数据对象表达式右侧会生成一个新的对象,this.obj会指向一个新的引用地址(常用于浅拷贝对象)2. this.obj = Object.assign(this.obj, {k: v})表达式右侧只会修改this.obj,this...原创 2020-10-13 10:07:59 · 665 阅读 · 0 评论 -
[绍棠] Vue六种传值方式
前言:六种传值方式为:属性传值 $refs $parent 通知传值(广播传值) 本地传值 路由传值在介绍组件传值之前先明确三种组件关系:父子组件、兄弟组件、无关系组件上图关系基于:A、B组件同一时刻只存其一的情况下,其中:A是C、D、E的父组件,B是F、G、H的父组件 C、D、E是A的子组件,F、G、H是B的子组件 C和D、E是兄弟组件,F和G、H是兄弟组件。但E、F不是兄弟组件 A和B是无关系组件,E和F也是无关系组件一、属性传值1.可传值类型..原创 2020-10-09 14:08:56 · 232 阅读 · 0 评论 -
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。 首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及 DOM 。 然后Vue 开启一个异步队列,并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。vue原创 2020-10-09 14:06:47 · 637 阅读 · 1 评论 -
[绍棠] vue跳转的两种方法
1 标签跳转<router-link to='two'><button>点我到第二个页面</button></router-link>2点击事件跳转 <button @click="hreftwo" class="test-one">点我到第二个页面</button> methods:{ //跳转到第二个页面 hreftwo(){ this.原创 2020-09-30 13:20:57 · 326 阅读 · 0 评论 -
[绍棠] vue 监听两个时间插件都变化后执行
1. <DatePicker id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start" placeholder="选择日期"></DatePicker> <!-- <input cla原创 2020-09-29 13:31:25 · 1346 阅读 · 1 评论 -
[绍棠] 正则表达式
引言 正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征。比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 'b' ”,那么 'ab', 'abb', 'abbbbbbbbbb' 都符合这个特征。 正则表达式可以用来:(1)验证字符串是否符合指定特征,比如验证是否是合法的邮件地址。(2)用来查找字符串,从一个长的文本中查找符合指定特征的字符串,比查找固定字符串更加灵活方便。(3)用来替换,比普通的...原创 2020-09-24 17:42:19 · 232 阅读 · 0 评论