戴某人的博客

0. 前言：自从HTML5里的WebSocket出现后，彻底改变了以往Web端即时通讯技术的基础通道这个“痛点”（在此之前，开发者们不得不弄出了诸如：短轮询、长轮询、Comet、SSE等技术，可谓苦之久矣…），如今再也不用纠结到底该用“轮询”还是“Comet”技术来保证数据的实时性了。 1. 什么是WebSocketWebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器都已经支持了。其是基于TCP的一种新的网络协议，是 HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议，它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。 WebSocket特点： WebSocket可以在浏览器里使用 支持双向通信 使用简单 支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等） 较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。 与 HTTP 协议有着良好的兼容性。默 ...

0. 前言：在web中，http请求一般都是浏览器发起的，所以我们这里所说的http的缓存策略，其实也就是浏览器端的缓存策略，因为http本身只是一种协议，真正实现缓存还是要靠浏览器（其实就是浏览器指定存储在硬盘下。） 我们使用 HTTP 缓存，通过复用缓存资源，减少了客户端等待时间和网络流量，同时也能缓解服务器端的压力。可以显著的提升我们网站和应用的性能。虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的，HTTP 缓存是一个 web 性能优化的重要手段。 要想实现一个完整的缓存，需要考虑很多因素。例如： 请求的资源发生改变的时候，如何让浏览器去获取新的资源。 设置缓存失效时间之后，如果服务器资源没有发生改变，浏览器如何判断。 什么样的HTTP响应会被客户端缓存？ 默认情况下，请求方法如 GET、HEAD的响应内容是可缓存的，在包含新鲜度信息的情况下，POST的响应内容也可以被缓存； 默认情况下，响应码如 200、206、300、301、302、404 等的响应内容可以被缓存； 响应头和请求头没有指明不使用缓存，如 Cache-Control: no-stor ...

1. Pinaia Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐。 如果你学过Vue2，那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。 在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的。 官网解释： Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。从上面官网的解释不难看出，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。 Pinia优势： 支持Vue2和Vue3（Vue 版本大于 2.7） 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库 良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适 不需要嵌套模块，符合 Vue3 ...

这两天开发一个微信小程序，需要让底部导航栏中间图标往上突出一点来。之前都是用组件或者直接原生没有太多定制样式，所以记录一下完成步骤。 1. 自定义tabbar栏配置 在 app.json 文件中的 tabBar 中指定 custom 字段为 true（意思是允许使用自定义 tabBar）； 在 app.json 中全局开启使用组件，或者在所有涉及的 tab 页 json 中申明usingComponents 项； 在 app.json 中添加作为 tabBar 栏的页面； 12345678910111213141516171819202122232425262728293031323334353637383940"tabBar": { "custom": true, "color": "#cccccc", "selectedColor": "#eb585b", "borderStyle": "black&quo ...

代码部分1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071// http.js// 导入 http 模块import http from 'wechat-http'/** * 配置接口基础路径 */http.baseURL = 'https://live-api.itheima.net'/** * 挂载方法到全局 */wx.http = http/** * 配置请求拦截器 */http.intercept.request = (config) => { console.log('config -----> ', config); const app = getApp() if (app.token) { config.header = { Autho ...

记录一下自己写的一些工具类的代码 1. 读取excel表格内容转换为markdown文档 需要安装依赖，主要是用到了一个node-xlsx的npm包 1npm install node-xlsx --save 主要代码部分 excelToMarkdown.js 123456789101112131415161718192021222324const XLSX = require('xlsx');const fs = require('fs');// 读取 Excel 文件const workbook = XLSX.readFile('input.xlsx');const worksheet = workbook.Sheets[workbook.SheetNames[0]];// 将表格数据转换为对象数组const data = XLSX.utils.sheet_to_json(worksheet, { header: ['title', 'content']
...

最近开发一个微信小程序项目的时候有一个需求就是逆地址解析和poi检索，一般来说微信小程序最好还是使用腾讯地图最合适，不会出现奇怪的地理位置偏移什么的。但本着折腾一下的心理去使用高德地图的微信插件，但万万没想到这一下直接掉坑里面去了。 这个坑主要体现在微信使用wx.getLocation()和wx.chooseLocation()方法获取到的数据默认来说是纬度在经度前面，导致数据直接给高德地图sdk使用，就会在失败的回调中报错误代码20011。然后就去翻高德的错误代码说明,说是”查询坐标或规划点（包括起点、终点、途经点）在海外，但没有海外地图权限”。但是我使用腾讯地图就很正常，那时我就在想有没有可能是单词写错了，但是经过排查发现并不是。于是我就在想有没有可能是经度纬度搞反了，但是我查了网上的帖子都是我这样的写的呀，不过我还是抱着试试的心态将经度纬度互换了一下位置。然后…… 然后……数据就出来了。这就让我很是无语了，于是再去翻看高德的文档最后还是在Web服务API下才看到这么一条信息。 我只想说，“高德，你文档可以写的全一点嘛，我只是想在微信小程序上用上你的逆地址解析，真的犯不着把你 ...

简介：vue-qr(项目地址)一款可以生成带logo和背景图片二维码的vue前端插件，功能强大但使用简单，你可以使用该插件生成各种漂亮的二维码图片。需要注意的就是不支持ie浏览器 安装：12345// npmnpm install vue-qr --save// yarnyarn add vue-qr 导入 如果多出组件中需要使用，在main.js中全局导入注册 123456789// 导入// vue2.x import VueQr from 'vue-qr'// vue3.x import vueQr from 'vue-qr/src/packages/vue-qr.vue'// 注册Vue.use(VueQr) 属性 说明 是否必须 text 欲编码的内容 是 correctLevel 容错级别 0-3 size 尺寸, 长宽一致, 包含外边距 margin 二维码图像的外边距, 默认 20px colorDark 实点的颜色 colorLight 空白区的颜色 bgSrc ...

在一个项目中运用到了element-ui的表格组件，但是遇到一个问题就是，当一个单元格内的数据特别多的时候，但是单元格宽度又不够放下全部的内容。于是就会发生在单元格内部换行，这就会让这个页面的布局变得不可控，经过一番搜索找到了一个算是解决问题的方法。 给el-table 设置属性 cell-class-name，自定义 className 代码如下： 1234567<!-- 表格部分 --><el-table :data="tableData" :header-cell-style="headClass" cell-class-name="table_cell" :cell-style="rowClass" border style="width: 100%"></el-table><!-- css部分 ::v-deep 表示将样式穿透到element-ui里面，记得给<style>标签里面加上scoped，不然这个样式就变成 ...

直接上代码，使用的接口还是上一篇文章的给出的接口。实现懒加载数据。 123456789101112131415161718192021222324252627282930313233343536373839404142434445<template> <div class="block"> <el-cascader v-model="value" :props="props" @change="handleChange"></el-cascader> </div></template><script>import { getprovinces, getcities, getareas, getstreets } from '@/api/riskarea'export default { data () { return  ...