QueRly的博客

React Hooks实现自定义表格列

QueRly — Mon, 30 Nov 2020 17:31:43 +0800

一、前言目标在ant design的Table组件基础之上利用react-dnd实现表格列的拖拽排序、并自定义列的显示隐藏当前版本 react: 16.14.0 react-dom: 16.14.0 antd: 3.26.20 react-dnd: 11.1.3 react-dnd-html5-backend: 11.1.3 实现代码为自定义的表格组件取名CustomColumnTable 拖拽方案说明在组件之外还得用DndProvider包裹，否则无法使用拖拽功能拖拽实现方案是拖拽表头列

ant design pro 权限管理

QueRly — Wed, 28 Oct 2020 11:03:00 +0800

前言这段时间一直用ant design pro这个框架开发项目，其中最重要的模块之一应该就是其自带的权限控制功能，现在也来谈谈我对这个模块代码的理解。随着框架的升级，代码部分可能有所改动，但其实现思路和方法应是没有大的变动。权限管理 config/config.js 首先可以看到只需在config文件中进行路由配置，即能访问对应路由页面 export default { ... routes: [ { path: '/user', component: '../l

使用laradock搭建laravel项目

QueRly — Sat, 24 Oct 2020 01:15:46 +0800

准备 Git Docker >= 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默认配置 # 本地

前端算法

QueRly — Sat, 22 Aug 2020 12:47:38 +0800

数据结构栈后进先出 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

Webpack基础配置

QueRly — Mon, 10 Aug 2020 13:51:45 +0800

一、开发环境配置 1. 初始化 package.json npm init 2. 安装 webpack npm install webpack webpack-cli -g npm install webpack webpack-cli -D 3. 下载安装基本配置所用到的 loader、plugin // 打包样式资源相关的loader npm i style-loader css-loader less-loader less -D // 打包html资源相关的plugin npm i html-we

Ant Design Pro 使用小结

QueRly — Mon, 09 Mar 2020 12:19:29 +0800

前言最近在使用Ant Design Pro来搭建一个后台管理系统。一、Eslint规范引入jsx文件时省略 .jsx 后缀 // .eslintrc.js rules: { // 'react/jsx-filename-extension': [1, { extensions: ['.js'] }], 'react/jsx-filename-extension': [1, {...

Nuxt.js学习之旅

QueRly — Wed, 05 Feb 2020 13:11:00 +0800

前言 Nuxt.js 是一个基于 Vue.js 的通用应用框架，它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。目前，Nuxt.js也是非常流行且广受关注的基于Vue的服务端渲染框架。一、初始化项目手动创建Nuxt.js项目新建文件mkdir nuxtDemo cd nuxtDemo 编辑package.json{ "name": "nuxt-demo", "...

Next.js学习之旅

QueRly — Mon, 03 Feb 2020 17:46:56 +0800

前言 Next.js是一个轻量级的 React 服务端渲染应用框架。使用Next.js，可以优化SEO、加快首屏加载速度…具体的介绍就不再赘述一、初始化项目手动创建Next.js项目新建文件夹mkdir nextDemo npm init 安装依赖包yarn add react react-dom next # OR npm i -S next react react-dom 修改...

使用webpack搭建React项目开发环境

QueRly — Thu, 02 Jan 2020 12:57:19 +0800

前言在日常开发中，我们通常会选择脚手架vue-cli、create-react-app等来帮助开发。可是了解并掌握webpack来完成项目工程化开发却是一门基本功本文基于： webpack: 4.41.2 node: 10.15.1 yarn: 1.16.0 webpack基本配置 1.1 初始化React项目在新建目录下 yarn init 安装React相关包 yarn add r...

初探dva——购物车实例

QueRly — Tue, 24 Dec 2019 15:56:41 +0800

Dva简介 dva 是一个基于 redux 和 redux-saga的数据流方案，并且为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为dva是一个轻量级的应用框架。 – 摘自官网购物车实例本练习使用dva+antd做了个购物车小练习，目的是为了更快上手dva，所以练习的复杂度不高，更多是基础运用开发。项目参考来源演示网址 gith...

试着实现JS源码（持更...

QueRly — Sat, 23 Nov 2019 21:59:43 +0800

1. 实现 new 先看看平时我们是怎么使用new的： function Person(name, age){ this.name = name; this.age = age; } let person = new Person('zs', 20); 在以上代码中，new实际做了以下几件事：创建一个新对象改变构造函数中的作用域指向：this指向新对象将构造函数接收的参数...

谈谈JS中的原型链继承

QueRly — Sun, 17 Nov 2019 16:28:52 +0800

前言关于原型链继承一直是JS中比较重要的知识点，最近也浏览了一些资料与总结，现在整理一下，做个学习笔记一、基本概念 new运算符我们经常使用new运算符和自定义构造函数来实例化对象： function Person(name, age, movement){ this.name = name; this.age = age; this.movement =...

炫彩小球：基于Canvas和ES6中的Class类知识点的练习

QueRly — Thu, 14 Nov 2019 01:57:33 +0800

一、项目说明及效果 github地址一次基于Canvas和ES6中的Class类知识点的练习实现效果：在画布上，随着鼠标移动，会产生一组绚丽的运动小球效果截图：二、实现思路初始化canvas、设置初始参数 HTML结构

用Vue+Node搭建网上购物商城——记录篇

QueRly — Sun, 10 Nov 2019 20:34:00 +0800

PC端网上购物商城 github地址前言项目采用的技术栈: Vue+Node+MySQL 前端：用Vue-cli搭建，使用Vue全家桶+element-ui 后端：express框架数据库：MySQL 其实项目初版本早就写完了，但感觉完成度不高，所以现在想完善这个项目，熟练下vue和node的开发运用，然后也记录一下我的开发过程一、项目效果预览商城前台部分首页首页右侧...