叶子_o-CSDN博客

npm地址：https://www.npmjs.com/package/ua-parser-js1.安装npm install ua-parser-js2.引入import uaParserJs from 'ua-parser-js';3.使用const uaParser = uaParserJs();const { browser, cpu, device, engine, os, ua } = uaParser;const u = ua.toLowerCase();/*{

2021-12-22 17:48:18 2348 1

原创 react 项目添加百度统计

将如下代码添加到 index.html 的 head 标签中<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); <!-- 判断生产环境和测试环境-- > hm.src = '%REACT_APP_RUN_ENV%' === 'prod' ? "https://hm.baidu.com/hm

2021-11-25 12:13:33 1784

原创 bff 项目基础知识

bff项目一、bff1. Back-end For Front-end：服务于前端的后端可以调用不同的系统的一个或者多个接口进行数据的聚合、过滤，而只向外部暴露一个接口即可2.优点：前后端彻底分离业务更向前靠拢，琐碎的api由前端开发自己决定留给后端更清晰的服务边界，只需要提供粗粒度的接口即可3.缺点：响应时间延迟（服务如果是内网之间访问，延迟时间较低）编写起来较为浪费时间（因为在基础服务上添加的一层转发，所以会多写一部分代码）业务异常处理（统一格式化业务异常的返回内容）4

2021-11-09 10:36:04 891

原创查看和结束已被占用的端口

目的：关闭占用 21200 端口的程序操作：1.window+R 打开命令窗口2.查看被占用端口对应的PID输入命令：netstat -aon|findstr "21200"，回车，记下最后一位数字，即PID,这里是 266043.继续输入tasklist|findstr "26604"，回车，查看是哪个进程或者程序占用了 26604 端口结果是：node.exe4.结束进程：在cmd的命令窗口中输入：taskkill /f /t /im node.exe或者打开任务管理器，切换到

2021-11-09 09:26:16 355

原创安装/卸载插件报错npm ERR! Unexpected token } in JSON at position 125178 while parsing near ‘...n“: “^1.2.2“

解决方法：删除根目录下的package-lock.json文件，再重新安装。package-lock.json在安装完依赖包后，会重新生成。

2021-10-14 13:59:08 261

原创解决 idea 关闭但是服务正常运行的问题

由于idea激活码经常失效，idea就会自己关闭，但是启动的服务还在运行（端口号依然被占用）。再次打开idea启动服务提示端口号被占用。解决（关闭被占用的进程）：1.打开cmd命令窗口，根据端口号查找对应的进程号（以8081端口为例）netstat -ano | findstr 80 //列出进程极其占用的端口，且包含 80这里8081端口的进程号是10570802.taskkill -PID <进程号> -F //强制关闭某个进程参考自：idea 服务关了项目还能正常跑。ki

2021-08-11 10:05:22 3375

原创 echarts 图表切换后数据显示错误(图表重绘/清空)

知识点：图表重绘清空数据问题描述：用 echarts 实现一个展示【等级/季度/销量】的图表，切换年份后再选择回当前年份，发现图表中多显示了三四季度的数据，当前年份实际获取的数据里是只有一二季度的。原因：切换年份后，图表重绘时有它自己的想法，就算对图表数据进行了重新赋值，虽然没有三四季度的数据，但是重绘的时候还是沿用了上次选择年份的三四季度的数据…解决：图表绘制前，清空数据代码：// 引入echarts<script type="text/javascript" src="

2021-06-24 11:37:27 1982

原创 Element日期选择控件设置结束时间比开始时间多4小时

需求：不管开始时间设置多少，结束时间永远在开始时间的4小时后<el-form-item label="秒杀开始时间"> <template> <el-date-picker v-model="form.startTimeDate" type="datetime" placeholder="选择日期" /> </template></el-form-item><el-form-

2021-04-23 15:09:15 226

原创解决移动端不同分辨率下按钮上下不居中问题（scale 缩放）

问题一：按钮上下不居中移动端项目中，遇到这样一个问题，明明写的高度和行高一致，但是在有些分辨率的手机上看上下就是不居中（如下图所示，文字靠上）。尝试过使用padding代替高度，效果也不是很好。问题二：文字限制只显示一行时，有的手机显示多余的部分多行文字设置只显示一行，其余部分不显示。设置高度和行高一致，有的手机上会显示如下效果。解决方法：上边两种情况都可以用这种方式解决：先将元素所有涉及到尺寸大小的乘以2，再用 scale 缩放0.5倍。1.解决按钮上下不居中原代码：.van-sub

2021-04-13 10:42:56 1238

原创 vant日期选择设置起始可选时间为3天后

需求：要求日期可选时间从今日（不包括今天）之后的三天开始选择。实现方式：Vue + vant 的 Calendar组件代码首先引入 Calendar 组件就不写了，直接下一步：<van-cell class="tl" title="期望发货日期" :value="date" @click="show2 = true" is-link/><van-calendar v-model:show="show2" @confirm="onConfirm1" :min-date="minD

2021-03-26 14:23:49 1403 1

转载监听安卓/IOS 微信浏览器关闭事件

if (window.addEventListener) { window.addEventListener("pagehide", function () { // IOS console.log('页面要关闭了:pagehide'); })} else { window.onbeforeunload = function () { // 安卓 console.log('页面要关闭了:onbeforeunload'); }}注意：以上方法浏览器关闭/刷新

2021-02-09 14:21:18 2273 4

原创线上请求接口提示：`CAUTION: request is not finished yet!`

问题描述：这两天做一个公众号h5项目中，遇到一个很头疼的问题：最初本地环境开发的一个页面没有任何问题，但是部署到线上后获取页面数据的接口请求状态返回 200，但是没有返回任何数据，而且 Timing 提示 CAUTION: request is not finished yet!，浏览器卡死怎么都点都不动。用到的技术栈： vue3.0 + vant问题页：商品评价页（可多个商品分别评价）过程描述：前期开发自然是本地环境调试的，当时做的过程中出过一个问题，搜了很多资料怀疑可能是出现了死循环，经过

2021-01-29 20:13:37 13480 1

转载 vue 项目 vant-tabs 初始化下标 active 无效

需求：获取路由中的参数值，根据参数值初始化active的值，效果如下初始代码：<van-tabs v-model:active="active" @click="onClick" swipeable title-active-color="#4EC8F2" line-width="19" line-height="2"> <van-tab v-for="(item, index) in tabs" :key="index" :title="item"> 这是内容 &

2021-01-06 14:21:05 8766 5

原创 Vue3 路由跳转与参数获取

路由跳转import { useRouter } from "vue-router"export default { setup () { const router = useRouter(); // 第一步 const state = reactive({ list: [], toDeatil(id) { router.push('/product?id=' + id); // 第二步 }, }) return {

2021-01-04 10:55:31 20638

原创 vue3.x 中使用 vant3.0 的 ImagePreview 组件遇到的问题

函数调用的方式使用起初，想和其他组件一样在公共文件中引入注册import { ImagePreview } from 'vant';Vue.use(ImagePreview);报错如下：后来改变了组件的引入方式，在需要使用的页面单独引入，就可以了import {ImagePreview} from "vant";import { reactive, toRefs } from 'vue'export default { setup () { const state = r

2020-12-28 16:57:47 2031 1

原创 Vue3 数据基础操作

一、知识点defineComponent 构建应用及绑定事件使用 reactive 绑定数据使用 ref ( torefs ) 绑定数据使用 getCurrentInstance 获取当前实例化对象上下文信息watch、watchEffect 数据监听简单的 TodoList 点餐功能实例一：使用 reactive 绑定数据<template> <div> <h1>使用 reactive 绑定数据</h1> <p&

2020-12-14 18:22:01 2471

原创 Vue3 生命周期钩子函数

一、Vue3生命周期钩子setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数；onMounted() : 组件挂载完成后执行的函数；onBeforeUpdate(): 组件更新之前执行的函数；onUpdated(): 组件更新完成之后执行的函数；onBeforeUnmount(): 组件卸载之前执行的函数；onUnmounted(): 组件卸载完

2020-12-14 14:01:53 25107 3

原创 vue使用EventBus实现页面内组件通信

EventBus是一种发布/订阅事件设计模式的实践。在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex1.新建event-bus.jsexport default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型 * @met.

2020-12-09 16:36:23 354

转载微信小程序 ios 下拉会盖住底部 fixed

解决方法：在对应页面的.json文件中添加。"disableScroll": true官网描述：设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

2020-12-09 14:41:59 496

空空如也

空空如也