本地开发前端nginx跨域

renyudouhui — Mon, 15 Jul 2024 19:36:03 +0800

前端项目跑在3031端口请求80端口，80端口转发到3031端口上。

前端加密总结

renyudouhui — Fri, 08 Mar 2024 16:29:42 +0800

【代码】前端加密总结。

ts类型记录

renyudouhui — Tue, 15 Nov 2022 14:33:36 +0800

typeScript类型记录

vue3手动控制KeepAlive缓存map。

renyudouhui — Fri, 11 Nov 2022 09:13:40 +0800

vue3手动清除某些keppalive虚拟dom

typeScript数组转树。

renyudouhui — Thu, 01 Sep 2022 16:57:19 +0800

ts数组转树

vue3异步组件。

renyudouhui — Thu, 07 Jul 2022 16:18:37 +0800

vue异步组件

前端检测dom是否被遮盖

renyudouhui — Thu, 17 Mar 2022 20:36:38 +0800

new IntersectionObserver(([change]) => { console.log(change); // 被覆盖就是false，反之true console.log(change.isVisible) }, { threshold: [1.0], delay: 1000, trackVisibility: true, }).observe(document.querySelector(".first"));

虚拟列表渲染（不进行后台加载）

renyudouhui — Thu, 24 Feb 2022 10:58:55 +0800

import { defineComponent, PropType, computed } from "vue"; import "./style.less"; import Service from "./virtual_list.service"; export default defineComponent({ name: "VirtualList", props: { // 容器总高度 screenHeight: { type: Number,

css实现地图点位效果

renyudouhui — Fri, 12 Nov 2021 11:10:20 +0800

Document&l </article> <article> <h1>前端浏览本地文件（图片视频等）</h1> <p>renyudouhui — Mon, 01 Nov 2021 14:57:58 +0800</p> 引入文件的相对地址使用window.URL.createObjectURL方法。代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,. </article> <article> <h1>js对象数组去重</h1> <p>renyudouhui — Mon, 11 Oct 2021 17:08:49 +0800</p> const obj = {}; this.model.topics = this.model.topics.reduce((prev, item) => { obj[item.topic] ? "" : obj[item.topic] = true && prev.push(item); return prev; }, [] as Array<Topic>); </article> <article> <h1>去除ie edge浏览器的 type = ”password“ 的输入框的默认图标</h1> <p>renyudouhui — Wed, 25 Aug 2021 17:26:37 +0800</p> input::-ms-reveal { display: none; } input::-ms-clear { display: none; } input::-o-clear { display: none; } </article> <article> <h1>前端rsa md5加密</h1> <p>renyudouhui — Wed, 25 Aug 2021 10:39:40 +0800</p> 下包 npm install --save js-md5 npm i jsencrypt md5使用 md5(password) rsa使用 const rsaObj = new JsEncrypt(); // data 为后台提供的公钥 rsaObj.setPublicKey(data); const mPass = rsaObj.encrypt(password); 配合使用 const rsaObj = new JsEncrypt(); rsaObj.setPubli </article> <article> <h1>mockjs在vue中简单使用</h1> <p>renyudouhui — Mon, 23 Aug 2021 14:44:01 +0800</p> 安装 npm install mockjs --save-dev 建立mock.ts文件夹并导入mockjs import Mock from "mockjs"; import { login } from "./detailMock"; Mock.mock(/\/api\/xxx\/xxx\/xxx/ ,'post', login); 其中login的代码部分 export const login = (option: any) => { const { username } = JSO </article> <article> <h1>前端短时间内拦截重复请求，并返回同一结果。</h1> <p>renyudouhui — Fri, 13 Aug 2021 17:22:47 +0800</p> 有个需求，页面加载有一个组件被加载上百次，这个组件内部会从接口拿数据，有相同的也有不同的。需要拦截这些请求，让相同参数的请求只发送一次，但所有组件都需要拿到数据。axios的处理重复请求，我只看到可以取消，并未统一返回。 type User = { username: string; name: string; } class RequestStore { /** * 根据用户名获取用户信息 * @param username 用户名 */ getUserByUserNa </article> <article> <h1>vue中使用Mqtt实现在线聊天</h1> <p>renyudouhui — Mon, 19 Jul 2021 10:14:10 +0800</p> 安装插件 npm install mqtt --save 、设置(后台帮助订阅topic) import { GlobalStore } from "@/store"; import mqtt, { IConnectPacket, MqttClient, Packet } from "mqtt"; import { computed } from "vue"; export interface MqttMsgHander { (message: string): void; } export d </article> <article> <h1>position: sticky</h1> <p>renyudouhui — Wed, 14 Jul 2021 14:53:46 +0800</p> css position的值除了relative，absolute，fixed，static外多了一个粘性布局sticky。它的作用是在dom元素滚动到父元素外的时候可以念在某个位置，利用js也可以实现这个效果。 <style> .father { /* width: 100px; */ height: 50vh; border: 1px solid #ccc; overflow: auto; } .son { </article> <article> <h1>前端大量重复请求</h1> <p>renyudouhui — Fri, 09 Jul 2021 11:31:46 +0800</p> 例如人员信息这样的组件，根据id获取信息，可能一下会请求很多次数据，前端需要处理 userRequest: Array<{ key: string, list: Array<any> }> = []; timer: null | number = null; result: Array<{ k: string, v: User }> = []; getUserByUsername(username: User["username"]) { </article> <article> <h1>vue中下载图片跨域</h1> <p>renyudouhui — Thu, 01 Jul 2021 17:15:33 +0800</p> 首先在vue.config.js中配置跨域 '/upload': { //代理图片下载的接口 target: "http://resource.zhuyiyun.com", changeOrigin: true, secure: false, // 设置支持https协议的代理 pathRewrite: { '^/upload': '' } } 由于项目中的请求是走的 </article> <article> <h1>col 加起来为24的处理一次</h1> <p>renyudouhui — Mon, 21 Jun 2021 17:00:36 +0800</p> eleList: Ref<Array<EleHandel>> = ref([]); // 统一处理col的高度 handelHeight() { // @ts-ignore const allCol = Array.from(document.querySelectorAll(".data-item-col")).map(ele => { const col = Array.from(ele.classList).filter(classN.. </article> </main></body></html>

renyudouhui的博客