vue框架前後端分離專案之課程介面、頁面、前臺等相關內容-127

阿新 • • 發佈：2021-01-11

1 課程介面

1 課程表設計（關聯關係是欄位和欄位的關係，而不是表和表的關係）
    -課程分類表：跟課程一對多(一個課程分類下很多課程)
    -實戰課表（一個課程有很多章節）
  -課程章節表（一個章節，有很多課時）
  -課時表
  -老師表（一個老師，講很多課程）
  
  
  
2 課程介面：
    -根據切圖分析出需要返回的欄位
  -帶過濾功能：按分類過濾，按價格，人氣升序降序
  -分頁

2 課程頁面

<template>
  <div class="course">
    <Header></Header>
    <div class="main">
      <!-- 篩選條件 -->
      <div class="condition">
        <ul class="cate-list">
          <li class="title">課程分類:</li>
          <li :class="filter.course_category==0?'this':''" @click="filter.course_category=0">全部</li>
          <li :class="filter.course_category==category.id?'this':''" v-for="category in category_list"
            @click="filter.course_category=category.id" :key="category.name">{{category.name}}
          </li>
        </ul>

        <div class="ordering">
          <ul>
            <li class="title">篩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;選:</li>
            <li class="default" :class="(filter.ordering=='id' || filter.ordering=='-id')?'this':''"
              @click="filter.ordering='-id'">預設
            </li>
            <li class="hot" :class="(filter.ordering=='students' || filter.ordering=='-students')?'this':''"
              @click="filter.ordering=(filter.ordering=='-students'?'students':'-students')">人氣
            </li>
            <li class="price"
               :class="filter.ordering=='price'?'price_up this':(filter.ordering=='-price'?'price_down this':'')"
              @click="filter.ordering=(filter.ordering=='-price'?'price':'-price')">價格
            </li>
          </ul>
          <p class="condition-result">共{{course_total}}個課程</p>
        </div>

      </div>
      <!-- 課程列表 -->
      <div class="course-list">
        <div class="course-item" v-for="course in course_list" :key="course.name">
          <div class="course-image">
            <img :src="course.course_img" alt="">
          </div>
          <div class="course-info">
            <h3>
              <router-link :to="'/course/detail/'+course.id">{{course.name}}</router-link>
              <span><img src="@/assets/img/avatar1.svg" alt="">{{course.students}}人已加入學習</span></h3>
            <p class="teather-info">
               {{course.teacher.name}} {{course.teacher.title}} {{course.teacher.signature}}
              <span v-if="course.sections>course.pub_sections">共{{course.sections}}課時/已更新{{course.pub_sections}}課時</span>
              <span v-else>共{{course.sections}}課時/更新完成</span>
            </p>
            <ul class="section-list">
              <li v-for="(section, key) in course.section_list" :key="section.name"><span
                  class="section-title">0{{key+1}} |  {{section.name}}</span>
                <span class="free" v-if="section.free_trail">免費</span></li>
            </ul>
            <div class="pay-box">
              <div v-if="course.discount_type">
                <span class="discount-type">{{course.discount_type}}</span>
                <span class="discount-price">￥{{course.real_price}}元</span>
                <span class="original-price">原價：{{course.price}}元</span>
              </div>
              <span v-else class="discount-price">￥{{course.price}}元</span>
              <span class="buy-now">立即購買</span>
            </div>
          </div>
        </div>
      </div>
      <div class="course_pagination block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
             :current- 
page.sync="filter.page"
             :page-sizes="[2, 3, 5, 10]"
             :page-size="filter.page_size"
            layout="sizes, prev, pager, next"
             :total="course_total">
        </el-pagination>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template 
>

<script>
  import Header from "@/components/Header"
  import Footer from "@/components/Footer"

  export default {
    name: "Course",
    data() {
      return {
        category_list: [], // 課程分類列表
        course_list: [],  // 課程列表
        course_total: 0,  // 當前課程的總數量
        filter: {
          course_category:  
0, // 當前使用者選擇的課程分類，剛進入頁面預設為全部，值為0
          ordering: "-id",  // 資料的排序方式，預設值是-id，表示對於id進行降序排列
          page_size: 2,    // 單頁資料量
          page: 1,
         }
       }
     },
    created() {
      this.get_category();
      this.get_course();
     },
    components: {
      Header,
      Footer,
     },
    watch: {
      "filter.course_category": function () {
        this.filter.page = 1;
        this.get_course();
       },
      "filter.ordering": function () {
        this.get_course();
       },
      "filter.page_size": function () {
        this.get_course();
       },
      "filter.page": function () {
        this.get_course();
       }
     },
    methods: {

      handleSizeChange(val) {
        // 每頁資料量發生變化時執行的方法
        this.filter.page = 1;
        this.filter.page_size = val;
       },
      handleCurrentChange(val) {
        // 頁碼發生變化時執行的方法
        this.filter.page = val;
       },
      get_category() {
        // 獲取課程分類資訊
        this.$axios.get(`${this.$settings.base_url}/course/category/`).then(response => {
          this.category_list = response.data;
         }).catch(() => {
          this.$message({
            message: "獲取課程分類資訊有誤，請聯絡客服工作人員",
           })
         })
       },
      get_course() {
        // 排序
        let filters = {
          ordering: this.filter.ordering, // 排序
         };
        // 判決是否進行分類課程的展示
        if (this.filter.course_category > 0) {
          filters.course_category = this.filter.course_category;
         }

        // 設定單頁資料量
        if (this.filter.page_size > 0) {
          filters.page_size = this.filter.page_size;
         } else {
          filters.page_size = 5;
         }

        // 設定當前頁碼
        if (this.filter.page > 1) {
          filters.page = this.filter.page;
         } else {
          filters.page = 1;
         }


        // 獲取課程列表資訊
        this.$axios.get(`${this.$settings.base_url}/course/free/`, {
          params: filters
         }).then(response => {
          // console.log(response.data);
          this.course_list = response.data.results;
          this.course_total = response.data.count;
          // console.log(this.course_list);
         }).catch(() => {
          this.$message({
            message: "獲取課程資訊有誤，請聯絡客服工作人員"
           })
         })
       }
     }
   }
</script>

<style scoped>
   .course {
    background: #f6f6f6;
   }

   .course .main {
    width: 1100px;
    margin: 35px auto 0;
   }

   .course .condition {
    margin-bottom: 35px;
    padding: 25px 30px 25px 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #f0f0f0;
   }

   .course .cate-list {
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
    padding-bottom: 18px;
    margin-bottom: 17px;
   }

   .course .cate-list::after {
    content: "";
    display: block;
    clear: both;
   }

   .course .cate-list li {
    float: left;
    font-size: 16px;
    padding: 6px 15px;
    line-height: 16px;
    margin-left: 14px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    color: #4a4a4a;
    border: 1px solid transparent; /* transparent 透明 */
   }

   .course .cate-list .title {
    color: #888;
    margin-left: 0;
    letter-spacing: .36px;
    padding: 0;
    line-height: 28px;
   }

   .course .cate-list .this {
    color: #ffc210;
    border: 1px solid #ffc210 !important;
    border-radius: 30px;
   }

   .course .ordering::after {
    content: "";
    display: block;
    clear: both;
   }

   .course .ordering ul {
    float: left;
   }

   .course .ordering ul::after {
    content: "";
    display: block;
    clear: both;
   }

   .course .ordering .condition-result {
    float: right;
    font-size: 14px;
    color: #9b9b9b;
    line-height: 28px;
   }

   .course .ordering ul li {
    float: left;
    padding: 6px 15px;
    line-height: 16px;
    margin-left: 14px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    color: #4a4a4a;
   }

   .course .ordering .title {
    font-size: 16px;
    color: #888;
    letter-spacing: .36px;
    margin-left: 0;
    padding: 0;
    line-height: 28px;
   }

   .course .ordering .this {
    color: #ffc210;
   }

   .course .ordering .price {
    position: relative;
   }

   .course .ordering .price::before,
   .course .ordering .price::after {
    cursor: pointer;
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    position: absolute;
    right: 0;
   }

   .course .ordering .price::before {
    border-bottom: 5px solid #aaa;
    margin-bottom: 2px;
    top: 2px;
   }

   .course .ordering .price::after {
    border-top: 5px solid #aaa;
    bottom: 2px;
   }

   .course .ordering .price_up::before {
    border-bottom-color: #ffc210;
   }

   .course .ordering .price_down::after {
    border-top-color: #ffc210;
   }

   .course .course-item:hover {
    box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
   }

   .course .course-item {
    width: 1100px;
    background: #fff;
    padding: 20px 30px 20px 20px;
    margin-bottom: 35px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
    /* css3.0 過渡動畫 hover 事件操作 */
    transition: all .2s ease;
   }

   .course .course-item::after {
    content: "";
    display: block;
    clear: both;
   }

  /* 頂級元素 父級元素 當前元素{} */
   .course .course-item .course-image {
    float: left;
    width: 423px;
    height: 210px;
    margin-right: 30px;
   }

   .course .course-item .course-image img {
    max-width: 100%;
    max-height: 210px;
   }

   .course .course-item .course-info {
    float: left;
    width: 596px;
   }

   .course-item .course-info h3 a {
    font-size: 26px;
    color: #333;
    font-weight: normal;
    margin-bottom: 8px;
   }

   .course-item .course-info h3 span {
    font-size: 14px;
    color: #9b9b9b;
    float: right;
    margin-top: 14px;
   }

   .course-item .course-info h3 span img {
    width: 11px;
    height: auto;
    margin-right: 7px;
   }

   .course-item .course-info .teather-info {
    font-size: 14px;
    color: #9b9b9b;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
   }

   .course-item .course-info .teather-info span {
    float: right;
   }

   .course-item .section-list::after {
    content: "";
    display: block;
    clear: both;
   }

   .course-item .section-list li {
    float: left;
    width: 44%;
    font-size: 14px;
    color: #666;
    padding-left: 22px;
    /* background: url("路徑") 是否平鋪 x軸位置 y軸位置 */
    background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
    margin-bottom: 15px;
   }

   .course-item .section-list li .section-title {
    /* 以下3句，文字內容過多，會自動隱藏，並顯示省略符號 */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: 200px;
   }

   .course-item .section-list li:hover {
    background-image: url("/src/assets/img/play-icon-yellow.svg");
    color: #ffc210;
   }

   .course-item .section-list li .free {
    width: 34px;
    height: 20px;
    color: #fd7b4d;
    vertical-align: super;
    margin-left: 10px;
    border: 1px solid #fd7b4d;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
   }

   .course-item .section-list li:hover .free {
    color: #ffc210;
    border-color: #ffc210;
   }

   .course-item {
    position: relative;
   }

   .course-item .pay-box {
    position: absolute;
    bottom: 20px;
    width: 600px;
   }

   .course-item .pay-box::after {
    content: "";
    display: block;
    clear: both;
   }

   .course-item .pay-box .discount-type {
    padding: 6px 10px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-right: 8px;
    background: #fa6240;
    border: 1px solid #fa6240;
    border-radius: 10px 0 10px 0;
    float: left;
   }

   .course-item .pay-box .discount-price {
    font-size: 24px;
    color: #fa6240;
    float: left;
   }

   .course-item .pay-box .original-price {
    text-decoration: line-through;
    font-size: 14px;
    color: #9b9b9b;
    margin-left: 10px;
    float: left;
    margin-top: 10px;
   }

   .course-item .pay-box .buy-now {
    width: 120px;
    height: 38px;
    background: transparent;
    color: #fa6240;
    font-size: 16px;
    border: 1px solid #fd7b4d;
    border-radius: 3px;
    transition: all .2s ease-in-out;
    float: right;
    text-align: center;
    line-height: 38px;
    position: absolute;
    right: 0;
    bottom: 5px;
   }

   .course-item .pay-box .buy-now:hover {
    color: #fff;
    background: #ffc210;
    border: 1px solid #ffc210;
   }

   .course .course_pagination {
    margin-bottom: 60px;
    text-align: center;
   }
</style>

3 課程詳情前臺

<template>
  <div class="detail">
    <Header/>
    <div class="main">
      <div class="course-info">
        <div class="wrap-left">

          <videoPlayer class="video-player vjs-custom-skin"
                 ref="videoPlayer"
                 :playsinline="true"
                 :options="playerOptions"
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)">
          </videoPlayer>
        </div>
        <div class="wrap-right">
          <h3 class="course-name">{{course_info.name}}</h3>
          <p class="data">{{course_info.students}}人在學&nbsp;&nbsp;&nbsp;&nbsp;課程總時長：{{course_info.sections}}課時/{{course_info.pub_sections}}小時&nbsp;&nbsp;&nbsp;&nbsp;難度：{{course_info.level_name}}</p>
          <div class="sale-time">
            <p class="sale-type">價格 <span class="original_price">¥{{course_info.price}}</span></p>
            <p class="expire"></p>
          </div>
          <div class="buy">
            <div class="buy-btn">
              <button class="buy-now">立即購買</button>
              <button class="free">免費試學</button>
            </div>
            <!--<div class="add-cart" @click="add_cart(course_info.id)">-->
                                                        <!--<img src="@/assets/img/cart-yellow.svg" alt="">加入購物車-->
            <!--</div>-->
          </div>
        </div>
      </div>
      <div class="course-tab">
        <ul class="tab-list">
          <li :class="tabIndex==1?'active':''" @click="tabIndex=1">詳情介紹</li>
          <li :class="tabIndex==2?'active':''" @click="tabIndex=2">課程章節 <span :class="tabIndex!=2?'free':''">(試學)</span>
          </li>
          <li :class="tabIndex==3?'active':''" @click="tabIndex=3">使用者評論</li>
          <li :class="tabIndex==4?'active':''" @click="tabIndex=4">常見問題</li>
        </ul>
      </div>
      <div class="course-content">
        <div class="course-tab-list">
          <div class="tab-item" v-if="tabIndex==1">
            <div class="course-brief" v-html="course_info.brief_text"></div>
          </div>
          <div class="tab-item" v-if="tabIndex==2">
            <div class="tab-item-title">
              <p class="chapter">課程章節</p>
              <p class="chapter-length">共{{course_chapters.length}}章 {{course_info.sections}}個課時</p>
            </div>
            <div class="chapter-item" v-for="chapter in course_chapters" :key="chapter.name">
              <p class="chapter-title"><img src="@/assets/img/enum.svg" alt="">第{{chapter.chapter}}章·{{chapter.name}}
              </p>
              <ul class="section-list">
                <li class="section-item" v-for="section in chapter.coursesections" :key="section.name">
                  <p class="name"><span class="index">{{chapter.chapter}}-{{section.orders}}</span>
                     {{section.name}}<span class="free" v-if="section.free_trail">免費</span></p>
                  <p class="time">{{section.duration}} <img src="@/assets/img/chapter-player.svg"></p>
                  <button class="try" v-if="section.free_trail">立即試學</button>
                  <button class="try" v-else>立即購買</button>
                </li>
              </ul>
            </div>
          </div>
          <div class="tab-item" v-if="tabIndex==3">
            使用者評論
          </div>
          <div class="tab-item" v-if="tabIndex==4">
            常見問題
          </div>
        </div>
        <div class="course-side">
          <div class="teacher-info">
            <h4 class="side-title"><span>授課老師</span></h4>
            <div class="teacher-content">
              <div class="cont1">
                <img :src="course_info.teacher.image">
                <div class="name">
                  <p class="teacher-name">{{course_info.teacher.name}}
                     {{course_info.teacher.title}}</p>
                  <p class="teacher-title">{{course_info.teacher.signature}}</p>
                </div>
              </div>
              <p class="narrative">{{course_info.teacher.brief}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from "@/components/Header"
  import Footer from "@/components/Footer"

  // 載入元件
  import {videoPlayer} from 'vue-video-player';

  export default {
    name: "Detail",
    data() {
      return {
        tabIndex: 2,  // 當前選項卡顯示的下標
        course_id: 0, // 當前課程資訊的ID
        course_info: {
          teacher: {},
         }, // 課程資訊
        course_chapters: [], // 課程的章節課時列表
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0],
          aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）

          sources: [{ // 播放資源和資源格式
            type: "video/mp4",
            src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的視訊地址（必填）
           }],
         }
       }
     },
    created() {
      this.get_course_id();
      this.get_course_data();
      this.get_chapter();
     },
    methods: {
      onPlayerPlay() {
        // 當視訊播放時，執行的方法
        console.log('視訊開始播放')
       },
      onPlayerPause() {
        // 當視訊暫停播放時，執行的方法
        console.log('視訊暫停，可以開啟廣告了')
       },
      get_course_id() {
        // 獲取位址列上面的課程ID
        this.course_id = this.$route.params.pk || this.$route.query.pk;
        if (this.course_id < 1) {
          let _this = this;
          _this.$alert("對不起，當前視訊不存在！", "警告", {
            callback() {
              _this.$router.go(-1);
             }
           });
         }
       },
      get_course_data() {
        // ajax請求課程資訊
        this.$axios.get(`${this.$settings.base_url}/course/free/${this.course_id}/`).then(response => {
          // window.console.log(response.data);
          this.course_info = response.data;
          console.log(this.course_info)
         }).catch(() => {
          this.$message({
            message: "對不起，訪問頁面出錯！請聯絡客服工作人員！"
           });
         })
       },

      get_chapter() {
        // 獲取當前課程對應的章節課時資訊
        // http://127.0.0.1:8000/course/chapters/?course=(pk)
        this.$axios.get(`${this.$settings.base_url}/course/chapters/`, {
          params: {
            "course": this.course_id,
           }
         }).then(response => {
          this.course_chapters = response.data;
         }).catch(error => {
          window.console.log(error.response);
         })
       },
     },
    components: {
      Header,
      Footer,
      videoPlayer, // 註冊元件
     }
   }
</script>

<style scoped>
   .main {
    background: #fff;
    padding-top: 30px;
   }

   .course-info {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
   }

   .wrap-left {
    float: left;
    width: 690px;
    height: 388px;
    background-color: #000;
   }

   .wrap-right {
    float: left;
    position: relative;
    height: 388px;
   }

   .course-name {
    font-size: 20px;
    color: #333;
    padding: 10px 23px;
    letter-spacing: .45px;
   }

   .data {
    padding-left: 23px;
    padding-right: 23px;
    padding-bottom: 16px;
    font-size: 14px;
    color: #9b9b9b;
   }

   .sale-time {
    width: 464px;
    background: #fa6240;
    font-size: 14px;
    color: #4a4a4a;
    padding: 10px 23px;
    overflow: hidden;
   }

   .sale-type {
    font-size: 16px;
    color: #fff;
    letter-spacing: .36px;
    float: left;
   }

   .sale-time .expire {
    font-size: 14px;
    color: #fff;
    float: right;
   }

   .sale-time .expire .second {
    width: 24px;
    display: inline-block;
    background: #fafafa;
    color: #5e5e5e;
    padding: 6px 0;
    text-align: center;
   }

   .course-price {
    background: #fff;
    font-size: 14px;
    color: #4a4a4a;
    padding: 5px 23px;
   }

   .discount {
    font-size: 26px;
    color: #fa6240;
    margin-left: 10px;
    display: inline-block;
    margin-bottom: -5px;
   }

   .original {
    font-size: 14px;
    color: #9b9b9b;
    margin-left: 10px;
    text-decoration: line-through;
   }

   .buy {
    width: 464px;
    padding: 0px 23px;
    position: absolute;
    left: 0;
    bottom: 20px;
    overflow: hidden;
   }

   .buy .buy-btn {
    float: left;
   }

   .buy .buy-now {
    width: 125px;
    height: 40px;
    border: 0;
    background: #ffc210;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-right: 15px;
    outline: none;
   }

   .buy .free {
    width: 125px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 15px;
    background: #fff;
    color: #ffc210;
    border: 1px solid #ffc210;
   }

   .add-cart {
    float: right;
    font-size: 14px;
    color: #ffc210;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
   }

   .add-cart img {
    width: 20px;
    height: 18px;
    margin-right: 7px;
    vertical-align: middle;
   }

   .course-tab {
    width: 100%;
    background: #fff;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px 0 #f0f0f0;

   }

   .course-tab .tab-list {
    width: 1200px;
    margin: auto;
    color: #4a4a4a;
    overflow: hidden;
   }

   .tab-list li {
    float: left;
    margin-right: 15px;
    padding: 26px 20px 16px;
    font-size: 17px;
    cursor: pointer;
   }

   .tab-list .active {
    color: #ffc210;
    border-bottom: 2px solid #ffc210;
   }

   .tab-list .free {
    color: #fb7c55;
   }

   .course-content {
    width: 1200px;
    margin: 0 auto;
    background: #FAFAFA;
    overflow: hidden;
    padding-bottom: 40px;
   }

   .course-tab-list {
    width: 880px;
    height: auto;
    padding: 20px;
    background: #fff;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px 0 #f0f0f0;
   }

   .tab-item {
    width: 880px;
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0 2px 4px 0 #f0f0f0;
   }

   .tab-item-title {
    justify-content: space-between;
    padding: 25px 20px 11px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
    overflow: hidden;
   }

   .chapter {
    font-size: 17px;
    color: #4a4a4a;
    float: left;
   }

   .chapter-length {
    float: right;
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: .19px;
   }

   .chapter-title {
    font-size: 16px;
    color: #4a4a4a;
    letter-spacing: .26px;
    padding: 12px;
    background: #eee;
    border-radius: 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
   }

   .chapter-title img {
    width: 18px;
    height: 18px;
    margin-right: 7px;
    vertical-align: middle;
   }

   .section-list {
    padding: 0 20px;
   }

   .section-list .section-item {
    padding: 15px 20px 15px 36px;
    cursor: pointer;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
   }

   .section-item .name {
    font-size: 14px;
    color: #666;
    float: left;
   }

   .section-item .index {
    margin-right: 5px;
   }

   .section-item .free {
    font-size: 12px;
    color: #fff;
    letter-spacing: .19px;
    background: #ffc210;
    border-radius: 100px;
    padding: 1px 9px;
    margin-left: 10px;
   }

   .section-item .time {
    font-size: 14px;
    color: #666;
    letter-spacing: .23px;
    opacity: 1;
    transition: all .15s ease-in-out;
    float: right;
   }

   .section-item .time img {
    width: 18px;
    height: 18px;
    margin-left: 15px;
    vertical-align: text-bottom;
   }

   .section-item .try {
    width: 86px;
    height: 28px;
    background: #ffc210;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 10px;
    opacity: 0;
    transition: all .2s ease-in-out;
    cursor: pointer;
    outline: none;
    border: none;
   }

   .section-item:hover {
    background: #fcf7ef;
    box-shadow: 0 0 0 0 #f3f3f3;
   }

   .section-item:hover .name {
    color: #333;
   }

   .section-item:hover .try {
    opacity: 1;
   }

   .course-side {
    width: 300px;
    height: auto;
    margin-left: 20px;
    float: right;
   }

   .teacher-info {
    background: #fff;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px 0 #f0f0f0;
   }

   .side-title {
    font-weight: normal;
    font-size: 17px;
    color: #4a4a4a;
    padding: 18px 14px;
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
   }

   .side-title span {
    display: inline-block;
    border-left: 2px solid #ffc210;
    padding-left: 12px;
   }

   .teacher-content {
    padding: 30px 20px;
    box-sizing: border-box;
   }

   .teacher-content .cont1 {
    margin-bottom: 12px;
    overflow: hidden;
   }

   .teacher-content .cont1 img {
    width: 54px;
    height: 54px;
    margin-right: 12px;
    float: left;
   }

   .teacher-content .cont1 .name {
    float: right;
   }

   .teacher-content .cont1 .teacher-name {
    width: 188px;
    font-size: 16px;
    color: #4a4a4a;
    padding-bottom: 4px;
   }

   .teacher-content .cont1 .teacher-title {
    width: 188px;
    font-size: 13px;
    color: #9b9b9b;
    white-space: nowrap;
   }

   .teacher-content .narrative {
    font-size: 14px;
    color: #666;
    line-height: 24px;
   }
</style>

vue框架前後端分離專案之課程介面、頁面、前臺等相關內容-127

1 課程介面 1 課程表設計（關聯關係是欄位和欄位的關係，而不是表和表的關係）-課程分類表：跟課程一對多(一個課程分類下很多課程)-實戰課表（一個課程有很多章節）-課程章節表（一個章節，有很多課時）-課時表-老師

vue框架前後端分離專案之課程頁面前端、課程表分析、編寫及資料錄入等相關內容-126

1 課程頁面前端 <script>import Header from \"@/components/Header\"// import Footer from \"@/components/Footer\"export default {name: \"Course\",data() {return {category: 0,}},components: {Heade

vue框架前後端分離專案之框架介紹及前後端配置等相關內容-116

1 軟體開發規範2 pip換源1、檔案管理器檔案路徑位址列敲：%APPDATA% 回車，快速進入 C:\\Users\\電腦使用者\\AppData\\Roaming 資料夾中2、新建 pip 資料夾並在資料夾中新建 pip.ini 配置檔案3、新增 pip.ini 配置檔

vue框架前後端分離專案之跨域問題及首頁搭建等相關內容-117

1 跨域問題 1 同源策略：瀏覽器的安全策略，不允許去另一個域載入資料2 域：ip或者埠都必須一致3 前後端分離專案會出現跨域4 不使用第三方，自己處理5 CORS：後端技術，跨域資源共享，服務端只要做配置，（本身瀏覽器

vue框架前後端分離專案之git分支合併及首頁登陸註冊介面等相關內容-120

1 版本管理工具2 git init# 當前目錄被管理起來3 git log# 檢視版本管理日誌4 git status # 綠色，紅色5 git add 檔名 # 把檔案提交到暫存區6 git commit -m \'註釋\' # 把暫存區內容提交到版本庫7 git reset --hard

vue框架前後端分離專案之登入註冊頁面及多方式登入、手機號驗證碼介面等相關內容-121

1 登入註冊前端頁面 1.1 Login.vue <template><div class=\"login\"><div class=\"box\"><i class=\"el-icon-close\" @click=\"close_login\"></i><div class=\"content\"><

vue框架前後端分離專案之上線等相關內容-132

1 購買阿里雲伺服器 1 2核4g按流量計費2 centos7.9 2 伺服器配置，軟體安裝 2.1 前置配置

docker-compose 部署 Vue+SpringBoot 前後端分離專案

一、前言本文將通過docker-compose來部署前端Vue專案到Nginx中，和執行後端SpringBoot專案

部署vue+Springboot前後端分離專案的步驟實現

單頁應用 vue經常被用來開發單頁應用（SinglePage Web Application，SPA）,什麼叫做單頁應用呢，也就是隻有一張web頁面的應用，單頁應用的跳轉只需要重新整理區域性資源，大大加快的了我們頁面的響應速度

django框架前後端混合專案之註冊、登入功能及頁面搭建、圖片驗證碼等相關內容-78

0 頭像的上傳 # models.py中不需要動avatar = models.FileField(upload_to=\'avatar/\', default=\'avatar/default.png\')# setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,\'media\')# 由於FileField會自動儲存檔案

django框架前後端混合專案之首頁輪播圖、主頁、後臺管理、頭像顯示等相關內容-79

1 首頁頁面搭建（輪播圖）前端 <div class=\"lbt\"><div id=\"carousel-example-generic\" class=\"carousel slide\" data-ride=\"carousel\"><ol class=\"carousel-indic

django框架前後端混合專案之側邊欄及點贊點踩功能等相關內容-80

1 側邊欄展示 #查詢當前站點下所有分類下的文章數# python是解釋型語言，做垃圾回收# python的cpython直譯器存在，jpython ,pypy### 三個分組查詢res_category =models.Category.objects.filter(blog=user.blog).a

Vue+Springboot前後端分離專案中遇到的困難及解決方案總結（一）

跨域問題專案中使用@CrossOrigin註解跨域失敗。解決方案在後端通過實現WebMvcConfigurer介面然後重寫addCorsMappings方法解決跨域問題。

nginx部署vue+drf 前後端分離專案

1.開發環境 vue-cli 4.x Python 3.9.6 Django 3.2.8 2.前端 vue main.js 中 // axios baseUrL , 這個地址寫後端部署 nginx 監聽的ip:portaxios.defaults.baseURL = \'http://x.xxx.xxx.xxx:81/