4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/86-尚硅谷-云尚办公系统-员工端审批-前端环境整合.mp4原创

各位同学大家好，刚才呢，咱们完成了员工端审批的第一个接口，查询审批分类以及对应的审批模板，那下面呢，咱们开始整合前端，这个前端的这个项目我们已经完成了，我们在这里边直接把这项目部署，咱们直接进行使用，那咱们快速整下前端，咱们的重点放到后端开发中，那大家看啊，在我的资料里面有一个员工前端工程，是一个写好工程，那我现在呢，把这工程复制到我们这个项目的工作区里边来，我现在进行复制。我们的项目的名字叫硅谷oab，现在就完成了，然后咱们打开这个前端，这个在里边找到项目，大家看啊，是咱们的这个项目叫硅谷杠OA-web，然后在里边怎么做呢？首先咱把环境搭建出来，第一部分咱们用终端打开。

然后大家看到啊，在这个项目中有一个文件pack相关的，依那咱们命令把的给下载下来，我这里边做一个下载。N PM in此到根据配置文件下依赖咱们回车，然后等它下载完成，下载完成之后第二部分咱把这项进行启动，这个启动呢，跟之前那个有一点区别，我们的命令大家看啊，用这个命。N ru server通过行启动，那咱们等把依下载完成，然后咱们进行启动，这个依下载稍微要慢一点，咱们需要多等一会儿。然后大家看啊，现在已经完成了啊，完成之后呢，我们现在把这项目给它启动起来，注意怎么启动啊，咱们用npm server serve。

回车通过它进行启动，咱们等它启动起来啊，第一次启动稍微会慢一点啊，咱们多等一会儿。然后大家看啊，现在就启动了啊，里面有些警告咱可以不用关注啊，咱看里边的核心咱们用local house9090可以进行访问，所以是咱们这个基的搭n serve，我们进行启动。这各位啊，给他自己快速搭建出来，下载依赖启动项目，然后这个之后呢，下面呢，咱用它进行测试，测试之前呢，咱们需要改一些地方，那改什么给大家说明啊，我这里已经改过了啊，咱们看一下这里边要改什么内容，首先我们的第一部分咱们找到这个工程的就是，然后把这径呢改成前接口，我这里操作啊S。

Local host80，咱们目前就是八零这个端口号，这是咱们改的一个地方啊，各位给他需要改一下。然后之后我们再来看啊，因为咱们这个员工端呢，后面咱是用微信授权登录生成token进行测试，但是目前呢，咱还没有用到这个公众号这个授权这过程，所以咱们先手动临时生成一个token进行测试使用，后续再完善微信登录啊，这个咱为了测试先手动改一下，那怎么改大家看到啊，在这个request JS里边有一个指拦截器，叫请求拦截器，这个位置是取到你的token，但是token咱目前没有做到授权，咱们先临时做过测试，那怎么做，我这么来实现啊，通过咱之前那个JWT工具，咱们手动生成一个token字符串，然后把token字符串直接复制过来，可以完成这个测试，就是在这个位置复制生成的token字符串，咱们临时先进行测试，后续咱们把公众号整合之后，完成授权之后，这个给它再去掉。

那咱们来生成一下啊，我现在呢，找到咱们之前那个工具类，应该是在common u里边找到啊，大家应该记得这个g wt help。然后在里边呢，有这么一个问方法，咱们的第一段就是生成token字符串，我现在给他生成一下啊，咱等它执行出来。然后大家看啊，第一行那种是不是就是token字符串，咱们把这个复制一下，然后复制到我们的前端的这个位置中来，为了咱们目前进行测试。然后复制之后，注意啊，这里面有些空格需要给它去掉。

这个自己检查一下啊，别多出空格来，所以现在啊这个就完成了，咱们目前只是为了测试，所以手动做这个事情，这各位给他自己改一下啊。然后这个管完之后，其他部分咱就不需要做了，已经做过了啊，咱们看到在这里边的API中有JS文件定义了我们写的接口，咱们刚才接口应该就是这个查询你的审批分类，然后最后有一个页面，在views里边有一个index.wave里边有相关的部分，咱们把它便利最终进行显示啊，这是我们看到的这么一个基本的一个结构。所以这个啊，我们就完成了前端的这个快速整合，包括加路由啊，加页面部分，然后这个之后呢，下面咱们把它都启动一下，包括接口，包括前端，然后最终我们做一个测试，就看一下我们这个审批类型的这个部分在里边能不能进行显示啊，那我现在啊把它启用起来。

然后咱们最终测试一下这个效果。好，大家看啊，现在已经启动了啊，然后咱们进行访问，怎么访问呢？用咱们这个端口号9090进行访问，那我现在点击咱们访问一下啊，然后大家看我们的页面中啊，注意啊，页面中呢，这里面多了一个东西，说请在微信客户端打开链接，也是因为那个微信公众号那个整合问题，所以咱们下面还要做件事情，咱们去掉银行代码，也是为了测试。什么地方呢，大家找到点里，你把后授权不好啊，把这先注掉，就为了测试使用，我这里再重复一遍啊，第一个块里边呢，加上你当前的接口路径，然后你手动生成后是做那个微信授权的，咱目前没有做好这个授权，后面咱完善之后再打开，所以现在就可以了啊，可以之后我到里边重新咱们进行刷新。

我重新问啊，就刚才我们这个路径这个local house9090，大家看里边啊，各位明显看到效果是出来了啊，咱先不管样式，后面这是在微信公众号里面，应该没有这么宽啊，它就是这么一小段啊，咱们现在先看它的功能，大家看里边啊，OA审批，出勤，人事财务是咱什么，是不是这个审批类型，然后在里边有加班请假申请费用，还有一个请假测试，是我当时故意加的这么一个东西，所以现在啊，这部分就完成了，显示所有审批分类，以及里边的审批模板，也是咱们完成的第一部分。这个咱就写到这里，然后后面呢，咱重点编写接口，这个前端部分我们都已经写好了，后面咱在整合完这个微信公众号之后，把这些注释再给他打开。