4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/23-尚硅谷-云尚办公系统-搭建项目前端环境（上）.mp4原创

各位同学大家好，前面呢咱们已经完成了前端中的基础知识，那下面呢，我们用这些知识来搭建我们项目的前端环境，并且完成角色管理前端的开发，那咱们看一下啊，我们这个第三部分要完成内容，首先第一个呢，给大家介绍一个前端框架，通过这个框架我们来搭建一下项目的前端环境，然后在框架中咱们把里边自带的登录功能改成咱们本地接口登录这个之后我们来实现角色的相关功能，包括列表删除、添加、修改以及批量删除。那下面呢，我们继续来看一下啊，首先第一个我们先看一个框架，这个框架的名字叫wave element，它是基于VI和UI一套集成的系统解决方案，通过它能实现我们的后台管理系统，那咱们看一下啊，这个框架里边呢，有一个在线的演示地址，这个地址呢，我在浏览器中已经打开了，然后咱们看这是它的登录界面。

就是系统登录，然后咱们登录进去，登录之后呢，咱们看到啊，在里边有很多视力的功能，然后你发现它的界面效果，包括功能可以说是很强大一部分，比如说你看到有这些图标显示有相关的图标啊，包括有各种表格的样式等等，这是他给我们提供一个框架，而我们项目中基于这个框架实现咱们后台管理系统的开发。但是大家也发现啊，这个里边呢，是不是有很多的功能，而咱们项目中其实很多功能我们根本用不到，所以咱们往下来看看这里，这里边有一个名字叫这是什么呢？它是在上面的基础之上。把一些功能做了一个简化，是这个框架一个最小精简版本，我们项目中就用这个最小精简版本，在这个框架基础之上进行二次开发，加上我们项目中新闻功能，所以咱基于它进行实现，We me to是这套框架的最小定念版，那这个怎么去用，下面给大家做个演示。

首先啊，你可以到GIHUB中呢，下载它最新的这个代码，我这个已经下载过了，然后大家看我资料中有一个压缩文件，这就是他的最新代码，那这个怎么用，我来给大家演示一下啊，咱们看它的基本过程，我在图里边也写一下。首先我们的第一部分在github下载它最新的。项目的这个代码，它是一个压缩文件，咱们把它解压到我们的这个工作区里边去，这是我们的第一部分，那咱们把这步来做一下啊，就是这个压缩文件，我在这里边先直接解压。

这个比较小，很快啊，然后解下之后，大家看里边有很多内容啊，咱们把这个名字我要看到明确给它稍微改一下啊，这个名字我起个名字就叫做。硅谷。杠OA。我的命。这是我们解压之后的这么一个项目，然后咱把它复制到我们的工作区里面去，就咱之前建那个硅谷OA里边，把这个直接复来，大家看之个项目，然后它里很多的内内咱一咱都有做介绍，大家看啊，这个内容中有很多文件和很多的文件夹，咱们找到一个各位认识的文件，大家看这个。这个文件还记得吧？们之前讲N中过，我们项目行始化生。一个文件里相关括。

是不是相关的依赖，所以咱们现在我们要做的第二件事情是什么呢？我这里写一下啊，第一个解压到工作区里边，然后第二个我们就是根据它的配置文件。去下载它相关的依赖。也就是说根据这个package。点Jason这个文件下载依赖，那怎么下载，各位想一下啊，这咱之前应该刚讲过，怎么根据配置文件下依赖，大家想一下啊，怎么做，咱们是不是使用一个命令。这个命令是什么叫NM？通过它根据配置文件下依赖，那咱们下面来做个操作，我们来测试一下啊，我在这个项目里边，咱们点右键在集成终端中打开，注意在这个目录下啊，硅谷OA杠我然后咱们输入命令。

N PM in到这里边我直接回车，咱把这个依赖联网下载，这依赖比较多，咱们需要多等一会儿，然后我这里边下载之后呢，会把下载好这个项目给大家直接共享出来，各位把我这个项目直接运行就可以了啊怎么运行，咱马上说到我这里边演示一下下载过程。咱们等他下载啊，为了视频效果，我这视频先稍微暂停一下，等他下载之后我们再打开。各位看到啊，我这个速度比较快，因为这网比较快啊，经过了大概也就是有一分多钟的时间，这个就下载完成了，然后下载完成之后大家看在这个位置多文件夹叫node models里面就有相关的依赖，然后依赖中呢，咱们找几个各位熟悉的依赖啊给大家看第一个。应该都认识是什么，是不是那个X发送ex请求依赖，再看一个依赖这个是不是这个B做那个转换的，另外再找一个各位认识的啊，咱往下找一个啊。

往下找一个。我想各位看这个这都认识是不是这个啊，所以它里边就是把依赖应该都完整下载，通过n PM in进行执行，然后这个之后我们到第三部分，咱们把依赖。下载成功之后，我们就可以启动这个项目，这个项目怎么启动呢？这里边有个命令要求各位啊，把它记住启动项命令用什么npm ru DV，通过它可以把这个项目进行启动，那咱们来试一下啊，我把这个关掉，重新打开啊。在这里边右键。集成终端中打开用命令npru会车，现在他就可以把项目进行启动啊，咱们稍微等一下，等他启起来。

这里边啊有一个百分比，等它是100%，应该就可以正常启动运行了。然后大家看啊，现在就启动了，启动之后你看它的提示啊，所以已经成功了，用了这么长时间，你通过这个地址可以访问，然后这个时候呢，它一般来讲会自动给你打开浏览器，进入到他这个登录界面，如果它不会自动打开，你可以手动输入用local house9528进行访问，它默认端口号是9528，或者说这里也提示到了，用IP加这个也可以访问。所以现在啊，我们把这个前端项目就完成了搭建，通过它我们看到这个界面，然后这个界面给他登录点开大家看啊，这里边你发现功能是不是很少，跟它这个里边应该差了很多，因为它是一个最小经版，咱们在这里边可以进行二次开发，它只带了一些简单的示例功能。

所以以上啊，就是搭建项目的前端环境，这个我们就完成。前端环境搭建之后呢，下面呢，给大家来介绍一下这个环境中这些目录包括文件，它的含义是怎么样，我这里面做个说明啊，当然我强调我这里先做一个简单介绍，各位可能在我介绍之后，你并记不住它里面到底是干什么的，咱先有一个了解，然后后面我们在具体开发中用到某一个，我们会在进一步再讲解，那我们来看一下里面的内容啊，首先咱们看主要部分啊，第一个文件夹叫build，就是构建中用的啊，但是咱们应该没有涉及到，然后大家看第二个啊，第二个叫什么叫Mo。这什么意思呢？各位可以这么理解，咱们看啊，你看我现在比如说我先把它退出去啊，咱先退出去。

点退出，退出之后你发现我现在一登录是不是能登进去，其实我现在这个登录过程中，它是掉了接口完成登录，然后在里边有很多相关功能，比如说这个table啊，这个这个form表单等等，而这些功能它是怎么做的呢？它目前并没有写后台的接口，它是在里边写了一个Mo，你可以理解为是一个模拟的服务器，模拟出这个接口的效果，这个叫Mo，就是一个模拟服务，然后后面把它会改成咱们本地接口。除此之外往下看有一个叫no models，这是咱们说那个相关依赖，还有一个叫public public什么意思，是不是这个公共的或者说公开的，然后它是什么意思呢？看我课件中写到啊，其实这个呢，在我们项目打包的时候，他会给他打包到你的根路径下啊，这个public了解一下，除此之外往下看，下面有一个文件夹叫src，里面放我们的主要内容，有很多的文件夹，咱们看一下啊，第一个文件夹叫A片。

什么意思呢？说明啊，其实你可以这么理解，我们现在用的是一个框架，框架的特点是什么？大家想一下，比如咱们知道spring框架啊，知道什么C，知道这个或者说都是框架是什么。是不是他帮我们实现了一部分功能来用它可以少写代码，另外里边制定了一种开发的规范，这个叫框架，而同样这个框架中呢，它里面有很多目录，在目录中有他自己特定的规范，你不用这个规范也可以，但是他把这规定给你规范好了，所以咱按照规范开发，所以它里边有第一个文件夹叫A片，A片是什么呢？比如说咱们操作中有很多接口，那你把接口在里边通过JS文件进行定义，比如说这是我那个接口啊，里边用它定义。

然后还一个叫放一些静态一些相关的，这里有个叫is，放一些相关的图片，什么叫图片，大家看啊，我这个前面是不是有些图标，图片就放这些东西，除此之外还有一个往下看lay，就是咱的布局，比如我这个页面中，你看啊，左边咱理解为是不是类似于菜单啊，右边是不是显示内容，包括上面有它这些提示，这个叫布局，之后呢，有一个叫router，这个很重要。它叫什么？就是wave中那个路由，什么叫路由？就是咱说的菜单指wave中叫路由，你看我现在点table显示，它点显示这个点form是不是显示表单，这个就叫路由，在root里面进行定义，另外其他部分就是些其他资源等等啊，除此之外还有两个比较主要的，一个叫us，封装一些工具类，咱们主要用到是它request JS。

大家看这个啊。是不是ex克请求他把这个在里面做了封装，然后之后还一个叫waves，我们在这个项目中用到的页面都是在wave中进行编写，它的名都是点V啊，比如你做这个表格啊，做表单那都是写到这里边。然后之后往下看啊，这里边还有一个文件叫闷点JS，这个什么意思呢？大家看文件中就能理解。这些在干什么？咱们之前刚讲的那个模块化开发啊，我这里强调啊，前面讲的前端东西都后面都要用到，都很重要，因为咱们如果不重要，咱也不会以提到，你看这里边都用到了，这叫什么？是不是引入它？你可以理解为我们做Java代码中有一个程序的入口，一般咱是main方法，而这个框架中也有它的入口，是个JS文件，就是闷点JS，当我们一启动项目，那这文件就会加载，加载过程中它会给我们引入相关的组件，包括你看有wave啊，有U，有你的路由，有你的图标，有你的其他内容，所以这一点相关的目录结构大家有个印象啊。咱们后面主要改的是这么几个，第一个是A片定义接口，第二个是waves里边写咱们相关页面，然后在页面中我们就是引入这个文件，然后最终调口。

啊，所以它主要是这么一个结构，除此之外就是其他文件，比如有这个parding啊，包括有一个wave conig，在wave con中你可以配置你的代理服务器，比如你访问那个接口路径等等，这里边可以进行配置。这是咱们啊，对于它一个基本的介绍，大家先有个印象啊，然后后面用到某一个，我们会具体再给大家再来强调一下。所以现在啊，这个前端的环境就完成了搭建。