前端Vue項目——課程詳情頁面實現

一、詳情頁面路由跳轉

　　應用 Vue Router 編程式導航通過 this.$router.push() 來實現路由跳轉。

1、綁定查看詳情事件

　　修改 src/components/Course/Course.vue 文件，給課程 div 綁定查看詳情事件。

<div class="courseList">
    <div class="detail" v-for="(course, index) in courseDetail" :key="course.id" @click="detailHandler(course.id)">
        <div class="head">
            <img :src="course.course_img" alt="" class="backImg">
            <!-- 背景色：行內樣式優先顯示 -->
            <b class="mask" :style="{background: course.bgColor}"></b>
            <p>{{ course.name }}</p>
        </div>

　　v-on，縮寫 @ ，綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

2、定義詳情事件

methods: {
    // 課程詳情時間操作
    detailHandler(id) {
        this.$router.push({
            name: "course.detail",
            params: {
                detailId: id,
            }
        })
    },

　　注意：path只能和query搭配使用，name可以和params/query搭配使用，使用params傳參只能使用name進行引入。

3、定義新的路由規則

　　在 src/router/index.js 添加如下內容：

import CourseDetail from '@/components/Course/CourseDetail'

// 配置路由規則
export default new Router({
  linkActiveClass: 'is-active',
  mode: 'history',   // 改為history模式
  routes: [
    // 略
    // 課程詳情,路由：course/detail/web/3
    {
      path: '/course/detail/web/:detailId',   // 動態匹配
      name: 'course.detail',       // 路由名稱
      component: CourseDetail      // 對應組件
    }
  ]
})

　　要把某種模式匹配到的所有路由，全部映射到同個組件。比如這里是課程詳情組件，但是各個不同的課程有不同的 id，且都要用這個組件來渲染。那么可以在vue-router的路由路徑中使用”動態路徑參數“（dynamic segment）來實現這個效果。

　　一個“路徑參數”使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。於是，我們可以更新 CourseDetail 的模板，輸出當前課程的 ID：

<template>
  <div>
    CourseID:{{$route.params.detailId}}
  </div>
</template>

<script>
  export default {
    name: "CourseDetail",
    data() {
      return {

      };
    },
  };
</script>

　　頁面顯示效果如下所示：

　　

二、課程詳情頁面實現

1、課程詳情頂部布局和樣式

<template>
  <div class="wrap">
    <div class="web-course-banner">
      <div class="container">
        <div class="title">
          <img src="../../../static/images/play.png" height="67" width="67" alt="">
          <h1 class="course-title">Django框架學習</h1>
        </div>
        <span class="course-text">Python語言下最強大優秀的WEB框架從入門到進階</span>
        <div class="course-list">
          <ul>
            <li class="detail-item">
              難度：初級
            </li>
            <li class="sep"></li>
            <li class = detail-item>時長：32小時</li>
            <li class="sep"></li>
            <li class = detail-item>學習人數：632人</li>
            <li class="sep"></li>
            <li class = detail-item>評分 10.0</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 代碼略 -->
  </div>
</template>

<style lang="css" scoped>
  .wrap{
    width: 100%;
  }
  .web-course-banner{
    width: 100%;
    height: 512px;
    background: url(../../../static/images/web-banner.1402933.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
  }
  .container{
    width: 1200px;
    margin: 182px auto 0;
    text-align: left;
  }
  .container img{
    vertical-align: middle;
  }
  .container h1{
    display: inline-block;
    font-size: 48px;
    color: #4a4a4a;
    letter-spacing: .37px;
    margin-left: 40px;
    font-family: PingFangSC-Light;
    font-weight: 500;
    line-height: 1.1;
    position: relative;
    top: 10px;
  }
  .course-text{
    width: 464px;
    display: inline-block;
    font-size: 22px;
    color: #4a4a4a;
    letter-spacing: .17px;
    line-height: 36px;
    margin-top: 33px;
  }
  .course-list{
    width: 100%;
  }
  .course-list ul{
    margin-top: 63px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .course-list ul li.detail-item{
    font-size: 18px;
    color: #4a4a4a;
    letter-spacing: .74px;
    height: 26px;
    padding: 0 20px;
  }
  .course-list ul li.sep{
    width: 2px;
    height: 14px;
    border-left: 1px solid #979797;
  }
</style>

　　顯示效果如下所示：

　　

2、課程詳情頂部區域數據獲取

　　上圖中顯示的數據都是寫死在模板中的，需要通過axios從后端獲取真實的數據信息。

（1）添加課程詳情頂部接口

　　在封裝axios的 api.js中添加新接口：

// 課程詳情頂部數據
export const coursedetailtop = (courseid)=>{
  return Axios.get('coursedetailtop/?courseid=${courseid}').then(res=>res.data);
};

（2）發送請求獲取數據及綁定數據

<script>
  export default {
    name: 'CourseDetail',
    data(){
      return {
        // 聲明變量存儲數據
        coursedetailtop: {},    // 課程頂部詳情數據
      }
    },
    methods: {
      // 發送請求獲取課程詳情頂部數據
      getCoursedetailtop(){
        this.$http.coursedetailtop(this.$route.params.detailId)
          .then(res=>{
            console.log(res);
            if(!res.error_no){   // 取非判斷沒有錯誤
              this.coursedetailtop = res.data;
            }
          })
          .catch(err=>{
            console.log(err);
          })
      }
    },
    created() {
      this.getCoursedetailtop();
    }
  };
</script>

　　查看控制台輸出如下所示：

　　

3、課程詳情頂部數據渲染 

<div class="web-course-banner">
  <div class="container">
    <div class="title">
      <img src="../../../static/images/play.png" height="67" width="67" alt="">
      <h1 class="course-title">{{coursedetailtop.name}}</h1>
    </div>
    <span class="course-text">{{coursedetailtop.course_solgan}}</span>
    <div class="course-list">
      <ul>
        <li class="detail-item">
          難度：{{coursedetailtop.level}}
        </li>
        <li class="sep"></li>
        <li class = detail-item>時長：{{coursedetailtop.hours}}小時</li>
        <li class="sep"></li>
        <li class = detail-item>學習人數：{{ coursedetailtop.learnnumber }}人</li>
        <li class="sep"></li>
        <li class = detail-item>評分 {{ coursedetailtop.course_review }}li>
      </ul>
    </div>
  </div>
</div>

　　顯示效果如下所示：

　　

4、課程詳情接口適配luffy新接口

　　由於luffy網站更新，原接口已經關閉，因此更新API接口（api.js）：

// 課程詳情頂部數據
export const coursedetailtop = (courseid)=>{
  return Axios.get(`course/${courseid}/top/`).then(res=>res.data);
};
// 課程概述
export const coursedetail = (courseid)=>{
  return Axios.get(`course/${courseid}/detail/`).then(res=>res.data);
};

　　更新 CourseDetail.vue 數據綁定：

<div class="web-course-banner">
  <div class="container">
    <div class="title">
      <img src="../../../static/images/play.png" height="67" width="67" alt="">
      <h1 class="course-title">{{coursedetailtop.name}}</h1>
    </div>
    <span class="course-text">{{coursedetailtop.course_solgan}}</span>
    <div class="course-list">
      <ul>
        <li class="detail-item">
          難度：{{coursedetailtop.level}}
        </li>
        <li class="sep"></li>
        <li class = detail-item>課程總時長：{{coursedetailtop.numbers}}課時/{{coursedetailtop.hours}}小時</li>
        <li class="sep"></li>
        <li class = detail-item>學習人數：{{coursedetailtop.learn_number}}人</li>
      </ul>
    </div>
  </div>
</div>
<div class="course-review">
  <ul class="review-head-wrap">
    <li class="head-item">課程概述</li>
    <li class="head-item">課程章節</li>
    <li class="head-item">用戶評價({{coursedetailtop.review_number}})</li>
    <li class="head-item">常見問題</li>
  </ul>
</div>

　　顯示效果：

　　

三、課程詳情套餐區實現

1、更新課程詳情返回數據

getCourseDetail(){
  this.$http.coursedetail(this.$route.params.detailId)
    .then(res=>{
      console.log(res);
      // this.content = res.data.content;
      this.coursedetail = res.data;
    })
    .catch(err=>{
      console.log(err);
    })
}

2、更新課程詳情套餐區模板

<!-- 課程詳情 -->
<div class="course-detail">
  <div class="container">
    <!-- v-html會將元素當成HTML標簽解析后輸出 -->
    <section class="course_item" v-html="content"></section>
  </div>
</div>
<div class="course-price">
  <div class="container">
    <span>可以根據不同的學習情況購買不一樣的學習套餐哦！</span>
    <ul class="course-price-item" >
      <li v-for="(item, index) in coursedetail.prices" :key="item.id">
        <p class="price">¥{{item.price}}</p>
        <p class="time">有效期{{item.valid_period_name}}</p>
      </li>
    </ul>
    <div class="course-action">
      <button class="left">購買</button>
      <button class="right">加入購物車</button>
    </div>
  </div>
</div>

　　顯示效果如下所示：

　　

3、點選課程樣式切換

　　點擊對應課程有效期，樣式和顏色切換。

 （1）定義li標簽樣式

  .course-price ul li{
    width: 200px;
    height: 112px;
    border: 1px solid #979797;
  }
  .course-price ul li.active{
    background: #00CD23;
  }

（2）動態綁定樣式

 　　給li標簽條件綁定active類樣式。同時添加點擊事件：

<ul class="course-price-item" >
  <li v-for="(item, index) in coursedetail.prices" :key="item.id"
    :class="{active:index===currentIndex}" @click="priceClick(index)">
    <p class="price">¥{{item.price}}</p>
    <p class="time">有效期{{item.valid_period_name}}</p>
  </li>
</ul>

　　在script中添加currentIndex原始數據和click點擊事件：

<script>
  export default {
    name: 'CourseDetail',
    data(){
      return {
        // 聲明變量存儲數據
        coursedetailtop: {},    // 課程頂部詳情數據
        content: "",
        // currentIndex: 0,   // 為0時，頁面刷新默認選擇了第一項
        currentIndex: null    // 默認不選擇
      }
    },
    methods: {
      priceClick(index){
        this.currentIndex = index;
      },
      // 代碼略
    },
    created() {
      this.getCoursedetailtop();
      this.getCourseDetail();
    }
  };
</script>

　　點擊效果如下所示：

　　

4、通過dom修改點擊項字體和顏色(不推薦)

 　　ref 加在普通的元素上，可用 this.ref.name 獲取到的是dom元素。

<ul class="course-price-item" >
  <li v-for="(item, index) in coursedetail.prices" :key="item.id"
    :class="{active:index===currentIndex}" @click="priceClick(index)">
    <p class="price" ref="price">¥{{item.price}}</p>
    <p class="time" ref="time">有效期{{item.valid_period_name}}</p>
  </li>
</ul>

　　通過js來操作dom：

methods: {
  priceClick(index){
    this.currentIndex = index;
    this.$refs.price[index].style.color = '#fff';
    this.$refs.time[index].style.color = '#fff';
  },

5、綁定樣式修改點擊項字體和顏色

　　傳給 v-bind:class 一個對象，以動態地切換 class ：

<div class="course-price">
  <div class="container">
    <span>可以根據不同的學習情況購買不一樣的學習套餐哦！</span>
    <ul class="course-price-item" >
      <li v-for="(item, index) in coursedetail.prices" :key="item.id"
        :class="{active:index===currentIndex}" @click="priceClick(index)">
        <p class="price" :class="{active:index===currentIndex}">¥{{item.price}}</p>
        <p class="time" :class="{active:index===currentIndex}">有效期{{item.valid_period_name}}</p>
      </li>
    </ul>
    <div class="course-action">
      <button class="left">購買</button>
      <button class="right">加入購物車</button>
    </div>
  </div>
</div>

　　上面語法表示 active 這個 class 存在與否取決於數據屬性 index===currentIndex 的true/false。

　　添加點擊項字體的 active 樣式：

  .course-price ul li p.active {
    color: #fff;
  }

　　如此，點擊后會將點擊項字體從黑色變成白色，優化顯示效果。

　　

四、課程購物車實現

　　添加購物車時，需要判斷是否點選了課程套餐，沒有點選課程套餐應提示錯誤信息。還需要判斷用戶是否登錄，若用戶未登錄需要跳轉到登錄頁面。

1、購物車點擊事件

　　在購物車標簽中添加點擊事件：

<div class="course-action">
    <button class="left">購買</button>
    <button class="right" @click="addShopCart">加入購物車</button>
</div>

　　添加addShopCart方法：

<script>
  export default {
    name: 'CourseDetail',
    data(){
      return {
        // 聲明變量存儲數據
        coursedetailtop: {},    // 課程頂部詳情數據
        content: "",
        // currentIndex: 0,   // 為0時，頁面刷新默認選擇了第一項
        currentIndex: null    // 默認不選擇
      }
    },
    methods: {
      // 加入購物車事件
      addShopCart(){
        if(this.currentIndex){    // 判斷當前currentIndex是否有值

        } else {

        }
      },
      // 代碼略
  };
</script>

　　這里將 currentIndex的默認值從0修改為null，這是因為如果默認為0，則默認選擇了第一項，無需再提示未選中套餐。修改為 null 后，則是默認沒有選擇，因此可以通過 this.currentIndex 來判定當前是否選中了套餐。

2、用戶未選中套餐消息提示

　　在沒有選擇套餐時點擊添加購物車提示錯誤消息。這里采用element組件中 Message消息提示 來實現錯誤提示。

methods: {
  // 加入購物車事件
  addShopCart(){
    if(this.currentIndex){    // 判斷當前currentIndex是否有值

    } else {
      // element組件錯誤提示
      this.$message({
        message: '您還沒有選擇要加入的套餐哦!',
        center: true        // 使用 center 屬性讓文字水平居中
      });
    }
  },

　　Element 注冊了一個$message方法用於調用，Message 可以接收一個字符串或一個 VNode 作為參數，它會被顯示為正文內容。

　　使用 center 屬性讓文字水平居中。

3、點擊購物車進入登錄頁面

　　用戶點擊購物車需要優先判斷是否是登錄用戶，如果沒有登錄先跳轉到登錄頁面。

（1）利用html本地存儲功能實現登錄用戶信息保存　　

　　用戶名、密碼保存，自動登錄等，可以通過設置cookie實現，第一次登錄網站后在本地計算機的中寫入cookie，之后再次登錄此網站查看cookie中現有的值，用cookie值進行網站登錄即可。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

　　HTML5提供了一個此類問題比較方便的解決方案，就是localstorage。數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。HTML5 使用 JavaScript 來存儲和訪問數據。

　　

　　因此可以使用 window.localStorage.getItem('token') 來判斷用戶是否登錄。

（2）使用vue編程式導航跳轉

methods: {
  // 加入購物車事件
  addShopCart(){
    if(this.currentIndex){    // 判斷當前currentIndex是否有值
      if(window.localStorage.getItem('token')){    // 判斷用戶是否登錄
        // 添加到購物車

      } else {
        // 跳轉登錄頁面
        // 使用編程式導航來跳轉
        this.$router.push({
          name: 'Login',
          query: {
            // window.location 只讀屬性，返回一個 Location  對象，其中包含有關文檔當前位置的信息
            return_url: window.location.href,   // 將當前頁面地址作為查詢參數
          }
        })
      }
    } else {
      // element組件錯誤提示
      this.$message({
        message: '您還沒有選擇要加入的套餐哦!',
        center: true        // 使用 center 屬性讓文字水平居中
      });
    }
  },

　　在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。

（3）添加Login組件和路由

　　在index.js中引入Login組件並配置路由信息：

import Login from '@/components/Login/Login'

Vue.use(Router)

// 配置路由規則
export default new Router({
  linkActiveClass: 'is-active',
  mode: 'history',   // 改為history模式
  routes: [
    // 代碼略
    {
      path: '/login',
      name: 'Login',
      component: Login     // Login 組件
    }
  ]
})

　　添加 src/components/Login/Login.vue 組件。

<template>
  <div class="box">
    <img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="">
    <div class="login">
      <div class="login-title">
        <img src="https://www.luffycity.com/static/img/Logotitle.1ba5466.png" alt="">
        <p>幫助有志向的年輕人通過努力學習獲得體面的工作和生活!</p>
      </div>
      <div class="login_box">
        <div class="title">
          <span>密碼登錄</span>
          <span>短信登錄</span>
        </div>
        <div class="inp">
          <input v-model = 'username' type="text"  placeholder="用戶名 / 手機號碼" class="user">
          <input v-model = 'password' type="password" name="" class="pwd" placeholder="密碼">
          <div id="geetest"></div>
          <div class="rember">
            <p>
              <input type="checkbox" class="no" name="a"></input>
              <span>記住密碼</span>
            </p>
            <p>忘記密碼</p>
          </div>
          <button class="login_btn">登錄</button>
          <p class="go_login" >沒有賬號 <span>立即注冊</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data(){
      return {
        username: "",
        password: ""
      }
    }
  };
</script>

　　顯示效果如下所示：