7.Rightlist.vue权限列表组件

一、Rightlist.vue权限列表页面的实现

1.替换后端真实接口

回到我们的前端中第一件要修改的是把当时right.json请求回的数据替换成我们真实的一个接口。

2.跨域问题

我们还没刷新就发页面已经报错，这是怎么回事呢？

这就是我们前后端在交互的时候容易遇到的一个问题就是跨域了，因为我们在自己的vite服务器上端口号是5174，这里的JS发起了一个请求去请求5000后端这个服务器的端口号，所以一定会遇到跨域问题。

解决跨域问题的常用方案有以下几种：

JSONP（JSON with Padding）：通过动态创建<script>标签，将请求数据包装在回调函数中返回给客户端，从而实现跨域请求。这种方式只支持GET请求。也就是前端JSONP要创建JSONP相应的请求方式，后端要给你提供JSONP接口。

CORS（Cross-Origin Resource Sharing）：在服务器端设置响应头部，允许指定的源站点访问资源。可以通过设置Access-Control-Allow-Origin字段来指定允许跨域访问的源站点。也就是后端去设置响应头Access-Control-Allow-Origin，对应的前端的话，有时候在提交的时候也需要注意，要不然双方很容易打起来。

代理服务器：在自己的服务器上建立一个代理服务器，将跨域请求转发到目标服务器，然后将响应结果返回给客户端。这种方式需要在服务器端进行配置。

WebSocket：使用WebSocket协议与服务器建立持久化连接，可以绕过浏览器的同源策略，实现跨域通信。

postMessage：在不同窗口（或不同域名下的iframe）之间使用postMessage方法进行通信，可以实现跨域数据传输。

方案1和2前后端都很费劲。所以我们在这里直接使用vite构建工具所提供的反向代理，反向代理让前端没有难跨的域，我们只需要在前端的vite.config.js中配置一句话就行了。

你如果要访问我们的接口的话只要是adminapi开头的，我的反向代理才会拦截，才会帮助你进行代理的一个功能。因为将来我们不能只要一有代理所有的都拦截，我来请求我自己的一张本地服务器上的图片都得清空拦截，这样的话就是不对了。由于我们后端都统一好了，将来所有的接口都是以adminapi开头的,所以我们只要拦截是以这个开头的，我们就会自动的与我们的服务器代理给你去请求我们5000服务器上的相关的数据并且给你拿回来再你自己去用，这样就没问题了。

由于我们的服务器与服务器之间是没有跨域的，只有我们的浏览器在请求不同域名的时候有跨域，这是浏览器为了安全来阻止的这个问题，所以在这里我们用这样一个原则就可以了。

配置完反向代理后我们还需要在请求的时候删掉前面的路径，表示我朝我自己的服务器就是我现在这个5174服务器请求adminapi/rights，由于是以adminapi开头的，所以转身就给我带到5000服务器去了，拿回的数据它就我。所以对于我这个自己的这个前端来说相当与跟自己的服务器要数据，跟自己的服务器取这个数据是一样的，而服务器在后面捣鼓了一顿帮我们把数据给拿回来了，所以对我们是属于隐藏的，所以这叫反向代理服务器。

在老的webpack环境下改完了配置文件需要重启，在我们新的这个wait工具下的话就不需要重启了，直接就拿到了数据，跟当初我们用假JSON的话是一样的一个结果。

3.在权限列表RightList.vue组件中增删改查

3.1.使用table组件

3.1.1先复制粘贴官网中的代码

3.1.2、改造代码

1）权限名称的实现

首先我们先设个空值

其次我们往里面写。我们要进行一进来这个页面就要进行请求，所以onMountrd生命周期这就来了。

2）图标的实现

如果单纯的模范权限名称那样写的话，会看到页面中图标它没有真正的图标的样，而是那些字符串出来了。

我们为了让图标显示我们再弄上component动态组件来加载对应的这个组件的相应的名字，所以我们还要设置图标的一个映射对象的，但我们会发现我们这根本就没法写了，那我们就要用到自定义。

然后我们就可以利用我们的动态组件component进行加载了。

3）操作实现

4）二级表格

二、Rightlist.vue权限列表更新操作的实现

在权限列表中，我们的任务是在将来我们更新删除了之后，我们会对应的更新相关的接口，相关的接口改变了数据库中的数据，再一刷新这个页面的时候是不是在取这个接口的时候，里面的内容就发生改变了，这也正是我们做这种接口的原因，同时权限列表本来就是管理的整个系统中所有的一个权限的信息。

前端和后端进行更新请求以及后端实现数据库的一个更新操作

1.跟我们后端约定好接口的形式

我们在更新的时候习惯性的使用put请求 /adminapi/rights/3 {title:"",icon:""}，3是更新那一项的那一个id，我们把它放在请求路径上，或者我们把它放在put请求体中也可以。

我们跟后端约定就是如果我要发更新请求，我会在这里发一个put请求类型然后朝/adminapi/rights把对应的当前这一项的id传过去，在请求体中会传入我的title是什么什么，如果有icon会传入icon是什么什么。所以在这里我们会给后端传入一个算是动态的一个id值，那对于后端需要在响应的时候接收这个动态的路由参数，同时也需要获取我们put过去的一个请求体。

因为我们在这里是基于RESTful框架的，所以我们用put，而不用post。get是获取，post是创建，put是更新，delete是输出。

RESTful架构中的其他常用HTTP方法有以下几个：

PUT：用于更新资源，客户端需要提供完整的资源表述。

DELETE：用于删除资源。

PATCH：用于部分更新资源，客户端只需要提供要更新的字段。

HEAD：与GET方法类似，但只返回响应头，不返回实际数据。

OPTIONS：用于获取服务器支持的HTTP方法列表。

POST：用于创建新资源或执行特定操作。

TRACE：用于在请求/响应链路上执行一个消息环回测试。

CONNECT：用于建立与目标资源的隧道连接。

PROPFIND：用于获取资源的属性集合。

GET方法和POST方法是HTTP协议中常用的两种请求方法，它们在使用上有以下区别：

GET方法是一种幂等的请求方法，而POST方法不是。幂等性指的是对同一资源的多次请求所产生的结果是相同的。GET方法可以被重复执行而不会产生副作用，而POST方法在每次请求时可能会对资源进行修改或产生副作用。

GET方法通过URL参数传递数据，而POST方法通过请求体传递数据。在GET方法中，参数会被附加在URL的末尾，以?分隔URL和参数，并以&分隔不同参数。在POST方法中，数据会被包含在请求体中，以键值对的形式传递。

GET方法的数据在请求过程中会暴露在URL中，因此有可能被缓存、浏览器历史记录等记录下来，存在安全性风险。而POST方法的数据不会暴露在URL中，相对来说更加安全。

GET方法对数据长度有限制，由于URL长度的限制，GET请求传输的数据量有限。而POST方法可以传输大量数据，没有长度限制。

GET方法可以被缓存，而POST方法不能。由于GET方法产生的结果是相同的，因此可以被缓存以提高性能。而POST方法的结果可能因为每次请求的数据不同而不适合被缓存。

2.转入后端角色

既然跟前端已经约定好了，我们现在就要做了。

2.1.创建接口

2.2.调用service的方法

接下来就要进行service的一个调用，我们要调用service的方法进行更新。

将来一旦有人发了put请求，带过来这种动态路由{id}，传过来第一个参数接收以及我们的put中的这些详细内容，都给集合在了这个Right right里面。因为我们的right已经用Lombok注解了，所以里面像get、set方法都有了，那这样的话进行一个更新调用，若此时更新调用成功中的话我们的return返回更新成功，若执行失败的话，我们return就返回失败。

2.3.把没定义的方法去创建方法

2.4.实现方法

然后我们再去实现方法，直接去RightServiceImpl中让它自动去补全代码就行了。

2.5.创建生成updateRightList方法

调用rightMapper对象中的updateRightList方法，此方法又是没有的，然后我们去创建生成它。

2.6. XLM文件中写SQL语句

RightMapper里面的方法我们只要对应的写上一个映射器，mybatis的映射器直接关联上之后我们进行对应的update更新就可以了，所以接下来就来到了Mapper中的XML中。

注意万一以后我们不传icon的话怎么办？如果我们不传的话icon就会被一个空的underfunded代替，反而把我们正确的给改坏了。所以我们应该在更新我们rights这个接口的时候做一个判断。

2.7.测试

写好之后我们再重启运行一下服务器，因为我们需要把我们最新的代码部署到我们的内置服务器上，再打开Apifox测试工具测试一下。

刷新一下数据库可以发现数据已修改

测试成功我们在把数据修改回去。

3.前端

3.1. 定义handleUpdate方法

定义handleUpdate方法拿到当前点击的这一项item，获取这一项里面的全部信息。

3.2、设置对话框组件

点击更新后我们要弹出一个对话框来

我们点击更新弹出这个对话框来应该是所有的列表项用的是同一个，所以在这里的话我们只有一个对话框，你不能说我有几个点击更新就弹出就创建几个对话框，只有一个是共用的，所以这个时候就更需要注意了当前item你点击了哪一项，你要及时的把这一项内容设置到我们对话框中。因为你点击首页对话框里面的内容要提前填好的是首页。

对话框里面放一个表单数据，修改完成之后它应该同步成我们表单里面的内容，同时点击确认的时候我们再把这个内容发送给后端。如果说一个时候你可能说我用一个普通的input就行了，但你要多个呢，再就是我们要做校验呢？那在这的话我们是不是可以用到之前我们在Login.vue组件中的那些表单拿过来了，直接复制粘贴，虽然里面有很多不合理的，我们慢慢的改。