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

你好,世界

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,记录各个命令的实际处理类

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180903G1SWUF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券