-
antd
2017-08-18 15:11:08 -
基于React+antd的后台管理模板(可预览)
2018-08-05 13:42:53自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,不涉及后台交互。 特点: 我用自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,比较简单不涉及后台交互。
github地址:基于React+antd实现后台模板
预览地址:预览地址项目重构地址:react+koa实现登陆、聊天、留言板功能后台
重构预览地址:重构预览地址登录的背景图比较大,所以做了一个loading效果,等图载入完毕后再显示登录页面,首次载入可能比较慢
技术栈
- react
- antd
- react-router
- mobx
- canvas
- ES6
- cookie
自己参考了其他优秀的插件,比如动态打字效果、背景粒子效果、shuffle(洗牌),全屏插件等,自己对有些插件封装成类使用
所有路由都需要登录才可进入,自己封装了PrivateRoute组件来实现路由认证,登录信息保存在cookie中,原本是保存在store中,但是刷新页面后登录状态丢失,所以就保存在cookie中
登录背景图太大,使用了TinyPNG进行压缩,并编写了一个loading效果
项目目录结构
assets----存储静态图片资源和共用icon图标
components----存储共用组件
routes----业务页面入口和常用模板
store----状态管理
utils----工具函数
项目截图
问题
整个demo不复杂,主要是熟悉react和路由等,在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下,所以打包的路径要改为相对路径,不能使用绝对路径,我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性,结果还是出现js路径错误,我一直以为是webpack打包的问题,找了很久才发现是因为BrowserRouter,将BrowserRouter改为HashRouter就访问正确。
使用react-router(v4)时,如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
关于BrowserRouter和HashRouter的区别,可以参考:关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题、react-router v4中 HashRouter 和 BrowserRouter的使用
最后
demo是我断断续续写的,只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd,整个demo中参考了一些其他人的想法,如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐
其他个人项目
觉得不错的给个star鼓励支持!^_^
-
Antd3升级Antd4
2020-08-14 14:53:02yarn upgrade antd@3.26.12 --更新antd包到3版的终极版 yarn start --跑下项目,看Ok不 ant3 执行下面命令直接升级项目中的旧代码为新版代码 执行前确认本地代码占存或push到线上了 npx -p @ant-design/codemod-v4 ...删除本地package-lock.json、node_modules
yarn install --初始化项目
yarn upgrade antd@3.26.12 --更新antd包到3版的终极版
yarn start --跑下项目,看Ok不ant3 执行下面命令直接升级项目中的旧代码为新版代码
执行前确认本地代码占存或push到线上了
npx -p @ant-design/codemod-v4 antd4-codemod src
更新
yarn add react --latest --(如果是最新跳过)
yarn add react-dom --latest --(如果是最新跳过)yarn add @ant-design/compatible --根据命令提示输入
yarn upgrade antd --latest --根据命令提示输入参考
http://www.mamicode.com/info-detail-2943048.html
-
使用antd
2021-01-21 10:11:23首先要下载antd依赖包 yarn add antd 重启vscode能在node_modules里找到antd包,dist里有antd.css样式 在需要用的地方导入antd以及样式文件 如果需要用图标等库,要引入首先要下载antd依赖包 yarn add antd
重启vscode能在node_modules里找到antd包,dist里有antd.css样式
在需要用的地方导入antd以及样式文件
如果需要用图标等库,要引入
如何按需导入
下载 yarn add react-app-rewired customize-cra
下载后需要在package.json中再修改
红的要改成绿色的
根目录是和package.json同级的目录,不在任何文件夹里,在根目录下创建config-overrides.js文件,并将代码复制粘贴上去
使用 babel-plugin-import
yarn add babel-plugin-import
在把之前config-overrides.js里的东西删掉
把这堆绿的粘上去
这样就不需要引入样式antd.css了 -
antd 如何和antd mobile共存?
2021-01-06 14:13:56antd", [ { "libraryName": "antd", "libraryDirectory": "lib", "style": true }, { "libraryName": "antd-mobile", "library... -
antd pro 升级 antd4.0
2020-05-07 15:34:42"ant-design-pro"的项目,版本是2.1.1 ,由于4.0pro页面结构大变,不可能完全删除弃用的icon,反正我不会改了 开始升级,第一步修改以下依赖 "dependencies": { ... "antd": "^4.0.0", "reac... -
antd总结
2019-03-07 09:26:34antd使用总结 demo总结 1.demo目录结构 2.demo简介 antd为我们提供了开箱即用的react组件,demo主要是利用antd的各个组件实现页面效果,antd官网https://ant.design/index-cn antd总结 1.安装 $ npm ... -
改变antd组件样式的方法
2019-06-23 15:23:29实际项目中大家经常会引入antd进行项目开发,对于如何更改antd组件的样式应该也是很多朋友都关心的,笔者今天就给大家分享一下笔者知道的方法: 一:用CSS覆盖掉antd原有的样式: 这是更改tooltip的方法,在控制台... -
AntD Admin An excellent front-end solution for enterprise applications. Preview - https://antd-admin.zuiidea.com Documentation - https://doc.antd-admin.zuiidea.com FAQ - ...
-
antd & antd-mobile的使用
2019-12-03 13:03:10链接: antd官网 首先安装antd cnpm i antd 主要是全部引入与按需导入 全局引入 import { DatePicker } from 'antd' 手动引入样式 import 'antd/dist/antd.css'; 按需导入 首先配置文件 // .babelrc 或者 webpack.... -
react antd 2.12.3 行编辑
2020-09-24 10:02:36react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react ... -
antd使用
2019-09-20 14:31:58antd全局中文配置 import zhCN from 'antd/es/locale/zh_CN'; function App() { return ( <div locale={zhCN}> // 全局包在外面 </div> ); } antd的日期组件默认是显示英文,中文配置方法 ... -
antd按需引入和自定义antd类名
2020-09-15 19:30:55antd按需引入和自定义antd类名 一:antd样式引入有两个方式 一次性全部引入(不推荐) 一次性全部引入antd的样式,打包的时候样式文件会变得很庞大,导致第一次加载的时候需要的时间很长,用户体验差 // 入口... -
Vue Antd
2020-02-25 13:20:23vue-alain 是基于 vue 和 Ant Design of Vue(Ant Design 的 vue 版本) 基础组件库的中后台前端,使用vue vue cli 3.0 typescript antd antd pro Ant Design Vue技术栈,参考并使用了ng-alain相关内容,秉承 Ant ... -
React Antd实现antdList页面布局
2019-10-21 11:40:54React antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 使用地址:https://ant.design/docs/react/introduce-cn 使用 npm 或 yarn 安装 $ npm install antd --save $ yarn... -
安装antd
2020-04-14 16:34:31npm install --save antd@4.1.3 2.引入自动导包的插件 npm install babel-plugin-import --save-dev 3.在根目录创建新文件.babelrc,放入以下代码 { "plugins": [ ["import", { "libraryName": "antd", ... -
antd镜像
2020-07-24 21:19:17Antd国内镜像地址:https://ant-design.gitee.io/index-cn -
antd4-codemod把antd3.X升级到antd4.9最新版本
2020-12-16 16:57:49项目做了好多年,框架一直用的antd3.X的,一直在3的版本上升级,React也一直用的16.6的版本,所以也不支持react Hook。 最近领导让把所有项目的antd升级都到4.X的版本,方便以后迭代,所以升级研究了一下,有antd4-... -
antd 试水
2018-12-28 10:59:41sudo cnpm install antd --save sudo cnpm install antd-init -g 2.创建 mkdir antdtest && cd antdtest antd-init 3.替换内容 import React from 'react'; import ReactDOM from 'react-dom... -
dvaJS配置antd以及按需引入
2019-06-06 07:20:38首先通过npm || cnpm || yarn等方式在项目目录安装antd 和 babel-plugin-import。 babel-plugin-import是用来按需加载antd的脚本和样式的。 $ npm install antd babel-plugin-import -S 编辑 .webpackrc文件,使 ... -
react 引入antd 样式_react引入antd组件
2020-12-29 17:18:301.antd官网:https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import... -
antd Pro 系列之初识antd Pro
2019-12-30 15:49:46初识antd Pro 原因 一只后端猿接到了一个全栈的活,要开发一个完整的独立平台。前端只会html,但又想把前端做的很漂亮,怎么办? 网上冲浪找办法 发现一基于react的开源的前端框架。 antd pro,前身好像是antd。这只... -
antd 按需加载,antd定制主题,antd上传组件,在线换肤
2019-05-27 15:38:11antd 按需加载组件,antd按需加载样式 使用 babel-plugin-import,babel模块化导入插件,兼容antd,antd-mobile,lodash等库 配置:{ "libraryName": "antd", style: "css" } 使用style:导入真正的css源文件,并且... -
antd登录
2020-05-12 15:52:34import { Form, Icon, Input, Button } from ‘antd’; export default @Form.create({ mapPropsToFields(props) { return { }; }, }) class App extends React.Component { handleSubmit = e => { e.... -
antd tree
2020-03-21 22:05:42问题:当我使用antd 里面的tree组件时,设置了expandedKeystone,变为受控组件,发现第一个tree的渲染并没有按照我的state状态变化,打印发现数据没有问题 后来发现了原因: 马虎 其中一个的子节点忘记设计了key值 ... -
React引入antd
2017-12-20 17:34:25随着React技术的不断火热,前端人员开始学习React。React需要引入antd,也许这篇文章能帮助到您。 -
antd pro mysql_springboot-antd-pro
2021-02-01 14:30:50Spring Boot 开发的 Antd Pro 后台依赖关系Antd Pro 前端Antd Pro Helper演示接口Antd演示页面接口: AntdController.java接口URL: /api/auth_routesAntd演示页面接口: AntdRestController.java接口URL: /api/*跨域... -
antd的使用
2019-05-22 07:31:36antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下 1:安装 npm install antd --save 2.样式引入import ‘antd/dist/antd.css’; 3.eg 引入import { Input } from ‘antd’; 4.使用<Input ... -
react 引入antd 样式_react项目中使用antd
2020-12-19 06:10:331.antd官网:https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import...
-
iPhone消息推送机制实现与探讨
-
学习的第0.1天
-
MySQL 高可用(DRBD + heartbeat)
-
Linked Stack in Python
-
Study on digital holography with single phase-shifting operation
-
cesium离线地图服务器的选择
-
基于云的、以资产为中心的协作最佳实践
-
2021 PHP租车系统 毕业设计 毕设源码 源代码使用教程
-
java实现递归二分查找法
-
【MyBatis】执行原理(三):获取代理对象(MapperProxy) 源码分析
-
Java NIO之缓冲区CharSet详解
-
龙芯实训平台应用实战(希云)
-
摄影-源码
-
对径测量传感器的激光校准方法
-
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
wide_to_long同时stack多列
-
MySQL 四类管理日志(详解及高阶配置)
-
mybatis的dao接口方法参数需要多个的问题
-
raspi_video_car.zip
-
常用选择器