- 博客(87)
- 资源 (2)
- 收藏
- 关注
原创 Git fork了别人的仓库,别人的仓库有更新,我们如何同步这个更新
运行 git remote -v 来查看所有配置的远程仓库。可以检查是否已经有 upstream 存在,以及它指向的地址。可在vscode,拉取==》拉取自==》远程仓库同个分支。
2025-03-03 16:10:31
215
原创 web实时通讯方法轮询、webSocket、SSE介绍
服务端推送,也称为消息推送或通知推送,是一种允许应用服务器主动将信息发送到客户端的能力,为客户端提供了实时的信息更新和通知,增强了用户体验。在日常的场景中微信消息通知栏、首页广告推送等等。一般服务器向前端页面实时推送数据一般有三种方法:轮询、webSocket、SSE。
2025-02-07 16:45:00
984
原创 windows 下npm 使用 n 切换node版本
git bash是一个适用于Microsoft Windows环境的应用程序,它为Git命令行体验提供了一个仿真层;相当于在window上通过git bash这个模拟的Unix命令行的终端。遇到问题注意点: 如果单纯的使用npm install -g n ,没有加上–force 会报错【[npm]安装n模块报错notsup Unsupported platform】问题原因:Windows未能支持bash指令。Windows下 运行出错,提示。
2025-01-09 11:07:38
631
原创 TS中的type和interface一些用法
同名接口会自动合并,而同名类型别名会冲突,优先推荐interface。来进行复用,而interface定义的类型则可以通过继承。3、组件属性定义:使用type还是interface。type定义的类型可以通过交叉类型。2、复用时只会新增属性。
2024-08-14 17:31:13
372
原创 开发过程中遇到奇奇怪怪的东西之二:路由嵌套层级太深导致页面刷选不成功
这意味着一旦组件被加载过,再次访问相同的路由时,组件不会重新加载,而是直接使用缓存的组件实例。当从Monthly页面跳转到MonthlyDetail页面时,由于MonthlyDetail组件已经被加载过并缓存了,因此不会触发重新加载,导致没有看到页面刷新或反应。首先 路由的配置是这样的,从路由Monthly页面跳转到MonthlyDetail页面,进入MonthlyDetail 页面并没有刷新,没有反应,找了好久的问题所在,监听路由变化,onMounted生命周期中触发初始化,但是就是一直没有变动。
2024-06-21 16:02:51
352
原创 cesium实现绘制图标,并实现图标的聚合功能
在Cesium中,点聚合功能是指将大量的点数据聚合成一个更大的点或者其他形状,以减少在地图上显示大量点数据时的视觉混乱和性能问题。点聚合功能通常用于在地图上显示大量的点标记,例如地图上的POI(兴趣点)、传感器数据等。点聚合功能在Cesium中是一种处理大量点数据的有效方式,可以提高地图的可读性和性能。这样可以在保持地图清晰的同时,有效地展示大量的点数据,提高用户体验。
2024-05-11 15:37:57
1882
5
原创 开发过程中遇到奇奇怪怪的问题(一)Uncaught ReferenceError: __VERSION__ is not defined at vue3-simple-uploader.js?
Uncaught ReferenceError: __VERSION__ is not defined at vue3-simple-uploader.js
2024-05-11 11:23:07
245
1
原创 vite和webpacke的常规配置
vite官网vite是一个由Vue.js开发的构建工具,它利用了ES Module Imports,在开发环境下可以实现按需编译,加快了开发速度。而在生产环境下,它使用Rollup进行打包,提供更好的tree-shaking、代码压缩和性能优化。vite主要解决了现有工具(如webpack、rollup)在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。快速的启动时间。通过区分依赖和源码两类模块,改进了开发服务器启动时间。
2024-04-23 14:15:18
1238
原创 vuex和pinia转态管理工具介绍
相同点: 都是Vue.js的状态管理工具区别PiniaVuex支持Vue2和Vue3都支持Vue3写法需要额外配置Mutation只有 state, getter 和 action,无Mutationaction异步、Mutation 同步actionaction支持同步和异步action异步、Mutation 同步Typescript良好的Typescript支持需要额外的配置模块嵌套不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化需要。
2024-04-22 17:13:03
627
原创 cesium用法
4、创建项目 vue3+vite+TypeSript。1.下载或者安装cesium的插件。2、点击登录,注册或者登录已有账号。下载cesium依赖。
2024-03-11 14:17:45
487
原创 [Vue warn]: Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function“
1、是由于页面的element ui组件的日期组件报错,组件绑定的值为Number数据类型,改一下改成String数据类型就可以例如下面所示
2022-06-25 09:38:38
9756
1
原创 vue3.0记录滚动位置的两种方法
第一种方法onActivated+onBeforeRouteLeave 方法实现import { onBeforeRouteLeave} from 'vue-router'const scrollRef = ref(null)const scrollTop = ref(0)onActivated(()=>{ nextTick(()=>{ scrollRef.value.scrollTop = store.getters.scrollTop })})onBefor
2022-05-20 10:09:52
5700
1
原创 实现瀑布流布局的四种方法
一、 什么是瀑布流布局1、是什么页面上是一种 参差不齐 的多栏布局,类似上图所示随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,大部分为图片,图片 固定 宽度,高度 不一,根据原比例缩放到宽度达到固定的要求,每行排满后,新的图片添加到后面2、特点固定宽度,高度不一 岑参不齐的布局以图片为主二、有什么优缺点1、优点 节省空间:降低页面的复杂对于 触屏设备非常友好:通过向上滑动浏览,交互方式更符合直觉良好的视觉体验:浏览时不会被页面整整齐齐的高度影响,
2022-05-13 10:57:45
33322
16
原创 vue3.0 移动端二次封装van-uploader上传图片组件
vue3.0 移动端二次封装van-uploader上传图片组件1、前提:业务需求,最多上传6张图片,并可以实现本地预览2、解决方法:使用vant组件库中的van-uploader实现3、代码实现template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v
2022-04-28 15:08:11
3062
原创 vue3 移动端使用clipboard 插件实现复制功能
1、安装npm install clipboard --save2、页面引入import Clipboard from 'clipboard'3、script中使用<script setup>import Clipboard from 'clipboard'import { onMounted,ref,getCurrentInstance} from "vue"const { proxy } = getCurrentInstance()onMounted(()=>{
2022-04-27 17:48:51
1117
原创 vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览1、安装npm install --save vue-pdf2、引用import pdf from 'vue-pdf'export default { components: { pdf }, data() { return { pdfUrl: "pdf的路径" ,// 本地获取或者在线请求获取 }; },};3、页面使用<div class="content"> <pdf
2022-04-20 17:30:39
2407
2
原创 使用el-dialog踩到的坑
const a = [{"张三":{'aa':'huasa','bb':'aojiao'}},{"lisi":{'rrr':11111,'ggg':22222}},]let newarry = []a.forEach(item=>{let cc = {name:Object.keys(item)}console.log(JSON.stringify(Object.keys(item)))})
2022-04-20 16:01:20
929
原创 设置display的影响
父元素设置display:flex后,子元素设置的宽度无效解决方法:在子元素中写flex-shrink:0; 后在写宽度.fartherCss{ display: flex;}.sonCss{ flex-shrink:0; width: 30px;}
2022-04-20 14:50:26
811
原创 Object.assign用法
1、是什么Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。const a ={ name: '张三'}const b ={ age: '18', sex: '女'}const c = Object.assign(a,b) console.log(c) // {name: '张三', age: '18', sex: '女'}console.log(a) // {name: '张三', age: '18', sex: '女
2022-03-16 15:06:45
1579
原创 JSON.stringify用法
1、是什么JSON.stringify 方法将某个对象转换成 JSON 字符串形式const userInfo= { name: 'zs', age: 20}console.log(JSON.stringify(userInfo));// {"name":"zs","age":20}2、语法语法: 可以有三个参数,第一个是传入要序列化的值,第二个为函数或者数组,第三个是文本添加缩进、空格和换行符JSON.stringify(value[, replacer[, space]
2022-03-11 15:08:25
68840
原创 vue3采用xlsx库实现本地上传excel文件,前端解析成Json数据
需求:本地上传excel文件,但需要对excel文件的内容进行某些操作(增删改等)后再上传到后端服务器中,则需要前端解析excel文件实现:通过xlsx库实现1、下载依赖npm install xlsx --save2、页面使用import * as XLSX from 'xlsx' // vue3可用此引入import XLXS from "xlsx"; // vue2可用此引入3、页面代码写法 <input type="file" accept=".xls
2022-03-05 17:38:49
7249
11
原创 TypeScript学习-类class
1、类的定义 类 class 类名{ 属性(静态属性,动态属性) 方法(静态方法,动态方法) }class Person { name: string = 'zhangsan' // 定义实例属性 (只有实例化后才能调用) // const per = new Person() // console.log(per.name) static age: number = 18 // 定义类属性(静态属性),前加一个static
2022-02-25 16:36:47
2207
原创 @1.0.0 build: `webpack --mode production`
使用babel配置时一直npm run build 一直出错,后面发现原来是presets的数据结构出错了以下是错误写法 presets:[ "@babel/preset-env", // 指定环境的插件, ....内容 ]正确的 presets:[ [ "@babel/preset-env", // 指定环境的插
2022-02-22 18:14:21
769
原创 TypeError: CleanWebpackPlugin is not a constructor
在webpack.config.js中const CleanWebpackPlugin = require(‘clean-webpack-plugin’)改成以下代码const {CleanWebpackPlugin} = require('clean-webpack-plugin')
2022-02-22 17:11:10
467
原创 TypeScript学习
一、类型字符串型、数字类型、布尔值、数组、元组、枚举、任意类、null 和 undefined、never类型、函数1、字符串型 只能赋值字符串let str:string = "nihao ts"let str1:string = "nihao ts"2、数字类型,所有数字都是浮点数,支持十进制、十六进制、二进制和八进制字面量let aa:number = 111let hexLiteral: number = 0xf00d;let binaryLiteral: number = 0b1
2022-02-21 17:39:20
457
原创 vue3封装图片上传组件的两种方式
1、使用element plus中的 el-upload实现图片上传template<div class="front upload-item"> <el-upload :limit="1" action="#" list-type="picture" :auto-upload="false" accept="image/png,image/gif,image/jpg,image/jpeg" :on-success="handleSuccess" :on-change=
2022-02-18 10:25:22
3523
原创 element plus表单自定义校验规则不起作用
element plus表单自定义校验规则不起作用1.今天遇到使用element plus表单自定义校验规则一直不起作用,借鉴了网上很多解决方法都不行,后面发现原来是书写的先后顺序,导致不起作用2.解决方法:...
2022-02-15 15:34:40
3146
6
原创 使用element ui 中的el-cascade有时候默认的value和label不是我们自己数据结构的键值
使用element ui 中的el-cascade有时候默认的value和label不是我们自己数据结构的键值,通过props自定义来解决后端拿到的数据结构如下<el-cascader :options="lecturerOptions" :props="optionProps" // 自定义 v-model="teachSubject" clearable /><script setup>import { reactive,ref,onMounted }
2022-02-10 11:24:39
1376
1
原创 vue: Invalid prop: type check failed for prop “action“. Expected String with valu
出现 Invalid prop: type check failed for prop “action”. Expected String with value错误原因:使用el-upload 上传组件没写 action,写上就不会报错了 <el-upload action="#"> <img class="icon-img" src="@/assets/37.png"/> </el-upload>
2022-02-10 09:59:53
5091
原创 vue 前端使用 js-md5加密
1、介绍: 一种单向加密,避免明文传输,例如前端登录密码登录时,密码可使用此加密,防止明文泄露。2、安装npm install js-md53、使用import md5 from 'js-md5'md5("你要加密的内容")
2022-01-26 10:43:24
2415
原创 vue DES 加密 crypto-js
vue DES 加密 crypto-js1、安装 crypto-jsnpm install crypto-js --save2、封装des.js文件// DES 加密 crypto-jsimport cryptoJs from 'crypto-js'// 加密所需的key,个人设置,不能泄密const KEY = '' // DES加密export const encryptDes = (message) => { var keyHex = cryptoJs.enc.Utf
2022-01-25 11:08:29
1039
原创 使用element-plus中的ElMessage样式出错
使用element-plus中的ElMessage样式出错,样式并没有生效原因: 没有在全局中引入ElMessage的样式解决方法 在main.js文件中全局引入import 'element-plus/theme-chalk/src/message.scss'
2022-01-21 15:38:37
10528
2
前端面试题总结.docx
2020-05-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人