首頁 > 軟體

SpringBoot+Vue實現動態選單的思路梳理

2022-07-14 18:00:34

關於 Spring Boot + Vue3 的動態選單，鬆哥之前已經寫了兩篇文章了，這兩篇文章主要是從程式碼上和大家分析動態選單最終的實現方式，但是還是有小夥伴覺得沒太看明白，感覺缺乏一個提綱挈領的思路，所以，今天鬆哥再整一篇文章和大家再來捋一捋這個問題，希望這篇文章能讓小夥伴們徹底搞清楚這個問題。

1. 整體思路

首先我們來看整體思路。

光說思路大家還是雲裡霧裡，我們結合具體的效果圖來看：

最終選單顯示效果類似上圖，我把這裡的選單分為了四類：

1.有父有子：像系統管理那種，既有父選單，又有子選單。

2.只有一個一級選單，這種又細分為三種情況：

  • 普通的選單，點選之後在右邊主頁面開啟某個功能頁面。
  • 一個超連結，但不是外連，是一個在當前系統中開啟的外部網頁，點選之後，會在右邊的主頁面中新開一個索引標籤，這個索引標籤中顯示的是一個外部網頁（本質上是通過 iframe 標籤引入的一個外部網頁）。
  • 一個超連結，並且還是一個外連，點選之後，直接在瀏覽器中開啟一個新的索引標籤，新的索引標籤中展示一個外部連結。

整體上來說，就分為這四種情況。其中 1、2.1、2.3 應該都好理解，2.2 有的小夥伴可能不清楚，我給大家截個圖看下就知道了：

四種選單對應的 JSON 格式分別如下：

1.有父有子：

{
 "name": "Monitor",
 "path": "/monitor",
 "hidden": false,
 "redirect": "noRedirect",
 "component": "Layout",
 "alwaysShow": true,
 "meta": {
  "title": "系統監控",
  "icon": "monitor",
  "noCache": false,
  "link": null
 },
 "children": [{
  "name": "Online",
  "path": "online",
  "hidden": false,
  "component": "monitor/online/index",
  "meta": {
   "title": "線上使用者",
   "icon": "online",
   "noCache": false,
   "link": null
  }
 }, {
  "name": "Job",
  "path": "job",
  "hidden": false,
  "component": "monitor/job/index",
  "meta": {
   "title": "定時任務",
   "icon": "job",
   "noCache": false,
   "link": null
  }
 }]
}

2.只有一個一級選單，且一級選單點選後是一個功能頁面：

{
 "path": "/",
 "hidden": false,
 "component": "Layout",
 "children": [{
  "name": "Role",
  "path": "role",
  "hidden": false,
  "component": "system/role/index",
  "meta": {
   "title": "角色管理",
   "icon": "peoples",
   "noCache": false,
   "link": null
  }
 }]
}

3.只有一個一級選單，且一級選單點選之後在當前系統中一個新的索引標籤裡開啟一個網頁：

{
    "name": "Http://www.javaboy.org",
    "path": "/",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網",
        "icon": "guide",
        "noCache": false,
        "link": null
    },
    "children": [
        {
            "name": "Www.javaboy.org",
            "path": "www.javaboy.org",
            "hidden": false,
            "component": "InnerLink",
            "meta": {
                "title": "TienChin健身官網",
                "icon": "guide",
                "noCache": false,
                "link": "http://www.javaboy.org"
            }
        }
    ]
}

4.只有一個一級選單，且一級選單點選之後在瀏覽器開啟一個新的索引標籤：

{
    "name": "Http://www.javaboy.org",
    "path": "http://www.javaboy.org",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網",
        "icon": "guide",
        "noCache": false,
        "link": "http://www.javaboy.org"
    }
}

根據以上四種不同的 JSON，我們總結出以下規律：

  • 父元件都是 Layout，這裡的 Layout 就相當於我們 vhr 中的 Home 元件，也就是整個頁面的框架。
  • 如果想在當前系統中，新開索引標籤開啟一個功能項，那麼這個選單項必然有 children，即使 children 中只有一項選單。
  • 如果選單項是一個外連，那麼這個選單項就不需要有 children 了。
  • 某種程度上，我們其實可以將 2、3 歸為一類，畢竟 3 只是展示內容的元件固定為 InnerLink，2 則視情況而定。
  • 整體上，可以點選的選單的 path 都是父選單的 path + 子選單的 path，如果選單項有父有子，那就正常拼接就行了；如果只有一個子選單，那麼父選單的 path 就是 /；如果是一個外連，那就只有父選單的 path 了。

好了，這就是動態選單的整體設計。

2. 前端渲染

接下來我們再來看一看前端的選單渲染，前端的動態選單渲染位於 tienchin-ui/src/layout/components/Sidebar/SidebarItem.vue 檔案中：

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template v-if="item.meta" #title>
        <svg-icon :icon-class="item.meta && item.meta.icon" />
        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
      </template>

      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

這裡涉及到幾個方法，具體的方法細節我就不貼出來了，主要和大家說下實現思路。

  • 先看整體上，這個選單要是非隱藏的，隱藏的選單，那麼直接一級選單及其下的子選單就都不渲染了。
  • 渲染整體上分兩塊，上面的 template 主要是渲染只有一個子選單的情況，也就是第一小節的 2、3、4 三種情況，下面的渲染正常的有父有子的情況，也就是第一小節的選單 1。
  • hasOneShowingChild 主要是判斷這個選單項是否只有一個需要渲染的子選單，如果有多個子選單，但是大部分都是隱藏，只有一個需要渲染出來，那也算只有一個子選單，如果一個選單項都沒有子選單，那也算一個子選單，只不過這個子選單就是他自身，對應第一小節第 4 種情況。在判斷的過程中，將唯一需要渲染的選單的資料賦值給 onlyOneChild 變數，那麼最終，如果當前選單項只有一個子選單，且這個子選單沒有子選單（或者有子選單但是子選單不用顯示），並且當前選單也不是必須要渲染的，那就將 onlyOneChild 的資料渲染出來。
  • 對於普通的有父有子的情況，渲染的時候，通過 el-sub-menu 標籤進行渲染，但是注意子項是 sidebar-item，sidebar-item 其實就是當前項！換言之，這裡的渲染其實還用到了遞迴（直到沒有 children 的時候結束），這樣即便選單有三級四級五級等等，只要不嫌難看，都是可以渲染出來的。

3. 後端選單生成

3.1 選單表

首先我們來看看選單表的定義，也就是 sys_menu。

CREATE TABLE `sys_menu` (
  `menu_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '選單ID',
  `menu_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '選單名稱',
  `parent_id` bigint(20) DEFAULT '0' COMMENT '父選單ID',
  `order_num` int(4) DEFAULT '0' COMMENT '顯示順序',
  `path` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '路由地址',
  `component` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '元件路徑',
  `query` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '路由引數',
  `is_frame` int(1) DEFAULT '1' COMMENT '是否為外連（0是 1否）',
  `is_cache` int(1) DEFAULT '0' COMMENT '是否快取（0快取 1不快取）',
  `menu_type` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '選單型別（M目錄 C選單 F按鈕）',
  `visible` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '選單狀態（0顯示 1隱藏）',
  `status` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '選單狀態（0正常 1停用）',
  `perms` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '許可權標識',
  `icon` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '選單圖示',
  `create_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '建立者',
  `create_time` datetime DEFAULT NULL COMMENT '建立時間',
  `update_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新時間',
  `remark` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '備註',
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3054 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='選單許可權表';

其實這裡很多欄位都和我們 vhr 專案專案很相似，我也就不重複囉嗦了，我這裡主要和小夥伴們說一個欄位，那就是 menu_type。

menu_type 表示一個選單欄位的型別，一個選單有三種型別，分別是目錄（M）、選單（C）以及按鈕（F）。這裡所說的目錄，相當於我們在 vhr 中所說的一級選單，選單相當於我們在 vhr 中所說的二級選單。

當用戶從前端登入成功後，要去動態載入的選單的時候，就查詢 M 和 C 型別的資料即可，F 型別的資料不是選單項，查詢的時候直接過濾掉即可，通過 menu_type 這個欄位可以輕鬆的過濾掉 F 型別的資料。小夥伴們想想，F 型別的資料過濾掉之後，剩下的資料不就是一級選單和二級選單了，那不就和 vhr 又一樣了麼！

在 vhr 中，考慮到選單就是隻有兩級：一級選單和二級選單，一級選單是目錄，二級選單是則是具體的選單項，沒有三級選單！所以在 vhr 中，查詢選單的時候我直接用了一個一對多的查詢，將一級選單做一的一方，二級選單做多的一方，這樣比較省事。當然靈活度差一點，所以在 TienChin 專案中，這塊還是用上了遞迴。

3.2 選單介面

當用戶登入成功之後，會自動請求 /getRouters 介面來獲取選單資訊，我們一起來看下：

/**
 * 獲取路由資訊
 *
 * @return 路由資訊
 */
@GetMapping("getRouters")
public AjaxResult getRouters() {
    Long userId = SecurityUtils.getUserId();
    List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
    return AjaxResult.success(menuService.buildMenus(menus));
}

這裡的查詢實際上分為兩個步驟：

  • 根據使用者 id 查詢到所有的選單資訊，這一步的查詢實際上是比較容易的，就單純的多張表聯合在一起，然後過濾出和當前使用者相關並且選單型別為 M 或者 C 的選單（型別為 F 的表示按鈕，就不要了），查詢到選單資訊之後，然後進行一個遞迴操作，將選單資料的層級排列出來。
  • menuService.buildMenus 這一步則是將選單資料專為前端所需要的路由資料。

一共就這兩個步驟，我們來逐一進行分析。

先來看查詢選單資料。

/**
 * 根據使用者ID查詢選單
 *
 * @param userId 使用者名稱稱
 * @return 選單列表
 */
@Override
public List<SysMenu> selectMenuTreeByUserId(Long userId) {
    List<SysMenu> menus = null;
    if (SecurityUtils.isAdmin(userId)) {
        menus = menuMapper.selectMenuTreeAll();
    } else {
        menus = menuMapper.selectMenuTreeByUserId(userId);
    }
    return getChildPerms(menus, 0);
}
/**
 * 根據父節點的ID獲取所有子節點
 *
 * @param list     分類表
 * @param parentId 傳入的父節點ID
 * @return String
 */
public List<SysMenu> getChildPerms(List<SysMenu> list, int parentId) {
    List<SysMenu> returnList = new ArrayList<SysMenu>();
    for (Iterator<SysMenu> iterator = list.iterator(); iterator.hasNext(); ) {
        SysMenu t = (SysMenu) iterator.next();
        // 一、根據傳入的某個父節點ID,遍歷該父節點的所有子節點
        if (t.getParentId() == parentId) {
            recursionFn(list, t);
            returnList.add(t);
        }
    }
    return returnList;
}
/**
 * 遞迴列表
 *
 * @param list
 * @param t
 */
private void recursionFn(List<SysMenu> list, SysMenu t) {
    // 得到子節點列表
    List<SysMenu> childList = getChildList(list, t);
    t.setChildren(childList);
    for (SysMenu tChild : childList) {
        if (hasChild(list, tChild)) {
            recursionFn(list, tChild);
        }
    }
}
/**
 * 得到子節點列表
 */
private List<SysMenu> getChildList(List<SysMenu> list, SysMenu t) {
    List<SysMenu> tlist = new ArrayList<SysMenu>();
    Iterator<SysMenu> it = list.iterator();
    while (it.hasNext()) {
        SysMenu n = (SysMenu) it.next();
        if (n.getParentId().longValue() == t.getMenuId().longValue()) {
            tlist.add(n);
        }
    }
    return tlist;
}
/**
 * 判斷是否有子節點
 */
private boolean hasChild(List<SysMenu> list, SysMenu t) {
    return getChildList(list, t).size() > 0;
}

這裡一共涉及到五個關鍵方法，我們來逐一進行分析：

  • selectMenuTreeByUserId：這個方法的執行比較容易，如果當前使用者是管理員，那就不用加過濾條件了，直接查詢出所有的型別為 M 和 C 的選單項即可。
  • getChildPerms：這個方法主要是將前面查詢出來的選單資料進行重組，本來都是一個集合中的資料，現在在該方法中處理成樹狀，處理的核心邏輯就是呼叫 recursionFn 方法將之進行遞迴。
  • recursionFn：這是最為關鍵的遞迴方法了，首先呼叫 getChildList 獲取當前選單項的 children，然後將獲取到的 children 設定給當前選單項，最後還要遍歷獲取到的 children，如果這個 children 也是有子選單的，則繼續呼叫 recursionFn 方法進行處理。
  • getChildList：這個是查詢某一個選單的子選單，這個很容易，如果某一個選單的 parentId 是當前選單的 id，那麼這個選單就是當前選單的子選單。
  • hasChild：這個是判斷給定的選單是否有子選單，這個邏輯就比較簡單了。

好啦，這個就是整個的查詢邏輯，整體上來說是比較容易的，就是查詢 M 和 C 型別的選單，然後再做一個遞迴操作，將選單資料變成一個樹狀資料。

但是因為 SysMenu 和前後端所需要的路由資料的欄位名稱對不上，並且格式引數等都不符合前端的要求，所以還需要再做一個轉換，這就是 menuService.buildMenus 所做的事情了：

/**
 * 構建前端路由所需要的選單
 *
 * @param menus 選單列表
 * @return 路由列表
 */
@Override
public List<RouterVo> buildMenus(List<SysMenu> menus) {
    List<RouterVo> routers = new LinkedList<RouterVo>();
    for (SysMenu menu : menus) {
        RouterVo router = new RouterVo();
        router.setHidden("1".equals(menu.getVisible()));
        router.setName(getRouteName(menu));
        router.setPath(getRouterPath(menu));
        router.setComponent(getComponent(menu));
        router.setQuery(menu.getQuery());
        router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
        List<SysMenu> cMenus = menu.getChildren();
        if (!cMenus.isEmpty() && cMenus.size() > 0 && UserConstants.TYPE_DIR.equals(menu.getMenuType())) {
            router.setAlwaysShow(true);
            router.setRedirect("noRedirect");
            router.setChildren(buildMenus(cMenus));
        } else if (isMenuFrame(menu)) {
            router.setMeta(null);
            List<RouterVo> childrenList = new ArrayList<RouterVo>();
            RouterVo children = new RouterVo();
            children.setPath(menu.getPath());
            children.setComponent(menu.getComponent());
            children.setName(StringUtils.capitalize(menu.getPath()));
            children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
            children.setQuery(menu.getQuery());
            childrenList.add(children);
            router.setChildren(childrenList);
        } else if (menu.getParentId().intValue() == 0 && isInnerLink(menu)) {
            router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon()));
            router.setPath("/");
            List<RouterVo> childrenList = new ArrayList<RouterVo>();
            RouterVo children = new RouterVo();
            String routerPath = innerLinkReplaceEach(menu.getPath());
            children.setPath(routerPath);
            children.setComponent(UserConstants.INNER_LINK);
            children.setName(StringUtils.capitalize(routerPath));
            children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), menu.getPath()));
            childrenList.add(children);
            router.setChildren(childrenList);
        }
        routers.add(router);
    }
    return routers;
}

從這個方法的執行邏輯上我們可以看到，這裡的選單資料一共分為了四種情況，其實剛好就和我們第一小節所介紹的情況相對應。

整體上來看，分支語句外面設定了元件的最基本的屬性。三個分支語句：

  • 第一個分支，處理普通的有父有子的情況。
  • 第二個分支，處理第一小節第二種情況。
  • 第三個分支，處理第一小節第三種情況。
  • 如果三個分支都沒進去，那就是第一小節的第四種情況，以及各個子選單的情況了。

好了，基於這樣大的思路，再來看各個屬性的具體設定，就很容易了。

  • 首先是可見性 hidden，這個沒啥好說的。
  • 接下來是選單的 name 屬性，name 屬性分為了兩種情況：路由的 name 屬性是選單表中的 path 欄位值且首字母大寫（選單 1、3、4）；如果在一級選單中，出現了一個選單 C（本來這一級別只有 M），並且還不是外連，那麼就設定選單的 name 為空字串（相當於此時不需要 name 屬性了，對應選單 2 的情況）。
  • 接下來是路由的 path，設定 path 的時候也分好種情況，鬆哥對照著程式碼來和大家說一下：
/**
 * 獲取路由地址
 *
 * @param menu 選單資訊
 * @return 路由地址
 */
public String getRouterPath(SysMenu menu) {
    String routerPath = menu.getPath();
    // 內連開啟外網方式
    if (menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
        routerPath = innerLinkReplaceEach(routerPath);
    }
    // 非外連並且是一級目錄（型別為目錄）
    if (0 == menu.getParentId().intValue() && UserConstants.TYPE_DIR.equals(menu.getMenuType())
            && UserConstants.NO_FRAME.equals(menu.getIsFrame())) {
        routerPath = "/" + menu.getPath();
    }
    // 非外連並且是一級目錄（型別為選單）
    else if (isMenuFrame(menu)) {
        routerPath = "/";
    }
    return routerPath;
}

a. 首先獲取從資料庫中查詢到的 path 屬性。b. 如果當前元件不是一級選單，並且是在內部元件中展示，那麼除去這個 path 裡邊的 http 或者 https（對應選單 3 的 children 的情況）。c. 如果當前元件是一級選單並且是 M 型並且不是外連，那麼就在原有的 path 上加上 / 字首（對應選單 1 的一級選單的 path 情況）。d. 如果當前元件是一級選單，且是 C 型選單，那麼設定 path 為 /（對應選單 2、3 中一級選單的 path 情況）。e. 其他情況，選單都是從資料庫查到什麼返回什麼。

接下來是設定前端 component，這個選單項用哪個 component 元件顯示出來。

/**
 * 獲取元件資訊
 *
 * @param menu 選單資訊
 * @return 元件資訊
 */
public String getComponent(SysMenu menu) {
    String component = UserConstants.LAYOUT;
    if (StringUtils.isNotEmpty(menu.getComponent()) && !isMenuFrame(menu)) {
        component = menu.getComponent();
    } else if (StringUtils.isEmpty(menu.getComponent()) && menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
        component = UserConstants.INNER_LINK;
    } else if (StringUtils.isEmpty(menu.getComponent()) && isParentView(menu)) {
        component = UserConstants.PARENT_VIEW;
    }
    return component;
}

a. 首先預設的元件是 Layout（選單1、2、3、4 的一級選單）。b. 如果設定的時候就有 component，並且當前選單項也不是外連，那麼就使用設定的 component（選單 1、2 的子選單情況）。c. 如果不是一級選單（是一個子選單），並且是一個在當前系統展示的外連，那麼就使用 InnerLink 這個元件（這個元件中有一個 iframe 標籤可以把外連展示出來，如選單 4 的子選單情況）。d. 如果設定的時候沒有設定元件並且選單型別是 M（二級選單中還有三級選單的情況），那麼就設定顯示元件為 ParentView。

component 就分為這幾種情況。

接下來就是 query 和 meta 這兩個引數就沒啥好說的。

接下來就是三個分支的情況了。

其他屬性都比較容易，我就不囉嗦啦～

到此這篇關於SpringBoot+Vue實現動態選單的思路梳理的文章就介紹到這了,更多相關SpringBoot Vue動態選單內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com