Ant Design Demo 学习

1.DEMO安装

1.1.前端安装

下载最新的Node

Ant Design Demo 学习

 下载GIT并且安装,安装好后用管理员模式执行git-bash.exe 

Ant Design Demo 学习

Ant Design Demo 学习

 VSCODE导入项目:

Ant Design Demo 学习

1.2.后端安装

需要本机支持Maven,没有需要安装配置好。然后开始下载脚手架:

Ant Design Demo 学习

Ant Design Demo 学习

 STS载入项目:

Ant Design Demo 学习

1.3.数据库安装

导入一个示例SQL脚步:

Ant Design Demo 学习

 Ant Design Demo 学习

 配置数据库参数:

Ant Design Demo 学习

 1.4.DEMO运行效果

http://localhost:8000,使用admin,1登陆

Ant Design Demo 学习

 

2.DEMO学习

2.1.前端学习

首先建议学习官方知识

https://3x.ant.design/docs/react/introduce-cn

https://v2-pro.ant.design/

2.1.1.主要文件

Ant Design Demo 学习

router.config.js:菜单配置

path:浏览器访问路径
name:菜单中文名称
icon:菜单图标
routes:子菜单
component:页面对应的js文件,以src/pages/为根目录,作为相对路径

hideInMenu: true,  不显示改菜单
hideChildrenInMenu: true,  子菜单不显示

首页,一般要写成./System/index.js, 可以简写:./System/index,也可以再简写:./System 

Ant Design Demo 学习

Ant Design Demo 学习

index.js:首页

Ant Design Demo 学习

Card是官方库的内容,可以在官网查找说明如下:

Ant Design Demo 学习