TypechoJoeTheme

香草物语

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码
搜索到 98 篇与 的结果
2024-03-22

若依系统上传图片压缩

若依系统上传图片压缩
虽然标题里面有若依,实际上所有的Vue项目都能够适用的。最近基于若依系统做点东西,若依系统本身封装了一个图片上传组件ImageUpload,但是这个组件对我来说不太适用,最主要的问题就是这个组件是自动上传的,这样就会导致我们业务数据跟附件无法做到同步,比如我们新增一个单据,点了上传图片,此时图片已经上传到服务器,但是我并没有保存单据,这样就造成了部分垃圾数据。当然不是说不能处理,只是来说更加麻烦。先来说下我们目前做的功能需求吧:基于ElementUI的el-upload上传图片为了减少图片占用的空间(目前基于阿里云OSS,这个后期介绍),我们在前端上传图片之前在不影响图片展示质量的前提下,对图片进行压缩表单数据与图片文件同步上传可以单张图片上传也可以同时上传多张图片(以下我们以多张图片上传来说明)壹、提取图片压缩公共方法在ruoyi.js公共方法中,封装图片压缩方法/** 图片压缩,默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数,base64的字符串数据 */ export function compress...
Laughing
2024-03-22

Web前端

96 阅读
0 评论
2024年03月22日
96 阅读
0 评论
2023-05-15

是否有必要白嫖jsDelivr

是否有必要白嫖jsDelivr
壹、jsDelivr是做什么的jsDelivr是一款公共免费的CDN,提供稳定的CDN,可在流量巨大的流行网站上进行使用,没有带宽限制,任何人都可以完全免费使用。jsDelivr在中国大陆也拥有超过数百个节点,因为jsDelivr拥有正规的ICP备案,解决了中国大陆的访问速度优化,实现真正的全球极速低延迟体验。贰、是否有必要白嫖我个人建议是谨慎使用。数据或者说文件,不掌握在自己手里,你永远无法得知是否由于未知的原因导致文件丢失。如果使用第三方托管的代码,如果托管的代码出现问题(比如感染木马等),可能会给自己造成不可逆的伤害。第三方库无法完全保证稳定性,就好比jsDelivr在21年还是22年底在大陆备案失效,导致大面积网站访问出现异常(这里不是说无法访问哈,主要是网站脚本、样式啥的都加载不出来)。现在像又拍云(需要加入联盟,挂个链接)、七牛云等免费CDN,对于个人网站基本也够用,没必要使用第三方的CDN。叁、个人博客的处理我之所以想替换网站整体的jsDelivr,是因为公司网络限制,导致jsDelivr无法访问,所以我也是不得不更换。目前测试下来,整站替换之后再配合上CDN,整体...
Laughing
2023-05-15

Web前端

546 阅读
0 评论
2023年05月15日
546 阅读
0 评论
2022-09-11

纯js实现html添加水印

纯js实现html添加水印
有时候出于保密等需要,我们可能需要在前端展示页面添加一些水印信息。window.onload = function () { const element = document.body; watermark(element); } // window.onresize = function () { // const element = document.body; // watermark(element); // } function watermark(element, config) { let chArr = document.body.getElementsByClassName("watermark-item"); for (i = 0; i < chArr.length; i++) { //删除元...
Laughing
2022-09-11

Web前端

813 阅读
0 评论
2022年09月11日
813 阅读
0 评论
2022-05-08

Vue2.X过渡系统

Vue2.X过渡系统
Vue2.X过渡系统过渡系统是Vue.js为DOM动画效果提供的一个特性,它能在元素从DOM中插入或移除时触发你的CSS过渡(transition)和动画(animation),也就是说在DOM元素发生变化时为其添加特尔顶的class类名,从而产生过渡效果。一、Vue2.X定义过渡动画的方法不同于Vue1.X,Vue2.x过渡系统取消了v-transion指令,新增了<transition/>内置标签,用法如下<transition name="hello"> <h1 v-if="show">你好</h1> </transition>transition标签为一个抽象标签,并不会额外渲染一个DOM元素,仅仅时用于包裹过渡元素及触发过渡行为。v-if、v-show等指令仍旧标记在内容元素上。二、transition参数2.1、nameVue根据name自动生成对应的对应的类名。name-enter、name-enter-active、name-enter-to、name-le...
Laughing
2022-05-08

Web前端

933 阅读
0 评论
2022年05月08日
933 阅读
0 评论
2022-05-04

Vue自定义指令

Vue自定义指令
Vue除了内置的v-bind、v-model、v-once、v-pre等内置指令外,我们还可以注册自定义指令,以便封装对DOM元素的重复处理行为,提高代码的复用率。指令的注册自定义指令分为两种,全局自定义指令及组件(局部)自定义指令。全局自定义指令在所有组件中都可以使用,组件(局部)自定义指令顾名思义,只能在当前组件中使用。全局自定义指令全局自定义指令通过Vue.directive(id,definition)进行注册。如下,我们定义一个自动获取焦点的自定义组件。实现功能,当页面打开时,让<input>控件自动获取焦点。<html> <head> <title></title> </head> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script> <body> <div id='...
Laughing
2022-05-04

Web前端

670 阅读
0 评论
2022年05月04日
670 阅读
0 评论
2021-11-23

JS !(非运算)详解

JS !(非运算)详解
逻辑非运算!是布尔取反操作(NOT)。作为一元运算符,直接放在操作数之前,把操作数的值转换为布尔值,然后取反并返回。下面是一些特殊操作数的逻辑非运算返回值。console.log( ! {} ); //如果操作数是对象,则返回false console.log( ! 0 ); //如果操作数是0,则返回true console.log( ! (n = 5)); //如果操作数是非零的任何数字,则返回false console.log( ! null ); //如果操作数是null,则返回true console.log( ! NaN ); //如果操作数是NaN,则返回true console.log( ! Infinity ); //如果操作数是Infinity,则返回false console.log( ! ( - Infinity )); //如果操作数是-Infinity,则返回false console.log( ! undefined ); //如果操作数是undefined,则返回true如果对操作数执行两次逻辑非运算操作,就相当于把操作数转换为布尔...
Laughing
2021-11-23

Web前端

728 阅读
0 评论
2021年11月23日
728 阅读
0 评论
2021-10-24

零基础学HTML5+CSS3---图片热区链接

零基础学HTML5+CSS3---图片热区链接
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。图像热区链接的定义方式1.设置图片首先需要在图像文件中设置映射图像名。在添加图像的<img>标记中使用usemap属性添加图像要引用的映射图像的名称。<img src="图像地址" usemap="#映射图像名称">2.定义热区图像及热区的链接<map name = "映射图像名称" id = "映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址" title="标题"> </map>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。表示...
Laughing
2021-10-24

Web前端

651 阅读
0 评论
2021年10月24日
651 阅读
0 评论
2021-10-24

零基础学HTML5+CSS3---字体

零基础学HTML5+CSS3---字体
斜体、下划线、删除线说明[alt type="success"][tag type="success"]<em>文字斜体标记[/tag][tag type="success"]<u>文字下划线标记[/tag][tag type="success"]<strike>文字删除线标记[/tag][/alt]示例代码<body style="color: mediumvioletred;"> <h3>书名:<em>《山海经》</em></h3> <h4>出版日期:<u>古代</u></h4> <h4>原价:<strike>200</strike> 促销价:300</h4> </body>文字的上标与下标说明[card-default width="100%" label="说明"][tag type="warning"]<sup>上...
Laughing
2021-10-24

Web前端

786 阅读
0 评论
2021年10月24日
786 阅读
0 评论
2021-09-12

angular基础知识之路由

angular基础知识之路由
基本使用首先从@angular/router库中导入一些常量。修改我们的app.module.ts文件,增加以下内容import { RouterModule, Routes } from '@angular/router'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';增加路由const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]修改imports增加以下内容RouterModule.forRoot(routes),修改providers增加以下内容{ provide: LocationStrategy, useClass: HashLocation...
Laughing
2021-09-12

Web前端

822 阅读
0 评论
2021年09月12日
822 阅读
0 评论
2021-09-12

angular HTTP请求

angular HTTP请求
Angular有自己的HTTP库,我们可以用它来调用外部API。 在老的版本中HTTP模块位于@angular/http ,新的版本已经迁移到@angular/common/http。导入http模块在app.module.ts中,引入http模块import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';然后注入模块@NgModule({ declarations: [ AppComponent, SimpleHttpComponent ], imports: [ HttpClientModule, HttpClientJsonpModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] })新建一个测试模块执行以下命令创建模块ng g c SimpleHttp引入HttpClient在新建模块的ts文件中...
Laughing
2021-09-12

Web前端

811 阅读
0 评论
2021年09月12日
811 阅读
0 评论
2021-09-10

简约精致苹果风格 LINUX 系统:CUTEFISHOS

简约精致苹果风格 LINUX 系统:CUTEFISHOS
近又新出了一个 Linux 桌面发行版「CutefishOS」基于 Ubuntu,桌面风格非常苹果味,根据官方的介绍,做更好的桌面操作系统、注重简洁、美观和实用性。访问百度网盘:https://pan.baidu.com/s/1KjdN-C2Vdf5OTVwKYXYh5Q (提取码: 7dx2)天翼网盘:https://cloud.189.cn/web/share?code=Qzi6biUFfi2q(访问码:sbi6)官方:https://cn.cutefishos.com2021年09月12日昨天趁着周六在家里电脑安装了一下,简单说一下体会吧,因为我上午安装的,晚上就把电脑搞崩了 ̄□ ̄||系统安装上之后,虽然是测试版,但是还是挺流畅的。整体界面比较简洁,类似Mac风格,但是感觉没那么精致。基于Ubuntu,所以Ubuntu的那套逻辑都能正常用。
Laughing
2021-09-10

Web前端

748 阅读
0 评论
2021年09月10日
748 阅读
0 评论
2021-09-08

angular监听表单变化及双向数据绑定

angular监听表单变化及双向数据绑定
监听表单变化FormGroup及FormControl都带有EventEmitter(事件发射器)用于监控表单控件的变化。要监听控件的变化,我们通过以下步骤:通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> ...
Laughing
2021-09-08

Web前端

1,664 阅读
0 评论
2021年09月08日
1,664 阅读
0 评论