前端开发火速上手--你好世界

Posted 一码一故事

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发火速上手--你好世界相关的知识，希望对你有一定的参考价值。

你好，世界

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

https://preview.pro.ant.design/dashboard/analysis

技术选型

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

  1. 组件化的开发思想，非常适合写惯了JAVA、C++等面向对象语言代码的同学的思维模式

  2. React有着活跃的开发生态，以及非常丰富的开源组件库，拿来既用，减少开发成本。

程序员写代码应该以商人的思维进行，能不自己动手的，绝对不要自己动手，我们不是科学家，我们做的是商用产品，开发成本越少，开发周期越短，我们生存的几率就越大。

安装Node.js

Node.js是一个javascript运行环境(runtime environment)，开发模式下，我们需要安装Node.js才能运行本项目。

安装Git

Git(读音为/gɪt/。)是一个开源的分布式版本控制系统，我们用她来下载开源项目的代码。

相关教程：http://www.runoob.com/git/git-install-setup.html

安装完后，记得关闭git的换行符LF与CRLF自动转换功能，否则下载的Antd Pro代码在WebStorm上的去毛机上会提示错误。相关的说明参考：https://www.cnblogs.com/sdgf/p/6237847.html

git config--globalcore.autocrlffalse

安装Tortoisegit

Tortoisegit是git的可视化操作界面，通过Tortoisegit，可以很方便的操作git

安装WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。（摘自百度百科）

安装XAMPP

XAMPP（Apache+mysql+php+PERL）是一个功能强大的建站集成软件包。这个软件包原来的名字是 LAMPP，但是为了避免误解，最新的几个版本就改名为 XAMPP 了。它可以在Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用，支持多语言：英文、简体中文、繁体中文、韩文、俄文、日文等。 [1]

许多人通过他们自己的经验认识到安装 Apache 服务器是件不容易的事儿。如果您想添加 MySQL、PHP 和 Perl，那就更难了。XAMPP 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。XAMPP 的确非常容易安装和使用：只需下载，解压缩，启动即可。（摘自百度百科）

下载Ant Design Pro

Antd是蚂蚁金服下面的一个开源项目，Ant Design Pro 是在antd上进行封装的一个项目模板，一个企业级中后台前端/设计解决方案。

 
   
   
 
    
  
    
    
  
  1. $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
    2. 
  
    
    
  
  2. $ cd my-project
    3.

体验Ant Design Pro

安装依赖。

 
   
   
 
    
  
    
    
  
  1. $ npm install
    2.

启动项目。

 
   
   
 
    
  
    
    
  
  1. $ npm start
    2.

此时浏览器就会打开一个网站，可以看到整个项目的最终效果。

注意：这里只是本地开发模式，还不是真正发布，不是真正的生产环境。

打包Ant Design Pro

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

 
   
   
 
    
  
    
    
  
  1. $ npm run build
    2.

打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js、 ***.css、 index.html 等静态文件。

配置xampp作为生产环境

  1. 删除C:\xampp\htdocs

    路径要根据xampp的实际安装目录调整

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

  3. 配置apache的正向代理，进行消息转化

    用记事本打开C:\xampp\apache\conf\httpd.conf，在其最后面增加一行

    ProxyPass /api http://127.0.0.1:8000/api，如下图所示：

  4. 启动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开发模式作为服务器。

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

 

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

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

java版本的服务器关键点
 

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

     
 
  1. 配置struts.xml
    捕获/api下面的消息，交由我们自己的类AntdApi进行分发
    2.  
 
       
  
    1. <package name="api" extends="struts-default" namespace="/WirelessAdapter/api">
      2.  
  
    2.    <action name="*" class="com.lemontree.server.WirelessAdapter.AntdApi">
      3.  
  
    3.        <result name="success">/mmlResult.jsp</result>
      4.  
  
    4.        <result name="error">/mmlResult.jsp</result>
      5.  
  
    5.    </action>
      6.  
  
    6. </package>
      7.  
 
     
 
  2. 在AntdApi中配置相关的命令处理业务类
    内部维护一个map，记录各个命令的实际处理类
    根据请求的路径，将消息转发到相应的业务类进行处理
    3.  
 
       
  
    1. HttpServletRequest req = (HttpServletRequest) ServletActionContext.getRequest();
      2.  
  
    2.            String reqUri = req.getRequestURI();
      3.  
  
    3.            String key = "/api/";
      4.  
  
    4.            int idx = reqUri.lastIndexOf(key);
      5.  
  
    5.            String cmd = reqUri.substring(idx + key.length());
      6.  
  
    6.            // 获取相对应的处理Action
      7.  
  
    7.            Class<?> c = getProcActionByCmd(cmd);
      8.  
  
    8.            if (c == null) {
      9.  
  
    9.                logger.info("getAction return null");
      10.  
  
    10.                sendSuccessMsg();
      11.  
  
    11.                return SUCCESS;
      12.  
  
    12.            }
      13.  
  
    13. private static Map<String, Class> wActions = new HashMap<String, Class>();
      14.  
  
    14.    static {
      15.  
  
    15.        wActions.put("currentUser", CurrentUser.class);
      16.  
  
    16.        wActions.put("users", Users.class);
      17.  
  
    17.        wActions.put("project/notice", Project_notice.class);
      18.  
  
    18.        wActions.put("activities", Activities.class);
      19.  
  
    19.        wActions.put("forms", Forms.class);
      20.  
  
    20.        wActions.put("login/account", LoginAccount.class);
      21.  
  
    21.        wActions.put("notices", Notices.class);
      22.  
  
    22.        wActions.put("fake_chart_data", FakeChartData.class);
      23.  
  
    23.        wActions.put("tags", Tags.class);
      24.  
  
    24.        wActions.put("profile/basic", ProfileBasic.class);
      25.  
  
    25.        wActions.put("500", Antd500.class);
      26.  
  
    26.        wActions.put("404", Antd404.class);
      27.  
  
    27.        wActions.put("403", Antd403.class);
      28.  
  
    28.        wActions.put("401", Antd401.class);
      29.  
  
    29.        wActions.putAll(JSONMsgTransmitor.wActions);
      30.  
  
    30.    }
      31.  
 
     
 
  3. 具体业务类就可以聚焦自己的业务逻辑了
    下面是获取当前登录用户的业务类，代码非常清爽
    4.  
 
       
  
    1. public class CurrentUser extends PadActionBase {
      2.  
  
    2.    @Override
      3.  
  
    3.    public String execute(String requestBody) throws Exception {
      4.  
  
    4.        JSONObjectEx msg = getResponseJSON(1, "");
      5.  
  
    5.        msg.put("name", "Serati Ma");
      6.  
  
    6.        msg.put("avatar", "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png");
      7.  
  
    7.        msg.put("userid", "00000001");
      8.  
  
    8.        msg.put("notifyCount", "12");
      9.  
  
    9.        return msg.toString();
      10.  
  
    10.    }
      11.  
  
    11. }
      12.  
 
     

 


以上是关于前端开发火速上手--你好世界的主要内容，如果未能解决你的问题，请参考以下文章
 

 前端开发常用代码片段（中篇）


 前端开发常用js代码片段


 对比1万2千个Vue.js开源项目发现最实用的 TOP45！火速拿来用！


 分享前端开发常用代码片段


 前端开发工具vscode如何快速生成代码片段


 前端开发工具vscode如何快速生成代码片段