- 博客(70)
- 收藏
- 关注
RSS订阅原创 Promise搞不懂，看这篇就明白了
在前端的项目开发中还是在前端的面试过程中，Promise的地位就是举足轻重的，虽然解决异步编程的终极解决方案是async和await,但是它们也是基于Promise封装而来的，所以我们要了解它，需要经常去思考，有问题的欢迎补充。能看出来构造函数接收了一个函数作为参数，该函数就是Promise构造函数的回调函数，该函数中有两个参数resolve和reject，这两个参数也分别是两个函数！Promise 是异步编程的一种解决方案，实质上Pomise是个对象，用来封装异步操作，可以更加优雅的书写复杂的异步任务。
2024-03-15 10:40:56
352
原创 vue3 的setup和生命周期
在setup 中，有9个旧的生命周期钩子可以访问：其中setup函数是整合 created跟 beforeCreatbeforeMount ->onBeforeMount （挂载前）mounted -> onMounted （挂载后）beforeUpdate -> onBeforeUpdate**（更新前）**updated -> onUpdated （更新后）beforeDestroy -> onBeforeUnmount ( 销毁前）
2024-02-06 15:39:03
1880
原创 使用electron ipcRenderer接收通信消息多次触发
在使用electron ipcRenderer.on接收ipcRenderer.send的返回值时，ipcRenderer.send发送一次信息， ipcRenderer.on会打印多个日志，解决方法，将.on改为.once就可以只触发一次。
2023-11-03 10:35:42
1141
原创 vue3+koa+axios实现前后端通信
写了一个小demo来实现前后端通信,涉及跨域问题，非常简单可以给大家平时开发的时候参考。首先要安装axios。
2023-10-18 15:38:36
922
原创 成型vue3项目引入electron通信
安装electron之后，要使用electron里面的ipcRenderer模块，在调用的时候，使用require引入electron会报错，fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined。通过使用window.require代替require来引入electron，因为前者不会被webpack编译，在渲染进程require关键字就是表示node模块的系统。
2023-09-08 16:00:21
882
原创 解决vue3前端获取文件的绝对路径问题
项目已经使用electron进行了打包，所以是可以通过electron方式运行的，现在需要的就是vue的代码中引入electron，进行打开文件管理器，实现文件路径获取。这时候又出现 window.require is not a function .错误，这是因为工程是在本地浏览器运行的，识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的。在需要通信的文件中进行调用。
2023-08-15 15:52:32
5525
原创 JavaScript 打开本地文件夹的N种方法
设置一个不可见的input标签，通过input上面的multiple 属性打开本地文件，我写的是vue3用法：这个属性与webkitdirectory 的具体区别可以百度看看。给自己定义的按钮添加下面代码，通过创建一个不可见的input标签实现。通过ActiveXObject对象。
2023-05-17 15:08:22
9113
原创 解决vue “Expected indentation of 0 spaces but found 2”报错问题
再重新npm install ---->npm run serve 重启就可以了，不会再出现此报错。发现项目中并没有eslintrc.js文件。在package.json文件中的rules中添加一句。
2023-05-10 14:37:24
645
原创 vue3 watch响应式数据
看了网上的很多博客感觉都有问题，基于vue3 和typescript 我总结了自己项目中用到的watch监听数据的写法：watch单个响应式数据（ref包裹的数据）：watch多个响应式数据，第一个参数为一个数组，数组的每一项都是响应式数据，所以每一个都应该是函数的返回值，第二个参数也是数组，每一项对应着第一个参数中各项：...
2022-06-22 17:25:36
380
原创 vue table使用colgroup进行表格自定义宽度
在默认情况下table表格的宽度是根据表格内容进行分配的想自定义宽度可以通过colgroup标签配合col标签设置：col的个数与表格的列数对应，因为我做的是自适应大小表格，所以width是用的百分比，默认是px；设置后就是自己想要的宽度/；...
2022-06-10 15:06:01
3331
原创 vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明从网上找了好多方法比如在tsconfig文件下增加：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [ "node_modules",
2022-03-25 17:31:58
10201
1
原创 警告：Component is missing template or render function.
警告：Component is missing template or render function.在写vue项目时，网页没有加载出来东西一片空白，然后控制台出现黄色的警告：原因是：在引入模块的时候没有写后缀！！！加上.vue后就可以正常显示了。...
2022-03-25 15:26:02
14258
3
原创 PowerShell yarn : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。
PowerShell yarn : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。在window下搜索windows PowerShell执行set-ExecutionPolicy RemoteSigned
2022-03-01 11:32:58
84
原创 React 编程式路由三种传参方式
React 编程式路由三种传参方式一、params传参goPush=(id,title)=>{ this.props.history.push(`/home/message/detail/${id}/${title}`) } <li key={message.id}> <Link to={`/home/message/detail/${m
2022-02-25 18:00:28
1113
原创 React警告： Warning: Can‘t perform a React state update on an unmounted component.
React警告： Warning: Can’t perform a React state update on an unmounted component.这是一个警告，错误原因是不能在组件销毁后设置state。解决方法：一、清除所有的定时器componentDidMount(){ let timer= setInterval(()=>{ let {newsArr}=this.state
2022-02-17 11:35:51
2912
原创 java调用C++ dll
java调用C++ dll使用IDEA新建一个名为Java2cpp的Java工程，并且使用模板。用native关键字包裹需要用到的C++中的函数package com.log.jni;public class Java2cpp { public native void LOG_LOAD_CONFIG(String address); public native void LOG_DEV_INFO_2(String name,int uid,String des); pub
2022-02-09 11:06:08
2272
原创 ‘javah‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
‘javah’ 不是内部或外部命令，也不是可运行的程序或批处理文件。在生成Java头文件时报错，经查询发现新版的Java不使用javah的命令了，而是使用javac -h用法：javac –h <directory> <source files>将路径cd到需要生成头文件的文件夹后，输入命令：javac -h ./ Java2cpp.java即可生成头文件。其中，“ -h ./ ”表示头文件生成到当前目录。...
2022-01-24 10:16:46
2708
1
原创 vue3.0 实现element-form 表单校验和提交
vue3.0 实现element-form 表单校验和提交vue3.0+element-plus的form表单：<template> <el-container> <el-header> <Header title="注册" :showBack= "true"></Header> </el-header> <el-main> &l
2022-01-14 17:44:36
7598
原创 element-ui使用过程中遇到的坑（一）
element-ui使用过程中遇到的坑（一）element-form使用时输入框输入不生效使用的是vue3，我把表单数据和校验规则ruleForm，rules写在setup中了，一直输入无效，解决：使用reactive代替ref 包裹ruleForm<el-form class="content" :model="ruleForm" :rules="rules" ref="myForm" label-width="120px" > <el-form-ite
2022-01-14 17:41:04
681
原创 vue3获取当前组件实例的方法getCurrentInstance
vue3获取当前组件实例的方法getCurrentInstance在vue3中，setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，setup的执行时组件对象还没有创建，此时不能使用this来访问data/computed/methods/props，我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象，也就是当前vue这个实例对象import { getCurrentInstance, onMounted, ref } from 'vue
2022-01-13 11:07:04
8917
2
原创 解决报错：Module not found: Error: Can‘t resolve ‘element-plus/lib/theme-chalk/index.css‘
解决报错：Module not found: Error: Can’t resolve ‘element-plus/lib/theme-chalk/index.css’在vue3中element-ui的安装已经改为npm install --save element-plus了，相应的css样式的引入也改变了，按照import 'element-plus/lib/theme-chalk/index.css'引入报错改为下面代码后就解决了：import 'element-plus/theme-cha
2022-01-10 17:02:56
17813
20
原创 Vue：The template root requires exactly one element.的解决办法
Vue：The template root requires exactly one element.的解决办法解决方法：在template标签下加一个根标签，就可以在根标签下放置多个标签不会报错了例如：<template> <div> <div id="nav"> <router-link to="/">Home</router-link> | </div> <router-view/>
2022-01-10 09:54:06
446
原创 vue3 引入element-ui
一开始在vue3中使用npm i element-ui --save 引入element-ui没有引入成功后来查找后使用了下面的方式：npm install --save element-plus在package.json中可以看到："dependencies": { "axios": "^0.24.0", "element-plus": "^1.3.0-beta.1", "vue": "^3.0.0", "vue-class-component": "^8.0
2022-01-07 14:09:12
5700
4
原创 path.join ()和path.resolve()的区别
path.join ()和path.resolve()的区别1、path.join():将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径const path=require('path')var path1=path.join(__dirname,'public')var path2=path.join(__dirname,'/img/jpg')var path3=path.join('/foo','bar')console.log(path1)console
2022-01-06 15:35:22
580
原创 Ajax前后端交互
Ajax前后端交互通过表单的形式进行前后端的交互，首先创建一个文件夹，打开终端执行npm init再npm install express npm install multer,在文件夹创建index.js 文件和public文件夹下面创建index.html 如图现在再html中写Ajax请求：1、创建一个XMLHttpRequest对象ie浏览器中创建方式：var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);Netscape浏览器中创建方式为:
2022-01-06 11:20:21
9469
1
原创 使用watch的几种写法
使用watch的几种写法vue2中watch的写法：第一种： watch: { list(newValue, oldValue) { } },第二种：监听的数据后面写成对象形式，包含handler方法和immediate， watch: { list: { handler(newName, oldName) { }, deep: true, immediate: true }}immediate：该属性表示在wat
2021-12-27 16:28:52
2136
原创 自用正则总结
自用正则总结不能为空：\S0-3位数字：^([0-9]{0,3})$0-1000，可以保留三位小数：^(\d|[1-9]\d{0,2}|1000)(\.\d{1,3})?$0-300，可以保留三位小数：(\d|[1-2]\d{0,2}|[1-9]\d{0,1}|300)(\.\d{1,3})?$可以为空：^\s*$
2021-12-27 11:38:37
189
原创 vue按钮禁止
vue按钮禁止通过给按钮设置 pointer-events:none;就可以不执行按钮事件。通常默认值为pointer-events:auto； <button @click="addItem" :class="{'btn-onlyRead':btnDisabled==true}"> <img class="add-img" /> </button> .btn-onlyRead{ pointer-events:none;
2021-12-24 17:50:59
2471
原创 vue双击事件
vue双击事件vue双击事件通过在标签上绑定@dbclick事件例如实现双击选择<li v-for="(item,index) in List" @dblclick="dbAddItem(index)"> <span >{{item.Name}}</span></li> function dbAddItem(index) { protocolList.value.splice(number.value, 1, List[index]);
2021-12-24 17:35:07
5176
原创 vue3子组件向父组件传递消息
vue3子组件向父组件传递消息除了vuex这个万用方法外，子组件向父组件传递消息可以通过emit的方式。以控制弹窗的关闭为例在vue3中， emits的定义是与component、setup等这些属性是同级1、首先需要在emits中先注册，emits此时是作为数组，它也可以接收一个对象。如果没有注册，会给父组件反馈两次。import { ref} from 'vue'export default { emits: ['DialogClose'],//注册 setup(props
2021-11-29 17:21:51
1447
原创 vue动态绑定class常用的方式
1、 绑定单个:class="{ 'active': isActive }"2、 绑定多个:class="{ 'active': isActive, 'sort': isSort }"3、 绑定数据对象:class="classObject"data() { return { classObject:{ active: true, sort:false } }}4、 三元运算符进行判断:class="[isActive?'active':'']"5、 数组对象结合动态判断
2021-11-03 11:22:36
264
原创 vuex调用state和getters
vuex调用state和gettersvuex在调用state的时候要加上模块名，而调用getters的时候不需要加上模块名。 store.watch((state, getters) => state.registerInfo.modality, res => { console.log(res) }) store.watch((state, getters) => getters.getBedId, res => {
2021-09-11 11:24:37
255
原创 css实现方框内打勾
css实现方框内打勾html: <div class="select-container" @click="selectItem(index)"> <i class="feature" v-if="checkBoxArr[index].selectStatus==1"></i> </div>css:.feature { width: 1rem; height: 0.5rem;
2021-09-07 17:05:12
2285
原创 vue 右键点击事件
右键点击事件为@contextmenu.prevent.stop=‘’<div @contextmenu.prevent.stop="rightClick(event)"></div> function rightClick(id) { console.log(id) }
2021-08-23 16:00:25
6972
原创 vue3 使用vuex（1）
使用vuex进行兄弟组件的通信这个问题很简单，我搞了一天才解决的vuexstore index.tsimport { createStore } from 'vuex';import StudyStatus from './study';import PlanboxStatus from './planboxStatus';import selectSeries from './selectSeries';import GantryStatus from './gantryStatus'
2021-08-17 15:38:28
138
原创 vue3 setup踩坑
vue3 setup踩坑1.setup定义变量使用要ref()，要进行引用import {ref} from 'vue'注意ref放在{}里，否则会报错没有兼容的调用签名2.变量的赋值要使用.value let bedId = ref(1) function selectBed(id) { bedId.value= id }3.setup的值渲染到vue上不生效，仔细检查过发现定义的bedId的值没有传给vue的原因是没有return bedIds
2021-08-16 17:03:55
1428
原创 input 输入框显示默认文字
input 输入框显示默认文字我做了一个有下拉框的input输入框组件，在输入框显示默认设置的文字，可以通过设置input的v-model的绑定内容来设置子组件vue： <div class="input-select-container" @blur="onConBlur()" id="input-select-container" > <div class="input-container FlexRow"> &l
2021-08-16 14:45:20
8729
原创 unterminated string constant 问题解决
unterminated string constant 问题解决在写代码的时候出现了报错，unterminated string constant<SelectBox style="margin-left:1rem;" :parameter="'Day'" :boxWidth="'9.2'" :tip="'day'" :OptionValue="data[1]></SelectBox>找了好久问题，发现格式出错了，标签少一边双引号，在data[1]后加上双引号之后就没问题了
2021-08-13 17:19:14
12839
原创 vue3.0使用vuex
vue3.0使用vuex下载安装npm install vuex@next --savecnpm install vuex@next --saveyarn add vuex@next --save项目中使用在根目录下创建store文件夹，store下创建index.ts文件import { createStore } from 'vuex';export default createStore({ state: { }, mutations: {
2021-08-11 17:32:07
1050
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人