第三階段-day10

文章目錄

• 1.使用者登入操作
• • 1.1 關于token的說明
  • 1.2 生成UUID
  • 1.3 Session和Cookie
  • • 1.3.1 Session介紹
    • 1.3.2 Cookie機制
    • 1.3.3 session和cookie差別
  • 1.4 前端儲存使用者資訊
  • 1.5 實作系統首頁跳轉
• 2 權限校驗-路由導航守衛
• • 2.1 業務需求
  • 2.2 路由導航守衛實作
  • • 2.2.1 參數說明
    • 2.2.2 配置前端路由導航守衛
• 3. 左側菜單清單實作
• • 3.1 左側菜單頁面分析
  • 3.2 編輯權限層級代碼
  • • 3.2.1 表設計分析
    • 3.2.2 編輯POJO
    • 3.2.3 搭建Rights層級代碼
    • 3.2.4 業務接口說明
    • 3.2.5 編輯RightsController
    • 3.2.6 編輯RightsService
    • 3.2.7 頁面效果展現
  • 3.3 debug說明
• 4. 使用者子產品實作
• • 4.1 實作使用者頁面跳轉
  • • 4.1.1 Home元件說明
    • 4.1.2 定義子級元件
    • 4.1.3 頁面效果展現
• 5 ElementUI學習(了解)

1.使用者登入操作

1.1 關于token的說明

1.由于伺服器需要辨別已經登入的使用者,是以伺服器動态生成一個獨一無二的token,傳回給使用者.

2.使用者将token儲存到本地,友善下次通路時攜帶.

1.2 生成UUID

/**
     * 思路:
     *      1.将密碼進行加密處理
     *      2.根據username/password查詢資料庫
     *      3.有值:
     *          登入成功,傳回秘鑰
     *        沒有值:
     *          登入失敗,傳回null
     * @param user
     * @return
     */
    @Override
    public String login(User user) {
        //1.擷取明文
        String password = user.getPassword();
        //2.加密處理
        String md5 = DigestUtils.md5DigestAsHex(password.getBytes());
        user.setPassword(md5);
        System.out.println(md5);
        //3.查詢資料庫
        QueryWrapper<User> queryWrapper= new QueryWrapper<>(user);
        //4.擷取資料庫對象
        User userDB = userMapper.selectOne(queryWrapper);
        //5.判斷登入是否正确
        if(userDB == null){
            return null;
        }
        //6.使用UUID動态生成TOKEN,根據目前時間毫秒數+随機數利用hash算法生成
        //  幾乎可以保證不重複.
        String token = UUID.randomUUID().toString()
                .replace("-","");
        return token;
    }
           

1.3 Session和Cookie

1.3.1 Session介紹

Session：在計算機中，尤其是在網絡應用中，稱為“會話控制”。Session對象存儲特定使用者會話所需的屬性及配置資訊。這樣，當使用者在應用程式的Web頁之間跳轉時，存儲在Session對象中的變量将不會丢失，而是在整個使用者會話中一直存在下去。當使用者請求來自應用程式的 Web頁時，如果該使用者還沒有會話，則Web伺服器将自動建立一個 Session對象。當會話過期或被放棄後，伺服器将終止該會話。Session 對象最常見的一個用法就是存儲使用者的首選項。例如，如果使用者指明不喜歡檢視圖形，就可以将該資訊存儲在Session對象中。有關使用Session 對象的詳細資訊，請參閱“ASP應用程式”部分的“管理會話”。注意會話狀态僅在支援cookie的浏覽器中保留。

小結:

1.Session稱之為 “會話機制”

2.在浏覽器中打開網頁 就是一個會話.

3.使用者的資料可以儲存到會話中,但是有生命周期. 當會話關閉,則資料消失.

1.3.2 Cookie機制

Cookie，有時也用其複數形式 Cookies。類型為“小型文本檔案”，是某些網站為了辨識使用者身份，進行Session跟蹤而儲存在使用者本地終端上的資料（通常經過加密），由使用者用戶端計算機暫時或永久儲存的資訊 [1] 。

說明:

1.cookie是一個小型的文本檔案

2.cookie中存儲的資料一般都是密文.

3.cookie中的資料的生命周期可控. 幾天.幾年!!!

1.3.3 session和cookie差別

1.session的資料是臨時存儲.cookie的資料可以永久儲存. (生命周期不同)

2.sesion是浏覽器中的一個記憶體對象!而cookie是一個實際的本地檔案. (形式不同).

3.session一般存儲是一些涉密資料.cookie一般存儲相對公開的資料(免密登入). (安全性)

1.4 前端儲存使用者資訊

login(){
      //擷取表單對象之後進行資料校驗
      //valid 表示校驗的結果 true表示通過  false表示失敗
      this.$refs.loginFormRef.validate(async valid => {
         //如果沒有完成校驗則直接傳回
         if(!valid) return
        //如果校驗成功,則發起ajax請求
        const {data: result} = await this.$http.post('/user/login',this.loginForm)
        if(result.status !== 200) return this.$message.error("使用者登入失敗")
        this.$message.success("使用者登入成功")
        //擷取使用者token資訊
        let token = result.data
        window.sessionStorage.setItem("token",token)
        //使用者登入成功之後,跳轉到home頁面
        this.$router.push("/home")
      })
    }
           

1.5 實作系統首頁跳轉

編輯router/index.js 添加元件資訊,實作首頁跳轉

2 權限校驗-路由導航守衛

2.1 業務需求

前端頁面跳轉是通過路由進行控制. 規定: 如果使用者沒有登入,則隻允許通路登入頁面.隻有登入之後才能通路其它頁面.

難點: 如何實作使用者請求的攔截.

攔截器作用: 攔截使用者的請求.

結果1: 請求放行

結果2: 請求攔截,一般配合重定向使用!!

2.2 路由導航守衛實作

2.2.1 參數說明

2.2.2 配置前端路由導航守衛

const router = new VueRouter({
  routes
})
/**
 * 定義路由導航守衛
 * 參數1. to    路由跳轉的網址
 * 參數2. from  路由從哪裡來
 * 參數3. next  是一個函數,表示放行或重定向
 *              next() 放行
 *              next("/login") 重定向
 * 業務實作:
 *    核心邏輯: 檢查是否有token.
 *        如果通路login頁面 直接放行.
 *        有token 表示已經登入,放行請求
 *        沒有token 表示使用者沒有登入,重定向到登入頁面
 */
router.beforeEach((to,from,next) => {
   if(to.path === "/login"){
     return next()
   }
    //說明使用者通路的頁面不是login 請求需要校驗
    //擷取token資料.
    let token = window.sessionStorage.getItem("token")
    //if(token !==null && token.length>0)
    //下列if 解釋為: 如果token不為null
    if(token){
      return next()
    }
    next("/login")
})
           

3. 左側菜單清單實作

3.1 左側菜單頁面分析

3.2 編輯權限層級代碼

3.2.1 表設計分析

說明:

name: 權限名稱

parent_id: 父級權限 實作了父子級關系.

path: 一級菜單沒有路徑的, 二級/三級才有路徑.

3.2.2 編輯POJO

說明:

1.目前對象中children屬性不屬于字段,是以使用@TableField(exist = false)進行辨別.

2.權限清單中有父子級關系,是以通過children封裝子級

3.2.3 搭建Rights層級代碼

3.2.4 業務接口說明

隻查詢一級和二級的資訊

• 請求路徑 /rights/getRightsList
• 請求類型 GET
• 請求參數 無
• 響應資料 SysResult對象

參數名稱	參數說明	備注
status	狀态資訊	200表示伺服器請求成功 201表示伺服器異常
msg	伺服器傳回的提示資訊	可以為null
data	伺服器傳回的業務資料	傳回權限List集合

• 響應資料如圖所示

  

3.2.5 編輯RightsController

3.2.6 編輯RightsService

/**
     * 實作思路:
     *   1.先查詢一級菜單資訊 parent_id = 0
     *   2.将一級菜單循環周遊 一級菜單對象.
     *   3.根據一級菜單資訊,查詢目前菜單下的二級.
     *   4.将查詢得到的二級菜單,封裝到一級對象中
     * 實作思路二(擴充):
     *    利用左連接配接 實作關聯查詢 封裝資料.
     * @return
     */
    @Override
    public List<Rights> getRightsList() {
        //1.查詢一級清單資訊
        QueryWrapper<Rights> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id",0);
        List<Rights> oneList = rightsMapper.selectList(queryWrapper);
        //2.周遊一級清單
        for (Rights oneRights : oneList){
            //根據一級查詢二級
            queryWrapper.clear(); //清除之前的條件
            queryWrapper.eq("parent_id",oneRights.getId());
            List<Rights> twoList = rightsMapper.selectList(queryWrapper);
            //将查詢的結果封裝一級對象中
            oneRights.setChildren(twoList);
        }
        return oneList;
    }
           

3.2.7 頁面效果展現

3.3 debug說明

說明: debug是程式設計中常用的代碼的調試工具. 可以讓代碼一行一行執行.

4. 使用者子產品實作

4.1 實作使用者頁面跳轉

4.1.1 Home元件說明

業務說明: URL:/user 要求跳轉元件 User.vue元件,元件的跳轉應該在Home元件内部跳轉.

Home元件說明: 在main的區域中,設定 作用 Home的子級标簽将來元件在該區域展現.

4.1.2 定義子級元件

說明: 通過路由實作父子元件嵌套.

4.1.3 頁面效果展現

5 ElementUI學習(了解)

在elementUI的元件中 繪制項目

<template>
  <div>
      <!-- 标簽使用原則:
          規則: 先定義,後使用
          文法: el-breadcrumb 找到名稱為Breadcrumb元件進行展現
          定義elementUI的元件: 按需導入元件
             從elementUI中導入特定的元件
             1.import {Breadcrumb} from 'element-ui'
             2.Vue.use(Breadcrumb)  聲明為全局元件.子元件可以直接調用
      -->
      <!-- 1.添加面包屑導航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
        <el-breadcrumb-item>活動管理</el-breadcrumb-item>
        <el-breadcrumb-item>活動清單</el-breadcrumb-item>
        <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 2.定義卡片視圖  -->
      <el-card class="box-card">
        <div class="text item">
          <!-- 4.栅格: 每行24格,可以動态的縮放 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 3.定義文本輸入框-->
              <el-input placeholder="請輸入内容" v-model="input3" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary">主要按鈕</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
  </div>
</template>
<script>
    //對外聲明元件屬性/方法等參數.要被根元件調用
    export default {
      data(){
        return {.
        }
      }
    }
</script>
<style lang="less" scoped>
</style>
           

文章目錄

• 1.使用者登入操作
• • 1.1 關于token的說明
  • 1.2 生成UUID
  • 1.3 Session和Cookie
  • • 1.3.1 Session介紹
    • 1.3.2 Cookie機制
    • 1.3.3 session和cookie差別
  • 1.4 前端儲存使用者資訊
  • 1.5 實作系統首頁跳轉
• 2 權限校驗-路由導航守衛
• • 2.1 業務需求
  • 2.2 路由導航守衛實作
  • • 2.2.1 參數說明
    • 2.2.2 配置前端路由導航守衛
• 3. 左側菜單清單實作
• • 3.1 左側菜單頁面分析
  • 3.2 編輯權限層級代碼
  • • 3.2.1 表設計分析
    • 3.2.2 編輯POJO
    • 3.2.3 搭建Rights層級代碼
    • 3.2.4 業務接口說明
    • 3.2.5 編輯RightsController
    • 3.2.6 編輯RightsService
    • 3.2.7 頁面效果展現
  • 3.3 debug說明
• 4. 使用者子產品實作
• • 4.1 實作使用者頁面跳轉
  • • 4.1.1 Home元件說明
    • 4.1.2 定義子級元件
    • 4.1.3 頁面效果展現
• 5 ElementUI學習(了解)

1.使用者登入操作

1.1 關于token的說明

1.由于伺服器需要辨別已經登入的使用者,是以伺服器動态生成一個獨一無二的token,傳回給使用者.

2.使用者将token儲存到本地,友善下次通路時攜帶.

1.2 生成UUID

/**
     * 思路:
     *      1.将密碼進行加密處理
     *      2.根據username/password查詢資料庫
     *      3.有值:
     *          登入成功,傳回秘鑰
     *        沒有值:
     *          登入失敗,傳回null
     * @param user
     * @return
     */
    @Override
    public String login(User user) {
        //1.擷取明文
        String password = user.getPassword();
        //2.加密處理
        String md5 = DigestUtils.md5DigestAsHex(password.getBytes());
        user.setPassword(md5);
        System.out.println(md5);
        //3.查詢資料庫
        QueryWrapper<User> queryWrapper= new QueryWrapper<>(user);
        //4.擷取資料庫對象
        User userDB = userMapper.selectOne(queryWrapper);
        //5.判斷登入是否正确
        if(userDB == null){
            return null;
        }
        //6.使用UUID動态生成TOKEN,根據目前時間毫秒數+随機數利用hash算法生成
        //  幾乎可以保證不重複.
        String token = UUID.randomUUID().toString()
                .replace("-","");
        return token;
    }
           

1.3 Session和Cookie

1.3.1 Session介紹

Session：在計算機中，尤其是在網絡應用中，稱為“會話控制”。Session對象存儲特定使用者會話所需的屬性及配置資訊。這樣，當使用者在應用程式的Web頁之間跳轉時，存儲在Session對象中的變量将不會丢失，而是在整個使用者會話中一直存在下去。當使用者請求來自應用程式的 Web頁時，如果該使用者還沒有會話，則Web伺服器将自動建立一個 Session對象。當會話過期或被放棄後，伺服器将終止該會話。Session 對象最常見的一個用法就是存儲使用者的首選項。例如，如果使用者指明不喜歡檢視圖形，就可以将該資訊存儲在Session對象中。有關使用Session 對象的詳細資訊，請參閱“ASP應用程式”部分的“管理會話”。注意會話狀态僅在支援cookie的浏覽器中保留。

小結:

1.Session稱之為 “會話機制”

2.在浏覽器中打開網頁 就是一個會話.

3.使用者的資料可以儲存到會話中,但是有生命周期. 當會話關閉,則資料消失.

1.3.2 Cookie機制

Cookie，有時也用其複數形式 Cookies。類型為“小型文本檔案”，是某些網站為了辨識使用者身份，進行Session跟蹤而儲存在使用者本地終端上的資料（通常經過加密），由使用者用戶端計算機暫時或永久儲存的資訊 [1] 。

說明:

1.cookie是一個小型的文本檔案

2.cookie中存儲的資料一般都是密文.

3.cookie中的資料的生命周期可控. 幾天.幾年!!!

1.3.3 session和cookie差別

1.session的資料是臨時存儲.cookie的資料可以永久儲存. (生命周期不同)

2.sesion是浏覽器中的一個記憶體對象!而cookie是一個實際的本地檔案. (形式不同).

3.session一般存儲是一些涉密資料.cookie一般存儲相對公開的資料(免密登入). (安全性)

1.4 前端儲存使用者資訊

login(){
      //擷取表單對象之後進行資料校驗
      //valid 表示校驗的結果 true表示通過  false表示失敗
      this.$refs.loginFormRef.validate(async valid => {
         //如果沒有完成校驗則直接傳回
         if(!valid) return
        //如果校驗成功,則發起ajax請求
        const {data: result} = await this.$http.post('/user/login',this.loginForm)
        if(result.status !== 200) return this.$message.error("使用者登入失敗")
        this.$message.success("使用者登入成功")
        //擷取使用者token資訊
        let token = result.data
        window.sessionStorage.setItem("token",token)
        //使用者登入成功之後,跳轉到home頁面
        this.$router.push("/home")
      })
    }
           

1.5 實作系統首頁跳轉

編輯router/index.js 添加元件資訊,實作首頁跳轉

2 權限校驗-路由導航守衛

2.1 業務需求

前端頁面跳轉是通過路由進行控制. 規定: 如果使用者沒有登入,則隻允許通路登入頁面.隻有登入之後才能通路其它頁面.

難點: 如何實作使用者請求的攔截.

攔截器作用: 攔截使用者的請求.

結果1: 請求放行

結果2: 請求攔截,一般配合重定向使用!!

2.2 路由導航守衛實作

2.2.1 參數說明

2.2.2 配置前端路由導航守衛

const router = new VueRouter({
  routes
})
/**
 * 定義路由導航守衛
 * 參數1. to    路由跳轉的網址
 * 參數2. from  路由從哪裡來
 * 參數3. next  是一個函數,表示放行或重定向
 *              next() 放行
 *              next("/login") 重定向
 * 業務實作:
 *    核心邏輯: 檢查是否有token.
 *        如果通路login頁面 直接放行.
 *        有token 表示已經登入,放行請求
 *        沒有token 表示使用者沒有登入,重定向到登入頁面
 */
router.beforeEach((to,from,next) => {
   if(to.path === "/login"){
     return next()
   }
    //說明使用者通路的頁面不是login 請求需要校驗
    //擷取token資料.
    let token = window.sessionStorage.getItem("token")
    //if(token !==null && token.length>0)
    //下列if 解釋為: 如果token不為null
    if(token){
      return next()
    }
    next("/login")
})
           

3. 左側菜單清單實作

3.1 左側菜單頁面分析

3.2 編輯權限層級代碼

3.2.1 表設計分析

說明:

name: 權限名稱

parent_id: 父級權限 實作了父子級關系.

path: 一級菜單沒有路徑的, 二級/三級才有路徑.

3.2.2 編輯POJO

說明:

1.目前對象中children屬性不屬于字段,是以使用@TableField(exist = false)進行辨別.

2.權限清單中有父子級關系,是以通過children封裝子級

3.2.3 搭建Rights層級代碼

3.2.4 業務接口說明

隻查詢一級和二級的資訊

• 請求路徑 /rights/getRightsList
• 請求類型 GET
• 請求參數 無
• 響應資料 SysResult對象

參數名稱	參數說明	備注
status	狀态資訊	200表示伺服器請求成功 201表示伺服器異常
msg	伺服器傳回的提示資訊	可以為null
data	伺服器傳回的業務資料	傳回權限List集合

• 響應資料如圖所示

  

3.2.5 編輯RightsController

3.2.6 編輯RightsService

/**
     * 實作思路:
     *   1.先查詢一級菜單資訊 parent_id = 0
     *   2.将一級菜單循環周遊 一級菜單對象.
     *   3.根據一級菜單資訊,查詢目前菜單下的二級.
     *   4.将查詢得到的二級菜單,封裝到一級對象中
     * 實作思路二(擴充):
     *    利用左連接配接 實作關聯查詢 封裝資料.
     * @return
     */
    @Override
    public List<Rights> getRightsList() {
        //1.查詢一級清單資訊
        QueryWrapper<Rights> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id",0);
        List<Rights> oneList = rightsMapper.selectList(queryWrapper);
        //2.周遊一級清單
        for (Rights oneRights : oneList){
            //根據一級查詢二級
            queryWrapper.clear(); //清除之前的條件
            queryWrapper.eq("parent_id",oneRights.getId());
            List<Rights> twoList = rightsMapper.selectList(queryWrapper);
            //将查詢的結果封裝一級對象中
            oneRights.setChildren(twoList);
        }
        return oneList;
    }
           

3.2.7 頁面效果展現

3.3 debug說明

說明: debug是程式設計中常用的代碼的調試工具. 可以讓代碼一行一行執行.

4. 使用者子產品實作

4.1 實作使用者頁面跳轉

4.1.1 Home元件說明

業務說明: URL:/user 要求跳轉元件 User.vue元件,元件的跳轉應該在Home元件内部跳轉.

Home元件說明: 在main的區域中,設定 作用 Home的子級标簽将來元件在該區域展現.

4.1.2 定義子級元件

說明: 通過路由實作父子元件嵌套.

4.1.3 頁面效果展現

5 ElementUI學習(了解)

在elementUI的元件中 繪制項目

<template>
  <div>
      <!-- 标簽使用原則:
          規則: 先定義,後使用
          文法: el-breadcrumb 找到名稱為Breadcrumb元件進行展現
          定義elementUI的元件: 按需導入元件
             從elementUI中導入特定的元件
             1.import {Breadcrumb} from 'element-ui'
             2.Vue.use(Breadcrumb)  聲明為全局元件.子元件可以直接調用
      -->
      <!-- 1.添加面包屑導航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
        <el-breadcrumb-item>活動管理</el-breadcrumb-item>
        <el-breadcrumb-item>活動清單</el-breadcrumb-item>
        <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 2.定義卡片視圖  -->
      <el-card class="box-card">
        <div class="text item">
          <!-- 4.栅格: 每行24格,可以動态的縮放 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 3.定義文本輸入框-->
              <el-input placeholder="請輸入内容" v-model="input3" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary">主要按鈕</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
  </div>
</template>
<script>
    //對外聲明元件屬性/方法等參數.要被根元件調用
    export default {
      data(){
        return {.
        }
      }
    }
</script>
<style lang="less" scoped>
</style>