2020年3月

在使用table组件时 遇到了一个问题
需求时点击行元素时 为当前行添加一个激活状态
此时 需要用到自定义行customRow

官方文档

customRow 用法 #
适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。

<Table
customRow={(record) => {
return {
  props: {
    xxx... //属性
  },
  on: { // 事件
    click: (event) => {},       // 点击行
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {},  // 鼠标移入行
    mouseleave: (event) => {}
  },

};
)}
customHeaderRow={(column) => {
return {
  on: {
    click: () => {},        // 点击表头行
  }
};
)}
/>

介绍的相对来说 太过于笼统
以下是我的代码

<template>
  <div class="outer">
      <a-table :customRow="row" :rowClassName="choose" :columns="columns" :dataSource="data">
        <a slot="name" slot-scope="text">{{text}}</a>
      </a-table>
    </div>
</template>

<script>
import Table from "ant-design-vue/lib/table";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
];
export default {
  name: "Test",
  components: {
    aTable: Table
  },
  data() {
    return {
      data,
      columns,
      key: data[0].key
    };
  },

  methods: {
    row(record){
      const that=this;
      return {
        on:{
          click(){
            that.key=record.key;
          }
        }
      };
    },
    choose(record) {
      if (record.key === this.key) {
        return "current";
      } else {
        return "";
      }
    }
  }
};
</script>
<style>
.outer {
  width: 600px;
  margin: 0 auto;
}
.current {
  background: pink;
}
</style>

customRow用来自定义行,使用rowClassName配合 即可实现table组件行动态添加类名 从而实现行激活/选中的效果

1.防抖

所谓防抖,就是执行回调推迟一段时间再执行,如果这段时间没有再次触发这个函数,那就执行,否则就重新计算时间。

所谓节流,一段时间内连续多次调用,只执行一次。

Web­Assembly 1.0版本已经被FireFox,Chrome,Safari,Edge这四款主流的浏览器所支持

WebAssembly(简称Wasm)是基于堆栈虚拟机的二进制格式的指令。Wasm被设计为一种可移植的,旨在将高级语言(如C/C++ + RUST),编译成为可以在Web上部署的客户端和服务器应用程序。

mongod --dbpath=/data/db --logpath=/var/log/mongodb/mongodb.log --bind_ip=0.0.0.0 --fork

--dbpath:db文件存放路径 --logpath 日志文件存放路径 --bind_id 绑定IP,0.0.0.0即不限制 --fork 以fork方式运行

mongod --config=/etc/mongod/mongod.conf

--config:配置文件存放路径 指定配置文件启动MongoDB服务

9F866257-135B-426D-A919-23D2E8EE4830.png#1 生么是HTTPS?
以下概念来自百度

HTTPS (全称:Hyper Text Transfer Protocol over SecureSocket Layer),是以安全为目标的 HTTP 通道,在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL 层,HTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层(在 HTTP与 TCP 之间)。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯,例如交易支付等方面。

2 为什么要用HTTPS

简而言之,那就是为了更安全。因为HTTP都是明文传输的,很多敏感信息容易被他人截取。就拿我遇到情况而言,前几年在在开发项目中就曾经遇到过这样的情况。站点被挂上莫名其妙的东西,上线后的项目会莫名其妙的跳转到支付宝领红包的界面,有时还会出现乱七八糟的广告,但是这个问题却不能稳定的重现。经过排查,发现某个JS文件在请求的时候,文件内容会随机变化。才意识到,资源被劫持了,一开始还以为是CDN的锅,后来发现可能是某些ISP,或者他们的运维人员搞得鬼,用这种隐蔽方式非法获利。开启HTTPS就能完美解决这以问题。吃一堑长一智,自此以后所有新上项目,都部署了SSL证书。

3申请一个免费证书

免费申请证书地址:https://freessl.cn/ 如果没有账号注册一下,有的话直接登录

进入freessl.cn 登录后输入域名,选择TrustAsia(证书有效期一年)

a.png

点击创建
b.png
然后使用照默认值即可