神差距!工信部油耗是5個 為什麼你總是開出來8個多油?_貨運

※評比南投搬家公司費用收費行情懶人包大公開

搬家價格與搬家費用透明合理,不亂收費。本公司提供下列三種搬家計費方案,由資深專業組長到府估價,替客戶量身規劃選擇最經濟節省的計費方式

音響基本都開吧。等等,而這些,同樣也會讓油耗值發生一定的變化,要明白,一輛車絕大部分的設備都是在靠油為燃料去運作的,雖然影響不算太多。>>>>為什麼不人工測試。這很簡單,那麼多需要測試的車輛,如果要一輛一個人去測試的話,很浪費人力物力,而且也存在一定的誤差,也就是所說個人駕駛習慣。

油耗,是一個老生常談的話題,對於同一樣車而言,可能會出現好幾種油耗,畢竟開的人不同,但是都有一個共同點,基本是很少人能開到工信部的油耗,都是比工信部油耗比較高一些,那麼,就會很多人問了,為什麼我怎麼開都開不到工信部的油耗,其實很簡單,方式不同。

工信部的油耗是怎麼測出來?

工信部測試油耗的的車輛,基本都是過了3000公里磨合期的車。而測試的方式也很多種,有台架測試,實際道路測試等,而工信部所採用的測試方式,就是台架測試,簡單說,就是放在一個測試機器上,通過各種路況,車速,換擋等等情況模擬去測試,最後通過測量碳排放,利用碳平衡的方法來測量油耗。

所以簡單來說,工信部的測試過程,是很流暢的,是非常極致的理想工況模擬,類似你上高速前清零了,

※智慧手機時代的來臨,RWD網頁設計為架站首選

網動結合了許多網際網路業界的菁英共同研發簡單易操作的架站工具,及時性的更新,為客戶創造出更多的網路商機。

然後直接上高速,開着巡航的瞬間油耗,在加上工信部的測試中,並沒有計算到風阻,各種突發的情況,加上個人的駕駛習慣,而三種都會讓油耗產生一定的變化,特別是個人的駕駛習慣。

還有一點就是,在日常用車當中,空調不可能不開吧?燈光不可能不開吧?音響基本都開吧?等等,而這些,同樣也會讓油耗值發生一定的變化,要明白,一輛車絕大部分的設備都是在靠油為燃料去運作的,雖然影響不算太多。

為什麼不人工測試?

這很簡單,那麼多需要測試的車輛,如果要一輛一個人去測試的話,很浪費人力物力,而且也存在一定的誤差,也就是所說個人駕駛習慣。而工信部目前的一輛車測試的時間不到20分鐘,在這個時間裏面,測試的工況有四個市區和一個郊區,並且是理想的,平均下來一個模擬工況才4分鐘左右,最後根據一些方式計算出相信燃油消耗。

可不可信?

這沒有可不可信的問題,工信部油耗之所以叫工信部油耗,就是給你在買車的時候一個參考值而已,因為,所有的車輛都是這樣測試出來,還是會有車輛油耗的高低之分,這對於選車買車時候有一定幫助。當然,在一些垂直汽車網站上也可以得到用戶的口碑的油耗,從中和工信部油耗做個對比,在和你選擇車型之間做個對比,自然就可以得出大概的結論,哪輛車是真的比較省油,哪輛車比較耗油,不過,到了真正使用的時候,還是得看你個人的駕駛情況了。本站聲明:網站內容來源於http://www.auto6s.com/,如有侵權,請聯繫我們,我們將及時處理

※回頭車貨運收費標準

宇安交通關係企業,自成立迄今,即秉持著「以誠待人」、「以實處事」的企業信念

基於RBAC的權限控制淺析(結合Spring Security)_網頁設計公司

1{icon} {views}

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

 

嗯,昨天面試讓講我的項目,讓我講講項目里權限控制那一塊的,講的很爛。所以整理一下。

按照面試官的提問流程來講:

一、RBAC是個啥東西了?

RBACRole-Based Access Control ),即基於角色的訪問控制模型,我的項目是基於RBAC0模型.由於之相對應的數據實體構成.由用戶表,角色映射表,角色表,權限表,權限映射表構成.

 

 

1 RBAC0模型圖

二、你可以講講權限控制大概執行流程嗎?

 用戶登錄之後首先進行身份驗證,成功之後獲取當前用戶的所有角色,之後根據角色加載對應的權限菜單,這裏默認不加載沒有權限的菜單,當存在直接輸入URL路徑的情況時,對於登錄用戶的每一個請求,都會通過鑒權處理,分析角色.最後通過權限的判斷分析是否可以訪問菜單資源.

在 spring Security,對用登錄的請先通過FilterInvocationSecurityMetadataSource的實現類獲取當前請求,分析需要的角色,該類的主要功能就是通過當前的請求地址,獲取該地址需要的用戶角色。

1、獲取當前訪問路徑的URL路徑

2、獲取所有資源URL,即所有的菜單URL路徑

3、當前的訪問URL和返回的每個URL基於Ant風格比較,如果相等,獲取當前訪問URL的所有角色。如果沒有相等的,定義資源為公告資源,並且給予一個公告資源的角色。

4、當為公共資源時,判斷用戶是否登錄。登錄放行。返回資源

5、當為角色資源時,登錄用戶的角色列表和該資源的角色列表進行比較,如果有相同角色,放行,返回資源

6、當即不是公共資源也沒有相匹配的角色的時候。拋異常,沒有權限

圖2 系統訪問控制流程圖

 代碼:

鑒權:

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

@Component
public class CustomFilterInvocationSecurityMetadataSource implements FilterInvocationSecurityMetadataSource {
    @Autowired
    MenuService menuService;
    //路徑比較工具
    AntPathMatcher antPathMatcher = new AntPathMatcher();
    Logger logger = Logger.getLogger("com.liruilong.hros.config.ustomFilterInvocationSecurityMetadataSource");
    /**
     * @return java.util.Collection<org.springframework.security.access.ConfigAttribute> * 返回值是 Collection<ConfigAttribute>,表示當前請求 URL 所需的角色。
     * @Author Liruilong
     * @Description 當前請求需要的角色,該方法的參數是一個 FilterInvocation, 開發者可以從 Filterlnvocation 中提取出當前請求的 URL,
     * @Date 18:13 2019/12/24
     * @Param [object]
     **/
    @Override
    public Collection<ConfigAttribute> getAttributes(Object object) throws IllegalArgumentException {
        //獲取當前請求路徑
        String requestUrl = ((FilterInvocation) object).getRequestUrl();
        logger.warning(requestUrl);
        //獲取所有的菜單url路徑
        List<Menu> menus = menuService.getAllMenusWithRole();
        // AntPathMatcher,主要用來實現 ant 風格的 URL 匹配。
         for (Menu menu : menus) {
            if (antPathMatcher.match(menu.getUrl(), requestUrl)) {
                //擁有當前菜單權限的角色
                List<Role> roles = menu.getRoles();
                String[] strings = new String[roles.size()];
                for (int i = 0; i < roles.size(); i++) {
                    strings[i] = roles.get(i).getName();
                }
                return SecurityConfig.createList(strings);
            }
        }
        // 沒匹配上的資源都是登錄,或者為公共資源
        return SecurityConfig.createList("ROLE_LOGIN");
    }

 

 @Override
    public void decide(Authentication authentication, Object object, Collection<ConfigAttribute> configAttributes)
            throws AccessDeniedException, InsufficientAuthenticationException {
        for (ConfigAttribute configAttribute : configAttributes) {
            String needRole = configAttribute.getAttribute();
            if ("ROLE_LOGIN".equals(needRole)) {
                if (authentication instanceof AnonymousAuthenticationToken) {
                    throw new AccessDeniedException("尚未登錄,請登錄!");
                } else {
                    return;
                }
            }
            Collection<? extends GrantedAuthority> authorities = authentication.getAuthorities();
            for (GrantedAuthority authority : authorities) {
                if (authority.getAuthority().equals(needRole)) {
                    return;
                }
            }
        }
        throw new AccessDeniedException("權限不足,請聯繫管理員!");
    }

 

 

 

三、你可以把對應的SQL和表結構寫一下嗎?

 

加載所有的菜單資源;返回所有的菜單資源和對應的角色集合,Service端和訪問的URL的比較,存在判斷角色。(鑒權)


select m.*,r.`id` as rid,r.`name` as rname,r.`namezh` as rnamezh
from menu m,menu_role mr,role r
where m.`id`=mr.`mid` and mr.`rid`=r.`id` order by m.`id`
根據用戶ID返回當前用戶的全部菜單資源(授權)
   select m1.`id`,m1.url,m1.`path`,m1.`component`,m1.`iconCls`,m1.`name`,m1.`requireAuth`,m1.keepAlive,m1.enabled,
       m2.id as id2,m2.url as url2,m2.name as name2,m2.`component` as component2,m2.`iconCls` as iconCls2,m2.`keepAlive` as keepAlive2,m2.`path` as path2,m2.`requireAuth` as requireAuth2,m2.enabled as enabled2,m2.parentId as parentId2
       from menu m1,menu m2
       where m1.`id`=m2.`parentId` and m1.`id`!=1 and m2.`id`
       in(select mr.`mid` from hr_role h_r,menu_role mr where h_r.`rid`=mr.`rid` and h_r.`hrid`=#{hrId})
       and m2.`enabled`=true order by m1.`id`,m2.`id`

 

2 ERBAC數據實體關係圖

用戶登錄之後首先進行身份驗證,成功之後獲取當前用戶的所有角色,之後根據角色加載對應的權限菜單,這裏默認不加載沒有權限的菜單,當存在直接輸入URL路徑的情況時,對於登錄用戶的每一個請求,都會通過鑒權處理,分析角色.最後通過權限的判斷分析是否可以訪問菜單資源.

用戶表:

 

 角色表:

 

用戶角色映射表:

 

權資源表:

 

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

Java動態代理與靜態代理以及它能為我們做什麼_網頁設計公司

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

  相信我們在網上和平時學習和工作中或多或少都接觸過Java的代理模式,經常聽到什麼靜態代理、動態代理的一些名詞。但我們是否真的很清楚這些呢?至少我在面試時,發現很多人並不很清楚。

  首先代理比較好理解,就是幫一個人,或者一類人做一些事情。遷移到面向對象的程序設計中,代理就是幫一個類去做一些事情,而這個代理的工具我們就稱為代理類。

  通過代理的方式去做事有什麼好處呢?這就好比工廠和分銷商做的事情一樣,工廠可以直賣一些自己的產品,分銷商同樣也可以賣工廠生產的產品,那麼為什麼還有分銷商的存在呢?因為分銷商可以提供一些額外的服務,或者在銷售的過程中能夠完成一些其他的事情,比如組合銷售、根據本地情況做活動等,而這些可能是工廠不想關心或者也管不過來的。這樣的功能和角色承包給代理商就會使得分工比較明晰,並且又能夠提供一些額外或者定製的服務。

 

靜態代理

  Java中的代理方式可以分為靜態代理和動態代理。靜態代理的含義是代理類/對象在我們關心的程序運行前就已經確定或存在。靜態代理比較好理解,我們在日常工作中也是經常用到,比如一個已經存在的接口,我們不期望去更改它,但是現在要在原邏輯上新加一些邏輯或功能,比如原接口方法調用完成后發送一個消息之類的。於是我們可以創建一個類,同樣實現原接口,並且把之前存在的接口當做成員變量注入進來,調用其中的方法,並添加我們需要的功能。

  靜態代理的類圖如下所示,需要被代理的實現類和代理類都實現了抽象接口AbstractInterface,而InterfaceProxy和InterfaceImpl間是聚合關係。

  

 

 

 

   來看一段示例代碼,ProductAuditCallbackService 是我們已有的一個接口,出於某些原因,這個接口不能繼續對外使用,我們需要定義一個新的接口並且名稱還要一樣(主要是方便客戶理解和對應原接口),但是我們需要添加一點“新邏輯”。因此我們可以同樣實現 ProductAuditCallbackService,ProductAuditCallbackServiceProxy 就是我們的代理類,之後外部調用就可以實例化我們的代理類,調用同名方法就好了。

 

 1 public class ProductAuditCallbackServiceProxy implements ProductAuditCallbackService {
 2 
 3     @Resource
 4     private ProductAuditCallbackService productAuditCallbackService;
 5 
 6     @Override
 7     public Result<Void> auditProduct(ProductAuditRequest request, String auditStatus) {
 8         if (auditStatus == "DELETED") {
 9             return new Result<>();
10         }
11         return productAuditCallbackService.auditProduct(request, auditStatus);
12     }
13 
14 
15 ...
16 }

 

 

 

 

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

動態代理

  動態代理的作用和靜態代理一樣,主要的區別就在於需要在運行時生成代理類。在使用動態代理時,我們還需要定義一個在代理類和委託類之間的中介類,並且中介類需要實現 java.lang.reflect.InvocationHandler 接口。

 1 package java.lang.reflect;
 2 
 3 /**
 4  * {@code InvocationHandler} is the interface implemented by
 5  * the <i>invocation handler</i> of a proxy instance.
 6  *
 7  * <p>Each proxy instance has an associated invocation handler.
 8  * When a method is invoked on a proxy instance, the method
 9  * invocation is encoded and dispatched to the {@code invoke}
10  * method of its invocation handler.
11  *
12  * @author      Peter Jones
13  * @see         Proxy
14  * @since       1.3
15  */
16 public interface InvocationHandler {
17 
18     public Object invoke(Object proxy, Method method, Object[] args)
19         throws Throwable;
20 }

  

  動態代理在框架類的代碼中用到的頻率並不低,而且能夠使我們的代碼看起來更高級一些,所以何樂而不為呢? 讓我們來看一些實際的例子。

  MethodInvocationHandler是一个中介類,實現了InvocationHandler接口,MethodMonitor 這個類的功能就是要統計我們的委託類的對象business中的方法被調用的次數和耗時,由於其主要功能不是我們關注的主要內容,所以忽略其實現。

 1 public class MethodInvocationHandler implements InvocationHandler {
 2 
 3     //被代理對象
 4     private Object business;
 5 
 6     private final MethodMonitor methodMonitor;
 7 
 8     public MethodInvocationHandler(MethodMonitor methodMonitor) {
 9         this.methodMonitor = methodMonitor;
10     }
11 
12     /**
13      * 代理方法
14      */
15     @Override
16     public Object invoke(Object proxy, Method method, Object[] args)
17             throws Throwable {
18 
19         long startTime = System.currentTimeMillis();
20 
21         Object result = method.invoke(this.business, args);
22 
23         //方法調用統計
24         this.methodMonitor.methodCount(this.business.getClass().getSimpleName() + POINT + method.getName(), startTime);
25         return result;
26     }
27 
28 }

  其餘示例代碼及外部調用示例如下,我們的Business類裏面擁有三個方法。MethodSampleClient 則是一個封裝起來的客戶端。我們不想讓外部客戶端感知我們的實現以及和Business的關係,於是我們在MethodSampleClient中定義了一個成員變量proxy,當外部需要Business提供的一些功能時,我們通過proxy為其提供。Proxy.newProxyInstance() 則是我們實例化一個代理類的方式,喲,這還是個工廠模式,可以閱讀一些這個方法的說明,需要傳入的三個參數依次是:需要被代理的類的ClassLoader,被代理類需要被代理的接口的集合,中介處理類的實例。

  這裏Business我寫的是一個確定的類,其實真正在實際開發工作中,我們往往定義的抽象的接口或抽象類,知道運行時才會確定到底是哪個實現類的實例,這樣可能更容易理解一些:運行時確定委託類的實現類,運行時生成代理類,並調用對應的委託類的方法。

 

 1 public class Business {
 2 
 3     public void createJob() {
 4         System.out.println("test createJob");
 5     }
 6 
 7 
 8     public void processJob() {
 9         System.out.println("test processJob");
10     }
11 
12     public void closeJob() {
13         System.out.println("test closeJob");
14     }
15 
16 }
17 
18 
19 
20 public class MethodSampleClient {
21 
22     private Business business;
23 
24     @Getter
25     private Object proxy;
26 
27     private InvocationHandler invocationHandler;
28 
29 
30     public void init() {
31         this.business = new Business();
32         this.invocationHandler = new MethodInvocationHandler(new MethodMonitor());
33         this.proxy = bind(this.business, invocationHandler);
34     }
35 
36     /**
37      * 綁定對象, 直接初始化並返回代理類供客戶端使用
38      */
39     public Object bind(Object business, InvocationHandler invocationHandler) {
40         return Proxy.newProxyInstance(
41                 //被代理類的ClassLoader
42                 business.getClass().getClassLoader(),
43                 //要被代理的接口,本方法返回對象會自動聲稱實現了這些接口
44                 business.getClass().getInterfaces(),
45                 //代理處理器對象
46                 invocationHandler);
47     }
48     
49 }    
50 
51 
52 /**
53 *  A simple client test class
54 */
55 public class Test {
56 
57     public void main(String[] args) {
58         MethodSampleClient methodSampleClient = new MethodSampleClient();
59         methodSampleClient.init();
60 
61         methodSampleClient.getProxy().createJob();
62         methodSampleClient.getProxy().processJob();
63         methodSampleClient.getProxy().closeJob();
64     }
65 
66 }

   

  為了說清楚這個過程,竟然還真的寫了不少代碼,看起來比較繁瑣。總結一下,動態代理無非按照下面的步驟來編寫代碼:

  • 首先明確需要被代理的委託類。
  • 實現 InvocationHandler 接口,定義一个中介類。
  • 用 Proxy.newProxyInstance() 實例化代理類,並在客戶端代碼中直接使用。

  好了,大概差不多了,最重要的是能夠在實際工作中有意識地去使用並體會其作用 —— 軟件開發是經驗驅動不是知識驅動。

 

 

 

 

  

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

國外玩家反應 Epic Games 啟動器會導致 AMD 與 Intel CPU 溫度提升,還會發送數據到某個網址_網頁設計公司

5{icon} {views}

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

EPIC Games Store 正推出連續 15 天都送免費遊戲的活動(雖然有點沒誠意),相信很多人每天都準時收藏起來,不過如果你平常沒用 EPIC Games 啟動器的話,最好把它整個關閉,也就是不要縮小在右下角,因為最近有玩家發現,Epic Games 啟動器會導致 AMD 與 Intel CPU 溫度提升,不僅差了十幾度,還有外媒實測揭露,Epic Games 啟動器會持續在背景發送數據到某個網址。

國外玩家反應 Epic Games 啟動器會導致 AMD 與 Intel CPU 溫度提升

最近在國外 Reddit 論壇上,一名網友指出他發現把 EPIC Games 啟動器關掉之後,自己的 AMD Ryzen 5800X 處理器從 50 度降到 37 度,少了 13 度,他甚至用不要再打開這惡意軟體來形容,如果想玩 EPIC 遊戲,請使用另一套 Legendary,免費遊戲則透過網頁版領取就好:

隨後下方陸續有其他網友表示,他也碰到相同狀況,不過處理器是 AMD Ryzen 5900X。另外還有 Ryzen 5 2600,這位網友說他看 YouTube 時溫度是 46,原本以為還可以,但把 EPIC Games 啟動器整個關掉後,立刻降到 38 度:

Intel 處理器也有案例,不過他碰到的是 EPIC Games 啟動器的使用率達 15~20%,沒特別提溫度,不過既然使用率提升,溫度基本上也會上升:

關於這點,外媒 Hot Hardware 也進行了實測,結果發現不只是處理器溫度變高,還悄悄在背後持續發送數據到一個指定網址。

下方是尚未開啟 EPIC Games 啟動器的截圖,AMD Ryzen 9 5950X 的 CPU 溫度為 34.28:

EPIC Games 啟動器打開之後,溫度立刻提升到 56.78,差了 20 度,比 Reddit 網友反應的還多:

雖然很多遊戲啟動器打開時(如:Steam、GOG),CPU 使用率與溫度都會提升,但基本上過一陣子後就會降低,不像 EPIC Games 啟動器是一直保持這種狀態。

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

因此,他們還透過一款 Glasswire 網路流量監控工具來檢測 EPIC Games 啟動器,結果發現,它會持續將數據傳送到 22 台不同伺服器上,無論是打開還是最小隱藏啟動器都會:

EpicWebHelper 還會發送一些數據到這個網址:

  • tracking-website-prod07-epic-961842049.us-east-1.elb.amazonaws.com

相較於 Steam 與 NVIDIA GeForce Experience,EPIC 發送的數量是 14 倍以上。不過不確定這跟 CPU 使用率和溫度提升是否有關連。

所以說,如果你平常沒在使用 EPIC Games 啟動器,建議就整個關掉,不要最小化隱藏在右小角中。對於擔心個人隱私的人,也能嘗試看看 Legendary。

資料來源:Reddit、Hot Hardware

EPIC、Spotify 等公司成立應用程式公平聯盟,對抗 Apple 的 30% 抽成

您也許會喜歡:

【推爆】終身$0月租 打電話只要1元/分

立達合法徵信社-讓您安心的選擇

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

AirPods Pro 2 零件現蹤,可能將像 Apple Watch 一樣有雙尺寸?_網頁設計公司

1{icon} {views}

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

看到將蘋果自家耳機產品推上價格「Max」值的 AirPods Max,雖說也不至於貴到遙不可及,甚至也有傳將會有更入門的版本。但就生活使用來講,似乎還是同樣具備主動降噪機能與空間音訊等功能的 AirPods Pro 比較適合自己?看來,蘋果應該也沒打算放掉這個產品系列,現在被發現已經默默在準備新品當中 — 而且這次將可能像旗下智慧型手錶那樣,提供更客製化的尺寸選項(!)。繼續閱讀 AirPods Pro 2 零件現蹤,可能將像 Apple Watch 那樣具備雙尺寸報導內文。

▲圖片來源:Mr·White

AirPods Pro 2 零件現蹤,可能將像 Apple Watch 一樣有雙尺寸?

AirPods 無疑已經是現階對最受歡迎的真無線耳機。而儘管目前看來此系列的產品已經被 AirPods Max 給奪下了最高階的寶座,不過這不代表蘋果沒打算持續精進相對低價且易用的產品系列 — 畢竟市場上的對手也早已開始端出更小尺寸的版本。

▲圖片來源:Apple

從最近在社群網站上由 Mr·White 所貼出的疑似 AirPods Pro 2 零件照看來,蘋果似乎不僅準備帶來新的真無線耳塞耳機還。可能像 Apple Watch 那樣,疑似準備提供兩種不同的尺寸來對應使用者的需求。

雖說還是採用 W2 的晶片,不過根據爆料者的猜測,新世代的 AirPods Pro 很可能會有大小兩種尺寸可供選擇。對照先前媒體報導,新世代 AirPods Pro 很可能移除底部的控制桿造型,帶來僅剩下 Earbuds 耳機本體的新設計。

▲圖片來源:Mr·White

是說,儘管這樣「耳機豆」的設計在其他品牌已經不算少見,但畢竟 AirPods Pro 小小一顆耳機裡面塞入包括動態追蹤、光學感測器、加速度計與力度感測器等,可以配合蘋果生態系帶來有趣功能的硬體配置。所以某種程度來講,能在保有舊有配置更進一步縮小機身體積,甚至加入新功能與帶來不同尺寸的版本,應該也是十分不容易的事。

不過,更小的耳機本體雖然應該會看起來更美型,相應而來的電力與表現是否會有所落差,應該也會是許多人會想關注的重點。總之,畢竟目前也僅有零件洩漏而已,一切就等更多相關消息浮現再來看看有些什麼樣令人驚豔的可能性吧。

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

本篇圖片 / 引用來源

延伸閱讀:

傳明年中 Apple 將推出更便宜的 AirPods Max Sport 運動版,售價 400 美元

340 萬台,據報 PS5 破 PlayStation 首月出貨最高紀錄

您也許會喜歡:

【推爆】終身$0月租 打電話只要1元/分

立達合法徵信社-讓您安心的選擇

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

7萬落地買到合資車!漂亮三廂車車主們愛嗎?_網頁設計公司

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

5L左右,比較省油,操作起來很輕鬆。尚有不足:車漆比較薄,隔音有待提升,畢竟價位擺在那裡了。車主二購買車型:2016款 1。4L 自動領先型GLX裸車價格:7。59萬最值得表揚的地方:現代流體雕塑的設計理念出來的車子就是好看,還有就是空間了,雖然是小型車,但是後排坐3個人都不是很擁擠的,1。

北京現代-瑞納

指導價:7.39-10.69萬

基本資料

長*寬*高(mm) 4375*1700*1460

軸距(mm) 2570

動力系統

1.4L/1.6L+5擋手動/4擋自動變速器

車主一

購買車型:2016款 1.4L 手動智能型GLS

裸車價格:6.05萬

最值得表揚的地方:這車最滿意的首先就是外觀了,設計得非常流暢,其次就是優惠幅度大,物超所值,再者就是用車成本了,百公里綜合油耗在6.5L左右,比較省油,操作起來很輕鬆。

尚有不足:車漆比較薄,

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

隔音有待提升,畢竟價位擺在那裡了。

車主二

購買車型:2016款 1.4L 自動領先型GLX

裸車價格:7.59萬

最值得表揚的地方:現代流體雕塑的設計理念出來的車子就是好看,還有就是空間了,雖然是小型車,但是後排坐3個人都不是很擁擠的,1.4的動力就別要求什麼推背感了,反正日常駕駛代步足矣,優惠幅度大,配置比較齊全,而且油耗低,總體而言性價比很高。

尚有不足:內飾塑料感比較強,燈光是蠟燭燈,離地間隙較低。

編輯點評:瑞納的市場表現還是挺不錯的,車子操作起來很輕鬆靈活,動力日常使用也是足夠,當然配置上還是稍微欠缺的,加上現在市場優惠巨大,總體來說。適合剛工作不久的年輕人。本站聲明:網站內容來源於http://www.auto6s.com/,如有侵權,請聯繫我們,我們將及時處理

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

新式數位身分證容易危害資安問題?_網頁設計公司

5{icon} {views}

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

台灣新式身分證「數位身分識別證(New eID)」將於明年元月在新竹市試行換發,明年七月全面換發。由於身分證是個人最重要的個人身分憑證,但內政部對於「數位身分識別證(New eID)」揭露的資訊目前並不夠充分,導致不少專家與民眾對於數位身分證的資安問題有不少疑慮,讓新式身分證全面換發出現許多雜音,連原本要試辦的新竹市也釀釀喊卡。
台灣新式身分證「數位身分識別證(New eID)」是什麼? 由紙本變數位化的目的為何? 新式身分證資安破口會在哪裡呢? 以下作一解析:

掌握最新電信資費訊息,請加入小丰子3C俱樂部粉絲頁!

小丰子3C俱樂部

 

1.什麼是「數位身分識別證(New eID)」? 有何功能與用途?

「數位身分證」乃是將過去紙本身分證升級為具晶片功能的「數位身分證」,除了安全防偽性加強外,更可整合自然人憑證功能,成為一把數位鑰匙與虛擬世界的「數位分身」。

Note: 以上新式身分證圖樣非最終正式發行圖樣

 

過去台灣因為線上身分認證機制並不完善,民眾辦理各項政府或民間業務,都必須本人持身分證正本前往辦理。外來身分證數位化(晶片化)後,民眾就可以僅憑一張卡片,就可以申請與辦理如網路報稅、公民投票、申請電子病歷、數位金融交易、退休金查詢、申請各種社福津貼與補助..等等逾80%的線上政府業務,大幅簡化民眾多處申請服務的個人資料重複註冊與節省往返奔波時間,也可以省下老是在印身分證影本的麻煩。

 

根據臺灣大學生醫電資所資訊組研究生何明洋的研究,至今已有47國發行eID數位身分證,歐洲國家數量最多,但馬來西亞是全球第一。 相較於國外eID身分證還可以用做為i-Voting線上投票、健保卡、登入銀行帳號..等等多元應用,台灣數位身分證受限於朝野的不信任目前僅能作為身分證明、自然人憑證及供國內通關ICAO國際旅行證件使用。根據內政部報告指出,2021年全球預計89%的國家採用晶片身分證, 可見數位身分證是國際趨勢,別人已經上太空,我們還是在殺豬公,實在有辱台灣是科技之島美名。

 

2.「數位身分識別證(New eID)」更容易洩漏個資及危害資安問題嗎?

反對全面換發「數位身分識別證(New eID)」的理由之一就是對於台灣eID資安問題有疑慮。身份證由現行紙本改為晶片化後,會更容易洩漏個資及危害資安問題嗎? 以下作一探討:

A.數位身分識別證(New eID)個資隱私保護比紙本更好:
台灣「數位身分識別證(New eID)」的「卡面資料」比現行國民身分證更少,正面欄位資訊僅提供:姓名、身分證字號、出生日期、個人大頭照等 4 項目個資,背面有:結婚狀態、製證日期、應換領日期、證件號碼條碼、身分證字號條碼、機讀區(MRZ)。上方印有中華民國國旗與「中華民國國民身分證 TAIWAN, REPUBLIC OF CHINA」字樣。傳統身分證上的配偶名字、父母名字、戶籍地址、役別、出生地等 5 項個資,則儲存於晶片內,須授權才可讀取。
換言之,過去紙本身分證上的個資只要被影印或遺失被撿走通通被看光光,改為數位化後,需要輸入密碼才能看到,對個資隱私保護一定比較好。

 

B.數位身分識別證只是通往數位應用的「鑰匙」,並無用戶個人其他數位歷程或資訊會被揭露:
台灣「數位身分識別證」並無儲存功能,並不會有多餘原本紙本身分證可揭露資訊以外更多資訊會被揭露,這與現行健保卡或勞保卡可以直接讀取個人就醫或勞退保相關資訊是完全不一樣的。
至於有些民眾對數位足跡的擔憂,內政部表示相關讀卡記錄不會傳回內政部或者憑證管理中心,政府不會掌控民眾的數位足跡,民眾可以安心。

 

另外,內政部表示數位身分證採雙晶片備援機制,晶片均通過國際安全認證標準,並由台積電公司代工生產,其中主晶片6項功能中有5項為CC認證(Common Criteria),安全評估等級達EAL5+以上, 達軍事機密等級。為了讓民眾對於數位身分證資安問題能夠釋疑,內政部近日也公告【賞金獵人】,懸賞500萬來徵求可複製New eID駭客。
除此,台灣在《戶籍法》、《電子簽章法》、《資通安全管理法》、《個人資料保護法》都有相關法源根據及針對冒用、偽造或變造國民身分證立有相關罰則。如戶籍法第75條規定: 意圖供冒用身分使用,而偽造、變造國民身分證,足以生損害於公眾或他人者,處五年以下有期徒刑、拘役或科或併科新臺幣五十萬元以下罰金。」 行使前項偽造、變造之國民身分證者,亦同。是故,針對新式數位身分證除事前軍事機密等級晶片防護個資外,也有法律罰則可作為嚇阻之用。

 

C.其他識別卡晶片化沒問題,唯獨身分證就不行?
個人識別的工具晶片數位化是趨勢,舉凡信用卡、金融卡、健保卡、電信門號..早就晶片數位化,對資安或隱私保護只有變更好。高舉反對身分證晶片數位化的人,難道沒有使用信用卡、金融卡、健保卡、電信門號..? 上述卡片爽爽用,卻堅決反對身分證數位晶片化,豈不怪哉?

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

 

反對「數位身分識別證」民眾理由之一是認為數位身分識別證將擁有”巨無霸”的功能,將具備個人隱私資料、健保、財產、稅務、駕照、悠遊卡、聯屬公投、手機…等等。不過,根據目前內政部釋出訊息,因民眾對資安的疑慮,台灣數位身分識別証只有身分證+個人自然人憑證功能,並無成為”巨無霸”功能規劃,這個反對理由有些無限上綱、 杞人憂天。

全面換發新式身分證,要花30~40億公帑,太浪費!?
數位化應用是擋不住的世界潮流,別人已經上太空,台灣還要停留在殺豬公? 這次台灣面臨新冠肺炎疫情能夠讓民眾有條不紊領取口罩,讓台灣防疫成果為人稱道,健保卡採取晶片數位化設計功不可沒。身分證全面換成晶片數位化設計,是台灣邁入現代數位智慧社會必要的投資,40億公帑投入是必要且划算的。

 

3.新式身分證的資安保護萬無一失嗎? 資安破口會是在哪裡?

雖然新式數位身分證在隱私保密與資安上都有水準以上的保護,但全世界沒有產品可以保證在資安是萬無一失的。就版主的觀點,新式數位身分證的資安破口並不是新式身分證晶片會容易被破解,而是來自使用者的【壞習慣】。根據目前新式身分證的設計規劃,版主認為將可能會有五大資費破口,說明如下:

A.遺失機會變大,如何及時掛失配套措施很重要:
由於新式身分證具自然人憑證功能,在多數人大都習慣隨身攜帶身分證下,不慎遺失的機會就會變高出很多,自然會增加被冒用風險。幸好,若新式身分證遺失比照現行自然人憑證的暫時停用及緊急停用功能,只要多加宣導,應該可以將風險降到最低。

 

B.三組密碼設計,用戶容易設定不安全密碼:
由於新式身分證具備三道密碼功能,其中加密區及自然人憑證區的密碼必須自設,這對於許多三寶人物或是對於個資安全較為忽略的人,很容易採用懶人密碼,導致被破解冒用。再者,目前每個人數位帳號滿天飛,密碼萬一遺失,如何有較安全的機制重設,也需要仔細考量,才不會變成破口。

 

C.第三方中介軟體不安全:
新式身分證支援自然人憑證功能以後,國人使用其功能的頻度將可望出現爆炸性增加。然新式身分證被讀取機會越多,若使用不安全第三方的中介軟體,就有可能出現密碼或卡片個資被側錄產生風險。教導民眾安全使用第三方中介軟體,也是未來新式身分證普及後的重要課題。

 

D.隱私過度保護,與目前商業認證衝突,反而造成資安大缺口:
這次新式身分證可能為杜悠悠之口,將新式身分證的卡面上資訊最小化,弱化身分證原本認證功能,朝自然人憑證IC卡化方向設計。然而身分證是目前許多商業行為(如申辦門號或信用卡)最重要的認證工具,將現行紙本身分證的許多重要資訊埋入必須使用密碼的公開區或加密區後,反而會造成擾民且導致個資更容易被洩漏。
以申辦電信門號為例,為防止出現盜偽件或欠費問題,根據現行電信業者門號申裝書填寫與查核規定,申辦店家必須查核申辦者的戶籍地址是否正確且需要填寫完整的身分證換補紀錄。然而這些資訊已經不在新式身分證的卡片上,就會衍生店家必須將被隱藏的戶籍地址..相關個資螢幕列印出來附在門號書上以佐證已經做好相關查核,這將造成民眾申辦門號許多麻煩,新式身分證公開區或加密區的資料被列印出來,也容易衍生個資外洩風險。

 

版主強烈建議內政部趕快找電信業者與銀行業者來商討,將民眾生活息息相關的門號、信用卡、金融卡申辦規範做一檢核,研擬出妥適的新式身分證卡面資訊項目。
身分證就是身分證,千萬不要本末倒置,卡面個資最小化只是擾民,這並非德政。

 

E.新式身分證用途多,家賊難防,危害可能變更大:
社會上一直有部分民眾財務或智慧有缺口,自願或被騙將身分證借給不肖份子使用。因新式身分證具備自然人憑證功能,未來所產生的危害也會更大。除用法律懲戒來防堵外,如何事前防堵未來也是重要課題。

 

天底下沒有萬無一失的資安保護,誠實面對可能的缺失,提前加以防範,才是解決民眾疑慮的良方。目前台灣民眾對於台灣「數位身分識別證」資安的疑慮,除了內政部的宣傳有待加強外,關鍵還是在於有些民眾或政治人物對於政府的不信任,與台灣防疫該不該採取普篩的爭論類似。
世界在進步,台灣要前進,國民身分證全面改用數位晶片化絕對是條必走的路。新式身分證對於隱私與個資保護比現行紙本身分證還要好,所以大家其實不用因噎廢食。針對版主提出的新式身分證可能出現的資安破口,只要主管機關能夠提前佈署及因應,將可能產生的民怨降到最低,相信全換換發國民數位身分證才可以讓這把數位鑰匙可以順利帶領國人通往璀璨與便利的數位智慧生活大道上!

您也許會喜歡:

【推爆】終身$0月租 打電話只要1元/分

立達合法徵信社-讓您安心的選擇

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

耐用度不輸卡羅拉!這些車有着成為全球銷量第一的特性?_網頁設計公司

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

3L/100km,而自動擋平均7。8L/100km,其實不算很省油,但也不算很耗油,就是能接受。長安鈴木-啟悅指導價:8。79-12。19萬對於鈴木的車型,相信大家比較熟悉也比較常聽到也許是奧拓,但是從奧拓這款產品可以看出,鈴木的車型還是不錯的,至少耐操。

世界級的神車-卡羅拉,相信大家都很熟悉了,超過了4000多萬台銷量,成為了全球汽車銷量的冠軍,那麼,卡羅拉憑什麼能成為全球銷量第一的車型?

其實很簡單,作為一輛車,普普通通,價格不高,舒適,油耗低,耐操,是最基本的特點,剛卡羅拉剛好能滿足,加油就行,不管你是加多少號,定時做下保養,保養還不貴,用到報廢也不用怎麼大修。空間不是統計之最,但一家人能裝得下,包括行李,外觀接受度高,不是最好看,也不是最奇葩,沒有操控性但卻好開,油耗不是最低,但也不高,價格不高,但是“操”很久,沒有天籟舒適,但坐着還算舒服。

而卡羅拉的這些特點正是普通家庭對一輛車的所有需求,最通俗簡單點說就是—中庸。

當然,除了卡羅拉有這樣的特性之外,其他的一些車型也具備這樣特性,不能說完全,但至少具備有大部分。

廣汽本田-凌派

指導價:10.98-14.98萬

作為本田的第二支柱車型,在上市1年半內的時間里,賣出了30萬多台,可以說是一個很不錯的銷量數據了。凌派的外觀還算是帶着一些特色,但也不會先的很出眾,至少還是本田的那張臉,整體來說還算普通,是大眾能接受的設計。內飾同樣很簡約,整體設計風格還是本田的“普通”的設計,而這種簡約的設計特點就是,上手快,手上之後操作方便,這對於只是作為代步工具的的駕駛者來說,再好不過了。

凌派的配置全系都比較平均一些,即使低配的車型在舒適性的配置上有些“簡陋”,但是作為代步工具而言,也是夠用了,如果想要高一些舒適程度,上到中高配車型,會多了電動天窗,多功能方向盤,后駐車雷達等的實用性較高的舒適配置。雖然價格上去了,但好的是,車型之間價格區間並不大,

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

並且目前優惠也能去到1.5萬左右。凌派的車身尺寸在同級中算中規中矩,但是空間卻不小,這是本田特長之一,空間壓榨的很狠,滿員的情況下不會顯的擁擠。

凌派只有1.8L發動機的車型,匹配了5擋手動或CVT,這樣的匹配就可以看出,凌派就是一輛家用車,CVT再怎麼激烈駕駛,也就那樣。凌派的口碑油耗手動擋平均7.3L/100km,而自動擋平均7.8L/100km,其實不算很省油,但也不算很耗油,就是能接受。

長安鈴木-啟悅

指導價:8.79-12.19萬

對於鈴木的車型,相信大家比較熟悉也比較常聽到也許是奧拓,但是從奧拓這款產品可以看出,鈴木的車型還是不錯的,至少耐操。而啟悅這款車的外觀不算很鈴木,就是一輛緊湊型車的樣子,但顏值不算低,看久了還是挺好看的,耐看型。內飾很簡約,按鍵排列很規整,不過個人是覺得有些小,但操作起來還算方便,按錯的幾率不是很高。

啟悅低配和次低配的車型配置較低,沒有配備ESp和牽引力控制這兩個目前比較“流行”的操控安全配置,舒適性配置也沒多少,簡單說,低配和次低配車型就只是一輛車,能開,耐操,能載人。到了中配以上的車型,配置稍微好點,至少常談起的配置會比較齊全,但舒適性的配置還相對較少,頂配豐富一些,例如多了,中控屏,自動空調,多功能方向盤,畢竟價格比較低,怎麼說也還是合資車,配置將將夠用吧,其實算上最大的優惠1.3萬左右的話,也是不錯的選擇。空間規規矩矩,預算不多小家庭的第一輛車足夠用了。

啟悅也是只有一款1.6L發動機的車型,匹配了5擋手動或6擋手自一體,雖然平順性不及配備CVT的車型,但平順性還算好,只要你不是“胡亂”的駕駛,還是一輛好開的車,動力平時家用還算足夠,最重要的是鈴木的三大件耐操,在耐用性上可是可圈可點。而鈴木最出彩的技術莫過於對油耗的控制,啟悅的口碑油耗手動擋平均為5.9L/100km,而自動擋平均為6.5L/100km,如果說這還不算省油的話,只能說踩單車吧。

總結:介紹到的這輛車,也許某些方面比不過卡羅拉,但是都有這一樣的特性,外觀能看,價格不高,耐操,省油,家用空間足夠。雖然某一方面沒有統計之最之稱,但整體實力很平均,這對於家庭的代步工具而言,很符合。本站聲明:網站內容來源於http://www.auto6s.com/,如有侵權,請聯繫我們,我們將及時處理

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

關於vue的多頁面標籤功能,對於嵌套router-view緩存的最終無奈解決方法_網頁設計公司

1{icon} {views}

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。

最近寫我自己的後台開發框架,要弄一個多頁面標籤功能,之前有試過vue-element-admin的多頁面,以為很完美,就按它的思路重新寫了一個,但發現還是有問題的。

vue-element-admin它用的是在keep-alive組件上使用include屬性,綁定$store.state.tagsView.cachedViews,當點擊菜單時,往$store.state.tagsView.cachedViews添加頁面的name值,在標籤卡上點擊關閉后就從$store.state.tagsView.cachedViews裏面把緩存的name值刪除掉,這樣聽似乎沒什麼問題。但它無法很好的支持無限級別的子菜單的緩存。

目前vue-element-admin官方預覽地址的菜單結構大多是一級菜單分類,下面是二級子菜單。如下圖所示,它只能緩存二級子菜單,三級子菜單它緩存不了。為什麼會出現這個情況呢。因為嵌套router-view的問題。

 

 

 

按vue-element-admin的路由結構,它的一級菜單,其實對應的是一個layout組件,layout裏面有個router-view(稱它為一級router-view)它有用keep-alive包裹着,用來放二級菜單對應的頁面,所以對於二級菜單來說,它都是用同一個router-view。如果我需要創建三級菜單的話,那就需要在二級菜單目錄里創建一個包含router-view(稱它為二級router-view)的index.vue文件,用來放三級菜單對應的頁面,那麼你就會發現這個三級菜單的頁面怎麼也緩存不了。

 

因為只有一級router-view被keep-alive包裹起着緩存作用,下面的router-view它不緩存。當然我們也可以在二級的router-view也包一個keep-alive,也用include屬性,但你會發現也用不了,因為還要匹配name值,就是說二級router-view的文件也得寫上name值,寫上name值后你發現還是用不了,因為include數組裡面沒有這個二級router-view的name值,所以你還得在tabsView里的addView裏面做手腳,把路由所匹配到的所有路由的name值都添加到cachedViews里,然後還要在關閉時再進行處理。天啊。我想想都頭痛,理論是應該是可以實現的,但會增加了很多前端代碼量。

 

請注意!下面的方法也是有Bug的,請重點看下面的BUT開始部分

還好keep-alive還有另一個屬性exclude,我馬上就有思路了,而且非常簡潔,默認全部頁面進行緩存,所有的router-view都包一層keep-alive,只有在點擊標籤卡上的關閉按鈕時,往$store.state.sys.excludeViews添加關閉頁面的name值,下次打開后再從excludeViews裏面把頁面的name值刪除掉就行了,非常地簡單易懂,不過最底層的頁面,仍然需要寫上跟路由定義時完全匹配的name值。這一步我仍然想不到有什麼辦法可以省略掉。

為方便代碼,我寫了一個組件aliveRouterView組件,併合局註冊,這個組件用來代替router-view組件,如下面代碼所示,$store.state.sys.config.PAGE_TABS這個值是是否開戶多頁面標籤功能參數

<template>
  <keep-alive :exclude="exclude">
    <router-view />
  </keep-alive>
</template>
<script>
export default {
  computed: {
    exclude() {
      if (this.$store.state.sys.config.PAGE_TABS) {
        return this.$store.state.sys.excludeViews;
      } else {
        return /.*/;
      }
    }
  }
};
</script>

 

多頁面標籤組件viewTabs.vue,如下面代碼所示

<template>
  <div class="__common-layout-tabView">
    <el-scrollbar>
      <div class="__tabs">
        <div
          class="__tab-item"
          :class="{ '__is-active':item.name==$route.name }"
          v-for="item in viewRouters"
          :key="item.path"
          @click="onClick(item)"
        >
          {{item.meta.title}}
          <span
            class="el-icon-close"
            @click.stop="onClose(item)"
            :style="viewRouters.length<=1?'width:0;':''"
          ></span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewRouters: []
    };
  },
  watch: {
    $route: {
      handler(v) {
        if (!this.viewRouters.some(item => item.name == v.name)) {
          this.viewRouters.push(v);
        }
      },
      immediate: true
    }
  },
  methods: {
    onClick(data) {
      if (this.$route.fullPath != data.fullPath) {
        this.$router.push(data.fullPath);
      }
    },
    onClose(data) {
      let index = this.viewRouters.indexOf(data);
      if (index >= 0) {
        this.viewRouters.splice(index, 1);
        if (data.name == this.$route.name) {
          this.$router.push(this.viewRouters[index < 1 ? 0 : index - 1].path);
        }
        this.$store.dispatch("excludeView", data.name);
      }
    }
  }
};
</script>
<style lang="scss">
.__common-layout-tabView {
  $c-tab-border-color: #dcdfe6;
  position: relative;
  &::before {
    content: "";
    border-bottom: 1px solid $c-tab-border-color;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 100%;
  }
  .__tabs {
    display: flex;
    .__tab-item {
      white-space: nowrap;
      padding: 8px 6px 8px 18px;
      font-size: 12px;
      border: 1px solid $c-tab-border-color;
      border-left: none;
      border-bottom: 0px;
      line-height: 14px;
      cursor: pointer;
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      &:first-child {
        border-left: 1px solid $c-tab-border-color;
        border-top-left-radius: 2px;
        margin-left: 10px;
      }
      &:last-child {
        border-top-right-radius: 2px;
        margin-right: 10px;
      }
      &:not(.__is-active):hover {
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
        }
      }
      &.__is-active {
        padding-right: 12px;
        border-bottom: 1px solid #fff;
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
          margin-left: 2px;
        }
      }
      .el-icon-close {
        width: 0px;
        height: 12px;
        overflow: hidden;
        border-radius: 50%;
        font-size: 12px;
        margin-right: 12px;
        transform-origin: 100% 50%;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        vertical-align: text-top;
        &:hover {
          background-color: #c0c4cc;
          color: #fff;
        }
      }
    }
  }
}
</style>

 

貼上我的sys的store文件,後面我發現,我把頁面name添加到excludeViews后,在下一幀中再從excludeViews中把name刪除后,這樣也能有效果。如下面excludeView所示。這樣就更加簡潔。我只需在關閉標籤卡時處理一下就行了。

const sys = {
    state: {
        permissionRouters: [],//權限路由表
        permissionMenus: [],//權限菜單列表
        config: null, //系統配置        
        excludeViews: [] //用於多頁面選項卡
    },
    getters: {

    },
    mutations: {
        SET_PERMISSION_ROUTERS(state, routers) {
            state.permissionRouters = routers;
        },
        SET_PERMISSION_MENUS(state, menus) {
            state.permissionMenus = menus;
        },
        SET_CONFIG(state, config) {
            state.config = config;
        },
        ADD_EXCLUDE_VIEW(state, viewName) {
            state.excludeViews.push(viewName);
        },
        DEL_EXCLUDE_VIEW(state, viewName) {
            let index = state.excludeViews.indexOf(viewName);
            if (index >= 0) {
                state.excludeViews.splice(index, 1);
            }
        }
    },
    actions: {
        //排除頁面
        excludeView({ state, commit, dispatch }, viewName) {
            if (!state.excludeViews.includes(viewName)) {
                commit("ADD_EXCLUDE_VIEW", viewName);
                Promise.resolve().then(() => {
                    commit("DEL_EXCLUDE_VIEW", viewName);
                })
            }
        }
    }
}
export default sys

 

效果如下圖所示,記得一點,就是得在你的頁面上填寫name值,需要跟定義路由時完全一致

 

BUT!!當我截完上面的動圖后,我就發現了問題了,而且是一個無法解決的問題,按我上面的方法,如果我點一下首頁,再點回原來的用戶管理,再關閉用戶管理,再打開用戶管理,你會發現緩存一直都在。

這是為什麼呢?究根詰底還是這個嵌套router-view的問題,不同的router-view的緩存是獨立的,首頁頁面是緩存在一級router-view下面,而用戶管理頁面是緩存在二級router-view下面,當我關閉用戶管理頁面后,只是往excludeViews添加了用戶管理頁面的name(sys.anme),所以只會刪除二級router-view下面name值為sys.user的頁面,二級router-view的name值為sys,它還緩存在一級router-view,所以導致用戶管理一直緩存着。

當然我也想過在關閉頁面時,把頁面父級的所有router-view的name值都添加到excludeViews裏面,這樣的話,也會出現問題,就是當我關閉用戶管理頁面后,同樣在name值為sys的二級router-view下面的頁面緩存都刪除掉了。

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

當我測試了一晚上,我發現這真的是無解的,中間我也試過網上說的暴力刪除cache方法(方法介紹),也是因為這個嵌套router-view的問題導致失敗。

其實網上有人提出的解決方法是把框架改成只有一個一級router-view,一開始我覺得這是個下策,後面發現這也是唯一的方法了。

無奈,我確實不想扔棄這個多頁面標籤功能。那就改吧,其實改起來也不複雜,就是將菜單跟路由數組分為兩成數組,各自獨立。路由全部同級,均在layout布局組件的children裏面。

只使用一級router-view後面,這個多頁面標籤功能就非常好解決了,用include或exclude都可以,沒有什麼問題,但這兩種方法都得在頁面上寫name值,我是一個懶惰的程序員,總是寫這種跟業務無關係的name值顯得特別多餘。幸運的是,我之前在網上有找到一種暴力刪除緩存的方法,經過我的測試后,發現只有一個小問題(下面會提到),其它方面幾乎完美,而且跟include、exclude相比,還能完美支持同個頁面可以根據不同參數同時緩存的功能。(在vue-element-admin裏面也有說到include是沒法支持這種功能的,如下圖)

 

思想是這樣的,在store里創建一個openedPageRouters(已打開的頁面路由數組),我watch路由的變化,當打開一個新頁面時,往openedPageRouters裏面添加頁面路由,當我關閉頁面標籤時,到openedPageRouters裏面刪除對應的頁面路由,而上面提到的暴力刪除緩存,是在頁面的beforeRouterLeave事件中進行刪除中,所以我註冊一個全局mixin的beforeRouterLeave事件,檢測離開的頁面如果不存在於openedPageRouters數組裡面,那就進行緩存刪除。

思路很完美,當然裏面還有一個小問題,就是刪除不是當前激活的頁面,怎麼處理,因為beforeRouterLeave必須在要刪除頁面的生命周期才能觸發的,這個我用了點小手段,我先跳轉到要刪除的頁面,然後往openedPageRouters里刪除這個頁面路由,然後再跳回原來的頁面,這樣就能讓它觸發beforeRouterLeave了。哈哈,不過這個會導致一個小問題,就是地址欄的閃動一下,也就是上面提到的小問題。

下面是我的pageTabs.vue多頁面標籤組件的代碼

<template>
  <div class="__common-layout-pageTabs">
    <el-scrollbar>
      <div class="__tabs">
        <div
          class="__tab-item"
          v-for="item in $store.state.sys.openedPageRouters"
          :class="{ '__is-active': item.meta.canMultipleOpen?item.fullPath==$route.fullPath:item.path==$route.path }"
          :key="item.fullPath"
          @click="onClick(item)"
        >
          {{item.meta.title}}
          <span
            class="el-icon-close"
            @click.stop="onClose(item)"
            :style="$store.state.sys.openedPageRouters.length<=1?'width:0;':''"
          ></span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  watch: {
    $route: {
      handler(v) {
        this.$store.dispatch("openPage", v);
      },
      immediate: true
    }
  },
  methods: {
    //點擊頁面標籤卡時
    onClick(data) {
      if (this.$route.fullPath != data.fullPath) {
        this.$router.push(data.fullPath);
      }
    },
    //關閉頁面標籤時
    onClose(route) {
      if (route.fullPath == this.$route.fullPath) {
        let index = this.$store.state.sys.openedPageRouters.indexOf(route);
        this.$store.dispatch("closePage", route);
        //刪除頁面后,跳轉到上一頁面
        this.$router.push(
          this.$store.state.sys.openedPageRouters[index < 1 ? 0 : index - 1]
            .path
        );
      } else {
        let lastPath = this.$route.fullPath;
        //先跳轉到要刪除的頁面,再刪除頁面路由,再跳轉回來原來的頁面
        this.$router.replace(route).then(() => {          
          this.$store.dispatch("closePage", route);
          this.$router.replace(lastPath);
        });
      }
    }
  }
};
</script>
<style lang="scss">
.__common-layout-pageTabs {
  $c-tab-border-color: #dcdfe6;
  position: relative;
  &::before {
    content: "";
    border-bottom: 1px solid $c-tab-border-color;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 100%;
  }
  .__tabs {
    display: flex;
    .__tab-item {
      white-space: nowrap;
      padding: 8px 6px 8px 18px;
      font-size: 12px;
      border: 1px solid $c-tab-border-color;
      border-left: none;
      border-bottom: 0px;
      line-height: 14px;
      cursor: pointer;
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      &:first-child {
        border-left: 1px solid $c-tab-border-color;
        border-top-left-radius: 2px;
        margin-left: 10px;
      }
      &:last-child {
        border-top-right-radius: 2px;
        margin-right: 10px;
      }
      &:not(.__is-active):hover {
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
        }
      }
      &.__is-active {
        padding-right: 12px;
        border-bottom: 1px solid #fff;
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
          margin-left: 2px;
        }
      }
      .el-icon-close {
        width: 0px;
        height: 12px;
        overflow: hidden;
        border-radius: 50%;
        font-size: 12px;
        margin-right: 12px;
        transform-origin: 100% 50%;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        vertical-align: text-top;
        &:hover {
          background-color: #c0c4cc;
          color: #fff;
        }
      }
    }
  }
}
</style>

 

以下是store代碼

const sys = {
    state: {
        menus: [],//
        permissionRouters: [],//權限路由表
        permissionMenus: [],//權限菜單列表
        config: null, //系統配置        
        openedPageRouters: [] //已打開原頁面路由
    },
    getters: {

    },
    mutations: {
        SET_PERMISSION_ROUTERS(state, routers) {
            state.permissionRouters = routers;
        },
        SET_PERMISSION_MENUS(state, menus) {
            state.permissionMenus = menus;
        },
        SET_MENUS(state, menus) {
            state.menus = menus;
        },
        SET_CONFIG(state, config) {
            state.config = config;
        },
        //添加頁面路由        
        ADD_PAGE_ROUTER(state, route) {
            state.openedPageRouters.push(route);
        },
        //刪除頁面路由
        DEL_PAGE_ROUTER(state, route) {
            let index = state.openedPageRouters.indexOf(route);
            if (index >= 0) {
                state.openedPageRouters.splice(index, 1);
            }
        },
        //替換頁面路由
        REPLACE_PAGE_ROUTER(state, route) {
            for (let key in state.openedPageRouters) {
                if (state.openedPageRouters[key].path == route.path) {
                    state.openedPageRouters.splice(key, 1, route)
                    break;
                }
            }
        }
    },
    actions: {
        //打開頁面
        openPage({ state, commit }, route) {
            let isExist = state.openedPageRouters.some(
                item => item.fullPath == route.fullPath
            );
            if (!isExist) {
                //判斷頁面是否支持不同參數多開頁面功能,如果不支持且已存在path值一樣的頁面路由,那就替換它
                if (route.meta.canMultipleOpen || !state.openedPageRouters.some(
                    item => item.path == route.path
                )) {
                    commit("ADD_PAGE_ROUTER", route);
                } else {
                    commit("REPLACE_PAGE_ROUTER", route);
                }
            }
        },
        //關閉頁面
        closePage({ state, commit }, route) {
            commit("DEL_PAGE_ROUTER", route);
        }        
    }
}
export default sys

 

以下是暴力刪除頁面緩存的代碼,我寫成了一個全局的mixin

import Vue from 'vue'
Vue.mixin({
  beforeRouteLeave(to, from, next) {
    //限制只有在我寫的那個父類里才可能會用這個緩存刪除功能
    if (!this.$parent || this.$parent.$el.className != "el-main __common-layout-main" || !this.$store.state.sys.config.PAGE_TABS) {
      next();
      return;
    }
    let isExist = this.$store.state.sys.openedPageRouters.some(item => item.fullPath == from.fullPath)
    if (!isExist) {
      let tag = this.$vnode.tag;
      let cache = this.$vnode.parent.componentInstance.cache;
      let keys = this.$vnode.parent.componentInstance.keys;
      let key;
      for (let k in cache) {
        if (cache[k].tag == tag) {
          key = k;
          break;
        }
      }
      if (key) {
        if (cache[key] != null) {
          delete cache[key];
          let index = keys.indexOf(key);
          if (index > -1) {
            keys.splice(index, 1);
          }
        }
      }
    }
    next();
  }
})

 

 然後router-view這樣使用,根據我的配置$store.state.sys.config.PAGE_TABS(是否啟用多頁面標籤)進行判斷 ,對了,我相信有不少人肯定會想到,路由不嵌套了,沒有matched數組了,怎麼弄麵包屑,可以看我下面代碼的處理,$store.state.sys.permissionMenus這個數組是我從後台傳過來的,是一個根據當前用戶的權限獲取到的所有有權限訪問的菜單數組,都是一級數組,沒有嵌套關係,我的菜單數組跟路由都是根據這個permissionMenus進行構建的。而我的麵包屑數組就是從這個數組遞歸出來的。

<template>
  <el-main class="__common-layout-main">
    <page-tabs class="c-mg-t-10p" v-if="$store.state.sys.config.PAGE_TABS" />
    <div class="c-pd-20p">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="m in breadcrumbItems" :key="m.id">{{m.name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="c-h-15p"></div>
      <keep-alive v-if="$store.state.sys.config.PAGE_TABS">
        <router-view :key="$route.fullPath" />
      </keep-alive>
      <router-view v-else />
    </div>
  </el-main>
</template>
<script>
import pageTabs from "./pageTabs";
export default {
  components: { pageTabs },
  data() {
    return {
      viewNames: ["role"]
    };
  },
  computed: {
    breadcrumbItems() {
      let items = [];
      let buildItems = id => {
        let b = this.$store.state.sys.permissionMenus.find(
          item => item.id == id
        );
        if (b) {
          items.unshift(b);
          if (b.parentId) {
            buildItems(b.parentId);
          }
        }
      };
      buildItems(this.$route.meta.id);
      return items;
    }
  }
};
</script>
<style lang="scss">
$c-tab-border-color: #dcdfe6;
.__common-layout-main.el-main {
  padding: 0px;
  overflow: unset;
  .el-breadcrumb {
    font-size: 12px;
  }
}
</style>

 

演示一個最終效果,哎,弄了我整整两天時間,不過我改成不嵌套路由后,發現代碼量也少了很多,也是因禍得福啊。這更符合我的Less框架的理念了。哈哈哈!

對了,我之前有說到個小問題,大家可以仔細看一下,下圖的地址欄,當我關閉非當前激活的頁面標籤時,你會發現地址欄會閃現一下。好吧,下面這個動圖還不太明顯。

大家可以到我的LessAdmin框架預覽地址測試下,不要亂改菜單數據哦,會導致打不開的

http://test.caijt.com:9001

用戶:superadmin

密碼:admin

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

自帶7座大空間+In-Joy智聯黑科技?傳祺GS8還讓對手活嗎?_網頁設計公司

2{icon} {views}

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

透過選單樣式的調整、圖片的縮放比例、文字的放大及段落的排版對應來給使用者最佳的瀏覽體驗,所以不用擔心有手機版網站兩個後台的問題,而視覺效果也是透過我們前端設計師優秀的空間比例設計,不會因為畫面變大變小而影響到整體視覺的美感。

In-Joy系統主頁是“多任務卡片”式,首頁有三個最常用功能,可以同時查閱到幾項重要信息,並能快捷控制。In-Joy系統的另一個亮點,同時也是其設計理念——“一秒必達”,你可以更方便快捷的做很多事情,比如撥打電話、調整空調溫度、打開收音機、播放音樂、設置地圖導航等等。

前言

不少科幻電影會有這樣的鏡頭,主角通過手機輕鬆控制汽車,就像《007》中的詹世邦用手機遠程啟動了汽車逃過了反派的追殺;《復讎者聯盟》中鋼鐵俠擁有上天入地的隱形显示屏,快速掌握戰場信息及聯絡隊友。這些東西都讓我們垂涎三尺,非常地炫酷,但是有沒有想過這已經幾乎實現了呢?還是在一輛有着超大空間、霸氣的7座SUV上?沒錯,它就是10月26日將上市的“旗艦級豪華大7座SUV”傳祺GS8,我們今天討論的主角。

霸氣高顏值傳祺GS8將上市,請準備好聚光燈

鋼鐵俠托尼是一張性格乖張的人,有着一種吸引眾人目光的能力,而我們的主角——傳祺GS8兼具勇而不莽、貴而不俗,定位中大型7座SUV的它有着4810*1910*1770mm車身尺寸,在視覺上就給人一種寬奢的感覺。另外使用了傳祺光影雕塑2.0設計理念,整體線條硬朗霸氣,加上使用了科技感十足的LED大燈,給人感覺大氣穩重又不失霸氣感,瞬間拉高了中國品牌車型的顏值。

如此霸氣的車身尺寸加上2800mm的軸距,當然讓傳祺GS8有着優秀的空間表現,軸距比漢蘭達這個合資對手還多出10mm。除此以外,車內目光所及者皆體現豪華感,如黃花梨木紋與鑲嵌的金色飾條,搭配頂級麂皮質感的超纖維面料,考究的配色和做工,盡顯豪華品質;配備頂級品牌安橋車載音響系統、全景天窗、Easy Open電動掀背門等豪車級配置,直擊30萬級以上合資高端車。

In-Joy黑科技放大用戶價值,三屏互聯超高級享受

鋼鐵俠的戰衣有着一個超大的液晶屏幕,

南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

搬家費用:依消費者運送距離、搬運樓層、有無電梯、步行距離、特殊地形、超重物品等計價因素後,評估每車次單

這輛傳祺GS8也有10英寸的哈曼頂級液晶屏幕以及7英寸的儀錶盤液晶显示屏。光是尺寸大是沒有用的,還必須是智能,傳祺GS8擁有“黑科技”In-Joy系統,運用Carlife和Carplay系統輕鬆實現中控大屏、儀錶屏與智能手機三屏互聯,車載屏幕就相當於變成了一台智能手機,導航信息、影音娛樂信息均可在7寸液晶儀錶上體現。

In-Joy系統主頁是“多任務卡片”式,首頁有三個最常用功能,可以同時查閱到幾項重要信息,並能快捷控制。In-Joy系統的另一個亮點,同時也是其設計理念——“一秒必達”,你可以更方便快捷的做很多事情,比如撥打電話、調整空調溫度、打開收音機、播放音樂、設置地圖導航等等。更值得炫耀的是,In-Joy系統配備了同級獨有的無線充電功能,為手機自由充電,暢享愉悅空間。

車內有着一個貼心管家,名字是智慧傳祺3.0系統

賈維斯可以遠程啟動實現遠程救主,而傳祺GS8也有着這樣智能的表現。據了解,智慧傳祺3.0系統能幫助我們實現手機控制車輛,甚至無視距離,遠程遙控啟動車輛、遠程開啟空調、座椅加熱、燈光、車窗、後備箱等功能,試想一下寒冷的冬天早早地遠程遙控開啟空調以及座椅加熱,一坐進車內就感受到溫暖而不是面對一輛冷冰冰的車是多麼愜意的事情。

它的智能還體現在駕駛方面,駕駛中大型SUV總讓人覺得難以駕駛,但傳祺GS8有着前碰預警系統、併線輔助系統、車道偏離系統以及ACC自適應巡航系統,幫助駕駛減少時盲區,而駕駛強度也會大幅度降低。

傳祺GS8預售價:16.98萬-25.98萬。

總的來說,傳祺GS8不僅僅在空間方面以及內飾豪華感等方面給到我們驚喜,還在互聯以及自動安全方面有着超越同價位對手的表現,是一輛有着諸多“黑科技”的中大型SUV,非常適合想要選擇中大型SUV、注重用戶體驗以及主動安全配置的用戶購買。10月26日,傳祺GS8將在杭州國際博覽中心震撼上市,不如掃描下面的二維碼,先來一大波美圖洗洗眼吧。

本站聲明:網站內容來源於http://www.auto6s.com/,如有侵權,請聯繫我們,我們將及時處理

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

節能減碳愛地球是景泰電動車的理念,是創立景泰電動車行的初衷,滿意態度更是服務客戶的最高品質,我們的成長來自於你的推薦。