![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
hero_th
当打之年,感恩一切!
展开
-
Node.js 获取当前时间
【代码】Node.js 获取当前时间。原创 2023-02-12 18:06:04 · 1032 阅读 · 1 评论 -
vue3设置vscode的代码片段模板
【代码】vue3设置vscode的代码片段模板。原创 2023-02-11 21:37:24 · 260 阅读 · 0 评论 -
js 数据处理题
第一题let arr = [{ name: 'a', values: [1, 2]}, { name: 'b', values: [3]}, { name: 'a', values: [4, 5]}]转换成如下[ {name:'a',values:[1,2,4,5]}, {name:'b',values:[3]}]Answerfunction merge(arr) { let newMap = new Map(); a原创 2021-10-11 16:25:08 · 264 阅读 · 0 评论 -
秒懂文件路径 ‘/‘ , ‘./‘ , ‘../‘ 的区别
/ :代表根目录(盘符所在的目录)./ :代表当前文件所在目录…/ :代表上一级所在的目录/按照 ‘/’ 在查找这个a.png ,在浏览器上打开页面是空白。控制台报错如下它直接去C 盘目录下寻找了。因此在我window系统上,/ 代表是盘符 根目录./这个代表当前文件 所在的目录代表同一层级下 , 跟 不加 ‘./’ 一样的效果…/这个代表当前文件所在上一级目录...原创 2021-10-05 09:34:40 · 5651 阅读 · 2 评论 -
vite 打包页面空白
根据vite 官网的打包配置教程这里需要着重强调一点 问题/ 跟 ./这两个东西 完全不是用一个路径Solution将 vite 里面的配置文件是 vite.config.js在配置里写上 base: './' 即可解决。原创 2021-10-04 22:38:03 · 8485 阅读 · 6 评论 -
element-plus Radio 单选框点击失效 无法切换问题
原因就是el-form 表单中绑定的ref 跟v-model 相同。删除掉绑定的ref 就ok了。现在el-radio-group 可以正常切换了原创 2021-10-02 21:16:02 · 2536 阅读 · 0 评论 -
Property “pageNumber“ was accessed during render but is not defined on instance.
今天在用element-plus 开发的时候,遇到控制台的一个警告。虽然页面正常显示,但是作为一名严格要求自己的开发人员来说,尽量能解决的问题,还是解决一下吧。Solution问题就出在这两个变量,他俩报错了。然后这两个变量我是定义在reactive 里面重点来了,重点来了!!!!需要加上对象的名字,然后才能正常使用对象中的属性值!!!如果觉得对你有帮助,请给博主点个赞叭!...原创 2021-10-02 14:06:19 · 5976 阅读 · 0 评论 -
vue3 中 ref 和reactive 的区别
reactive<template> <div @click="handleFun">{{state.data}}</div></template><script setup>import {reactive} from 'vue';const state = reactive({ data : 1})const handleFun = ()=>{ state.data = 2}</script>原创 2021-10-02 13:54:17 · 1237 阅读 · 0 评论 -
vue3 使用element-plus 表单校验
vue3 没有this!vue3 没有this!vue3 没有this!template<el-form label-position="top" ref="loginformRef" label-width="100px" :model="loginform" hide-required-asterisk> <el-form-item prop='username' label="username" :rules="[ { .原创 2021-09-28 21:28:38 · 6078 阅读 · 3 评论 -
vite+vue3 整合vue-router4和vuex4
vue-router 41.installationyarn add vue-router@4 -Snpm i vue-router@4 -S2.src/router/index.js// router/index.js文件 import { createRouter, createWebHashHistory } from 'vue-router' // !!!注意:.vue不能省略,否则会报错,项目不能运行,如下错误 /* index.js:3 GET http://lo原创 2021-09-27 14:44:30 · 916 阅读 · 0 评论 -
Vite 配置项目别名-最新版
先来看一下官方文档的说明看完之后,我也不知道怎么回事。说了和没说一样。vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path' //引入path// https://vitejs.dev/config/export default defineConfig({ resolve:{ alias:{ "@"原创 2021-09-27 13:17:36 · 569 阅读 · 0 评论 -
vue 异步更新队列 Vue.nextTick(callback)
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。例如,当你设置 vm.someData = ‘new value’,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。.原创 2021-09-25 11:02:16 · 266 阅读 · 0 评论 -
axios get请求添加去缓存
axios 中的get 请求浏览器会产生缓存浏览器对于 GET 请求会将请求结果缓存起来,而 POST 不会。其中更具体的细节是:Chrome 和 Firefox 会检测 GET 请求的如果是静态资源才会缓存,如果是数据则不会缓存。IE 浏览器则会将 GET 请求全部缓存,不会检测请求的是什么。这样的场景很多,例如我们添加或修改数据成功后,立马调用列表查询接口,因查询接口是get请求,产生了缓存,响应数据还是之前数据,并没有新增或修改后的数据,给人感觉像是添加或修改失败,这显然是不合理的,那么原创 2021-09-23 09:30:01 · 1311 阅读 · 0 评论 -
vue element ui 样式修改无效
最近在使用vue 搭配element ui进行开发的时候,遇到el-dialog 样式修改无效的问题。搁置了我好长时间。Solution One将样式写在全局中,如App.js<style scoped>/* 本地样式 */.aritle-page{ //你的命名空间 .el-tag { //element-ui 元素 margin-right: 0px; }}</style>Solution Two使用深度作用选择器如果你.原创 2021-09-16 19:48:06 · 790 阅读 · 0 评论 -
ejs 基础语法教程
ejs<%= %>输出数据到模板。相当于innerText。或者是vue中的{{ }}//数据源let userinfo = { username:'lisi'}//ejs<p> <%=userinfo.username%> </p><%- %>输出非转义的数据到模板。相当于innerHTML。//数据源let article = '<p>this is a demo</p>';/原创 2021-09-12 22:42:12 · 389 阅读 · 0 评论 -
前端 JSON 数据格式化展示
效果预览Method One<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-09-10 16:51:08 · 1290 阅读 · 0 评论 -
React [Umi] history(API) 路由监听
路由跳转import { history } from 'umi';// 跳转到指定路由history.push('/welcome')// 带参数跳转到指定路由history.push('/welcome?title=value')history.push({ pathname: '/welcome', query: { title: 'value' }})// 跳转到上一个路由history.goBack();路由监听componen原创 2021-09-01 09:10:08 · 3668 阅读 · 0 评论 -
react 设置背景图片 (等比例显示,不拉伸)
js 代码部分<div className={styles.img_box} > <div className={styles.img} style={{backgroundImage: `url(${this.state.url})`}} /></div>less 代码部分.img_box{ width: 100%; height: 610px; .img{ width: 100%; height: 1原创 2021-09-01 09:05:20 · 3199 阅读 · 1 评论 -
antd 使用upload 组件,使用自定义上传行为,覆盖默认action 访问请求
今天遇到测试提起的一个项目bug。使用antd里面的 upload 组件上传图片,本地测试使用没有问题。当项目上传到服务器,测试 接口报405,打开控制台中的network,访问了一个没有调用的接口,nginx 报405。网上查询资料,是upload组件上传图片默认调用了action 路径,如果未设置的话,就以当前网页的url为路径进行访问。方法为post请求进行访问静态资源。使用customRequest属性来阻止默认上传行为<Upload name="avatar" list.原创 2021-08-25 15:31:40 · 11602 阅读 · 1 评论 -
表单元素设置disabled后 支持点击事件
<Label onClick={this.handleClickOver.bind(this)} className='checkbox-list__label' for={i} key={i}> <Checkbox disabled style={{pointerEvents:'none'}} className='checkbox-list__checkbox' value={i}> </Checkbox></Label>原创 2021-08-11 17:55:36 · 879 阅读 · 0 评论 -
React taro 微信小程序上传文件 多个文件上传
handleUploadFile(){ let that = this; wx.chooseMessageFile({ count: 4,//最多上传四张 success(res){ const tempFiles=res.tempFiles; var successUp = 0; //成功 var failUp = 0; //失败 var length = tempFiles.length; //总数原创 2021-08-08 21:19:56 · 1538 阅读 · 0 评论 -
React 单文件上传和多文件上传的封装
1. 新建request.ts 文件@/utils/request.ts// 文件上传export const requestFile = async (params: { [key: string]: any }, query: Function, successFn: Function, progressFn?: Function, errorFn?: Function) => { const formData = new FormData(); formData.appe原创 2021-08-08 21:08:38 · 1542 阅读 · 0 评论 -
React antd 使用类式组件 对表单数据域进行控制 this.formRef.current.setFieldsValue
Class component1. 创建refclass Demo extends React.Component { formRef = React.createRef(); state={ }}2. 表单绑定ref//ref={this.formRef} 先给Form <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}> <原创 2021-08-08 20:51:35 · 4135 阅读 · 1 评论 -
将 url query参数 字符串转换为JSON 对象
Importimport querystring from 'querystring'Usagelet str = '?username=admin&password=123456';let newStr = querystring.parse(str);console.log(newStr);//打印输入如下{ "?username":"admin", "password":"123456"}因为通常情况 url 中的query参数会带有?,所以我们会先截取一下。原创 2021-08-01 16:43:07 · 1650 阅读 · 0 评论 -
前端使用 geetest 行为验证 web-部署教程
1. 完成服务端部署需要后端部署完成。接口返回以下必传参数2. 引入初始化js函数gt.js下载地址<script src="gt.js"></script>3. 调用初始化函数进行初始化initGeetest({ // data中以下配置参数来自服务端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: true}原创 2021-08-01 12:19:13 · 1135 阅读 · 0 评论 -
react 使用cookie react-cookies
react-cookiesInstallnpm install react-cookies -S//oryarn add react-cookies -SImportimport cookie from 'react-cookie'Handle//存cookie.save(key, value, { path: '/' });//取cookie.load(key)//删除cookie.remove(key, { path: '/' }){ path: ‘/’ }加上这个原创 2021-07-30 17:54:02 · 2402 阅读 · 0 评论 -
React 使用图片验证码组件(登录验证)
安装插件npm install react-captcha-code -S//oryarn add react-captcha-code -S属性和方法名称类型必填默认值描述heightnumber否40图片高度widthnumber否100图片宽度bgColorstring否#DFF0D8背景颜色charNumnumber否4验证码字符个数fontSizenumber否25字体大小onChange原创 2021-07-30 17:34:35 · 3576 阅读 · 3 评论 -
React + leaflet 地图瓦片 加载错乱 不能正常显示
1. 在index.js 中引用css样式import '../../../node_modules/leaflet/dist/leaflet.css'2. 给指定地图容器设置高度<div id='map' style={{ height: '700px'}} ></div>原创 2021-07-21 16:22:48 · 974 阅读 · 0 评论 -
Protable 自定义添加搜索栏和toolbar
Code //自定义搜索栏按钮 search={{ defaultCollapsed: false, optionRender: (searchConfig, formProps, dom) => [ ...dom.reverse(), <Button key="out">导出</Button>, ], }} //自定义添加toolbar按钮 toolBarRender={() => [ <Button key=原创 2021-07-16 17:09:39 · 3950 阅读 · 1 评论 -
前端实现 导出图片,导出PDF(截图原理)
导出图片1.安装依赖yarn add dom-to-image 或 npm install dom-to-image --saveyarn add file-saver 或 npm install file-saver --save2.代码实现//导入包import domtoimage from 'dom-to-image';import { saveAs } from 'file-saver';//导出图片 handleExportPhoto = ()=>{ //ex原创 2021-07-15 17:18:30 · 2361 阅读 · 0 评论 -
React antD 使用Select 进阶功能 远程搜索,防抖控制,加载状态
1. 引入组件import { Select, Spin } from 'antd'; //引入选择器import debounce from 'lodash/debounce'; //函数防抖const { Option } = Select;2. 配置Select 选择器一些属性就不在这一一介绍了,关键的属性在旁边写好了注释,是必须要加上的。想了解更多属性的,可以自行在官网查询.antd已经给我们封装好了加载状态的组件:<Spin /> .然后通过state控制其出现和消失.原创 2021-07-13 21:19:24 · 4517 阅读 · 4 评论 -
React antD-Pro 添加函数防抖
在实际项目当中,一个函数可能会由于某种状态的改变,被调用多次,然后后端的接口就会被反复的调用。这时候,我们需要做一个性能优化,增加函数防抖功能。添加函数防抖插件:lodash/debounceimport debounce from 'lodash/debounce'; //在constructor统一绑定事件. 和经常使用的bind(this)一样class Demo extends React.Component { constructor(props) { super(pro.原创 2021-07-13 20:45:38 · 655 阅读 · 0 评论 -
拜托!HTML渲染background-image的时候,url请一定加上‘ ‘(单引号)
Problem Description今天遇到公司的一个项目,小程序的,用react写的。搞了一半天,图片就是不显示。附上原图然后切换到微信开发者工具,打开调试。图片不显示,Wxml的样式是Try to solve我讲背景图片部分的代码进行了注释,然后换成Image标签然后图片被成功渲染出来在页面上, 这个说明,src的路径是没问题的。那么问题就出现在上面的那个backgroundImage的上面。顿时,我的脑海就好像浮现出,之前在学html,css的时候,pink老师好原创 2021-07-06 17:35:30 · 1528 阅读 · 0 评论 -
yarn create @umijs/umi-app或者yarn create umi myapp 报错:文件名、目录名或卷标语法不正确。
1. Problem Description在学习ant-design,使用 @umijs/umi-app 为模板,创建一个项目:和ant-design-pro的时候,使用umi myapp 创建一个项目时。yarn create @umijs/umi-app//或者yarn create umi myapp发生报错,报错如下显示报错:文件名、目录名或卷标语法不正确。很难受,上午也没整明白,下午也没整明白。2. Problem Analysis本质是因为yarn包的安装位置在C盘(原创 2021-07-05 17:52:09 · 1593 阅读 · 0 评论 -
vue中 点击二维码刷新图片(src不变)
template<img @click="changeVerifyUrl" :src="verifyCodeUrl" alt="" style="height:32px;cursor:pointer;">script思路:在url后面拼接上一个问号,然后再加上Math.random()就OK了data(){ return { verifyCodeUrl:'http://xxx/common/verifyCode', }},methods:{ changeVerifyUr原创 2021-06-18 21:27:41 · 1496 阅读 · 3 评论 -
uniapp/vue 组件之间的传值
父组件向子组件传值1.父组件(传递)<template> <div> <child :title="title"></child> </div></template><script>export default{ data(){ return { title:"hello child!" } }}</script>2.子组件(接受)<template>原创 2021-05-20 21:47:04 · 477 阅读 · 1 评论 -
ivew ui 中使用Menu组件时导航菜单 active-name 无法动态激活问题
博主在网上查阅了多数资料后,无果而返。有什么说动态绑定active-name 的,还有什么用官网的updateActiveName 手动更新的,都不行!!!最后还是在B站跟着黑马的那个element ui 电商管理系统写的,成功!!1.给Menu 中的active-name 动态绑定路由2…给点击导航菜单绑定的点击事件中,将获取的路径储存到sessionStorage里面,然后给动态的路由重新赋值methods: { selectMenu(name){原创 2021-04-25 14:39:26 · 697 阅读 · 0 评论 -
使用webpack 打包出错[webpack-cli] TypeError: Cannot read property ‘tap‘ of undefined
刚开始学webpack搭建项目, 跟着B站的视频跟着做,但是总是会遇到一些错误。此时的webpack 版本为:4.44.2html-webpack-plugin 版本为:5.11.0报错如下图:错误原因因为webpack的版本号跟html-webpack-plugin的版本号不匹配,应该算是相互不兼容的原因就是说我现在webpack的版本号为4,而html-webpack-plugin的版本号是5。然后我在网上看的大佬的报错原因:他的webpack版本是5,然后html-webpack-.原创 2021-04-20 19:23:51 · 5591 阅读 · 1 评论 -
RestFul 风格规范
目录1.GET 方法2.POST 方法3.PUT 方法4.DELETE 方法restful 统一资源接口RESTful架构应该遵循统一接口原则,统一接口包含了一组受限的预定义的操作,不论什么样的资源,都是通过使用相同的接口进行资源的访问。接口应该使用标准的HTTP方法如GET,PUT和POST,并遵循这些方法的语义。如果按照HTTP方法的语义来暴露资源,那么接口将会拥有安全性和幂等性的特性,例如GET和HEAD请求都是安全的, 无论请求多少次,都不会改变服务器状态。而GET、HEAD、PUT和原创 2021-04-12 16:40:50 · 223 阅读 · 1 评论 -
Vue 中使用element ui 自定义邮箱和手机号的效验规则
验证邮箱的规则var checkEmail = (rule, value, cb) => { //验证邮箱的正则表达式 const regEmail = /^([a-zA-Z0-9_-])+@([a-ZA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if(regEmail.test(value)) { //合法的邮箱 return cb() } cb(new Error('请输入合法的邮箱'))}//然后在formrules中添加效验属性email: [原创 2021-04-06 16:00:42 · 794 阅读 · 0 评论