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進行分發

   <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>

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

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