咿呀咿呀哟~~-CSDN博客

原创 JS 防抖与节流

防抖与节流的区别：防抖：将多次执行变为最后一次执行节流：将多次执行变为每隔一段时间执行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=dev

2022-02-09 16:00:11 212

原创 node + mysql 实现前后端简单交互

前言上上周给实习生布置个简单的前后端交互的任务，需求比较简单，如下图中所示：给了他们两周的时间，一边学习一边做这个 demo。前几天他们中都在问我前后端交互怎么做，都不知道是怎么做的。于是我给他们做了个demo参考前后端交互逻辑对于他们反应的问题，我首先给他们说了下前后端交互逻辑，然后画了一张草图，如下所示：发给他们后还是有人反应太难了，做不出来，于是乎我就做了个简单的demo。demo 示例我自己分了几个步骤：搭建 node 服务器配置路由连接mysql数据库处理前端请求

2021-12-01 16:46:41 1700

原创 react 通过 iframe 嵌套svg 并操作 DOM

公司有个需求，首页需要使用 svg 绘制，此时，就需要我使用 iframe 将 svg 嵌入到页面中，并操作页面元素。主要通过以下来获取 svg domdocument.getElementById(IframeID).contentDocument1、首先将 svg 放到本地目录，此处因为我svg较多，为了方便后续维护，我放在了 nginx 中，用 nginx 做的静态资源服务2、如果放在 nginx 中需要配置环境3、通过 iframe 嵌套 svg render() {

2021-10-26 11:25:19 496

原创 react hooks useContext 实现父子组件通讯

今天接触了一下 hooks , 确实感觉相比 class 组件要轻量及很多,瞬间爱上了~我来说一下使用 useContext 时实现父子组件通讯问题,贴上我demo的代码~先贴上我用到的三个文件父组件 App.jsimport React, { useState } from 'react'import CountContext from './createContext'import Counter from './Counter'export default function App(

2021-09-02 15:53:12 528

原创 antd table 样式修改

.ant-table-wrapper { width: 98%; height: 100%; position: relative; top: 30px;}.ant-table { background-color: rgb(9,100,100); color: white;}// 表头样式.ant-table-thead > tr > th { background-color: rgb(3,50,50); color: white;}// 修改

2021-08-30 11:07:48 1755

原创 antd menu 样式修改

记录一下antd 中,table 样式修改, 方便大家快速使用基本上按照以下代码修改相应颜色即可// 设置菜单样式.ant-menu,.ant-menu-sub,.ant-menu-inline{ color: white; background-color: #044d50 !important;}// 设置子菜单展开样式.ant-menu-submenu > .ant-menu { background-color: rgb(16, 71, 83) !important;

2021-08-30 11:06:30 11978 11

原创 DatePicker 获取上一年/下一年或上一月/下一月

前言应公司要求，最近要实现一个日期选择框，只选择年份。并且可以手动设置上一年和下一年。我尝试了几种写法，最后成功了。期间遇到了清空日期后再打开选择日期，值为 NAN ,好在问题都解决了，大概的思路分享给他大家引入 DatePicker 组件<DatePicker onChange={this.handleGetYear} picker="year" className={'datePickerStyle'} value={date ? moment(date,dateString) :

2021-08-19 11:00:40 733

原创 antd4 动态创建左侧菜单icon图标

前言公司准备用 react 技术栈做项目,所以最近一直抽空在学习react相关知识。大致学习了下基本知识，发现相比 VUE 来说，我好像更加喜欢react 了，对于我个人来说，写起来逻辑思维比较多，更多的是使用原生 JS的语法知识，VUE的话更多的是在乎数据怎么来。对于我们开发人员来说，框架是一种快速实现需求的手段，我个人认为，基础知识太重要了，身边有很多人使用了一些框架后，js写一个简单的功能都不知道怎么写的了（当然也是包括我），所以我觉得有空闲时间还是可以多看看基础。我现在正在使用 react

2021-08-06 15:28:49 2047

原创 react 组件通讯的几种方式

最近在做react项目,所以简单的学习了一下组件之间的通信方式.总结来说可分为三大类:父子通讯-父组件传递信息给子组件子父通信-子组件传递信息给父组件兄弟通信-兄弟组件相互通讯父子通讯这是最简单的一种通讯方式,在父组件调用子组件的地方添加相应的属性传递,然后在子组件中通过 props 接收传递的参数信息如下:// 父组件class Parent extends React.Component { state = { name: this.props.name, age

2021-07-30 14:38:14 2211

原创 js 中元素偏移量 offset 常用属性

好久没写原生js，一些api的基础知识容易忘记。最近项目不太忙，就在闲暇时间快速过一遍js基础知识。之前项目中遇到的问题，上网百度很多人说的比较含糊，也有很多文章都大同小异，后来我决定自己决定以后将可能会用到或者项目中用的比较多的东西，但是自己记不住，容易忘记的知识记录下来，方便自己也方便大家。今天看到offset 的时候，就有了这篇文章，因为之前我总是搞混，总是要试试，哪个合适就用哪个。下面我把每个属性都记录下来，以后用的时候查一下不同点就知道该用哪个属性了...

2021-07-28 10:13:35 134

原创 React 向路由组件传递参数

传递参数组件的jsx文件：import React, { Component } from 'react'import { Switch,Route,Link } from 'react-router-dom'import Detail from './Detail'export default class Message extends Component { state ={ messageArr :[ {id:'01',title:'消息1'}, {id:

2021-07-14 16:53:13 200

原创 React 脚手架配置代理方式

方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二1、第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js2、编写setupProxy.js配置具体代理规则：const proxy = require(

2021-07-13 16:02:59 82

原创 vue 项目打包发布时去除所有console

自己做的项目已经完成啦~但是想着项目中的 console 太多了，就看到学习视频中真的有插件可以去除所有的 console 来打包发布，真的是绝绝子啊 yyds没错就是这个插件，这是官方文档哦~babel-plugin-transform-remove-console先安装插件npm install babel-plugin-transform-remove-console --save-dev安装完成后项目目录会新增一个 babel.config.js 的文件，在此文件中新增 transfo

2021-06-29 10:19:44 663

原创 vue tree-table 实现树形表格

在我们开发电商系统中，通常会有列表展示成tree 的形式，例如以下图片此时, tree-table就可以满足我们的需求 <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="

2021-06-25 09:19:28 2414

原创 vue 实现简单版本 todolist

昨天下午在记事本的功能上做了优化，做成了简单的 todolist，主要是来巩固一下vue的各种指令以下是效果图以上是简单版本的效果图，好啦，献上我的代码~欢迎大家踊跃提出建议<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <m

2021-06-24 09:26:02 347

原创 vue 简单指令使用，实现记事本案例

最近公司项目不忙，我终于有时间继续学习vue了，早上看了下官方文档，主要看了下指令，感觉还可以，就上手做了一个小案例，记事本功能。该案列包括以下功能：输入任务按回车键，列表就会新增一条数据输入完任务按回车后输入框将被清空底部有总记录数和清除所有数据鼠标悬浮列表上显示删除按钮可以删除数据一、实现思路1、通过输入框的 @keyup.enter 指令绑定添加方法，添加方法中将输入的内容存到数组中保存2、通过 v-for指令循环遍历数组元素并在 ul li 中动态显示出来

2021-06-23 10:16:30 466

原创 vscode 使用时基本插件

更新一下：文件夹图标插件

2021-06-22 13:24:41 84

原创 vscode中 sass 生成 css

今天在看一个css3动画的视频，博主使用的样式是sass语言，本着好奇心，查看了下基本使用，尝试了下在vscode中将环境装好，嗯~还是很方便的1、首先第一步，需要全局安装sass，有好几种方式，我这里使用的npm 本着方便的原则~npm i sass -g2、查看一下安装后的版本sass --version3、执行转换语句，注意我这里使用的是文件夹里面所有文件转换将 sass 文件夹里面所有文件都转换到 css文件夹中sass --watch sass --watch ./sass:./

2021-06-18 14:41:22 594

原创 vue + element-ui 实现角色信息功能

上周已更新完用户信息列表以及登录功能，今天抽空将角色信息列表以及角色分配做完了。和小伙伴们分享一下劳动成果，后续会继续更新商品管理的信息~先展示一下效果图这是一个角色列表信息，功能包括新增角色、编辑角色、分配角色点击最左侧展开按钮可以看到角色下面的权限，可以对权限进行删除以及分配权限功能这里是分配权限的页面，通过element-ui 里面的tree进行数据绑定显示好啦，功能已完成，最后献上的代码片段~<template> <div> <!-- 面

2021-06-10 14:09:48 1148

原创 vue + Element-UI 实现完整版用户列表以及增删改功能

用户列表已经完全做好，其中包括用户列表查询，数据增删改，以及翻页功能。<template> <div>  <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <

2021-06-04 17:54:39 2554 3

原创 vue + Element-UI 实现数据双向绑定

目前在练手做一个后台管理系统，想要实现用户列表页面的显示，可以进行用户查询、分页以及增删改功能，以下是最终效果图：废话不多说，先上代码：通过标签中 v-model 进行数据绑定<template> <div>  <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '

2021-06-02 18:01:13 3723

原创 vue +Element-UI 实现完整的登录退出功能

接着上篇文章开始记录，上篇最后问题已经解决，忘记了：导致的。已修改完成。截至目前为止，登录退出功能已实现，以下是我的代码：Login.vue<template> <div class="login_container"> <div class="login_box">  <div class="avatar_box"> <img src="../assets/log

2021-06-01 13:13:18 2252 2

原创小白学习简单的vue + element-ui 实现前端登录页面

一、登录功能业务流程二、登录业务的相关技术点不存在跨域问题，推荐使用cookie与session；反之则使用token，支持跨域三、token 原理分析四、登录功能实现1、布局实现：通过Element-UI组件实现布局el-formel-form-itemel-inputel-button字体图标(iconfont)2、创建新分支git checkout -b login3、vue项目的基本结构。通过vs code 打开项目，删除App.vue中不必要的代码块将

2021-05-31 17:51:50 1845

咿呀咿呀呦~