一、首页轮播图
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 到原型实例上:
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 用来统一管理接口。