- 博客(14)
- 收藏
- 关注
原创 React Hooks实现自定义表格列
一、前言目标在ant design的Table组件基础之上利用react-dnd实现表格列的拖拽排序、并自定义列的显示隐藏当前版本react: 16.14.0react-dom: 16.14.0antd: 3.26.20react-dnd: 11.1.3react-dnd-html5-backend: 11.1.3实现代码为自定义的表格组件取名CustomColumnTable拖拽方案说明在组件之外还得用DndProvider包裹,否则无法使用拖拽功能拖拽实现方案是拖拽表头列
2020-11-30 17:31:43 1671
原创 ant design pro 权限管理
前言这段时间一直用ant design pro这个框架开发项目,其中最重要的模块之一应该就是其自带的权限控制功能,现在也来谈谈我对这个模块代码的理解。随着框架的升级,代码部分可能有所改动,但其实现思路和方法应是没有大的变动。权限管理config/config.js首先可以看到只需在config文件中进行路由配置,即能访问对应路由页面export default { ... routes: [ { path: '/user', component: '../l
2020-10-28 11:03:00 2353
原创 使用laradock搭建laravel项目
准备GitDocker >= 1.12安装和配置laradock启动docker,新建项目目录$ mkdir laravel && cd laravel安装laradock$ git clone https://github.com/Laradock/laradock.git进入laradock目录,并将env-example重命名为.env$ cd laradock$ cp env-example .env修改.env默认配置# 本地
2020-10-24 01:15:46 840
原创 前端算法
数据结构栈后进先出Javascript 中可以利用 Array 数组实现栈结构class Stack { constructor() { this.stack = [] } // 入栈 push(item) { this.stack.push(item) } // 出栈 pop() { if (this.stack.length) return this.stack.pop() throw new Error('stack is emp
2020-08-22 12:47:38 171
原创 Webpack基础配置
一、开发环境配置1. 初始化 package.jsonnpm init2. 安装 webpacknpm install webpack webpack-cli -gnpm install webpack webpack-cli -D3. 下载安装基本配置所用到的 loader、plugin// 打包样式资源相关的loadernpm i style-loader css-loader less-loader less -D// 打包html资源相关的pluginnpm i html-we
2020-08-10 13:51:45 143
原创 Ant Design Pro 使用小结
前言最近在使用Ant Design Pro来搭建一个后台管理系统。一、Eslint规范引入jsx文件时省略 .jsx 后缀// .eslintrc.js rules: { // 'react/jsx-filename-extension': [1, { extensions: ['.js'] }], 'react/jsx-filename-extension': [1, {...
2020-03-09 12:19:29 2538
原创 Nuxt.js学习之旅
前言Nuxt.js 是一个基于 Vue.js 的通用应用框架,它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。目前,Nuxt.js也是非常流行且广受关注的基于Vue的服务端渲染框架。一、初始化项目手动创建Nuxt.js项目新建文件mkdir nuxtDemocd nuxtDemo编辑package.json{ "name": "nuxt-demo", "...
2020-02-05 13:11:00 197
原创 Next.js学习之旅
前言Next.js是一个轻量级的 React 服务端渲染应用框架。使用Next.js,可以优化SEO、加快首屏加载速度…具体的介绍就不再赘述一、初始化项目手动创建Next.js项目新建文件夹mkdir nextDemonpm init安装依赖包yarn add react react-dom next# ORnpm i -S next react react-dom修改...
2020-02-03 17:46:56 418
原创 使用webpack搭建React项目开发环境
前言在日常开发中,我们通常会选择脚手架vue-cli、create-react-app等来帮助开发。可是了解并掌握webpack来完成项目工程化开发却是一门基本功本文基于:webpack: 4.41.2node: 10.15.1yarn: 1.16.0webpack基本配置1.1 初始化React项目在新建目录下yarn init安装React相关包yarn add r...
2020-01-02 12:57:19 295
原创 初探dva——购物车实例
Dva简介dva 是一个基于 redux 和 redux-saga的数据流方案,并且为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为dva是一个轻量级的应用框架。 – 摘自官网购物车实例本练习使用dva+antd做了个购物车小练习,目的是为了更快上手dva,所以练习的复杂度不高,更多是基础运用开发。项目参考来源演示网址gith...
2019-12-24 15:56:41 519
原创 试着实现JS源码(持更...
1. 实现 new先看看平时我们是怎么使用new的:function Person(name, age){ this.name = name; this.age = age;}let person = new Person('zs', 20);在以上代码中,new实际做了以下几件事:创建一个新对象改变构造函数中的作用域指向:this指向新对象将构造函数接收的参数...
2019-11-23 21:59:43 357
原创 谈谈JS中的原型链继承
前言关于原型链继承一直是JS中比较重要的知识点,最近也浏览了一些资料与总结,现在整理一下,做个学习笔记一、基本概念new运算符我们经常使用new运算符和自定义构造函数来实例化对象: function Person(name, age, movement){ this.name = name; this.age = age; this.movement =...
2019-11-17 16:28:52 293
原创 炫彩小球:基于Canvas和ES6中的Class类知识点的练习
一、项目说明及效果github地址一次基于Canvas和ES6中的Class类知识点的练习实现效果:在画布上,随着鼠标移动,会产生一组绚丽的运动小球效果截图:二、实现思路初始化canvas、设置初始参数HTML结构<div id="canvas-wrapper"> <canvas id="canvas"> 当前浏览器不支持canvas,请更换...
2019-11-14 01:57:33 343
原创 用Vue+Node搭建网上购物商城——记录篇
PC端网上购物商城github地址前言项目采用的技术栈: Vue+Node+MySQL前端:用Vue-cli搭建,使用Vue全家桶+element-ui后端:express框架数据库:MySQL其实项目初版本早就写完了,但感觉完成度不高,所以现在想完善这个项目,熟练下vue和node的开发运用,然后也记录一下我的开发过程一、项目效果预览商城前台部分首页首页右侧...
2019-11-10 20:34:00 20029 50
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人