All posts by 龙生

vue使用lodash

一、安装

1
cnpm i lodash -S

  二、方法一 1、引入

1
2
import _ from 'lodash'
Vue.prototype._ = _

  2、使用

1
this._.debounce(this.handleClick,1000,false)

  二、方法二 1、引入

1
let _ = require('lodash')

  2、使用

1
_.debounce(this.handleClick,1000,false)

  三、vue单文件组件中使用 里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <div>
    <el-button @click="myDebounce">我的debounce</el-button>
    <el-button @click="_debounce">lodash的debounce</el-button>
  </div>
</template>
 
<script>
import { debounce } from '@/utils/util'
let _ = require('lodash')
export default {
  methods: {
    handleClick1() {
      console.log(`真正执行的函数，次数比较少：handleClick1.....`)
    },
    handleClick2() {
      console.log(`真正执行的函数，次数比较少：handleClick2.....`)
    },
    myDebounce() {
      console.log(`myDebounce.....`)
      this.DB()
    },
    _debounce() {
      console.log(`_debounce.....`)
       this._DB()
    }
  },
  created() {
    this.DB = debounce(this.handleClick1, 1000, false)
    this._DB = this._.debounce(this.handleClick2,1000,false)
  }
}
</script>

debounce测试.png 注意：以前我是在data选项里面定义DB:null，然后再methods里面初始化函数，但是需要判断‘如果有了就不赋函数，如果为空就赋’，发现比较麻烦；后来直接在created钩子里面定义，就很方便了！   作者：斐鸽传书 链接：https://www.jianshu.com/p/907e8a0ee5d7 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   05 Mar 2020
View Details

心得

前端多次调用接口，想显示最近一次的请求结果，最靠谱的做法是加个请求版本。前端维护，后端原封不动的返回。

龙生   05 Mar 2020
View Details

SecureCRT的文件上传技巧

现在我们经常会习惯性的使用windows系统，但现在开发项目和维护中经常都在使用linux服务器，以为它的性能更强、更精简。
学习大数据的同志们和维护后端的同志们，推荐一下secureCRT软件，用起来也很高大尚，以为都是用命令来操作。

龙生   04 Mar 2020
View Details

SecureCRT把本地电脑上的文件传输到Linux系统上

SecureCRT的下载地址(拿来可以直接用) 链接：https://pan.baidu.com/s/1cnopPF7f48mD1CYq6VPSuQ 密码：hjbo 首先我们先进去我们的Linu系统查看自己的ip地址如下:   我们第一次打开SecureCRT文件是这个样子 如下图: 注意:用户名不是随便填写的,需要跟你linux系统用户名一致,不然会连接不上 下面是在Linux系统下配置zookeeper  大家不感兴趣可以忽略 接下来Linux把这个压缩包解压: 运行如下 from:https://blog.csdn.net/qq_40646143/article/details/80904114

龙生   04 Mar 2020
View Details

mysql权限说明

Select_priv：用户可以通过SELECT命令选择数据。 Insert_priv：用户可以通过INSERT命令插入数据; Update_priv：用户可以通过UPDATE命令修改现有数据; Delete_priv：用户可以通过DELETE命令删除现有数据; Create_priv：用户可以创建新的数据库和表; Drop_priv：用户可以删除现有数据库和表; Reload_priv：用户可以执行刷新和重新加载MySQL所用各种内部缓存的特定命令,包括日志、权限、主机、查询和表;重新加载权限表; Shutdown_priv：用户可以关闭MySQL服务器;在将此权限提供给root账户之外的任何用户时,都应当非常谨慎; Process_priv：用户可以通过SHOW PROCESSLIST命令查看其他用户的进程;服务器管理; File_priv：用户可以执行SELECT INTO OUTFILE和LOAD DATA INFILE命令;加载服务器上的文件; Grant_priv：用户可以将已经授予给该用户自己的权限再授予其他用户(任何用户赋予全部已有权限); References_priv;目前只是某些未来功能的占位符；现在没有作用; Index_priv：用户可以创建和删除表索引;用索引查询表; Alter_priv：用户可以重命名和修改表结构; Show_db_priv：用户可以查看服务器上所有数据库的名字,包括用户拥有足够访问权限的数据库;可以考虑对所有用户禁用这个权限,除非有特别不可抗拒的原因; Super_priv：用户可以执行某些强大的管理功能,例如通过KILL命令删除用户进程,使用SET GLOBAL修改全局MySQL变量,执行关于复制和日志的各种命令;超级权限; Create_tmp_table_priv：用户可以创建临时表; Lock_tables_priv：用户可以使用LOCK TABLES命令阻止对表的访问/修改; Execute_priv：用户可以执行存储过程;此权限只在MySQL 5.0及更高版本中有意义; Repl_slave_priv：用户可以读取用于维护复制数据库环境的二进制日志文件;此用户位于主系统中,有利于主机和客户机之间的通信;主服务器管理; Repl_client_priv：用户可以确定复制从服务器和主服务器的位置;从服务器管理; Create_view_priv：用户可以创建视图;此权限只在MySQL 5.0及更高版本中有意义; Show_view_priv：用户可以查看视图或了解视图如何执行;此权限只在MySQL 5.0及更高版本中有意义; Create_routine_priv：用户可以更改或放弃存储过程和函数;此权限是在MySQL 5.0中引入的; Alter_routine_priv：用户可以修改或删除存储函数及函数;此权限是在MySQL 5.0中引入的; Create_user_priv：用户可以执行CREATE USER命令,这个命令用于创建新的MySQL账户; Event_priv：用户能否创建、修改和删除事件;这个权限是MySQL 5.1.6新增的; Trigger_priv：用户能否创建和删除触发器,这个权限是MySQL 5.1.6新增的; Create_tablespace_priv：创建表空间 ssl_type：支持ssl标准加密安全字段 ssl_cipher：支持ssl标准加密安全字段 x509_issuer：支持x509标准字段 x509_subject：支持x509标准字段 max_questions：0 每小时允许执行多少次查询 max_updates：0 每小时可以执行多少次更新  ：0表示无限制 max_connections：0 每小时可以建立的多少次连接：0表示无限制 max_user_connections：0 单用户可以同时具有的连接数：0表示无限制 plugin：5.5.7开始,mysql引入plugins以进行用户连接时的密码验证,plugin创建外部/代理用户 authentication_string：通过authentication_string可以控制两者的映射关系,(PAM plugin等,PAM可以支持多个服务名)尤其是在使用代理用户时，并须声明这一点 password_expired：密码过期 Y,说明该用户密码已过期 N相反   from:https://blog.csdn.net/jcmcom/article/details/86701048

龙生   04 Mar 2020
View Details

setTimeout在vue中的正确使用

笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑  

1
2
3
在vue的某个方法(点击后执行)
 
setTimeout(this.end(),4000);//娃娃消失

  这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出在我的格式上面 其实是支持两种调用方式：1 字符 2 函数体（文章解决方式） 解决方法如下： 1、定义一个_this暂存this 2、再改变变量的值，则生效啦 3、方法中将this存在变量_this中，此时执行setTimeout函数时，setTimeout函数内的_this就会访问到这个变量，就会得到当前对象。

1
 

 

1
 

注意⚠️: 当在vue中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。拓展知识：解决vue在setTimeout内修改this失效的问题 要想setTimeout指向正确的值，可以使用如下方法： 1、使用箭头函数

1
2
3
4
5
6
7
8
9
export default {
 methods: {
  start: function () {
   setTimeout(() => {
    this.end()//娃娃消失
   }, 4000);
  }
 }
}

此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。 码字不易，对大家有用最佳 from:https://blog.csdn.net/qq_27295403/article/details/83375574

龙生   03 Mar 2020
View Details

http协议的Request Payload 和 Form Data 的区别

概述 我正在开发的项目前端和后端是完全独立的，通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务。昨天发现，我前端执行 post 请求，后台 springmvc 的 @RequestMapping 接收不到对应的请求参数。开始我以为是我 proxy 配置有问题，导致 post 参数不能传到后台。然而，并不是这样… proxy 配置如下： 前端代码： java 后台代码： Request Payload VS Form Data 前端请求 我看了前端发起的请求，请求正文并不是我熟悉的 Form Data，而是 Request Payload。如图注意下面两个请求的 Content-Type 的区别。 Request Payload 请求 Form Data 请求 了解这两个的区别之前，我们先回顾下 HTTP 请求报文格式： Request Payload 大概格式如下，请求头部的 Content-Type: application/json，并且请求正文是一个 json 格式的字符串 Form Data 大概格式如下，请求头部的 Content-Type: application/x-www-form-urlencoded，并且请求正文是类似 get 请求 url 的请求参数 后台处理 对于 Request Payload 请求， 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容 对于 Form Data 请求，无需任何注解，springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean，且通过 request.getParameter(…) 能获取请求参数   解决方案 综上，我在前端选择使用 Form Data 的方式来发起请求，使用 qs 库将 json 对象转化为字符串 (如 {name:’dahuang',age: 11} 转化为 name=dahuang&age=11)。 之前我以为 axios 会自动根据你的请求正文格式来选择发起 Form Data 还是 Request Payload 请求，但是执行 delete 操作时，如图的 Content-Type 却是 text/plain […]

龙生   03 Mar 2020
View Details

axios同步请求

一般使用axios进行数据请求就是要使用异步请求，因为项目需求，需要同步请求，所以async+await了解一下: async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用 基本用法就是这样的：

1
2
3
4
5
methods: {
    async funA(){
        var res =  await axios.post('') //这里的res就是axios请求回来的结果
    }
}

  我这边是用在项目里的 common.js

1
2
3
async addImg(file, config) {
    return await axios.post(path.addImage, file, config);
  }

  vue页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
methods:{
async upload() {
      var self = this;
      var formData;
      for (let i = 0; i < this.imgList.length; i++) {
        const img = this.imgList[i];
        formData = new FormData();
        formData.append("file", img);
        formData.append("type", "goods_grade");
        console.log(formData.getAll("file"));
        await this.$api.common
          .addImg(formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.uploadSuccess = true;
              this.childrenImgs.push(res.data.result);
              this.$emit("change", this.childrenImgs);
            } else {
              this.$message({
                type: "warning",
                message: res.data.message
              });
            }
          });
      }
    }
}

  注意事项 如果同步请求是封装在其他函数中，那么每一个函数都需要做成异步函数。如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
methods: {
  fun1: async function () {
    await axios.get('url)
  },
  fun2: async function () {
    ...
    await this.fun1()
    ...
  },
  fun3: async function () {
    ...
    await this.fun2()
    ...
  },
}

  from:https://blog.csdn.net/liuy_1314/article/details/98483792

龙生   03 Mar 2020
View Details

vue获取URL中的参数

1   获取?后面的参数 http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22 获取参数方法     let id = this.$route.query.username 2 获取不带?的URL中的参数 http://192.168.1.12:8080/#/home/newsinfo/234 在路由中配置路由 { path: '/home/newsinfo/:id', component: Newsinfo } .vue页面设置 <template> <router-link :to="'/home/newsinfo/' + item.id"> </template> 获取参数方法    let id = this.$route.params.id ———————————————— 版权声明：本文为CSDN博主「woaizhuzhuxia521521」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/woaizhuzhuxia521521/article/details/83619520

龙生   02 Mar 2020
View Details

浅谈php中使用websocket

在PHP中，开发者需要考虑的东西比较多，从socket的连接、建立、绑定、监听等都需要开发者自己去操作完成，对于初学者来说，难度方面也挺大的，所以本文的思路如下：
1、socket协议的简介
2、介绍client与server之间的连接原理
3、PHP中建立socket的过程讲解
4、用一个聊天室作为实例详细讲解在PHP中如何使用socket

龙生   01 Mar 2020
View Details
1 … 130 131 132 … 410