1、你好，世界

本章介绍如何使用蚂蚁金服的开源的前端项目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项目地址

体验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进行分发
```
 
     /mmlResult.jsp
     /mmlResult.jsp
 
```

在AntdApi中配置相关的命令处理业务类
内部维护一个map，记录各个命令的实际处理类

private static Map wActions = new HashMap();
    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();
    }
}