1、你好，世界

本章介绍如何使用蚂蚁金服的开源的前端项目Ant Design Pro，制作一个helloworld，体验整个项目的开发、编译、发布以及运行流程。项目的运行效果可以点击下面的链接体验：
Ant Design Pro

技术选型

前端开发目前比较流行的框架不少，选择了React技术栈原因如下：

1. 组件化的开发思想，非常适合写惯了JAVA、C++等面向对象语言代码的同学的思维模式
2. 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作为生产环境

1. 删除C:\xampp\htdocs
   路径要根据xampp的实际安装目录调整

2. 将上一步骤生成在dist文件夹中的文件全部拷贝到C:\xampp\htdocs

   
   
   

   拷贝前端文件到xmapp

3. 配置apache的正向代理，进行消息转化
   用记事本打开C:\xampp\apache\conf\httpd.conf，在其最后面增加一行
   ProxyPass /api http://127.0.0.1:8000/api，如下图所示：
   

   

   启动消息代理

4. 启动apache

   
   
   

   启动apache

5. 访问http://127.0.0.1
   注意这个时候，网页能打开，但是凡是要从服务端获取的数据都无法显示，因为apache将消息重定向到http://127.0.0.1:8000/api，但是http://127.0.0.1:8000/api并没有相关的服务进程启动，所以无从获取数据。

6. 开启服务器
   这里的服务器可以是任何形式的服务器，可以是运行在tomcat的java项目，也可以是php，python等任何形式的服务器，这里为了方便，我们还是用Ant Design Pro开发模式作为服务器。

   $ npm start
   

7. 再次访问http://127.0.0.1，会发现所有页面的都已经能正常显示了。

开发模式和生产模式的区别

上面我们尝试了两种运行项目的方式，两者是有本质区别的，在后一种方式中，我们的服务器可以切换到任何形式的服务器，比如JAVA项目

java版本的服务器关键点

这里展示一个JAVA服务器的关键流程

1. 配置struts.xml
   捕获/api下面的消息，交由我们自己的类AntdApi进行分发

   
    
        /mmlResult.jsp
        /mmlResult.jsp
    
   
   

2. 在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;
               }
   

3. 具体业务类就可以聚焦自己的业务逻辑了
   下面是获取当前登录用户的业务类，代码非常清爽

   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();
       }
   }