- 博客(52)
- 收藏
- 关注
RSS订阅原创 electron自定义标题栏，并监听双击以及右键改变窗口大小。
当需要在标题栏添加一些额外的操作时候，比如添加 帮助 菜单，自带的标题栏开发起来比较困难（没了解不知道能不能实现），这时候，自己写一个标题栏就比较方便。
2023-10-08 19:36:35
1516
原创 useReColumnWidth自适应Table列宽hooks
在使用antd中Table组件的时候，如果columns的总宽度不够容器的宽度，就会自适应，每个column的宽度会改变。但是有的列不希望自适应，就应该展示设定的宽度。当宽度不够撑满的时候，就让最后一列和没有设置宽度的column自适应。
2023-05-18 10:31:49
246
1
原创 Echarts风向玫瑰图
Echarts柱状极坐标风向玫瑰图的实现echarts代码本来看到玫瑰图，就看到了echarts示例中饼图的南丁格尔玫瑰图。发现不太像。后来发现是柱状图极坐标系堆叠图。一开始用了多个series，图例是能实现，但是显示的图有问题。柱太细了数据一多根本看不见。使用一个series，图例又没办法绑定到数据。还好图例比较简单，决定直接自己写一个。eharts的配置项真的太难了。找的很头疼，实现的也很头疼。一辈子不想写图表了。图例的实现首先根据数据生成一个title数组，因为要判断当前点击和未点
2022-05-20 08:51:49
3082
原创 reduxjs/toolkit使用
reduxjs/toolkit使用1、安装要和react-redux一起使用cnpm i react-redux @reduxjs/toolkit -D 2、新建redux文件夹在下面新建store.ts、slice.ts、hook.ts三个文件store.tsimport { configureStore } from "@reduxjs/toolkit";import stateSlice from "./slice";import otherSlice from "./otherSl
2022-05-10 08:35:19
2912
原创 css显示隐藏元素
css显示隐藏元素1、display:none元素在页面不显示但是在dom结构上能看到触发回流和重绘1、其余属性block: 块元素inline: 行内元素（默认值）inline-block：行内块元素inherit：继承父元素的display属性2、opacity：0透明度为0只是看不到，但是还存在，点击事件可以触发会触发页面的重绘，不会触发重排3、visibility:hidden元素不可见，但是会占据空间不会触发事件会触发页面的重绘，不会触发重排1、其余属性v
2022-04-07 15:26:05
868
原创 react-hooks中useContext的使用
react-hooks中useContext的使用1、作用useContext可以多层嵌套传输数据和方法2、使用1、新建一个store.js文件，使用React.createContext()创建一个自己的Contextimport React from "react";const myContext = React.createContext(null);export { myContext };2、最外层组件使用myContext.Provider包裹然后value传入自己需要的
2022-04-07 15:25:06
371
1
原创 react-hooks之useRef，useImperativeHandle的使用
react-hooks之useRef，useImperativeHandle的使用1、函数内部使用useRef可以用来做数据持久化，也可以用来获取到元素实例ref.current的变化并不会导致函数组件的重新加载不像useState可以用一个假的useState，结合useEffect的依赖让useRef的值改变后重新加载函数import React, { useState, useContext, useRef, useEffect } from "react";const App = ()
2022-04-07 15:23:53
765
2
原创 虚拟Dom
虚拟Dom一直以来都知道虚拟dom这个概念就是用代码来生成Dom，可以用diff算法今天自己来实现一下，如下创建一个对象，包含元素的各种属性，我这里就写了标签名和文字。嵌套的加个个Child然后循环数组创建元素插入到body中，如果有child就插入到父元素中。因为是一个数组，每次改变的时候就可以对比上次和本次dom数组判断哪里变化了，变化了才修改这就是diff算法<!DOCTYPE html><html lang="en"> <head> &
2022-04-07 15:22:40
317
原创 vue3+pinia的使用
pinia新的状态管理工具1、安装npm install pinia --save2、新建store,在main.js中引入在根目录下新建store文件夹，新建index.jsimport { createPinia } from "pinia";// 创建storeconst store = createPinia();export default store;main.jsimport { createApp } from "vue";import App from "./App
2022-03-26 10:54:35
1440
原创 在线商城和商城后台管理系统
在线商城和商城后台管理系统1、商城使用了vue2+elementUI实现了登录注册、浏览商品、购买商品、收藏商品、商品搜索、加入购物车、查看订单、添加收货地址、在线客服、分类查看商品的等功能2、商城后台管理系统使用了react+antd实现了注册登录、商城整体数据的查看，用户管理、商品管理、订单管理、财务管理、客服服务的功能，其下还分各种小功能对用户商品订单等详细功能进行增删改查的操作2、商城的后端使用了express+mongoDB使用了node.js的express和mongoDB数据库
2022-02-11 14:55:05
8943
原创 react中使用谷歌地图并定位
react中使用谷歌地图1、引入index.html文件中引入谷歌地图<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <lin
2022-02-07 16:20:49
1687
2
原创 react项目国际化
react项目国际化这里使用的react-intl1、安装react-intlnpm install react-intl --save 或者 cnpm install react-intl --save2、引入在需要国际化的文件引入react-intl需要全局国际化就在app.js文件中引入import React, { Component } from "react";import { IntlProvider } from "react-intl";class Page exten
2022-02-07 16:16:01
1318
原创 表单添加相同多组规则实现react+ant3
title: 表单添加多组规则date: 2021-07-30tags:- antd起因框架react+ant3（老项目重构很难）新版本一个需求原型如下：[可以有多个规则，且规则之间时间需要连续。上一个结束时间的第二天要是下一个规则的开始时间。如果第一个结束时间是7月30号,下个月的开始时间要是7.31号。依次类推。还要可以批量设置。就是一次性设置多个。首先肯定想到的是用数组map,用的form表单。就新建一个数组arr=[0],点击添加按钮的时候就再push一个0，删除按钮就arr..
2021-07-30 22:24:32
414
原创 点击按钮访问接口返回的url,进行下载文件与跳转操作
点击按钮访问接口返回的url,进行下载文件与跳转操作点击调用download()方法就是创建a标签设置a标签属性添加a标签到页面中点击a标签移除a标签下载示例 //res 是接口返回的数据download = (res) => { let eleLink = document.createElement("a"); //设置样式为不可见 eleLink.style.display = "none"; //_blank表示在
2021-06-17 09:42:38
1396
原创 react项目中修改ant design 主题色
react项目中修改ant design 主题色1、安装less和less-loadernpm i less --save注意：less-loader 版本大于等于5.0.0npm i less-loader --save2、在webpack.config.dev.js文件中添加如下代码 { test: /\.less$/, use: [{ loader: "style-loader" // creates st
2021-05-26 13:55:16
1094
原创 递归把多层嵌套的一层数据结构转换成原本的多层
背景一个多层嵌套评论回复的场景，但是孤儿后端，把所有的回复数据，放到一个数组里返回给我，只有一层，我要给数据转换成原先的多层嵌套的模式。数据结构如下：//commitId是最外层的评论ID//id是每条回复自己的ID//replyId是回复父级的IdreplyMsg表示回复内容这里我表示层级//现在要把每个子级回复放到父级回复的child里面//commitId是最外层的评论ID//id是每条回复自己的ID//replyId是回复父级的Id//现在要把每个子级回复放到父级回复的chil
2021-04-21 08:42:53
365
原创 javascript排序算法01
title: javascript排序算法01date: 2021-04-15tags:- 算法- 排序冒泡排序两两对比，如果n项大于n+1项，就交换位置。基本的forEach执行就是所有循环结束，不能break。map同理const arr = [90, 33, 23, 43, 54, 123, 78, 56, 76, 112]// const arr = [1, 2, 3, 4, 5, 6, 7]let a = 0//基本 arr.forEach(() => {.
2021-04-15 17:44:54
76
原创 express-ws实现客服聊天功能
title: express-ws实现webSocket通信date: 2021-04-10tags:- express- webSocket前言最近要给自己写的项目中加一个客服聊天的功能。就是前端商城和后台管理系统通信。但是是两个不同的端口。百度了一下就找到了webSocket。什么是webSocket？WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端.
2021-04-11 10:33:01
2883
1
原创 JavaScript关于数组
判断一个数组是否为空const arr = []if(arr.length===0) { console.log("该数组是空数组")}判断一个数组里是否有重复值//循环添加到一个对象里，判断对象里是否有这个值var arr = ["a", "b", "c", "d", "a"]function isRepeat(arr) { var obj= {}; for (var i in arr) { if (obj[arr[i]]) {
2021-04-08 09:38:35
67
原创 创建一个vue3.0+element-plus项目
创建一个vue3.0+element-plus项目首先要确认自己电脑中的@vue/cli>4.5可以用vue -V查看没有的话可以用npm i -g @vue/cli升级升级成功后**vue create my-pro**这里选择Vue 3的项目。创建成功后。执行下面的命令。cd my-provue add element-plus全局加载和按需加载自己选择。安装成功后。npm run serve发现项目跑起来了。按需加载的话，需要在src/plugins/eleme
2021-03-20 14:18:16
700
原创 简单实现打字效果
自己的博客主页，有个打字的效果，就简单的自己动手实现了下。思路就是，添加数组里的字，删除数组里的字。不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
2021-03-17 15:12:10
137
原创 Vue3中路由的相关配置，跳转，传参，嵌套
Vue3中路由的相关配置1、路由的配置在src路径下新建router文件夹，然后在该文件夹新建index.js文件安装vue-routercnpm i vue-router@next --saveindex.js文件配置如下。import { createRouter, createWebHistory } from "vue-router";const addCount = () => import('../components/addCount.vue')const Fathe
2021-03-16 14:58:50
380
原创 vue3中css使用data中的变量
如何在vue的css中使用data中的变量。很简单用v-bind一个简单的例子<template> <div> <h1 class="h1" >我是{{ color }}</h1> </div></template><script>export default { data() { return { color: 'red', } } }}</s
2021-03-15 14:01:34
2088
1
原创 从数组中取出随机几个数组成新数组（不重复取）
要给自己的商城，加一个推荐商品的功能。想让他随机从商品表中取出4个数据。 一开始我用Math.random()*arr.length但是会取出相同的。这样就不太对，哪有推荐两个相同的商品呢。 然后想到获取当前选择的下标，把选择的那个删除。下一次随机，就随机不到那个数了。//前台传来的当前商品的idconst nowGoodsIndex = req.query.goods_id-1 const goods = await Goods.find() le
2021-03-11 17:48:40
1263
原创 node.js+express+mongodb来开发后端
node.js+express+mongodb来开发后端大四临近毕业，要开始写毕业设计，但是作为前端的我，对后端一窍不通。然后想到nodejs也可以写后端。用的就是javascript。应该学习成本不是很高。如今已经写好了毕设。但是对当时怎么用nodejs+express+mongodb写接口有点遗忘了。今天来记录一下。以便后面来复习和查找。1、安装expressnpm install express --save2、新建一个js文件//引入express并绑定到app上const expr
2021-03-11 17:19:53
338
原创 记录月经周期的微信小程序
写了一个记录月经的微信小程序，名字叫姨妈早知道小程序码1、首页2、设置页面3、个人页面4、名词解释页面点击日历下方各名词切换刚开始想逻辑的时候，我只是存了一个选择的日期数，1号就存1持续5天就1-5号，下次就是5号加上周期数减去了当前月的月份。然后下月显示。可是当周期少的时候，一个月中含有两个经期。于是我改变了思路。把当月的天数当成一个数组数组里面是天数的false,例如当天有30天，数组里就有30个false，1号开始持续5天，数组的1-5项变为true。逻辑是对了，但是不
2021-03-10 17:01:59
10711
7
原创 react 中使用Swiper轮播图插件
第一步、安装 npm i swiper第二步、使用import { Swiper, SwiperSlide } from 'swiper/react';//根据自己的需要引用样式import 'swiper/swiper.less';export default () => { return ( <Swiper spaceBetween={50} slidesPerView={3} onSlideChange={() =>
2021-03-08 16:07:02
2087
2
原创 Umijs中davJS的学习
最近公司新项目用的UmiJs3.x，整个项目的数据，通过内置的Davjs来控制。昨天自己分析了一下Davjs。但是脑海中的概念还是很模糊。今天再梳理一下。第一步首先是在Models文件夹下创建一个JS文件const GlobalModel = { //model的名称 namespace: "global", state: { //放数据的地方 user:{} }, effects: { // 异步处理数据，不能直接修改数据，需要通过put调
2021-03-02 09:40:35
832
原创 React项目(UmiJS)中使用高德地图
React AMap这是一个基于 React 封装的高德地图组件.文档地址https://uiw.gitee.io/react-amap/#/01、安装npm install @uiw/react-amap --save02、使用在文档左侧找到需要使用的例子。在右侧直接复制对应代码。按需进行修改。03、例子（贝塞尔曲线的使用）import React, { useState } from "react";import { Map, APILoader, BezierCurve } fro
2021-03-02 09:33:33
1041
原创 vue/react中使用rem布局
rem布局学习rem是移动端布局，自适应屏幕 常用的方法。原理1rem = 不同设备下fontsize的初始值于是用rem做单位不同屏幕的元素大小就不一样，可以达到适配。在vue/react项目public/index.html文件的头部添加以下代码<script> fnResize(); window.onresize = function() { fnResize(); }; function fnResize()
2020-12-23 09:28:19
988
原创 react中进一步封装axios,对错误信息进行拦截
react中进一步封装axios之前在react项目中封装了axios但是在每次请求的时候都要判断，后台返回的状态码，很麻烦。async componentDidMount () { await $http.get('/station/list').then((res)=>{ this.setState({ data: res.data.data, total:res.data.data.length }) if(res.data.d
2020-12-22 08:49:06
830
原创 react中像vue中一样封装路由和路由的跳转
react中封装路由在src目录下新建router.js文件//导入组件import Main from './components/main'import Admin from './components/eAdmin'import Home from './views/home'import Login from './views/login/login'//创建路由const routes = [{ path: '/home', component: Home,
2020-12-15 09:26:29
702
原创 react项目中封装axios，设置请求头
react中封装axios在src目录下新建一个request.js文件。import axios from "axios";//设置请求得基准地址axios.defaults.baseURL = 'http://xxxx.com/api'const $http = axios.create();//设置请求头$http.interceptors.request.use(config => { // 给请求头加上Authorization,authJWT的字段,值为token
2020-12-15 09:03:11
3172
1
原创 在React中使用echarts,封装echarts组件
01、在React中使用echarts开始先百度如何在react项目中使用echarts。按照百度到的步骤写，安装然后引入echars-for-react这个包。编译没有错。但是浏览器报错：dispose 和 getInstanceByDom 的prototype undefinded。因为我用的是函数式组件，没有生命周期。我一开始怀疑是不是因为函数式组件的问题。我换成了类组件之后，还是报同样的错。没办法我只能去官网，按照官方的在 webpack 中使用 ECharts。如下所示成功了！
2020-12-14 13:26:50
1671
原创 解决eslint报错
暴力解决：直接关闭 ESLint在 package.json 文件中 添加 "rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whitespace":"off", "no-debugger": "off"}...
2020-12-10 11:40:56
606
原创 react学习02
2020.12.0901、react路由安装npm i react-router-dom使用import React from 'react';import ReactDOM from 'react-dom';import { BrowserRouter as Router, Link, NavLink, Route } from 'react-router-dom'import './index.css'function AA (props) { console.log(pr
2020-12-10 11:33:19
85
原创 react学习01
这里写自定义目录标题欢迎使## 2020.12.08学习内容01、react的传值02、条件渲染 if判断03、列表渲染 for循环04、状态管理05、生命周期06、React事件07、小demo疫情地图08、ajax请求（axios)欢迎使## 2020.12.08学习内容01、react的传值props传值 单向流动 父传子props可以传递函数父元素中使用state去控制子元素的props，可以达到向父元素向子元素传值class Father extends React.Compon
2020-12-10 11:32:24
105
原创 前端面试三——Vue
前端面试三——Vue1、Vue最大的特点Vue最大的特点就是组件化和数据驱动组件化：就是可以将页面中可以复用的元素，看成组件，写页面的过程就是写组件，然后页面就是由这些组件拼接起来的组件树。数据驱动：就是我们只关心数据层面，数据变化，页面就会跟着变化，操作dom交给vue去完成。2、Vue常用的指令有哪些v-if ：根据表达式的真假条件，来渲染元素，切换的时候，元素是删除和创建。v-show： 根据 display：none的切换，来使元素显示与隐藏。v-for： 循环指令，基于一个数组或者
2020-08-25 09:41:54
296
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人