lfxc

時間 2019-12-20

標籤 lfxc 简体版

原文原文鏈接

8一、項目初始化和目錄介紹

建立項目：css

`vue init webpack luffy_project`vue

------------------初始化參數-----------------webpack

Project name luffy_project
Project description A Vue.js project
Author
Vue build (Use arrow keys)
Vue build standalone
Install vue-router? Yes
Use ESLint to lint your code? No
Set up unit tests No
Setup e2e tests with Nightwatch? Noios

---------------------------------------------------web

啓動：ajax

`cd luffy_project`vue-router

`npm run dev`npm

8二、ElementUI框架使用和導航欄實現

mitui是基於vue的移動端的框架，elementui是基於vue的pc的element-ui

安裝ElementUI：
cd luffy_project
npm i element-ui -Saxios

引入ElementUI：在main.js中

import Vue from 'vue'
import App from './App'
import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); //調用插件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

使用ElementUI實現導航頁面，效果：

8三、導航欄路由跳轉（略）

8四、linkActiveClass和history模式介紹

linkActiveClass的做用是，點擊了某router-link後，即時刷新了頁面，也能保持以前router-link的樣式

當使用了<router-link > 標籤，在這個標籤選中時能夠設置a標籤添加的樣式名稱，好比，路由選中以後，給a標籤添加「is-active」樣式

在router/index.js中加上「linkActiveClass」，修改a標籤選中後樣式名稱爲「is-active」

修改後，

history模式的做用是去掉URL連接中的「#」號，在router/index.js中配置：

使用elementUI後如何實現一樣的效果：刷新後被選中的標籤樣式還在？

<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu :default-active="onRoutes" mode="horizontal" @select="handleSelect" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b" :router="true">
          <el-menu-item index="/home">首頁</el-menu-item>
          <el-menu-item index="/freeCourse">免費課程</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {

      }
    },
    methods: {
      //打印el-menu-item的index，path
      handleSelect(index, path) {
        console.log(index, path);
      }
    },
 computed: { onRoutes() { //刷新後保存默認激活樣式
 let path = this.$route.path; return path; } }
  }
</script>

<style>
</style>

8五、首頁輪播圖實現

<template>
  <div>
    <el-carousel
    :initial-index="1"
    :autoplay="true"
    :interval="1500"
    indicator-position="outside">
      <el-carousel-item v-for="item in imgArr" :key="item.id">
        <h3><img style="width: 100%;" :src="item.src"></h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data(){
      return{
        imgArr:[
          {
            id:1,
            src:"http://hcdn1.luffycity.com/static/frontend/index/banner3_1567492242.652474.png"
          },
          {
            id:2,
            src:"http://hcdn1.luffycity.com/static/frontend/activity/banner@2x_1572512380.614902.png"
          },
          {
            id:3,
            src:"http://hcdn1.luffycity.com/static/frontend/index/banner2@2x_1567507260.133423.png"
          },
          {
            id:4,
            src:"http://hcdn1.luffycity.com/static/frontend/index/banner1_1567492241.7829425.png"
          }
        ]
      }
    }
  }
</script>

<style>
</style>

8六、免費課程-課程分類列表實現

安裝axios：`cd project` `npm install axios --save`

在main.js中，引入axios：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引入axios
import Axios from 'axios'; Vue.prototype.$axios = Axios; Axios.defaults.baseURL='https://www.luffycity.com/api/v1/';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

使用：

<template>
  <div>
    <el-tabs type="border-card">
        <el-tab-pane v-for="category in categoryList" :key="category.id" :label="category.name"> {{category.name}} </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'FreeCourse',
    data(){
      return {
 categoryList:[], //分類列表
      }
    },
    //生命週期 created中發起ajax請求
    created(){
      this.$axios.get("free/category/") .then(res=>{ this.categoryList = res.data.data; }) .catch(err=>{ console.log(err); })
    }
  }
</script>

<style>
</style>

效果-->

8七、API封裝axios

不用axios直接發get或POST請求，而是使用封裝的方法：

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane v-for="category in categoryList" :key="category.id" :label="category.name">
        {{category.courses}}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'FreeCourse',
    data() {
      return {
        categoryList: [], //分類列表
      }
    },
    methods: {
      getCategoryList() { this.$http.categoryList() .then(res => { this.categoryList = res.data; let category = { id: 0, category: 0, name: '所有' } this.categoryList.unshift(category); }) .catch(err => { console.log(err); }) }
    },
    //生命週期 created中發起ajax請求
    created() {
      this.getCategoryList();
    }
  }
</script>

<style>
</style>

在src下新建restful/api.js文件

api.js：

import Axios from 'axios'; Axios.defaults.baseURL='https://www.luffycity.com/api/v1/'; export const categoryList = ()=>{ return Axios.get("free/category/").then(res=>{ return res.data }) }

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引入axios
// import Axios from 'axios';
// Vue.prototype.$axios = Axios;
// Axios.defaults.baseURL='https://www.luffycity.com/api/v1/';

// 封裝axios
import * as api from '@/restful/api' Vue.prototype.$http = api;

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

88-8九、課程列表數據渲染

90、課程背景色變化

思路：在循環以前，給每一個課程添加顏色bgColor，顏色能夠隨機也能夠在固定列表中取

9一、分類列表點擊切換不一樣課程

「所有」的數據在接口中沒有提供，我在這裏使用的是elementUI中的tab，因此把「所有」的數據拼到列表中。由於elementUI的tab標籤已經實現了切換功能，可是須要全部tab的數據，有幾個tab，HTML中就有幾個div，tab只是實現對他們的顯示和隱藏。

若是不使用elementUI的tab，不論有多少個tab，HTML只有一個div，在tab切換時，能夠發送ajax請求，在事件中改變數據，數據驅動div顯示發生變化，地址欄URL不變

使用tab標籤

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane v-for="(item,index) in categoryList" :key="index" :label="item.name">
        <div v-for="category in item.data" :key="category.id">
          <h1>{{category.name}}</h1>
          <el-row :gutter="20">
            <el-col :span="8" v-for="course in category.courses" :key="course.id">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="course.course_img" class="image">
                <div style="padding: 14px;">
                  <span>{{course.course_slogan}}</span>
                  <div class="bottom clearfix">
                    <span>{{course.learn_number}}人在學</span>
                    <span v-if="course.level===0">入門</span>
                    <span v-if="course.level===1">進階</span>
                    <el-button type="text" class="button">免費</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'FreeCourse',
    data() {
      return {
        categoryList: new Array() //分類列表
      }
    },
    methods: {
      getCategoryList() {
        this.$http.categoryList()
          .then(res => {
            //開始組裝數據，把res.data格式化，加入"所有"標籤的數據
            let total_list = new Array();
            res.data.forEach((item, index) => {
              let v = new Array();
              v.push(item);
              let d = {
                'name': item.name,
                'data': v
              };
              total_list.push(item);
              this.categoryList.push(d);
            })
            let total = {
              'name': '所有',
              'data': total_list
            }
            this.categoryList.unshift(total);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    //生命週期 created中發起ajax請求
    created() {
      this.getCategoryList();
    }
  }
</script>

<style> .el-col { margin: 10px 0;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

更多相關文章...

相關標籤/搜索

lfxc

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。