S.AntD后台项目
文章平均质量分 63
小李科技
欢迎来到我的博客,一起学习与分享技术,欢迎交流
展开
-
记录笔记(1-3)——搭建React开发环境之前的准备工作
前面是一些项目的基本配置搭建React开发环境之前的准备工作。1、必须安装nodejs 注意:安装nodejs稳定版本2、安装cnpm用cnpm替代npm 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org3、用yarn替代npm yarn的安装: 第一种方法:参考官方文档https://yarn.bootcss.com/原创 2021-12-29 20:59:12 · 379 阅读 · 1 评论 -
(记录笔记4)——4.1 按钮+Modal组件
4.1 按钮+Modal组件文章目录4.1 按钮+Modal组件一.按钮组件1.Card组件2.Button组件3.Radio组件4.应用实例5.补充知识点二.弹框组件1.Modal基本组件实例代码2.Model 高级用法实例代码一.按钮组件1.Card组件引入Card:import {Spin} from ‘antd’;title属性用于标注卡片上方标题如:效果如下2.Button组件引入Button组件:import {Button} from 'antd';type属性原创 2021-12-29 20:56:22 · 492 阅读 · 0 评论 -
(记录笔记4)——4.2 Spin组件的使用
4.2 Spin组件的使用文章目录4.2 Spin组件的使用何时使用[#](https://ant.design/components/spin-cn/#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8)一.Spin组件二.Alert组件三.Alert组件蒙版效果用于页面和区块的加载中状态。何时使用#Spin(英文意思:旋转),用于页面局部需要进行加载的页面使...原创 2018-11-26 17:46:33 · 1219 阅读 · 1 评论 -
(记录笔记4)——4.3 Notification 通知提醒框
4.3 Notification 通知提醒框全局展示通知提醒信息。文章目录4.3 Notification 通知提醒框一.Notification组件二.实例一(通知提醒)三.实例二(通知提醒 + 方向控制)核心Api核心config一.Notification组件1.Notification组件引入Notification:import {notification} from ...原创 2018-11-27 10:00:32 · 986 阅读 · 0 评论 -
(记录笔记4)——4.4 Message全局提示
4.4 Message全局提示全局展示操作反馈信息。文章目录4.4 Message全局提示一.Message组件二.实例API[#](https://ant.design/components/message-cn/#API)一.Message组件1.Message组件引入Message:import { message } from ‘antd’;import { mess...原创 2018-11-27 10:44:05 · 913 阅读 · 0 评论 -
(记录笔记4)——4.5 Tabs标签页
4.5 Tabs标签页选项卡切换组件。文章目录4.5 Tabs标签页一.Tabs组件二.基本实例三. Tab带图标页签四. Tab可关闭卡片式页签API[#](https://ant.design/components/message-cn/#API)Tabs.TabPane[#](https://ant.design/components/tabs-cn/#Tabs.TabPane)一...原创 2018-11-27 14:29:05 · 765 阅读 · 0 评论 -
(记录笔记4)——4.6 gallery图片画廊
4.6 gallery图片画廊实现类似照片墙的效果文章目录4.6 gallery图片画廊@[toc]map举例一.Tabs组件二.实例一三. 升级版API[#](https://ant.design/components/message-cn/#API)Card[#](https://ant.design/components/card-cn/#Card)Card.Meta[#](http...原创 2018-11-27 16:02:03 · 306 阅读 · 0 评论 -
(记录笔记4)——4.7 Carousel轮播图
4.7 Carousel轮播图Carousel走马灯文章目录4.7 Carousel轮播图@[toc]一.文字背景轮播二.图片轮播APICarouselimport { Carousel } from 'antd';function onChange(a, b, c) { console.log(a, b, c);}ReactDOM.render( <Carou...原创 2018-11-29 15:14:49 · 886 阅读 · 0 评论 -
(记录笔记5)——5.1 From组件登录页面
5.1 From组件登录页面具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。文章目录5.1 From组件登录页面@[toc]一.内联表单(基础表单)二.水平表单校验规则APIForm[#](https://ant.design/components/form-cn/#Form)校验规则[#](https://ant.design/components/fo...原创 2018-11-29 19:40:48 · 281 阅读 · 0 评论 -
(记录笔记5)——5.2 From组件注册页面
5.2 From组件注册页面表单注册文章目录5.2 From组件注册页面@[toc]一.支持响应式尺寸二 完整内容APIUpload(Api)一.支持响应式尺寸栅格系统 + const formItemLayout = { + labelCol:{ + xs:24, + sm:4 + }, + wrapperCol:{ +...原创 2019-12-27 21:09:16 · 245 阅读 · 2 评论 -
(记录笔记6)——6.1 Table基础表格
6.1 Table基础表格展示行列数据文章目录6.1 Table基础表格@[toc]一.基础表格二.Table动态渲染三 封装axios Api四 表格的loading 处理五 修改渲染方式,显示对应信息演示六 在Table 中 嵌套单选按钮rowSelectiononRow七 复选按钮八 表格分页APITableColumn[#](https://ant.design/component...原创 2018-12-06 17:57:05 · 278 阅读 · 2 评论 -
(记录笔记6)——6.2 Table高级表格
6.2 高级表格表单注册文章目录6.2 高级表格@[toc]一.头部固定二 左侧固定三 排序API四 操作按钮完整案例API一.头部固定头部固定,内容 y轴 滚动scroll:指定y轴滚动 (240px)width:指定每列的宽度 const columns = [ { title: 'id', k...原创 2019-01-15 21:36:22 · 3007 阅读 · 5 评论 -
(记录笔记7)——7.1 富文本编辑器
7.1 富文本编辑器文章目录7.1 富文本编辑器**一、安装插件****二、富文本编辑器实现**富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。**一、安装插件react-draft-wysiwyg: 文本编辑器插件draftjs-to-html:文本转换为html的插件yarn add react-draft-wysi...原创 2019-01-16 19:33:30 · 255 阅读 · 1 评论 -
(记录笔记8)——8.1 城市管理
城市管理文章目录一 基础页面1. componentDidMount():2. 实例代码二 弹窗功能实例代码Github代码一 基础页面pages->city->index.js: 对应路由 /admin/city顶部子组件一:选择表单class FilterForm extends React.Component{ render(){ ...原创 2019-01-28 18:42:54 · 328 阅读 · 3 评论 -
(记录笔记8)——8.2 订单管理
订单管理Github订单管理文章目录一 基础页面1.1 顶部子组件:选择表单1.2 数据接口1. 订单数据接口2. 结束订单接口3. 结束成功接口1.3 实例代码1. 结束订单按钮2. 确认取消3. 结束订单二 订单详情(基础信息)2.1 跳转详情页1. 订单详情2. 编写公共代码3. 实例代码4. 相关CSS样式5. router 组件2.2 订单详情基础信息1. 订单详情数据接口2...原创 2019-01-30 18:04:19 · 427 阅读 · 0 评论 -
(记录笔记9)——9.1 项目工程化
文章目录一 项目工程化概念二 BaseForm的封装2.0 项目工程化2.1 Utils 代码2.2 BaseForm组件代码2.3 Order组件代码三 axios封装3.1 axios 代码3.2 Order代码一 项目工程化概念二 BaseForm的封装城市管理中FilterForm子组件:订单管理中FilterForm子组件:员工管理中FilterForm子组件:Git...原创 2019-01-30 21:28:42 · 425 阅读 · 0 评论 -
(记录笔记10)——10.1 员工管理
文章目录一 基础页面部分1.1 easy-mock: user/list 用户列表1.2 实例代码二 增加弹框功能2.1 数据接口2.2 实例代码一 基础页面部分Github地址1.1 easy-mock: user/list 用户列表{ "code": 0, "msg": "", "result": { "item_list|100": [{ ...原创 2019-02-13 09:09:50 · 413 阅读 · 0 评论 -
(记录笔记11)——11.1 车辆地图
文章目录0. 创建地图容器1. map/bike_list 数据接口2. 实例代码参考博客: https://www.cnblogs.com/ljq66/p/10229469.html百度地图是网页中使用地图的常用第三方工具,这里结合React项目中学到的应用场景总结一些使用要点。百度地图开放平台Github地址创建一个网站:登录百度地图开发者平台,为网站申请一个地图的Acc...原创 2019-02-13 15:01:48 · 264 阅读 · 0 评论 -
(记录笔记12)——Echarts 图表
百度Echarts是一个基于Canvas的纯Javascript图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表。官网地址:http://echarts.baidu.com/index.html原文: https://www.cnblogs.com/ljq66/p/10223002.html文章目录一 Echarts基础1. 主题下载2. 引用主题3. componentWi...原创 2019-12-27 21:08:54 · 340 阅读 · 0 评论 -
(记录笔记13)——13.1 权限设置
文章目录一 权限菜单设计1.权限的作用意义2.梳理用户、角色的概念(1)用户(2)角色3.选择合适的权限模型(1)传统的权限模型(2)RBAC权限模型(3)模型其他注意事项4.菜单实现效果二 权限模块的搭建2.1 项目搭建2.2 创建角色功能2.3 设置权限Tree树形控件API TreeTree propsTreeNode props一 权限菜单设计以下内容来自原创发布于慕课网 ,转载请注...原创 2019-12-27 21:08:16 · 427 阅读 · 0 评论 -
(记录笔记13)——13.2 菜单调整
调整菜单路由,使菜单精简文章目录一 菜单调整1.1 接口调整1.2 路由组件调整Github地址一 菜单调整1.1 接口调整调整接口数据 : /role/list 角色列表{ "code": 0, "result": { "page": 1, "page_size": 10, "total_c原创 2019-12-27 21:08:35 · 203 阅读 · 1 评论 -
(记录笔记13)——13.3 用户授权
文章目录Transfer 穿梭框何时使用1. 定义接口2. 实例代码为角色分配用户Github地址Transfer 穿梭框双栏穿梭选择框import { Transfer } from ‘antd’;<Transfer />何时使用需要在多个可选项中进行多选时。比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。...原创 2019-12-27 21:08:04 · 832 阅读 · 5 评论 -
(记录笔记14)——redux项目集成
文章目录一 Redux基础介绍二、Redux集成三、面包屑标题切换四 完整实例Github地址一 Redux基础介绍单向数据流:从父组件留向子组件,兄弟组件无法共享数据Redux核心概念State:React中的状态,是只读对象,不可直接修改Reducer:基本函数,用于对State的业务处理Action:普通对象,用于描述事件行为,改变StateRedux工作流...原创 2019-12-27 21:07:40 · 256 阅读 · 2 评论 -
(记录笔记15)——15.1 登录模块
文章目录Github地址import React from 'react'import {Form, Input, Button} from 'antd'import Footer from '../../components/Footer'import './index.less'const FormItem = Form.Item;export default class L...原创 2019-12-27 21:07:32 · 298 阅读 · 3 评论 -
(记录笔记15)——15.2 登录部分封装redux
15.2 登录部分封装redux在登录页面点击登录, 将[用户名] 信息显示在页面中文章目录**15.2 登录部分封装redux**一 定义事件行为1. action代码二 定义reducer数据处理2.reducer代码三 引入redux连接器,导入事件行为3.1 建立redux连接3.2派发dispatch3. login代码四 引用state中的数据4. Header代码总结G...原创 2019-12-27 21:07:05 · 350 阅读 · 3 评论 -
(记录笔记15)——15.3 页面刷新面包屑
15.3 页面刷新面包屑这里主要讲解课程完成后,我对项目错误的一些修正文章目录15.3 页面刷新面包屑一 问题分析二 思路分享三 尝试代码四 实例代码Github地址在之前的代码中, 我们刷新页面后,面包屑会恢复为"首页",如下图:在演示项目中: http://imoocms.51purse.com/是没有这个问题的,那么如何解决这样的问题呢?一 问题分析react ...原创 2019-12-27 21:06:51 · 765 阅读 · 3 评论