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

你好，世界

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

技术选型

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

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

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

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

安装Node.js

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

官网地址：https://nodejs.org/en/

安装Git

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

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

安装包下载地址：https://gitforwindows.org/

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

安装Tortoisegit

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

安装包下载地址：https://tortoisegit.org/download/

安装WebStorm

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

官网地址：http://www.jetbrains.com/webstorm/

安装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 的确非常容易安装和使用：只需下载，解压缩，启动即可。（摘自百度百科）

安装包下载地址：https://www.apachefriends.org/fr/download.html

下载Ant Design Pro

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

Ant Design Pro项目地址：https://pro.ant.design/docs/getting-started-cn

体验Ant Design Pro

安装依赖。

启动项目。

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

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

打包Ant Design Pro

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

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

配置xampp作为生产环境

删除C:\xampp\htdocs

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

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

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

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

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

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

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

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

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

java版本的服务器关键点

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

配置struts.xml

捕获/api下面的消息，交由我们自己的类AntdApi进行分发

在AntdApi中配置相关的命令处理业务类

内部维护一个map，记录各个命令的实际处理类

根据请求的路径，将消息转发到相应的业务类进行处理

具体业务类就可以聚焦自己的业务逻辑了

下面是获取当前登录用户的业务类，代码非常清爽