ant design pro,Ant Design Pro V5 包含演示效果创建方法
ant design pro,Ant Design Pro V5 包含演示效果创建方法详细介绍
本文目录一览： 手把手教你创建Ant Design Pro的React项目
介绍
主要是使用?React?和?TypeScript?以及?Ant Design Pro?开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design?是蚂蚁金服的UI框架，发展历程可以说是从?saga-redux -> dva -> umi -> ant design?，说?ant design?是?react?的最佳实践确实是名副其实；其中我最喜欢或者说是?dva?最显著的地方就是修缮了?redux?的不足之处。
搭建
安装 cnpm，yarn，tyarn
```
npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn
```
2. ?Ant Design Pro 立足于 umijs 、dva，需要安装 umi
```
yarn global add umi
```
3.? 创建 Ant Design Pro 项目（先创建test文件夹）
```
mkdir test
cd test
yarn create umi （这里选择 ant design pro -> typescript -> simple）tyarn
yarn start
```
+ config
? ? - config.ts? 路由设计
? ? - proxy.ts? 代理（打包后无效）
+ mock? ? ? ? ? 模拟数据
+ src
? ? - assets? ? 放一些静态资源文件（png，svg等）
? ? - component? 主要放全局组件
? ? - layouts? ? 权限、token获取
? ? - models? ? 详细内容见dva，换言之是redux （interface、数据交互）
? ? - pages? ? ? 页面
? ? - serives? ? 请求（get,post）
? ? - utils? ? ? 放一些公用方法
/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */
举个栗子（dva）
TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化
/**? * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/
现在你需要创建一个?src/services/home.ts?去对接后台的接口。
import request from '@/utils/request'// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/**? ? ? ? * 如果是 POST 请求，请将 params 修改成 data? ? ? ? **/})}
接下来，你需要创建一个?src/models/home.ts?去调用上面那个接口 （详细教程看?dva），我这是临时起意边想边写的（俗称瞎编乱造）。
import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi';exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array
;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer
,setPage:Reducer
,};}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload);// payload 要对应 queryGetMyHomeData 的形参，否则另当别论constarr=Array.isArray(res.data)?res.data:[];// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload});// yield take( 'setPage/@@end' );? ? // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel;
让?src/pages/home/index.tsx?去?connect?HomeModel
importReact,{useEffect}from'react';import{connect,Dispatch}from'umi';import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC
=(props)=>{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()=>{dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[]);// 页码改变事件functionpageChange(page){/**? ? ? ? * page的修改是两个操作? ? ? ? * 1. 修改 page? ? ? ? * 2. 获取数据? ? ? ? * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题? ? ? ? **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=>home)(Home);
还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。
有关于 Dva 对 Redux 的修改，见下图
Ant Design Pro V5 包含演示效果创建方法
Ant Design Pro V5 包含演示效果创建方法
1、node版本 v16.13.1
2、创新项目
2.1、执行命令：
2.2、选择 ant-design-pro
2.3、选择 TypeScript
2.4、选择 complete
执行命令：
支持基本功能已近和演示的一致了。可以执行
访问： http://localhost:8000
如果需要包含主题切换功能，需要以下操作：
3、主题切换功能
3.1、执行以下安装:
4、为了拥有更多的功能，请安装ProComponents 参考: https://procomponents.ant.design/
组件如下：
安装命令：
antdesignpro去掉ts
1、删除TypeScript相关的依赖：在项目根目录下的package.json文件中，找到并删除与TypeScript相关的依赖项。2、修改配置文件：在项目中，可能有一些配置文件与TypeScript相关，删除这些文件或相应地进行修改。3、修改代码文件：将项目中的.ts或.tsx后缀的文件改为.js或.jsx。确保所有的代码文件都是JavaScript或JSX的格式。4、重新安装依赖：运行适当的命令重新安装项目所需的依赖项。可以使用npminstall或yarninstall等命令来完成。5、清理构建产物：如果之前已经构建过项目，需要清理构建产物，以确保没有残留的TypeScript相关代码。
antdesignpro打包后找不到接口
1、确认接口地址是否正确：检查接口请求的URL地址是否与实际的接口地址匹配。可以通过在浏览器中手动访问接口地址来验证是否能够正常获取数据。2、确认接口代理配置是否正确：在开发环境下，使用代理来转发接口请求，而在打包后的生产环境中，需要配置真实的接口地址。检查config/proxy.ts或config/config.ts文件中的代理配置是否正确，并且在打包时没有被忽略或覆盖。3、确认接口是否存在跨域问题：如果接口请求的地址与前端应用不在同一个域名下（跨域请求），则需要在服务端配置允许跨域访问。可以联系后端开发人员，确认是否已经进行了跨域配置。
SpringBoot整合Ant Design Pro进行部署
构建打包成功之后，会在根目录生成 dist 文件夹，然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下
注意：@Controller不是@RestController，使用@RestController会返回“index”字符串
输入地址 http://localhost:8080 、 http://localhost:8080/user/login 都会转发到index.html，从而展示Ant Design Pro页面
尝试访问 http://localhost:8080/user/login 时，发现现在已经能访问到index.html了，但页面报错了，访问不到js和css,错误页面如下：
需要配置一下，让js、css等静态资源去static目录下去加载
再次访问 http://localhost:8080/user/login 页面显示正常
访问 http://localhost:8080/console/commodity/product-brand 显示后台界面
关于2.3，网上有一种思路是这样的：
Ant Design构建完成后只有一个index.html页面和一些js、css文件，当使用browserHistory，如果直接放在Spring Boot的resource/static文件夹下面，当浏览器直接访问或者在非 "/ “，”/index"路径刷新时，由于服务器无法正确响应，会直接触发404报错。
解决思路：浏览器访问任何404错误路径都返回 /index.html文件。剩下的事情交给前端路由
这种方式也能实现效果，但这种方式使得所有的错误请求（404）都会被拦截跳转到index.html ,其实不太严谨，而且给人的感觉是，先让其“出错”，再来“补救”
参考官方文档： Ant Design Pro
ant-design-pro中菜单图标业务组件，iconfont的使用
在config.js中使用路由routes时，路由上的icon默认是可以使用antd中的icon，通过icon字段来设置。但是，很多情况下我们需要使用自定义的图标，如iconFont，此时我们可以设置如上的的iconfontUrl，来使用我们iconFont中的图标，如图：
至此，可以将图标下方的type，如：icon-weixin，设置到路由中的icon上，即可设置成功。
其中scriptUrl也是iconfont中的项目地址。
将通用icon组件引入，设置type即可使用在iconfont项目中的图标。
ant design pro登录跳转不到主界面或者需要登录两次问题
由于登录判断是在layouts/SecurityLayout.jsx中，查看路由配置的话，可以看出所有这个组件所属路由下的子路由的访问，都需要登录验证。
config.js:
layouts/SecurityLayout.jsx:
这个组件在挂载后先fetchCurrent，然后在这里有一句非常关键的 if ((!isLogin && loading) || !isReady) ，我就不详细讨论这个条件的成立的情况了，太多了，只列举直接刷新后台主界面和router.push到后台主界面的时候， ，这几个变量的值，我测试的结果：
刷新到主界面：
(!undefined && undefined) || !false = true;
(!undefined && true) || !true = true;
(获取到currentUser了)
push(登录)到主界面时：
(!undefined && undefined) || !false = true;
(!undefined && undefined) || !true = false;
(获取到currentUser了)
也就是说，你刷新页面的时候，currentUser值还没有之前，页面会被渲染成
直到获取到currentUser，然后render子组件，也就是后台界面，而你登录，router.push到主界面时，currentUser值还没有之前，上面的if会有一次不成立，那么就会执行下面的跳转，重新跳转到登录页面，这里面根据每位开发者实际开发式不同的情况，常会出现两个问题，一是死活登录不进去，二是第1次登录不进去，第2次就可以登录进去了。反正原因都是这个了。
解决的最简单办法就是登录跳转的时候不要用routerRedux.replace(redirect || '/')，见model/login.js，而是直接window.location.href=redirect || '/';
其实这样跳转体验上也差不了多少。
第二种解决办法是，登录成功的时候返回当前用户的信息，然后保存在currentUser中，而不是跳转到后台的时候才获取currentUser，也就是push到后台的时候，currentUser中必须有值。
前端开发框架有哪些_前端架构有哪些
前端框架好不好用还是要看具体情况分析，我这里给你推荐几个常用的框架，可以按需使用。
1、vue-element-admin
一个基于vue2.0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
2、AdminLTE
非常流行的基于Bootstrap3.x的免费的后台UI框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手用来做项目。
3、ant-design-pro
这个就不多说了，选择react技术栈的童鞋们必然离不开这个优秀开箱即用的中台前端/设计解决方案，文档齐全，组件丰富，一键生成模板，更支持开启复制粘贴模式哦。
4、ng2-admin
这是基于Angular2、Bootstrap4和webpack的后台管理面板框架，要收前面已经有了React和vue技术栈的模板，那怎么能少了ng的？虽然在国外用的比较多，国内较少使用，但丝毫不影响ng作为前端框架三巨头之一的地位。
5：Gentelella
Gentelella是一个可免费使用的Bootstrap管理界面模版，使用群体比较广泛。这个模版使用默认的Bootstrap3的样式，还有一系列功能强大的jQuery插件和工具，可快速创建管理界面模版或者后台的Dashboard。
6：iview-admin
iViewadmin是基于iView的Vue2.0控制面板。搭配使用iViewUI组件库形成的一套后台集成解决方案。
7：blur-admin
BlurAdmin是一款使用AngularJsBootstrap实现的单页管理端模版，视觉冲击极强的管理后台，各种动画效果。
8：vue-manage-system
vue-manage-system，一个基于Vue.js和element-ui的后台管理系统模板，挺喜欢这个界面的UI，简约清晰不累赘，多功能的后台框架模板，适用于绝大部分的后台管理系统开发。
9：material-dashboard
基于Bootstrap4和Material风格的控制面板。MaterialDashboard是一个开源的Material
BootstrapAdmin，其设计灵感来自谷歌的MaterialDesign。
10：d2-admin
D2Admin是一个完全开源免费的企业中后台产品前端集成方案，基于vue.js和ElementUI的管理系统前端解决方案，小于60kb的本地首屏js加载,已经做好大部分项目前期准备工作
11：vuestic-admin
vuestic-admin管理台仪表盘是一个响应式的仪表盘模板，采用Bootstrap4和Vue.js构建。这个精美的管理台模板提供了自定义元素组件，如地图，聊天，个人资料卡，图标，进度条等，以及用于登录和注册的预建页面。
ant design pro对接SSO单点登录
公司的SSO采用CAS机制，机制说明： https://www.jianshu.com/p/083c0597e7e0
ant design pro接入SSO时，也踩了一些坑
一、应用服务端
服务端使用了spring boot，spring boot跟CAS的整合可以参考文档： https://blog.csdn.net/jw314947712/article/details/54236216
二、前端
这里有几个坑需要注意：
1、ajax请求返回SSO登录页面，需要修改跳转模式为手动跳转。
2、由于SSO域名与前端域名不同，ajax请求结果并不会出现302返回码。
修改utils下面的request.js文件，设置跳转模式为手动跳转
然后在response里面拦截