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***.cssindex.html 等静态文件。

配置xampp作为生产环境

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

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


    1、你好,世界_第1张图片
    拷贝前端文件到xmapp
  3. 配置apache的正向代理,进行消息转化
    用记事本打开C:\xampp\apache\conf\httpd.conf,在其最后面增加一行
    ProxyPass /api http://127.0.0.1:8000/api,如下图所示:

    1、你好,世界_第2张图片
    启动消息代理

  4. 启动apache


    1、你好,世界_第3张图片
    启动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();
        }
    }
    
    

你可能感兴趣的:(1、你好,世界)