微服务项目之电商--13.跨域问题解决及品牌管理vue界面实现

柔光的暖阳◎ 2021-11-17 10:02 273阅读 0赞

**目录**

一、跨域问题

1.为什么有跨域问题？

2.解决跨域问题的方案

3.cors解决跨域

1）.什么是cors

2）.cors原理

3.cors解决跨域问题

二、品牌管理vue实现

--------------------

# 一、跨域问题 #

跨域：浏览器对于javascript的同源策略的限制 。

以下情况都属于跨域：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70][]

如果**域名和端口都相同，但是请求路径不同**，不属于跨域，如：

`www.jd.com/item`

`www.jd.com/goods`

而我们刚才是从`manage.leyou.com`去访问`api.leyou.com`，这属于二级域名不同，跨域了。

## 1.为什么有跨域问题？ ##

跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制：**一个页面发起的ajax请求，只能是与当前页域名相同的路径**，这能有效的阻止跨站攻击。因此：**跨域问题 是针对ajax的一种限制**。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1][]

## 2.解决跨域问题的方案 ##

目前比较常用的跨域解决方案有3种：

*  Jsonp
    
    最早的解决方案，利用script标签可以跨域的原理实现。
    
    限制：
    
     *  需要服务的支持
     *  只能发起GET请求
 *  nginx反向代理
    
    思路是：利用nginx把跨域反向代理为不跨域，支持各种请求方式
    
    缺点：需要在nginx进行额外配置，语义不清晰
 *  CORS
    
    规范化的跨域请求解决方案，安全可靠。
    
    优势：
    
     *  在服务端进行控制是否允许跨域，可自定义规则
     *  支持各种请求方式
    
    缺点：
    
     *  会产生额外的请求

我们这里会采用**cors的跨域方案**。

## 3.cors解决跨域 ##

### 1）.什么是cors ###

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出[`XMLHttpRequest`][XMLHttpRequest]请求，从而克服了AJAX只能[同源][Link 1]使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

*  浏览器端：
    
    目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
 *  服务端：
    
    CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

### 2）.cors原理 ###

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

*  HEAD
 *  GET
 *  POST

（2）HTTP的头信息不超出以下几种字段：

*  Accept
 *  Accept-Language
 *  Content-Language
 *  Last-Event-ID
 *  Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：`Origin`.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2][]

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

![20190730172636959.png][]

*  Access-Control-Allow-Origin：可接受的域，是一个具体域名或者\*（代表任意域名）
 *  Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

> 有关cookie：

要想操作cookie，需要满足3个条件：

*  服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
 *  浏览器发起ajax需要指定withCredentials 为true
 *  响应头中的Access-Control-Allow-Origin一定不能为\*，必须是指定的域名

特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

> 预检请求

特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的`XMLHttpRequest`请求，否则就报错。

一个“预检”请求的样板：

OPTIONS /cors HTTP/1.1
    Origin: http://manage.leyou.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: X-Custom-Header
    Host: api.leyou.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin以外，多了两个头：

*  Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
 *  Access-Control-Request-Headers：会额外用到的头信息

> 预检请求的响应

服务的收到预检请求，如果许可跨域，会发出响应：

HTTP/1.1 200 OK
    Date: Mon, 01 Dec 2008 01:15:39 GMT
    Server: Apache/2.0.61 (Unix)
    Access-Control-Allow-Origin: http://manage.leyou.com
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Access-Control-Max-Age: 1728000
    Content-Type: text/html; charset=utf-8
    Content-Encoding: gzip
    Content-Length: 0
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/plain

除了`Access-Control-Allow-Origin`和`Access-Control-Allow-Credentials`以外，这里又额外多出3个头：

*  Access-Control-Allow-Methods：允许访问的方式
 *  Access-Control-Allow-Headers：允许携带的头
 *  Access-Control-Max-Age：本次许可的有效时长，单位是秒，**过期之前的ajax请求就无需再次进行预检了**

### 3.cors解决跨域问题 ###

在ly-gateway项目中创建GlobalCorsConfig

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3][]

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    @Configuration
    public class GlobalCorsConfig {
        @Bean
        public CorsFilter corsFilter() {
            //1.添加CORS配置信息
            CorsConfiguration config = new CorsConfiguration();
            //1) 允许的域,不要写*，否则cookie就无法使用了
            config.addAllowedOrigin("http://manage.leyou.com");
            //2) 是否发送Cookie信息
            config.setAllowCredentials(true);
            //3) 允许的请求方式
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("HEAD");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("DELETE");
            config.addAllowedMethod("PATCH");
            // 4）允许的头信息
            config.addAllowedHeader("*");
    		// 5) 有效时长，一小时
            config.setMaxAge(3600L);
            //2.添加映射路径，我们拦截一切请求
            UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
            configSource.registerCorsConfiguration("/**", config);
    
            //3.返回新的CorsFilter.
            return new CorsFilter(configSource);
        }
    }

重启网关

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4][]

#  二、品牌管理vue实现 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5][]

自己写品牌管理界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9][]

修改路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11][]

在vue官网组件中查找：[https://vuetifyjs.com/zh-Hans/components/data-tables][https_vuetifyjs.com_zh-Hans_components_data-tables]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 18][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 19][]

官方为空对象，所以直接为空

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 20][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 21][]

页码总数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 22][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 23][]

进度条，在获取数据之前一直加载，在得到数据之后为false

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 24][]

渲染

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 25][]

没有居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 26][]

修改为居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 27][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 28][]

获取图片路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 29][]

增加修改和删除操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 30][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 31][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 32][]

改小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 33][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 34][]

修改为图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 35][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 36][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 37][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 38][]

添加头部按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 39][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 40][]

搜索框

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 41][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 42][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 43][]

使用栅格系统

使他们在一行

v-layout：在一行

v-flex：栅格系统

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 44][]

隐藏提示信息（使其对齐）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 45][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 46][]

填充

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 47][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 48][]

px：左右padding边距

py：上下padding边距

pb：padding-bottom边距

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 49][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 50][]

增加图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 51][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 52][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70]: /images/20211116/d64e201b71734968a09df83d1859bb80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1]: /images/20211116/40d0f107d8004ed480da41664fc65b89.png
[XMLHttpRequest]: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
[Link 1]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2]: /images/20211116/91e0ff1f52f14815a89b93056bf1e7fc.png
[20190730172636959.png]: /images/20211116/19ca13dfb1bb4696b2b9a338b08d8b64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3]: /images/20211116/2733514d4fe843999e69da672f1ee715.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4]: /images/20211116/0c43c222f3034a40b312afb2b931aff9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5]: /images/20211116/3b0b3aaf1fd74d7eabceed3095a6b9c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6]: /images/20211116/689c5060af394472983af02e532ab588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7]: /images/20211116/3b0b21892aec4144a59e7f3cd25dd6f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8]: /images/20211116/5807ea6f364b449a9a3a62de5f89ff1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9]: /images/20211116/19212bfd12cf4aafab2508f02a42a31c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10]: /images/20211116/9183e616d6a04ee8b028abcad74c8839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11]: /images/20211116/ffdc98f8f7db4a90b753dc53cf6322ea.png
[https_vuetifyjs.com_zh-Hans_components_data-tables]: https://vuetifyjs.com/zh-Hans/components/data-tables
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12]: /images/20211116/41971f5de29d4633806975f2c6efdfba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13]: /images/20211116/1801ea4760c846e3a45d993da21f48d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 14]: /images/20211116/3058ad0c5bab414a8dc709e890c46b85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 15]: /images/20211116/6fc4885ac2aa468bb3267ea335f37755.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 16]: /images/20211116/99f9acd49386458e9903c211177cce68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 17]: /images/20211116/055c012086734a2687e6e90b49ed9a08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 18]: /images/20211116/e959f6abd9ae4bc687ab64e1c7403887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 19]: /images/20211116/c0fb536e8c9745eb87da21c5c8273aea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 20]: /images/20211116/33cb007654f74ab584278162d237c70a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 21]: /images/20211116/31a8183429274665980ad424f93c1b3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 22]: /images/20211116/cb95d9d085da4ebf99a77516fb79beb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 23]: /images/20211116/7b1bd15040a64e9482bec6dfae5d15cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 24]: /images/20211116/29fc8f8de2ba434ca0e7f693abefe563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 25]: /images/20211116/f15845fee3504581918c8741a965f01e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 26]: /images/20211116/ff36a836dcaf41a7b5d68c6e850124f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 27]: /images/20211116/32f8aea769da4a1a823cde80a48a6b4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 28]: /images/20211116/0e86b2a41e4941aeab5ff18915734534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 29]: /images/20211116/08e3f285ab5a48d3b1ed995a22793523.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 30]: /images/20211116/9da6d409ea974e4697c181cff252a4b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 31]: /images/20211116/a53a26cfdaa9476bb8f9a36a13fb44c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 32]: /images/20211116/756415f7ce3a4cbfac23c47e0023c314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 33]: /images/20211116/191e95c9cba24c7fbc5ee2782a0da524.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 34]: /images/20211116/8d36a26bc30b43db85a09fd457c825b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 35]: /images/20211116/f09902b714cb44938b9d5f848d8143f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 36]: /images/20211116/97c43df289a6485d9a4915eb93b85504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 37]: /images/20211116/e7ddd320c01b4e95b3bfb4d34c979403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 38]: /images/20211116/05936029c01f496fa831d0f356b05988.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 39]: /images/20211116/d3f8e430018b4a83b8d45bf0d047a2e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 40]: /images/20211116/d57383daf30e459392028c2781b35305.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 41]: /images/20211116/7cd9436ec89245fc8f9e88c49845bfbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 42]: /images/20211116/51f60292962a47b5b2d3c67f08e39c0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 43]: /images/20211116/2a94816b0f41453cadb954491955b1ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 44]: /images/20211116/e4913b08fef544b38f1717ee3ac8c87a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 45]: /images/20211116/1dda8c6fe3784f1e9478d73dd45c3669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 46]: /images/20211116/e60d6040754e449b9287327e907d77f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 47]: /images/20211116/2a289cc240bf45d4b9b9aff5b36aca0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 48]: /images/20211116/5dfdf972494e4f199ab94f0c02099a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 49]: /images/20211116/5967e9ba57b54a8090a7ce5626252163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 50]: /images/20211116/8aa493b2b5db401fac31257697dd8f9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 51]: /images/20211116/0afa415771ae4b6d89b39308460d5047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 52]: /images/20211116/c5edf00651de48daa5e9d8860722a835.png