blog
blog copied to clipboard
lin-xin
林鑫的个人博客，用于总结平时工作和学习中的经验。
## apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。 ### apply( ) apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组。 ```javascript var obj = { name : 'linxin' } function func(firstName, lastName){ console.log(firstName +...
## 前言 上传下载在 web 应用中还是比较常见的，无论是图片还是其他文件等。在 Koa 中，有很多中间件可以帮助我们快速的实现功能。 ## 文件上传 在前端中上传文件，我们都是通过表单来上传，而上传的文件，在服务器端并不能像普通参数一样通过 `ctx.request.body` 获取。我们可以用 `koa-body` 中间件来处理文件上传，它可以将请求体拼到 `ctx.request` 中。 ```js // app.js const koa = require('koa'); const app = new koa(); const koaBody...
## this 的指向 this 是 js 中定义的关键字，它自动定义于每一个函数域内，但是它的指向却让人很迷惑。在实际应用中，this 的指向大致可以分为以下四种情况。 ### 1.作为普通函数调用 当函数作为一个普通函数被调用，this 指向全局对象。在浏览器里，全局对象就是 window。 ```JavaScript window.name = 'linxin'; function getName(){ console.log(this.name); } getName(); // linxin ``` 可以看出，此时 this 指向了全局对象 window。 在ECMAScript5的严格模式下，这种情况...
微信小程序之购物车功能
## 前言 以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 ## 需求  先来弄清楚购物车的需求。 - 单选、全选和取消，而且会随着选中的商品计算出总价 - 单个商品购买数量的增加和减少 - 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 - 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) - 然后左下角的全选，需要一个字段(selectAllStatus)表示是否全选了 - 右下角的总价(totalPrice) - 最后需要知道购物车是否为空(hasList) 知道了需要这些数据，在页面初始化的时候我们先定义好这些。 ## 代码实现 ###...
## 前言 在前后端分离的开发中，通过 Restful API 进行数据交互时，如果没有对 API 进行保护，那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢？ Json Web Token 简称为 JWT，它定义了一种用于简洁、自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。JWT 可以使用 HMAC 算法或者是 RSA 的公钥密钥对进行签名。 说得好像跟真的一样，那么到底要怎么进行认证呢？  首先用户登录时，输入用户名和密码后请求服务器登录接口，服务器验证用户名密码正确后，生成token并返回给前端，前端存储token，并在后面的请求中把token带在请求头中传给服务器，服务器验证token有效，返回正确数据。 既然服务器端使用 Koa2 框架进行开发，除了要使用到 jsonwebtoken 库之外，还要使用一个...
## 前言 vue3.0-beta 版本已经发布了一段时间了，正式版本据说在年中发布（直播的时候说的是年中还是年终，网上传闻说是6月份）。嘴上说着学不动，身体却很诚实地创建一个vue3的项目，兴致勃勃地引入 vue2 插件的时候，眉头一皱，发现事情并没有那么简单。 浏览器无情地抛出了一个错误： > Uncaught TypeError: Cannot set property '$toast' of undefined 不是说兼容vue2的写法吗，插件不兼容，这是闹哪样？发下牢骚之后还是得解决问题。研究插件的代码，是这么实现的 ```js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype.$toast =...
## 前言 vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，从2016年年底第一个commit，到现在差不多两年了，GitHub上也有了 5k star，也是这些让我有了持续更新的动力，其中也踩了很多坑，在这总结一下。 github地址：[vue-manage-system](https://github.com/lin-xin/vue-manage-system) 线上地址：[blog.gdfengshuo.com/example/work/](https://lin-xin.gitee.io/example/work/)    ## 自定义图标 element-ui 自带的字体图标比较少，而且许多比较常见的都没有，因此需要自己引入自己想要的字体图标。最受欢迎的图标库 Font Awesome，足足有 675 个图标，但也因此导致字体文件比较大，而项目中又不需要用到这么多图标。那么这时候，阿里图标库就是一个非常不错的选择。 首先在阿里图标上创建一个项目，设置图标前缀，比如 el-icon-lx，设置Font Family，比如 lx-iconfont，添加需要用到的图标到项目中，我这边选择 Font class 生成在线链接，因为所有页面都需要用到图标，就直接在 index.html...
## 一、背景 在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，为保障数据传输的安全性，避免被人抓包篡改数据，除了https的应用，还需要对传输数据进行加解密。 目前常见的加密算法可以分成三类 - 对称加密算法：AES、... - 非对称加密算法：RSA、... - Hash算法：MD5、... ## 二、对称加密算法 对称加密(也叫私钥加密)指加密和解密使用相同密钥的加密算法。它要求发送方和接收方在安全通信之前，商定一个密钥。对称算法的安全性依赖于密钥，泄漏密钥就意味着任何人都可以对他们发送或接收的消息解密，所以密钥的保密性对通信的安全性至关重要。 ### 特点 - 优点：算法公开、计算量小、加密速度快、加密效率高。 - 缺点：在数据传送前，发送方和接收方必须商定好密钥，然后双方保存好密钥。如果一方的密钥被泄露，那么加密信息也就不安全了 - 使用场景：本地数据加密、https通信、网络传输等 ### AES AES：高级加密标准(Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。  密钥：用来加密明文的密码。密钥为接收方与发送方协商产生，但不可以直接在网络上传输，否则会导致密钥泄漏，通常是通过非对称加密算法加密密钥，然后再通过网络传输给对方，或者直接面对面商量密钥。密钥是绝对不可以泄漏的，否则会被攻击者还原密文，窃取数据。 在项目中需要用到AES加密时，可以使用开源的js库：[crypto-js](https://github.com/brix/crypto-js) ```js...
## 前言 Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。 ## 用户权限 想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？ Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括： - default ：不知道用户的选择，默认。 - granted ：用户允许。 - denied ：用户拒绝。 ```js if(Notification.permission === 'granted'){ console.log('用户允许通知');...
## 前言 在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 ## Orientation 这个参数并不是所有图片都有的，不过手机拍出来的图片是带有这个参数的。 旋转角度 | 参数值 ---|--- 0° | 1 顺时针90° | 6 逆时针90° | 8 180° | 3 参数为 1 的时候显示正常，那么在这些横拍显示正常，即 Orientation...