Category Archives: Frontend
vue埋点 记录页面停留时间
vue记录使用日志 页面停留时间
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import API from '@/modules/system/api/api_userTime' const router = new Router({ mode: 'history', base: process.env.BASE_URL, scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }) // API 保存数据接口 let startTime = Date.now() let currentTime let standingTime = 0 let pageName = [] router.beforeEach((to, from, next) => { // 如果to存在，则说明路由发生了跳转 if (to) { // 清空界面名 pageName=[] // 离开界面 // 第一步：页面跳转后记录一下当前的时间 currentTime currentTime = Date.now() standingTime = parseInt((currentTime - startTime) / 1000) from.matched.forEach(routeItem => { pageName.push(routeItem.meta.title) }) // ------------ // 第二步：在这里把 currentTime - startTime 的 差值 发送给后端 // ------------ if(pageName.length > 0){ const params = { // 界面 pageName: pageName.join("-"), // 进入界面时间 gmtCreate: '', // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'), // 离开时间 gmtLeave: '', // gmtLeave: new moment(currentTime).format('YYYY-MM-DD HH:mm:ss'), /** * 进入或离开状态 * enter进入 * exit 离开 */ type: 'exit', // 停留时长 // duration: standingTime } API.add(params).then(function(result) { console.log(result) }).catch(function(result) { // console.log(result) }) } // 第三步：每次都要初始化一下 startTime startTime = Date.now() pageName = [] // console.log('======== 分割线 ========') } if(from){ // 进入界面 to.matched.forEach(routeItem => { pageName.push(routeItem.meta.title) }) if(pageName.length > 0){ const param = { // 界面 pageName: pageName.join("-"), // 进入界面时间 gmtCreate: '', // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'), // 离开时间 gmtLeave: '', /** * 进入或离开状态 * enter进入 * exit 离开 */ type: 'enter' } console.log(param); API.add(param).then(function(result) { console.log(result) }).catch(function(result) { // console.log(result) }) } } next() }) export default router |
from:https://blog.csdn.net/Beloved_Jodie/article/details/120924875
View DetailsVue生命周期解析及相应事件
|
1 2 3 4 5 6 7 |
生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 而在这个初始化过程中，Vue又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； |
首先我们来结合Vue官方提供的图看一下Vue生命周期到底发生了些啥 beforeCreate data和methods未初始化(loading事件) created（已创建） data、methods初始化完成，如果调用数据或方法最早只能在created中操作 此时拿不到DOM元素 (后台数据请求和耗时操作) beforeMount vue模板已经在内存中渲染好了，但还没有挂载到页面中，此时页面还是旧的 （render 被初次调用用于生成虚拟dom） mounted（已安装） 页面和内存的数据已经同步， 只要执行完mounted，就表示整个Vue实例已经初始化完毕。 (dom树已渲染到页面，最早可以在mounted中操作DOM) beforeUpdate 页面中显示的数据是旧的，data的数据已经是最新的，页面显示未和数据同步。 （data的数据发生改变会执行这个钩子） update（已更新） 更新DOM完成,页面数据更新 （执行依赖于 DOM 的操作。每次进行数据更新时updated都会执行） beforeDestroy 实例数据还都是可用状态 （确认删除XX吗？） Destroyed 组件已经销毁不可用 （执行一些优化操作,清空定时器。） from:https://blog.csdn.net/qq_42504266/article/details/121881711
View DetailsHTTP协议的四种传参方式
1.path info传参 /articles/12 (查询id为12的文章，12是参数)
2.URL Query String传参 /articles?id=12
3.1.Body 传参 Content-Type: multipart/form-data
3.2.Body 传参 Content-Type: application/json，或其他自定义格式
4.Headers 传参 @RequestHeader
vue 一直运行 /sockjs-node/info?t=解决办法
sockjs-node介绍 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端：sockjs-node（https://github.com/sockjs/sockjs-node） 客户端：sockjs-client（https://github.com/sockjs/sockjs-client） 开发时，如果变更网络环境（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况 报错解决 方法一：（推荐）在项目根目录找到/package-lock.json文件，修改如下： 方法二： 项目根目录，找到/node_modules/sockjs-client/dist/sockjs.js 找到代码的 1605行，注视掉xhr请求
|
1 2 3 4 5 6 |
try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish',0,''); self.\_cleanup(false); } |
参考：https://blog.csdn.net/Simon9124/article/details/105581492?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 from:https://blog.csdn.net/xingchen678/article/details/122429686
View Detailsaxios请求时使用 application/x-www-form-urlencoded
axios 会默认序列化 JavaScript 对象为 JSON。 如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。 在浏览器环境，你可以使用 URLSearchParams API：
|
1 2 3 4 |
const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); |
from:https://blog.csdn.net/init_yanxiao/article/details/113845330
View Details使用axios请求，前端数字long类型精度问题解决方法
今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。
在浏览器中做测试可知，这就是一个精度丢失的问题。
前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。
View Details[ 万字总结 ] 夯实你的 TypeScript 基础
1.环境配置和搭建
2.基础类型
3.类型推导
4.函数类型
5.类
6.接口
7.泛型
8.兼容性
9.类型保护
10.类型推断
11.交叉类型
12.条件类型
13.内置类型
14.装包和拆包
15.自定义类型
16.unknown
17.模块和命名空间
18.类型声明
19.扩展全局变量类型
7 款最棒的开源 React UI 库测评 – 特别针对国内使用场景推荐
Semi Design – 抖音团队力作，虽简洁轻量，可轻松应对复杂场景，抖音内部多项目迭代，品质可靠
TDesign – 腾讯优质 UI 组件，配套工具完满，设计工整，文档清晰
ArcoDesign – 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美
Ant Design React – 阿里前端 UI 库，面向企业级中后台
Material-UI – 全球顶级 React 组件库 Google Material 设计标准
微软 FluentUI – 背靠微软，大型项目首先，代码简洁高效
Element for React – 饿了么出品 Element 的 React 版，适合有使用 Element 习惯的开发者
Musicn 高品质音乐下载命令行工具
软件简介 Musicn 是一个下载高品质音乐的命令行工具。 安装
|
1 2 3 4 5 6 |
# 主推荐pnpm $ pnpm add -g musicn # or $ yarn global add musicn # or $ npm install musicn -g |
使用
|
1 2 3 |
$ musicn 稻香 # or $ msc 稻香 |
附带歌词下载 (默认是不附带):
|
1 2 3 |
$ msc 稻香 --lyric # or $ msc 稻香 -l |
指定文件夹路径下载 (默认是当前路径):
|
1 2 3 |
$ msc 稻香 --path ../music # or $ msc 稻香 -p ../music |
资源 音乐来源：咪咕（API 是从公开的网络中获得） 说明 部分歌曲支持无损音乐，支持格式：flac、mp3 优先搜索下载高品质音乐（无损 -> 320K -> 128K） 暂时只支持下载咪咕平台上已有的音乐 在 windows 的 git Bash 中不支持显示下载进度条并且不支持上下切换选歌，问题是 cli-progress 不兼容 node version > 14 from:https://www.oschina.net/p/musicn
View Details