亚马逊云科技云上探索实验室活动征文|使用react + ant design 构建 后台管理系统
授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道
前言
作为一名前端开发工程师,后台管理系统,是我们平常开发时,经常需要开发的一个系统类型。开发后台管理系统,可谓是前端开发一个必备的技能。
既然后台管理系统这么重要,人人必备的一个技能,不会开发后台管理系统怎么办?
没关系,那我就介绍一下,怎么开发一个后台管理系统,并且将它部署到服务器上面。
前端项目开发
前端项目,我是采用react技术栈来开发的。react,也是前端目前流行的三大框架之一。特别是一些大厂,挺多项目都是使用react来开发的。
组件库我是使用了ant design。作为reacter,想必你经常听到这个组件库。没错,它是react开发里经常使用到一个ui组件库。
创建项目
我们需要先创建项目,这样才能开发。
这里我打算使用vue官方推出的脚手架vite,来创建项目
我们进入到vite的官网,然后点击开始,进入到文档页面。
点击左侧菜单栏,开始
vite官方文档里,有给出说明,我们按照这个说明,去创建项目即可。
在cmd里运行命令
npm create vite@latest
运行命令后,按照步骤提示,一步一步选择即可。
选择完之后,项目就创建好了。不过只是项目创建好了,但是里面的依赖还没有安装。我们进入项目里,安装依赖。
安装的时候,由于需要安装依赖,所以需要等待一会。
项目创建好了,接着,我们引入一下ant design组件库。
进入到ant design官网,在研发里,官方文档给出了提示,告诉我们怎么在项目里,引入ant design
在cmd里,输入命令
npm install antd --save
安装ant design组件库,等待一会,组件库安装完成。
项目开发
项目已经创建好,需要的依赖和组件库也已经安装好了。
接下来,我们就可以开发前端项目了。
路由配置
这个后台管理系统,我主要开发了几个模块:
- 详情页
- 表单页
- 结果页
- 统计
- 系统设置
这几大模块,我都单独创建了路由文件夹进行管理。把路由单独抽取出来,管理比较方便。
然后在index.js文件里,统一引入使用即可。
这是我配置路由的思路,当然,你不一定要使用我的思路。你也可以按照自己的想法,来配置路由。
页面开发
在上面配置路由时,告诉了项目里有哪些模块。
这几大模块,里面我也拆分了许多的小组件。针对自己的页面,有自己的对应的业务组件。同时,整个系统要用到的公共组件,也抽取出来了。拆分组件和抽取公共组件,是方便以后的开发维护。
因为整个后台管理系统,有几个模块,内容也挺多的。代码内容就不展开说明了,就不带着大家过代码内容了,我们就跳到项目打包部分。
项目开发好,我们就可以进行项目打包了。因为我们需要把项目打包,然后才可以到服务器进行部署。
在cmd里运行命令
npm run build
项目就开始打包了,等待一会,项目就打包完成了。
注意:我项目里,配置的打包命令是npm run build。你项目的打包命令,可能不一定是它。具体是什么,可以查看你项目里的配置。
服务器部署
前端项目开发好之后,就可以进行服务器部署了。
要进行服务器部署,首先你得有服务器。随着云服务的推广和普及,现在,我们可以非常方便地就拥有一台云服务器了。
云服务器的厂商有很多,这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器,大公司推出来的产品,我相信它。
好了,介绍这么多,我们开始到服务器里,部署项目吧。
登录亚马逊云服务器后,进入服务器控制台页面。我们在顶部搜索栏里,搜索EC2。
我们可以查看到搜索结果,点击EC2,进入EC2的控制台页面。
进入EC2控制台之后,我们点击启动实例按钮。
点击启动实例,进入到实例创建页面
这里,我给实例起了一个名字,叫做myserser。当然,你可以自己起一个别的名字。
下面的操作系统,我选择的是亚马逊的一个linux系统。
对,没错,服务器里我使用的是linux系统。如果你对linux系统不熟悉的话,也可以安装其它系统,比如windows系统。
关于安装其它系统,这里就不介绍了。
下面还有一些其它配置项
不过这些配置项,我们暂时使用不到,先保持默认即可。如果后面想要修改,还是可以修改的。
不过注意,有一个密钥对,是必须要配置的。一会实例创建好了,我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
这里我给密钥对命名为myserver,和我实例名字一样,方便记忆。
点击创建密钥对,密钥对就创建好了。
整个实例的配置项,都配置好了,我们点击右侧的启动实例按钮,就可以把实例启动了。
实例正在创建
我们等待一会。
实例启动成功了,我们就可以连接实例了,点击中间的连接到实例按钮。
我们选择第一种方式就好了,它是基于浏览器的网页形式,显示命令行窗口的。有了命令行窗口,我们就可以在里面输入命令行,执行命令了。
我们进入到命令行窗口了,和实例建立了连接
关于服务器部署,这里我使用的是node来部署的。使用node起一个服务,就可以访问我们的网站了。
而使用node起服务,你有很多种选择方式,比如使用原生node写一个服务,也可以使用一些第三方库来帮助我们,快速起一个node服务器。
第三方库有很多,它们的操作方式也不太一样。
这里,我选择的第三方库是koa。之所以选择koa,是因为我对这个库还比较了解。如果你不熟悉koa这个库,也可以使用一些其它的第三方库的,这关系不大。
要想使用node,当然得先安装node。
我们输入以下命令,安装node
sudo yum install -y node
输入之后,等待一会,node就安装好了。
接着安装git
sudo yum install git -y
之所以安装git,是因为一会我们要从git仓库,把代码拉下来。
等待一会,git就安装好了。在云服务器,安装这些工具,还是挺快的。
从git仓库拉取代码
git clone https:xxxxx
把你的仓库代码拉下来之后,进入到你的项目里。
我们通过cd命令,进入你的项目文件夹
cd xxx-xx
后面是你的文件夹名称
进去之后,我们需要先安装依赖。这和我们在本地电脑操作是一样的,把项目从git仓库拉下来,安装依赖,才能把项目运行。
执行命令
npm install
等待一会,把项目里的依赖安装好。
接着,我们就可以启动项目了。
执行命令
node index.js
这里,启动node服务,我使用的是8001端口。
启动之后,我们可以看到下面提示项目启动了。这是我对服务器启动的回调函数里,添加了打印日志才显示。并不是说node服务器启动了,自动就打印这行文字。
项目启动了,此时还不能访问我们的网站。因为对应的端口还没有开放。
我们回到实例的控制台页面
到实例的安全里面,配置对应的规则。
我们点击它,进入安全组配置页面
我们点击编辑入站规则,在里面添加一个8001端口。
添加好之后,在实例控制台页面
实例已经添加了8001端口了,这样,我们就能访问网站了。
在浏览器里,输入我们的公网ip+端口,打开网站
在浏览器里,我们看到网站可以正常访问了,是登录页面。
输入账号密码,登录之后,就进入到个人中心页面了。
整个页面开发的还是挺好看,简洁、美观、大气。
完结
好了,到这里,使用 react + ant design 搭建一个后台管理系统,已经介绍完了。
看完本篇文章,如果你感兴趣的话,也想使用react搭建一个后台管理系统的话,可以参考本篇文章,自己尝试搭建一下。