46、商品服务-API-三级分类-配置网关路由与路径重写

接下来我们来编写后台管理系统的前端项目，我们来维护三级分类的增删改查那打开Vs code。我们呢，打开我们的前端项目，打开文件夹，主要来选择我们桌面里边的人人fast view，好，我们来选择文件夹。我们还是一样，先把这个前端项目启动起来，那要启动呢，我们首先得启动前端项目的后台管理系统，这样呢我们才可以登录后台管理系统呢，是这个人人fast，好，我们把它启动起来。门在这儿。运行。在它启动期间呢，我们来启动我们的这个后台管理系统的前端项目，我们使用NPM，只要我们这个nude models已经安装了，那我们直接n PM div即可。我们让前端项目呢运行起来。好，我们先来看后台管理系统呢，现在已经是启动起来了，在8080，那我们的前端项目呢，也正在启动。

我们前端项目呢，是8001，我们现在呢，前端项目启动起来，它会自动打开这个界面，好我们登录账号，我的me，我的me验证码呢，我们来输一下F4。8XF好，登录进来，登录进来呢，首先我们要写商品系统的相关内容，那商品系统呢，我们先来到系统管理里边，在脚手架工程里边有一个叫菜单管理，我们先在这里边添加上一个后台管理系统里边的一个一级目录，那我们就就在这儿点击新增，新增呢我们看这有三种，一种叫目录，一种叫菜单，一种叫按钮，那我们呢，先来选择目录，我们要给这边新增东西，那这个目录呢，我们就叫商品系统，跟商品系统有关的所有东西我们都放在这儿，那它的一级菜单呢，就所属于根的一级菜单，好，我们选中一级菜单，那菜单的图标呢，比如我们来随便选择一个，我们就来选择一个这个，当然我们这里边的所有图标，我们都可以参照这一块来进行修改，我们现在呢，先不用管它，我们点一个确定。

当我把目录填完了以后呢，我们来刷新一下，我们就会看到在这多了一个商品系统，当填的这些数据呢，其实进入了我们数据库里边，在古maildmmi我们后台管理系统的脚手架里边，在这呢有一个菜单，在菜单里边呢，我们来找一下我们的商品系统，诶已经有了，那接下来呢，为商品系统里边添加一个第一个菜单，我们的分类维护好，接下来呢，我们选择新增，来新增一个菜单，我们就叫分类维护。菜单所属的上级菜单我们来选中，是商品系统的，那菜单的路由呢，我们就来写一下，比如叫商品的product下的category，好。

包括它的这个授权标识，我们先放在这儿，然后菜单的图标我们来随便选中一个分类维护好，我们选一个它那们在这儿呢，点击确定，那么相当于呢，给商品系统里边添加了一个菜单，同时呢，这个菜单数据也一定会进入我们数据表里边，诶在这呢都有我们来刷新一下，我们看到这个脚手架工程呢，为我们已经展示了商品系统分类维护，那当我们来点击分类维护，我们呢就会访问这个请求product-category，那我们在这块呢，我们希望就展示出我们的整个三级分类，这里能对整个三级分类来进行自产改查维护，而想要维护这个三级分类来做这个功能，我们就首先要了解一下我们这整个脚手架工程的一些基本的规范，比如我们来在系统管理里边，我们来看角色管理，角色管理呢发的是S杠肉请求，然后呢，我们来到这一块有一个页面。

那我们的分类维护呢，我们发送的是product-category请求，但实际上我们再来录的时候，我们在菜单管理里边来录入咱们的分类维护的时候，我们说它的URL路径是product-category，所以说呢，这就是系统里边的第一个规则，我们的路径前面的这个杠会被替换成横杠，那最终呢，会来到我们来点分类维护我们的这个product。斜杠category就会变成product，短横杠category，那最终会找到什么来进行显示呢？比如我们来看角色管理C4杠，那其实呢是在这一块显示的，来到src里边views来点开views，这里边呢有一个models，这就是模块，模块里边呢有一个。SYS就是我们的C系统，系统里边我们来看一下我们的这个路径杠肉，那其实呢，正好是对应这个文件夹里边的，诶肉点view，那这里边呢，显示的就是我们角色的整个页面视图，我们随便在这点一个，比如查询，我们来写一个，一一我们来保存一下。

那重新来定义，我们来看我们的页面效果，我们这查询呢，就变成一一，那知道了这种规则，那我们的分类维护，它的整个视图页面呢，其实就是应该在商品这个文件夹下有一个category点5U这个组件它会自动进行展示，就像S下边一样，好，那我们呢，就在models下边来创建一个文件夹，我就叫product，那我们所有商品的组件呢，放在这，首先第一个组件是我们的分类维护，我们就写一个category点5U来新建一个文件，我就叫category.view u。好，那么在这呢，由于它是尾U的模板，我们以前呢，创建过，我们只需要写一个前缀生成尾U模板，好来点过来在这儿生成以后呢，我们在这假设随便写一个，我们先来看能不能用，我们在这写一个三级分类维护，我保存一下。

我们来重新刷新一下这个页面，诶，我们现在不用刷新，它都会自动刷新，那么在这呢，就显示出了三级分类维护，那们希望就在这里边来对三级分类进行增删改查，那三级分类要显示的效果呢，我们来使用的是element UI，我们来搜索element，在element里边呢，有一个这样的组件。来找到组件，这个组件里边呢，有一个树形菜单，树形控件，那我们希望在这来展示它的数据，怎么展示呢？树形控件很简单，写一个EL tree EL tree里边呢，Data那就是要展示的所有数形数据，然后呢，Props，那就是它的一些属性设置，当然这些该怎么写，我们后边再看，包括呢，这还有我们的单击函数相关的绑定，我们直接把这个复制过来，我们放到我们的前端项目里边，我们来把这替换成EL tree，然后呢，我们再将data里边的相关数据我们先复制来进行简单测试，好在data里边我来整个复制，把data里边的内容呢，来复制一下CTRLC，我来复制过来，包括呢，它的这个muscles，我们一起复制吧。

我们data以及muscles，好我们来复制一下来粘贴到这里边，那我们的这个data的写法呢，就不这样写了，包括我们的这个muscles方法的集合，好我们都先复制这里边的。Out shift f代码整理一下好来保存，我们现在看一下显示效果。在我们这一块呢，就已经显示出这些菜单，但这些菜单呢，只是我们一些示例数据，我们希望展示出真正的数据，那怎么获取呢？我们就需要给我们的1万端口发送获取商品三级分类的整个树形结构的请求，那这个请求如何发，我们还是来到后台管理系统的前端项目，我们看到我们的这个三级分类里边这一块的data数据，我们就给它删掉了，因为这是写死的。

好，我们呢，给它删掉，我们让它置为空，那真正的数据呢，我们要从后台去来发起发送请求获取，那如何获取，我们可以随便看我们后台的整个脚手架工程的以前的这个项目怎么写的，我们以前代码呢？比如我们看这个角色里边，我们想要获取角色，点一个查询，它会掉一个方法叫get data list，这个方法呢被写在了muscles里边，那muscles里边呢，是用来封装所有的方法的，而且呢，第一次调用是在active的这个里边，我们学过唯的生命周期函数。其中呢的表示呢，我们这个页面只要一被激活就会发送请求，包括呢，我们也可以写在created，只要我们这个组件创建完成，我们就可以发送请求来获取数据，行，我们写哪都行，我们也希望这么来调，那我们在mans里边呢，我们自己也写一个方法，比如叫get meus，我们来获取所有的菜单，当然这个菜单如何获取呢？我们肯定要发请求，我们可以参照以前的写法，怎么发请求？在这里呢，是使用this.dollar http小括号来进行发请求，要发给哪个UR的地址，包括请求方式是什么，包括要带的哪些参数，那我们完全呢，可以把这个复制过来，这个就是一个请求的模板，我们将它复制过来。

然后呢，我们在这一粘贴，那我们真正要发的请求呢，我们在这儿写上，首先请求的地址，那么我们要发给我们的后台系统的product chemicalary list tree，好，我们就直接把它全部写上，然后呢，我们发送什么请求，当然我们可以写get请求，那么带参数了，用来使使用它的this Dollar http这个方法来将所有的参数KVKVKV带上，那现在呢，没有什么参数，我们可以把它删掉，那请求发送成功了以后呢，那就是then then，那就是成功以后的函数，那成功了怎么办？我们呢，比如写一个最简单的，成功了我们就在控制台打印一下，我来写个箭头函数，我们conso.log，我们打印到控制台，成功获取到。

菜单数据。我们将这个data在这打印。我们这个给后台发送请求获取菜单的方法呢，我们可以在它创建出这个组件的时候就来调用，当我们这个生命周期created触发的时候，我们可以访问this实例，所以我直接调用this getus方法。

那这样呢，我们就会一创建这个组件，就给后台发送请求，获取菜单数据来保存测试一下，看行不行，我们来到我们的这一块，我们来F12看控制台来刷新。我们看到呢，这发了一个tree请求，只不过呢，这是一个404，为什么是404，原来它是给local cost8080，人人fast发去的请求，我们应该是给这个1万发送的请求，这是第一种，第二种，如果我们找到了这个请求地址，我们把它的前面的基准路径已经改成了这个1万还会有问题，我们要给其他服务发请求，那我们又要改地址，这是第一个，第二个我们这个商品服务呢，除了1万端口，还有10001 10002 10003上线了好多服务，有时1万端口不能用了，我们要用其他的，是不是每次都要改这个基准路径，那这个基准路径呢，想要找到非常简单，我们CTRLC，我们看一下它是在哪定义了的，Ctrl shift f，我们全局搜索，那么在这呢，CTRLV搜索一下。

我们来找一下它在哪定义了，而不是在哪引用，那这一块呢，只写了这个this menu，好，我们把这个杠缩一下，我们让它这么查，在这一块呢，有一个叫index g，主要在static conflictfig里边，我们来看static conflict里边有咱们这个index GS在这里边呢，定义了我们这个API接口的基准路径地址。为了在这统一地址，所以呢，我们只需要给网关发请求，让网关给我们路由到指定的地方，所以我在这儿来写八八，我们全部给网关发请求。

短横杠也给它删掉，哎，因为我们发请求的时候呢，会再加上这个前面的横杠，好我们来保存重新测试一下，我们在这儿呢，刷新一下。诶，我们发现呢，让重新登录，重新登录的原因，这个连验证码都没了，是这样，我们来点。com的时候，我们发现他呢，直接给网关发送了我们这个验证码请求，而实际上验证码这个请求是来源于人人fast这个项目，也就是8080这个端口的，所以呢，我们可以让网关先默认的将所有请求转给这个服务，那要转呢，网关就得发现这个服务，那这个服务呢，就先得注册到注册中心中去，我们现在我们人人fast里边来依赖我们的鼓励mail的common工程，我们来找一下鼓励麦尔科，因为在这里边呢，我们给他引入了。NAS的注册中心和配置中心，那好，我们接下来呢，给它做一个简单的配置，让它加入到注册中心中，我们在application离开压麦尔中，好，这是我们当前项目的这个配置，我们这个配置呢，我们先来写上一个。

当前应用的名字来spring application name，这个application name呢，我们就叫我们的人人fast好。复制过来，然后呢，我们再来配上我们的注册中心地址，NAS discovery server a drr，我们是127.0.0.1，冒号8848，好，然后呢，我们来开启服务的注册发现功能，先将它注册到我们的注册中心中，Enable discovery client。把这个写完以后呢，我们来重启人人application。

这呢提示这个Jason不存在，那我们可就导入这个Jason相关的依赖好dependency，我们来导入这个Jason，然后呢，我们再来重启一下我们的项目。人人application，我们来启动一下。我们首先呢得把它加入到注册中心中们来到NAS里边，我们来先刷新一下。好，Nunus。在我们的服务列表里边来稍等一下，只要人人application启动，那么就就应该在服务列表里边有这个服务来稍等。哎，我们发现呢，这一块已经启动了，这样那相关配置还有问题，那是因为我们没写配置中心相关的内容，好，我们先来刷新一下人人fast呢已经进来了，这是我们后台管理系统，那我们呢，将所有请求先代理给后台管理系统来到网关，我们来进行配置。

我们来到网关的配置文件，这是以前我们写的两个基本的测试好，接下来我们再来写一个路由规则ID，这个呢叫din wrote，我们将请求呢转给这我们uri，我们的这个地址，地址写什么呢？我们这么来写，写一个叫LBLB呢叫load balance，叫负载均衡，负载均衡到指定的服务，哪个服务我们只需要写这个服务名，那将请求地址路由给他，那路由给他，在哪种条件下才路由给他，所以呢，我们需要加入一个断言，那我们可以参照spring cloud的官方文档get外里边在断言里边呢，有这么一个断言叫指定的路径，我们来看一下它上面的断言，有一个叫pass RO断言，这个断言呢，就是当我们是指定的这个路径，那我们就给你路由过来，比如呢，我们这four。

Ment和bar segment，那它的这个示例呢，就是我们这个路径下for，路径下带了任意请求，或者路径下的任意请求，那我们都路由给这个服务答我的那个LB写法，我们也可以来搜一下LB冒号，哎，那就在这这个LB代表的意思呢，就是负载均衡好，那我们给它负载均衡来到这，那这个断言规则，那我们就是按照路径来断言。我们先来找一个上一个的。Control home，我们的按照路径进行断言，我们的写法呢，就是杠pass等于我们指定的路径，比如我们写杠双星，那就是呢，从我们后台管理系统发起的任意请求，都先直接路由到这儿，那我们不来这么直接写了，我们来以后定义一个规则，只要是我们这个前端项目发送请求呢，我们都带上API这个前缀，我们有这API这个前缀，那这样呢，就是只要有API这个前缀，我们全部先默认路由到我们的人人fast负载均衡到这儿，那我们来改一下前端项目发送请求的时候呢，都带上API前缀，我来保存，我们重启一下我们的这个人人application以及网关。

我们现在来测试，我来发送请求的时候呢，能不能录入到我们的人人fast。我们看我们的验证码是否还会报错，我们来重新刷新一下，刷新。我们来等待验证码，在这块呢，验证码请求已经发了，发给了local host 88api capture，但这个请求呢，我们来分析一下，从前端项目发来这个请求，但是呢，目前这个请求我们再来刷一下。它的这个效果呢，还是404 404的原因是什么，我们就得说一下，我们来到网关，因为八八呢默认发给网关，网关一看呢，API前缀满足这个要求，它会转到人人fast，但是会转到哪呢？他先从注册中心中找到相当于人人fast的地址，哎，我们假设呢，他找到了这个地址所在的任意位置，包括端口号他也找到了，找到以后呢，它会将这个请求直接放到这，但是呢，这会有问题，因为人家默认发验证码请求是这样发的，默认的验证码呢，是我们访问LOCALHOT8080来，直接访问我们的这个capture来。

把它复制来，我们默认呢是这样，而且呢，我们访问的时候还会带上项目名，我们可以看一下我们这个人人fast的配置，我们在这呢，我们访问的时候还有一个像名so contest pass，所以呢，我们必须这样访问才是能访问到验证码的，当然验证码要带UID什么的，我们先不管，所以呢，我们最终希望网关能将我们这个API的这个路径转成我们真正能访问的。

这个路径那怎么转呢？我们就可以使用网关带的路径重写，我们来到spring cloud get外，我们control home在getway里边呢，这是断言，我们现在要用功能了，就要用到这个filter filter里边呢，有一个功能我们来找一下，叫rewrite pass，叫重写路径，怎么重写路径呢？诶，它这写了一个。示例，我们这个杠for加一个，这相当于有一个片段，我们这个片段呢，可以给你重写成指定的这个样子，相当于呢把这个杠前缀就去掉了，比如这个例子，你发了这个请求，将会被重写成这样子的，所以呢，我们再来添加filters，我们为这呢添一个功能。

Filters，那filters呢，填的第一个功能，第一个功能呢，我们就是来进行路径重写，当满足这个请求想要派过去以后，我们先来进行路径重写，派过去以前呢，我们将路径重写成这样，重写成什么样，所有的请求呢，都是以API开始的，这个路径我们重写成我们加上我们自己指定的前缀，以及我们后边的这一块路径来看这一块的写法，直接把这个复制过来。好，相当于呢，我们拼接上了我们这个路径以后，API杠就会变成我们的指定的这个服务，加上人人fast，加上这个好，我们现在来重新启动我们的网关。只要我们来发送API，下单任意请求，默认先路由的我们后台管理系统，并且呢，会给它重写，加上我们的访问路径以及后边的真实路径，把API这个前缀呢就去掉了，好，那现在呢，让它启动重新来测试一下。

我们来到我们的人人快速开发平台，我们来刷新。那现在呢，先来看验证码，诶我们发现呢，现在这个验证码现在已经好了，只不过现在是一个500异常，这个500异常是什么呢。他在这儿呢，是连接拒绝说没有这个更多的信息，就是我们这个8080，也就是说这个服务啊，启动起来还得有一段的缓冲时间，我们稍等一下再来访问刷新。来，我们来找一下这个验证码，我们发现呢，现在已经好了，我们来重新登录一下，我们使用adin adin，我们叫4ADP3回车，但是呢，我们发现这一块有报错，我们来到控制台，控制台的这一块报错说option，也就是说我们这个登录请求403FORBIDEN，诶被拒绝了，那被拒绝的原因呢，他在下面也有说我们在访问这个请求，在这的时候from origin，我们相当于从8001，诶从这要访问到logoho，八八访问到这的时候，结果呢，这个请求已经被阻塞了，是由于什么阻塞的，叫cors策略，这个cors呢，就是我们说的跨域，然后浏览器为了安全限制期间，它会默认拒绝这些跨域请求，那如何解决跨域呢？其实很简单，浏览器说啊，这个请求，最终他想要检查有一个头，这个头呢？

没有，在以请求的资源里边有这个图呢，叫访问控制允许来源，这其实就是解决跨域的最终办法，当然这个跨域到底是什么，包括如何解决，那我们下一节课呢就来看一下。