本章介绍如何使用蚂蚁金服的开源的前端项目Ant Design Pro，制作一个helloworld，体验整个项目的开发、编译、发布以及运行流程。项目的运行效果可以点击下面的链接体验：
Ant Design Pro
技术选型
前端开发目前比较流行的框架不少，选择了React技术栈原因如下：
- 组件化的开发思想，非常适合写惯了JAVA、C++等面向对象语言代码的同学的思维模式
- React有着活跃的开发生态，以及非常丰富的开源组件库，拿来既用，减少开发成本。
安装Node.js
安装Git
相关教程
安装包下载地址
安装完后，记得关闭git的换行符LF与CRLF自动转换功能，否则下载的Antd Pro代码在WebStorm上的去毛机上会提示错误。相关的说明参考
git config --global core.autocrlf false
安装XAMPP
下载Ant Design Pro
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
体验Ant Design Pro
安装依赖。
$ npm install
启动项目。
$ npm start
此时浏览器就会打开一个网站，可以看到整个项目的最终效果。
注意：这里只是本地开发模式，还不是真正发布，不是真正的生产环境。
打包Ant Design Pro
当项目开发完毕，只需要运行一行命令就可以打包你的应用：
$ npm run build
打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js、***.css、index.html 等静态文件。
配置xampp作为生产环境
删除C:\xampp\htdocs
路径要根据xampp的实际安装目录调整-
将上一步骤生成在dist文件夹中的文件全部拷贝到C:\xampp\htdocs
拷贝前端文件到xmapp -
配置apache的正向代理，进行消息转化
用记事本打开C:\xampp\apache\conf\httpd.conf，在其最后面增加一行
ProxyPass /api http://127.0.0.1:8000/api，如下图所示：
启动消息代理 -
启动apache
启动apache 访问http://127.0.0.1
注意这个时候，网页能打开，但是凡是要从服务端获取的数据都无法显示，因为apache将消息重定向到http://127.0.0.1:8000/api，但是http://127.0.0.1:8000/api并没有相关的服务进程启动，所以无从获取数据。-
开启服务器
这里的服务器可以是任何形式的服务器，可以是运行在tomcat的java项目，也可以是php，python等任何形式的服务器，这里为了方便，我们还是用Ant Design Pro开发模式作为服务器。$ npm start 再次访问http://127.0.0.1，会发现所有页面的都已经能正常显示了。
开发模式和生产模式的区别
上面我们尝试了两种运行项目的方式，两者是有本质区别的，在后一种方式中，我们的服务器可以切换到任何形式的服务器，比如JAVA项目
java版本的服务器关键点
这里展示一个JAVA服务器的关键流程
-
配置struts.xml
捕获/api下面的消息，交由我们自己的类AntdApi进行分发<package name="api" extends="struts-default" namespace="/WirelessAdapter/api"> <action name="*" class="com.lemontree.server.WirelessAdapter.AntdApi"> <result name="success">/mmlResult.jsp</result> <result name="error">/mmlResult.jsp</result> </action> </package> -
在AntdApi中配置相关的命令处理业务类
内部维护一个map，记录各个命令的实际处理类private static Map<String, Class> wActions = new HashMap<String, Class>(); static { wActions.put("currentUser", CurrentUser.class); wActions.put("users", Users.class); wActions.put("project/notice", Project_notice.class); wActions.put("activities", Activities.class); wActions.put("forms", Forms.class); wActions.put("login/account", LoginAccount.class); wActions.put("notices", Notices.class); wActions.put("fake_chart_data", FakeChartData.class); wActions.put("tags", Tags.class); wActions.put("profile/basic", ProfileBasic.class); wActions.put("500", Antd500.class); wActions.put("404", Antd404.class); wActions.put("403", Antd403.class); wActions.put("401", Antd401.class); wActions.putAll(JSONMsgTransmitor.wActions); }根据请求的路径，将消息转发到相应的业务类进行处理
HttpServletRequest req = (HttpServletRequest) ServletActionContext.getRequest(); String reqUri = req.getRequestURI(); String key = "/api/"; int idx = reqUri.lastIndexOf(key); String cmd = reqUri.substring(idx + key.length()); // 获取相对应的处理Action Class<?> c = getProcActionByCmd(cmd); if (c == null) { logger.info("getAction return null"); sendSuccessMsg(); return SUCCESS; } -
具体业务类就可以聚焦自己的业务逻辑了
下面是获取当前登录用户的业务类，代码非常清爽public class CurrentUser extends PadActionBase { @Override public String execute(String requestBody) throws Exception { JSONObjectEx msg = getResponseJSON(1, ""); msg.put("name", "Serati Ma"); msg.put("avatar", "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"); msg.put("userid", "00000001"); msg.put("notifyCount", "12"); return msg.toString(); } }
