前端Vue项目——页面开发及Axios请求

一、首页轮播图

1、elementUI走马灯

　　elementUI中 Carousel 走马灯，可以在有限空间内，循环播放同一类型的图片、文字等内容。

　　这里使用指示器样式，可以将指示器的显示位置设置在容器外部：

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

　　indicator-position 属性定义了指示器的位置。默认情况下，会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。

2、首页引入指示器样式

　　编写 src/components/Home/Home.vue 文件如下所示：

<template>
  <el-carousel indicator-position="outside" height="600px">
    <el-carousel-item v-for="item in lunboImgs" :key="item.id">
      <img :src="item.imgSrc" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        lunboImgs: [
          {
            id: 1,
            imgSrc: 'https://hcdn1.luffycity.com/static/frontend/index/banner1(4)_1539945492.0492468.png'
          },
          {
            id:2,
            imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/骑士(1)_1539945488.713867.png'
          },
          {
            id:3,
            imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png'
          },
          {
            id:4,
            imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/home-banner4_1535545832.4715614.png'
          }
        ]
      };
    },
    created() {
      console.log(localStorage);
    }
  };
</script>

<style lang="css" scoped>
img{
  width: 100%;
  height: 100%;
}
</style>

　　显示效果如下所示：

二、免费课程页面

1、引入和使用Axios

　　由于需要使用Ajax发送请求，因此需要引入Axios。

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。首先下载Axios:

$ npm install axios -S

　　安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 不能use ，只能在每个需要发送请求的组件中即时引入。

2、在main.js中引入axios

　　要解决要在每个组件即时引入 axios 的问题，有两种开发思路：一是需要在引入 axios后修改原型链；二是结合Vuex，封装一个action。

　　这里使用引入axios后修改原型链的方法，在 main.js 中导入和挂载 Axios 到原型实例上：

扫描二维码关注公众号，回复： 6633753 查看本文章

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'
import '../static/global/global.css'
// 导入axios
import Axios from 'axios'
Vue.prototype.$http = Axios;  // 挂载在原型上，后面可以在任意组件使用
Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/';   // 设置公共url

// 调用插件
Vue.use(ElementUI);

Vue.config.productionTip = false;

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

　　在main.js中添加这两行红色代码后，就能直接在组件的 methods 中使用 $http 命令了。

3、免费课程列表实现

　　编写 src/components/Course/Course.vue 文件如下所示：

<template>
  <div class="course">
    <div class="container clearfix">
      <!-- 课程分类 -->
      <ul class="coursebox">
        <li v-for="(category,index) in categoryList" :key="category.id">
          {{category.name}}
        </li>
        <li>
          Python
        </li>
      </ul>
      <div class="courseList">
        <div class="detail">
          <div class="head">
            <img src="" alt="" class="backImg">
            <b class="mask"></b>
            <p>Python开发21天入门</p>
          </div>
          <div class="content">
            <p>Python以其简洁、优雅、高效的特点，称为目前最流行的4大主流开发语言</p>
            <div class="content-detail">
              <div>
                <img src="data:image/svg+xml;base64,PD9...4K" alt="">
                <span>1836</span>
                <span>初级</span>
                <span class="span3">
                  <span class="s">￥99.0</span>
                  <span  class="t">免费</span>
                </span>
                <span class="span4"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Course",
    data() {
      return {
        categoryList: [], // 课程分类列表
      };
    },
    // 生命周期 在created方法发起ajax请求
    created () {
      console.log(this.$http);   // Axios对象
      this.$http.get('course_sub/category/list/')    // 发送get请求
        .then(res=>{   // 请求之后对应的结果
          console.log(res);
          console.log(res.data.data);   // 获取列表中数组
          if (!res.data.error_no) {
            this.categoryList = res.data.data;
          }
        })
        .catch(err=>{
          console.log(err);
        })
    }
  };
</script>

（1）课程列表显示效果

　　样式略，显示效果如下所示：

（2）在created方法发送get请求

// 生命周期 在created方法发起ajax请求
created () {
  console.log(this.$http);   // Axios对象
  this.$http.get('course_sub/category/list/')    // 发送get请求
  .then(res=>{   // 请求之后对应的结果
    console.log(res);
    console.log(res.data.data);   // 获取列表中数组
    if (!res.data.error_no) {
      this.categoryList = res.data.data;
    }
  })
  .catch(err=>{
    console.log(err);
  })
}

　　完整的请求应包括 .then 和 .catch。当请求成功时，会执行 .then，否则执行 .catch。

4、axios模块封装

　　在vue项目中，与后台交互获取数据通常是使用的 axios 库。使用axios发起一个请求是比较简单的事，但是如果axios没有进行封装复用，项目越来越大时，会引起代码冗余，使代码变得难以维护。因此需要对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码更加容易维护。

（1）封装要点

统一 url 配置；
统一 api 请求；
request(请求)拦截器，例如：带上token等，设置请求头
response(响应)拦截器，例如：统一错误处理，页面重定向等
根据需求，结合Vuex做全局的loading动画或错误处理
将axios封装成Vue插件使用

（2）axios组件准备

　　在项目的src目录中，新建 restful 文件夹，在里面创建 http.js 和 api.js 文件。

　　http.js 用来封装 axios，api.js 用来统一管理接口。