00:00
啊,大家好,我是上硅谷的高级前端讲师,我的名字叫张小飞。那下面呢,我给大家带来的是一个关于一个后台管理的一个实战项目。那大家现在看到的就是我们这一个。后台项目的一个。主体的首页。啊。那其实呢,可能最先看到呢,可能会是这个登录页面也有可能。啊。但现在呢,我不这我先不大家去介绍这个项目的功能。我先来说一下一个很重要的问题。大家下载到我们的课件资料之后,如何将我们最终版的应用运行起来,这个对大家来说非常的关键,因为你需要参照我们最终的项目呢去运行,去写你的功能对不对?好,那当然下载到了课件资料里面应该会有一个源码的文件夹。
01:04
一共啊,应该包含了四个工程目录。那第一个呢,是一个black空的项目,那这个项目呢,是为了方便大家去编写我们应用的功能初始化的一个空项目。当然到时候大家也可以手动的自己根据我们的说明去通过命令来生成。那后面呢,一共有三个,前两个呢是。Client客户端应用。那第三个呢是server的应用,这个来说一下,我们的应用是一个前后台分离的应用。那也就是说会有client端和server端两个应用,对吧,那这一个对应的是我们的。服务器端应用,它呢主要是为我们前端来提供数据。而我们前台的应用啊,有两个,为什么会有两个呢?这里面有一个。
02:06
东西叫Rex。那在react应用中很有可能用到一个库,就是。那有的同学可能听过,有的同学可能没有听过,没关系。那再一个是在我们的应用可能会用到,也可能不会用到,那前面呢,是一个没有用上Rex的版本。那我们在写我们的项目的时候呢,前期没有用redux来去实现我们的基本的我们项目的功能。那后面呢,我们会用上来改造我们的项目,这样大家会对用和不用有一个比较好的一个对比啊,因为Rex是整个里面可以说是最复杂的一个部分的一个库。
03:00
啊好,来,我给大家来运行一下项目,首先要运行的是答案是十端的这个应用是吧CD。来MPM。那这个为什么是n PM start的,大家应该要知道啊,可以去看我的啊,这个大家应该是知道的好。这个地方我启动报错了,实际上他在说我们这5000的端口呢,已经被占用了。这是为什么呢?大家可能会出现啊。来这是因为我们刚才已经启动过了,我前面啊,为了能够让大家看到这一个。最终下面的效果我已经将啊最终版的server端给运行起来了,那我先呢给它关一下。好,关掉它以后呢,我再来启动一下我们的所有端的应用。哎,这个启动呢,时间不会太长,这里面说一下我们serve端的应用啊。
04:08
是已经写好的啊,已经写好的我们已经运行起来了,而且它会去连接数据库,而我们用的数据库是mango DB。这个就要求大家的电脑上面应该有mango DB的环境,也就是说大家安装了mango DB,并且启动了它的服务。这个有的同学可能就没有启动服务,甚至没有安装那。如果你没有安装或者没有启动mango的服务,那你的后台应用是启动不了的。在大家下载得到的课件资料里面,应该会有一个file文件夹。那在这里面呢,就mango DB的一个安装文件啊,实际上有两个啊,一个是4.0的,一个3.2的,主要是最好安装4.0最新版本的。
05:00
有极少数的同学安装不下去,就卸载以后安装三点几的版本啊,我的文档里面呢,有详细的说明,大家根据说明去安装我们的mango DB,并且配置它的服务,让它开机就能启动。这样我们就可以去连mango DB,启动我们的后台应用了。好,没问题。好,刚才呢,我已经启动了我们的啊后台应用对吧,没问题,下面呢,我要去启动我们的前台应用,当然我这个前台应用呢,前面也启动过一个。实际上启动的是哪个呢?是re版本的那个最终版的前台应用,那下面呢,我们要去启动一下,来演示一下启动不用redu这个版本S啊,那这个命令也是NPM。好,这个启动呢,最终完成需要一定的时间啊,这实际上是在问我3000呢已经被占用了,要不要我在另外一个端口上启动,当然要yes。
06:10
好,这个呢,要稍微等待一会才能出来见面啊,我们就先来看一下它。这是他。打开以后看到的起始页面以这个登录页面,因为我们后台管理呢,首先必须得登录好,这里面说一下,我们默认给大家提供了一个管理员用户,用户名呢是A的me,密码也是a me。啊,大家输入命,记得点击登录就能看到我们的。整个后面的管理界面的整体效果,那整体界面呢,有左侧的导航,有它的头部。主主体部分,这个部分呢,是不断变化的,以及其实下面还有一个底部非常简单。头部呢,其实也没有什么。主要这里面就会涉及到登出的一个功能啊,以及一个时间的显示,以及这里面后面会涉及到一个。
07:08
天气的一个查询,主要会用到一个接生P请求的一个使用啊好那。我们的功能主要是通过左侧的操作菜单操作来体现的,我大概给大家说一下,这里面呢,有商品管理,有用户管理,有角色管理,有订单管理,以及图形图表的一个。实现好先来看一下,简单看一下商品管理,其实这个商品管理呢,也包也包含两个部分,一个商品的分类,一商品的品类管理。啊,这里面会去能显示商品的分页列表,商品的添加啊,以及商品的啊修改啊都可以的啊,以及查看子分类,因为我们这里面呢,有二级分类的一个概念。好,具体的实现呢,我们后面啊会一步一步的带大家去完成啊,那下一个呢是商品管理,那商品管理呢,也是它有一个列表分页的功能啊,也有搜索分页的功能,以及添加啊,查看详情修改等等功能,这里面呢,我就不大家一个一个去看了。
08:22
下面呢,由用户管理和角色管理啊,大家要知道对于后台管理应用来说啊,权限管理是一个非常重要的东西。啊。那权限管理我们这里面也有实现啊,如果大家有兴趣的话,可以继续的往下学习啊。啊,这里面用户管理啊,可以进行实现角色管理,有相关的一些操作。啊,图形图表呢,这一部分主要是带大家去看一下一。这个户如何来实现一些比较好的一些图形图表的一些效果。
09:01
好,最后这一个订单管理,其实我这里面没给大家实现。因为这一个部分呢,是由于我们线下班的同学在学完之后,自己啊去动手实践的部分。好,那我们整个我们。这个管理应用的后台管理应用的功能大致上就这一些啊。好,希望大家呢,后面跟着我们的视频一步步学习,最终都能完成这里面所有的每一个功能。好。
我来说两句