知了小站 - IT人的小站 - Web前端 2022-06-10T14:06:00+08:00 Typecho https://izlzl.com/feed/atom/tag/web/ <![CDATA[升级 element-ui 2.15.7 后遇到 el-date-picker 警告问题]]> https://izlzl.com/archives/1597.html 2022-06-10T14:06:00+08:00 2022-06-10T14:06:00+08:00 知了小站 https://izlzl.com 近期把 element-ui 升级到了官网最新的 2.15.7 版本,无意间发现控制台出现了 Prop being mutated: "placement" 警告,完整警告:

l481ilgy.png

[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. 
Prop being mutated: "placement"

错误原因

锁定组件,发现是 el-date-picker 组件抛出的警告。通过在 github 上搜索,最终找到了答案

问题出在了这个 PR #21806 增加了 props placement 用来适应位置,但是之前的代码 created 时有给 placement 赋值。

this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left; 

说白了之前 placement 是 data 的对象,现在变成 props 了,然后修改就报错了

解决方案

想要解决这个问题,可以修改版本到 2.15.8

npm uninstall element-ui
npm install element-ui@2.15.8 -s

解决方案来自:https://github.com/ElemeFE/element/issues/21905

]]>
<![CDATA[vue 中 input 限制只能输入数字,允许正数与负数]]> https://izlzl.com/archives/1414.html 2022-02-20T15:10:00+08:00 2022-02-20T15:10:00+08:00 知了小站 https://izlzl.com vue 的 input 中, 限制只能输入正数与负数,完整代码如下:

<template>
<el-input v-model="number" @input="onlyNbr1" @change="onlyNbr2"/>
</template>

<script>
  data() {
    return {
      number: null
    }
  },
  methods: {
    onlyNbr1(ipt) {
      let data = String(ipt)
      const char = data.charAt(0)
      // 先把非数字的都替换掉
      data = data.replace(/[^\d]/g, '')
      // 如果第一位是负号,则允许添加
      if (char === '-') {
        data = '-' + data
      }
      this.number = data
    },
    onlyNbr2() {
      const data = String(this.number)
      // 如果只有一个负数,那么替换为 null
      console.log(data === '-')
      if (data === '-') {
        this.number = null
      }
    }
  }
}

如果有更好的实现方式,欢迎评论讨论。

]]>
<![CDATA[vue 更新 sass 版本出现大量警告的坑]]> https://izlzl.com/archives/1386.html 2021-11-24T11:07:00+08:00 2021-11-24T11:07:00+08:00 知了小站 https://izlzl.com 今天把 eladmin 项目部分依赖更新了下,其中 sass 版本号更新为 1.43.4 后出现了如下问题,项目能启动,但是伴随大量警告

kwcxhjlq.png

具体错误如下

 INFO  Starting development server...
 10% building 2/2 modules 0 activeℹ 「wds」: Project is running at http://localhost:8013/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/jie/Documents/work/me/front/eladmin-web/public
ℹ 「wds」: 404s will fallback to /index.html                                                                                                40% building 150/198 modules 48 active ...ules/element-ui/lib/mixins/migrating.jsDeprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, 5)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
489 │ $--group-option-flex: 0 0 (1/5) * 100% !default;
    │                            ^^^
    ╵
    node_modules/element-ui/packages/theme-chalk/src/common/var.scss 489:28      @import
    node_modules/element-ui/packages/theme-chalk/src/common/transition.scss 1:9  @import
    node_modules/element-ui/packages/theme-chalk/src/base.scss 1:9               @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 1:9              @import
    src/assets/styles/element-variables.scss 25:9                                root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
32 │     margin-right: #{$--tooltip-arrow-size / 2};
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 32:21         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/assets/styles/element-variables.scss 25:9                              root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
51 │     margin-right: #{$--tooltip-arrow-size / 2};
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 51:21         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/assets/styles/element-variables.scss 25:9                              root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
70 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 70:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/assets/styles/element-variables.scss 25:9                              root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
89 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 89:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/assets/styles/element-variables.scss 25:9                              root stylesheet

Warning: 33 repetitive deprecation warnings omitted.
                                                                                          98% after emitting CopyPlugin                                                      
 DONE  Compiled successfully in 19257ms                                                                                                                         10:48:14 AM
                                                                                                                                                                           
  App running at:
  - Local:   http://localhost:8013/ 
  - Network: http://10.88.145.16:8013/

最开始以为是 element-ui 版本问题,修改版本后无果。

网上找到类似问题:

https://github.com/sass/dart-sass/issues/1319

解决办法 sass 版本修改为 1.32.13

"sass": "1.32.13"
]]>
<![CDATA[利用 Nginx 的 Gzip 模块解决 Vue 首屏加载缓慢的问题]]> https://izlzl.com/archives/1260.html 2021-02-27T22:55:00+08:00 2021-02-27T22:55:00+08:00 知了小站 https://izlzl.com 通过 Nginx 的 Gize 模块拦截请求,并且对相应的资源进行压缩,已达到减少文件体积加快文件访问速度的目的,使用 Nginx 的 Gizp 模块不需要重新编译,直接开启即可。

基本配置

在 server 中加入如下代码

# 开启gzip
gzip  on;
# 低于1kb的资源不压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 4 16k;
# 压缩级别【1-9】,越大压缩率越高,同时消耗cpu资源也越多,建议设置在4左右。
gzip_comp_level 6;
# 需要压缩哪些响应类型的资源,缺少的类型自己补。
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
# 配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_disable "MSIE [1-6]\.";
# 是否添加“Vary: Accept-Encoding”响应头,
gzip_vary on;
# 设置gzip压缩针对的HTTP协议版本,没做负载的可以不用
# gzip_http_version 1.0;

查看效果

response headers 中的 Content-Encodinggzip 就代表开启成功

前后对比

未开启 Gzip 的文件大小与加载速度

开启 Gzip 后的文件大小与加载速度

前后速度提升明显

完整配置

附上完整的 Nginx https + Gzip 配置

server {
       listen 443 ssl http2;
       server_name el-admin.xin www.el-admin.xin;

       # 证书配置
        ssl_certificate  /etc/nginx/cert/el-admin-xin/el-admin.xin_chain.crt;    
       ssl_certificate_key  /etc/nginx/cert/el-admin-xin/el-admin.xin_key.key;

        # DHE密码器的Diffie-Hellman参数,需要openssl手动生成
        # openssl命令:openssl dhparam -dsaparam -out /home/nginx/cert/el-admin-vip/dhparam.pem 4096
        ssl_dhparam /etc/nginx/cert/el-admin-xin/dhparam.pem;

        # 开启OCSP Stapling,由服务器验证证书在线状态,提高TLS握手效率
        ssl_stapling on;
        ssl_stapling_verify on;

        # 开启HSTS,缓存http重定向到https,以防止中间人攻击
        add_header Strict-Transport-Security "max-age=63072000;" always;

        # 开启TLS False Start
        ssl_prefer_server_ciphers on;
    
        # 中等兼容程度,Mozilla推荐配置
        ssl_ciphers  ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    
        # 中等兼容程度,Mozilla推荐配置
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    
        # 由客户端保存加密后的session信息
        ssl_session_tickets on;
    
        # 缓存SSL
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 1d;
    
        # 长链接
        keepalive_timeout  70;
    
        #减少点击劫持,禁止在iframe中加载
        add_header X-Frame-Options DENY;

       # 开启gzip    
        gzip  on;
        # 低于1kb的资源不压缩
       gzip_min_length 1k;
       # 设置压缩所需要的缓冲区大小
       gzip_buffers 4 16k;
       # 压缩级别【1-9】,越大压缩率越高,同时消耗cpu资源也越多,建议设置在4左右。
       gzip_comp_level 4;
       # 需要压缩哪些响应类型的资源,缺少自己补。
       gzip_types text/css text/javascript application/javascript;
       # 配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
       gzip_disable "MSIE [1-6]\.";
       # 是否添加“Vary: Accept-Encoding”响应头,
       gzip_vary on;
        
        # 根目录
        location / {
          root   /usr/share/nginx/html/eladmin/dist;
          index  index.html;
          try_files $uri $uri/ @router;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
    
       location @router {
          rewrite ^.*$ /index.html last;
       }
}

server {
       listen       80;
       server_name  el-admin.xin;
       return 301 https://el-admin.xin$request_uri;
}
]]>
<![CDATA[记一次 Centos 中因为 DNS npm 安装包失败的问题]]> https://izlzl.com/archives/1218.html 2020-02-18T17:02:00+08:00 2020-02-18T17:02:00+08:00 知了小站 https://izlzl.com 在 centos 中使用 npm install 命令报错如下:

09:13:56 npm WARN network SKIPPING OPTIONAL DEPENDENCY: request to https://registry.npm.taobao.org/nan failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.org registry.npm.taobao.org:443
09:13:56 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
09:13:56 npm WARN network SKIPPING OPTIONAL DEPENDENCY: request to https://registry.npm.taobao.org/fsevents failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.org registry.npm.taobao.org:443

于是经过长达半个小时的搜索也没有找到答案,最后猜测是不是服务器网络或者host有问题

试了下 ping www.baidu.com

[root@localhost ~]# ping www.baidu.com
ping: www.baidu.com: Name or service not known

发现找不到百度的服务器,证明了这台服务器的host存在问题,于是定位到 /etc/resolv.conf 文件打开查看

[root@localhost ~]# vi /etc/resolv.conf

# Generated by NetworkManager
nameserver fd20:25f7:e485::1

添加下DNS到 resolv.conf 文件中

nameserver 114.114.114.114

保存文件,再次 ping www.baidu.com

[root@localhost ~]# ping www.baidu.com
PING www.a.shifen.com (14.215.177.38) 56(84) bytes of data.
64 bytes from 14.215.177.38 (14.215.177.38): icmp_seq=1 ttl=51 time=36.1 ms

至此问题解决

]]>
<![CDATA[前端 axios 中 qs 介绍与使用]]> https://izlzl.com/archives/1217.html 2019-12-30T21:47:00+08:00 2019-12-30T21:47:00+08:00 知了小站 https://izlzl.com 首先 qs 是一个 npm 仓库所管理的包,可通过 npm install qs 命令进行安装

地址: https://www.npmjs.com/package/qs

qs.parse()

qs.parse() 将URL解析成对象的形式

const Qs = require('qs');
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
Qs.parse(url);
console.log(Qs.parse(url));

qs.stringify()

qs.stringify() 将对象序列化成URL的形式,以&进行拼接

const Qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     projectId: "85",
     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
     datasetId: " 12564701"
   };
Qs.stringify(obj);
console.log(Qs.stringify(obj));

那么当我们需要传递数组的时候,我们就可以通过下面方式进行处理:

默认情况下,它们给出明确的索引,如下代码:

qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'

也可以进行重写这种默认方式为false

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'

当然,也可以通过arrayFormat 选项进行格式化输出,如下代码所示:

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'

在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}

uid=cs11&pwd=000000als&username=cs11&password=000000als

如上所示,前者是采用 JSON.stringify(param) 进行处理,后者是采用 Qs.stringify(param) 进行处理的。

对于JSON.stringify和JSON的使用可参见

https://blog.csdn.net/suwu150/article/details/76100120

原文地址:https://www.jianshu.com/p/67223e177aa6

]]>
<![CDATA[解决 Vue 在 History 模式部署在 Nginx 上刷新报 404 的问题]]> https://izlzl.com/archives/1215.html 2019-12-27T17:16:00+08:00 2019-12-27T17:16:00+08:00 知了小站 https://izlzl.com 教程适用于history模式,假设域名假设为:auauz.net

原配置

server {
    listen 80;
    server_name auauz.net;
    root /www/wwwroot/eladmin-web/dist;
    index index.html;
    error_page 404 /index.html;
}

修改如下

server {

    listen 80;
    server_name auauz.net;
    
    location / {
        root /www/wwwroot/eladmin-web/dist;
        try_files $uri $uri/ @router;
        index index.html;
    }
    
    location @router {
        rewrite ^.*$ /index.html last;
    }
}
]]>
<![CDATA[ES6 语法大全 export,import,for.of循环,promise等等]]> https://izlzl.com/archives/1209.html 2019-12-19T14:31:00+08:00 2019-12-19T14:31:00+08:00 知了小站 https://izlzl.com 变量
let 局部变量
const 常量
var 全局变量

字符串的拓展

let str = "123"
str.includes("1")//true  includes方法 是否包含
str.startsWith("2")//false 是否以2开头
str.endsWith("2")//false 是否以2结尾

解构表达式

//数组解构
let arr = [1,2,3]
const [x,y,z] = arr;// x,y,z对应 1,2,3 
//对象解构
const person = {
    name:"jack",
    age:21,
    language:['java','php'],
}
let {name,age,language} = person 
//自定义命名
let {name:n,age:a,language} = person 

函数的优化

//参数上面的优化=1,指当b没有值时默认为1
function test(a,b=1){
console.log(a+b)
}

箭头函数

//Demo1  单个参数
var demo1= fucntion demo1(obj){
console.log(obj)
}
箭头函数简化为: var demo1= obj =>console.log(obj);

//Demo2  两个参数
var sum =function(a,b){
    console.log(a+n)
}
箭头函数简化为: var sum = (a,b)=>console.log(obj);

//Demo3 没有参数
let sayHello = ()=>console.log("hello!");

//Demo4 代码不止一行 使用 {}
var sum = (a,b)=>{
    console.log(a+n);
    console.log(a+n)
}

//Demo5 对象的函数简写
let person ={
    name:“jeck”;
    //原来
    eat:function(food){
        console.log(this.name +food)
    }
    //箭头函数
    eat2:food=>console.log(this.name +food)
    
    //简写版
    eat3(food){
    console.log(this.name +food)
    }
}
//Demo6:箭头函数配合解构表达式
let person ={
    name:“jeck”;
    eat2:food=>console.log(this.name +food)
}
function test1(person){
    console.log(person.name);
}
//简化调用函数 使用{}传参数,传入对象
var test1=({name})=>console.log(name);
test1(person );

map和reduce函数

map 让原来的集合经过 map 中的函数 进行处理回调

let arr = ['1','2','3'];
arr.map(s=>parseInt(s))//字符串转化为内证书 

//reduce() 接收一个函数和一个初始值
第一个参数时上一次reduce的处理结果
第二个参数是数组中要处理的下一个元素
const arr = [1,20,30,40]
arr.reduce((a,b)=>a+b)

拓展运算符(三个点…)

将一个数组转为用逗号分隔的参数序列

function add(a,b){
return a+b;
}
var number = [1,2];

//数组合并
var arrs=[...[1,2,3],...[4,5,6]];//[1,2,3,4,5,6]
//将字符串转为数组
console.log([...'hello'])//['h','e','l','l','o']

promise

// 函数格式
const promise = new promise(function(resolve,reject){
    //操作
    //if(success){
        resolve(value);//成功
    }else{
        reject(error)//失败
    }
})
//执行完了在执行一些东西的话
promise.then(function(value){
    //异步回调
}).catch(function(error){
    //异常回调
})

set和map

set 只能保存不同元素,相同的元素会被忽略

let set = new set();
let set = new set([2,3,4,5]);
//map接受一个数组,数组中的元素时键值对
let map = new map([
['key','value'],
['key1','value1'],
])

for.of循环

for(let obj of h){
    console.log(obj)
}

模块化export import

// export 导出命令
calss Util{
    sum=(a,b)=>a+b;
}
export default Util
    
// import加载
import Util from './Util'

原文链接:https://blog.csdn.net/qq_35349982/article/details/103581101

]]>