- 博客(102)
- 收藏
- 关注
RSS订阅原创 跨域携带 cookie
前端请求时在 request 对象中配置 "withCredentials": trueaxios({ withCredentials: true,})服务端 response.header 配置header: { "Access-Control-Allow-Origin", "http://xxx:${port}", "Access-Control-Allow-Credentials", "true"}
2022-04-26 10:48:04
201
原创 Vue中写 JSX
vue 中写 .jsxrender() { const { propA } = this return ( <Header on-自定义事件名={ v => { this.xx = v }} propA={ propA } /> )}css 模块化import style from './index.module.less'render () { return (<div class={style['index-
2022-02-23 13:32:24
544
2
原创 Vue 生产环境打开 devtools 的两种方法
方案一F12 切换到源码 tab，找到 app.[hash].js，ctrl + F 当前文件内搜索 #app ，找到new n["default"]({ router: ui, store: J, render: function(e) { return e($i) }}).$mount("#app");在 new 行打 debugger，然后刷新页面进入 debugger，n[“default”].config.devtools 修改为 tru
2021-11-11 10:41:38
3520
2
原创 husky + commitlint约束团队 GIT commit message
安装npm i -D @commitlint/config-conventional @commitlint/cli huskynpx husky-init删除 .husky/pre-commit 文件，或者将 npm test 改成正确的npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 使 husky 和 commitlint.config.js 关联commitlint.config.js
2021-10-28 10:42:11
181
原创 一次 Vue 中 sync 和 $emit 的套娃
需求：基于 element-ui 的 Dialog 组件二次封装Dialog.vue<template> <el-dialog :visible="visible" @close="$emit('update:visible', false)" :width="width" > <!-- 头 --> <template #title> <span class="_label">{{ t
2021-04-21 14:16:30
127
原创 在 Vue 中使用百度地图实现打点获取经纬度等
1. 安装npm i vue-baidu-map -S点击查看官方文档2. 注册组件main.js// 全局注册百度地图组件import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: 'your_ak' }) // 自行申请// 按需引入根据官方文档来3. 封装组件src/component/Map.vue实现一个简单 demo， css 自己写<template> <div class="
2021-04-21 13:50:59
1684
原创 Axios
Http 请求基本过程 -> 请求报文 请求行 请求头 请求体客户端 服务器 状态行 响应头 实体内容<-- 响应报文 请求头请求行请求头Cookie 请求头向浏览器发送 cookie 数据请求体get 方式没有请求体post 请求可以携带请求体Content-Type 描述请求体类型query 参数对应的 Content-Type 为 applocation/x-www-form-ur
2021-04-16 23:02:16
54
原创 Docker 基本使用
操作镜像docker images 查看所有镜像docker rmi [image] 删除镜像docker ps 查看运行中的容器docker ps -a 查看所有容器docker run -p 8080:80 --name client -d dream-client 根据镜像创建实例操作容器docker rm [container] 删除已停止的容器docker rm -f [container] 强制删除存在的容器docker rm $(docker ps -aq) 删除所有容器
2021-04-15 15:27:41
52
原创 2021-04-13
vue keyvue 的 diff 算法有就地复用原则，在循环时候指定 key 可以通过 唯一 key 更好的判断新旧 虚拟dom 的变化情况，从而消除就地复用带来的影响带 key 会生成 map 结构一一对应关系，不带 key 的话则是全量循环找出新旧 虚拟dom防抖节流/* 节流 技能有 CD */function throttle(cb, time) { let flag = true; // 闭包 return function(...args) { if (!flag)
2021-04-13 13:57:11
62
原创 .eslintrc.js
/** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/ *//** * eslint有三种使用方式 * 【1】js代码中通过注释的方式使用 * 【2】通过webpack的eslintConfig字段设置，eslint会自动搜索项目的package.json文件中的配置 * 【3】通过配置文件的方式使用，配置文件有多.
2021-03-15 16:06:21
130
原创 PostMessage的使用
前端做 iframe 通讯的时候会用到这个 API，即 A 页面嵌套B页面，两个页面之间做信息交换页面接收消息window.addEventListener( 'message', callBack)const callback = ({data, origin}) => console.log(origin, data);window.addEventListener('message', callback);发送消息otherWindow.postMessage(message, '
2021-01-22 11:02:47
1152
1
原创 MINI-VUEX
回顾一下 Vuex 的基础用法// store/index.jsimport Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)export default new Vuex.Store({ state: {}, getters: {}, actions: {}, mutations: {},})// main.jsimport Vue from 'vue'import App from './App.vue'i
2021-01-04 14:18:30
192
原创 Vue 项目 Git 提交前进行检测
前端项目参与人多的时候，实现代码风格统一，删除 console/debug 等开发代码是比较麻烦的。代码风格统一可以通过配置 eslint-+ prettier 实现通过自定义规则后再编译，但是 console/debug 等规则可以随 Git 一起推送到远程仓库。甚至打包生产出现 console.log 这种代码开始npm i husky pretty-quick -D新增 GitHooks.sh#!/bin/bashred=`tput setaf 1`green=`tput
2021-01-04 09:19:53
1041
原创 Vue 中没啥用的虚拟DOM渲染
import Vue from 'vue';export default function $v2d({ vdom, component, data,}) { const Instance = Vue.extend(vdom ? { render() { return vdom } } : component); const vm = new Instance({ data() { return { ...data } }, }).$mount(); d
2020-12-28 11:08:59
73
原创 Express
摸一下 express安装npm i express -Snpx express-generatorconst express = require(‘express’);const app = express();/* 各种请求方式 */app.get(’/’, (req, res) => {res.send(‘index get’);});app.post(’/’, (req, res) => {res.send(‘index post’);});app.put(’
2020-11-19 11:06:08
173
1
原创 Mockjs 学习笔记
Mock.jsnpm i mockjs -DJSON5JSON 文件不能有注释，属性名也必须有双引号。即 js 代码直接复制过去不能用。JSON5就是解决这种问题的npm i json5 -Dconst fs = require('fs')const path= require('path')const JSON5 = require('josn5')...
2020-11-08 23:45:18
86
原创 移动端布局
像素像素是物理概念，指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示，它是一个[相对绝对单位]在同样一个设备上，每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性);在不同的设备之间，每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);CSS像素 - 设备独立像素css 的像素是一个相对单位，受两点屏幕布局视口大小分辨率可见，在两块不同的屏幕上面，相同的CSS像素，其展示效果一直，大小相等，但是其底层的物理像素点的
2020-10-25 22:39:34
63
原创 字蛛的初次尝试
是什么在 web 中，英文字体相对较小，中文字体包一般都是好几 M。用户如果网络不行或者服务器带宽不行，则还没等到完整的的字体包下载结束，用户已经关闭页面了。所以理论上固定的标题，静态的文字都是要进行处理的，接口传入的文本渲染因为没办法提前获取所以不能进行压缩。怎么用安装npm install font-spider -ghttps://www.it610.com/article/1288483960170553344.htm...
2020-10-18 23:03:12
90
原创 [转载] Vue 中优雅的使用第三方库
全局优点：不依赖 vue 或任何，避免了挂载 Vue 下有些地方获取不到 this 从而不能用的情况。缺点：服务端没有 window，window = undefined , window.xx 报错entry.jswindow._ = require('loadsh');Components.vuecreated() { const { value } = axios('') this.list = _.isEmpty(value) ? ['暂无数据'] : value}挂载
2020-09-29 11:16:28
256
1
原创 Promise
promise 是 es6 提出的新处理异步流程的语法，用来代替旧的异步回调函数回调地狱：n 个串行的异步操作，旧的回调函数必须在第一个内的 success 回调内执行第二个回调操作，形成回调地狱promise支持链式调用dosomethingAsync().then(res => doOtherPromise(res)).then().then().catch...
2020-09-23 23:47:23
61
原创 前端检测浏览器缩放
function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (scree
2020-09-13 16:32:29
607
原创 CSS 结合变量实现动态多行溢出打点
多行打点display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
2020-09-03 16:56:30
329
原创 前端检测窗口是否被后台
当用户长时间后台页面时，再切回来有些场景是需要刷新页面的，比如判断 token 失效，比如后台视频播放暂停或静音，前台视频自动播放或打开音量document.addEventListener("visibilitychange", () => { if(document.visibilityState=="visible"){ alert("欢迎回来"); // 播放视频 } else { console.log("不要走！") // 暂停视频播放 }
2020-08-17 20:08:05
516
原创 for of
// 常规Object.keys().forEach(key => { })// for ofconst person = { name: 'John Smith', job: 'agent'};for (const [key, value] of Object.entries(person)) { console.log(key, value);}
2020-08-11 15:50:43
83
原创 常见的前端上传下载
在前端下载中，一般使用 a 标签下载，但有时候要通过后端接口，比如文件资源是放在一个有网络限制的非公网环境，也就是说直接 url 不能正常请求到资源。一般这时候后端会帮你读这个文件然后传二进制流给前端二进制流返回值例：ÿØÿàJFIFÿÛC &/"$ &81;:7165=EXK=ATB56MiNT[^cdc<Jltl`sXac_ÿÛC--_?6?________________________________________
2020-08-06 10:38:03
392
原创 Vue $watch
watch: { 'arr[0].value', function (val, oldVal){}}这么写会报错 Watcher only accepts simple dot-delimited paths. For full control, use a function instead对于监听数组的某项的指 watch 可能不太给力正确解决办法created() { this.$watch( () => this.arr[0].value, functi
2020-08-04 15:46:55
765
原创 前端四大手写
转载的手写 bindbind 用法不难，一句话解释就是把新的 this 绑定到某个函数 func 上，并返回 func 的一个拷贝。使用方法如下：let boundFunc = func.bind(thisArg[, arg1[, arg2[, …argN]]])那怎么实现呢？我认为手写 bind 可以分为三个等级：初级：只用 ES6 新语法优点：因为可以使用 const 、… 操作符，代码简洁缺点：不兼容 IE中级：使用 ES5 语法优点：兼容 IE缺点：参数要用Array.proto
2020-07-31 10:04:31
467
原创 Cesium
体验在 github 或 gitee 上下载 cesium 源码npm i npm run build 后在 Source 下可以看到 Cesium.js 文件，此时 npm start 后起个本地服务，浏览器打开就可以看到 cesium。Sandcastle (built version) 是官方例子如果需要获取文档npm run generateDocumentationcesium 核心解构 cesiumWidget clock ccontainer canvas scre
2020-07-28 09:28:26
303
原创 体验新轮子 Vite
vite 是一个 Web Server 开发工具，基于浏览器的原生 ES module 支持，不对依赖处理。打包会用 rollup 不是 webpack按需编译：webpacl第一次加载时候其实先 build 后将编译文件 bundle 放在内存中，所以第一次很慢，热重载快而 vite 不会任何操作，启动时只是起 Web Server，并不会编译所有的文件。等请求的时候拦截请求，编译所需文件，然后响应虽然这样做响应会变慢，vite 会对编译后结果缓存方便下次用。当有 1000 + 文件时，先全局编译
2020-07-12 22:29:44
474
原创 Vue/Webpack资源加载顺序
1、执行index.html文件2、执行main.js文件3、main.js挂载了app.vue文件，用app.vue的templete替换index.html中的4、main.js中注入了路由文件，将对应的组件渲染到router-view中这里有两个问题1、为什么项目启动时默认显示index.html文件2、为什么默认加载main.js文件这两个都在webpack中有相应的配置，可在配置文件中查看https://blog.csdn.net/weixin_43236610/article/d
2020-07-09 16:23:27
516
原创 Object.assign
https://blog.csdn.net/qs8lk88/article/details/79018481?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
2020-07-03 09:20:03
70
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人