前端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 到原型实例上：
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 文件夹，在这里是创建 api.js 文件来封装axios。
// src/restful/api.js // 导入axios import Axios from 'axios' Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/'; // 设置公共url // 分类列表 api // export const categoryList = function function_name(argument) { export const categoryList = () => { // 匿名函数改为箭头函数 return Axios.get('course_sub/category/list/').then(res=>{ return res.data; // 可以简写为.then(res=>res.data); }) };
（3）修改main.js文件引入api.js
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' // 调用插件 Vue.use(ElementUI); import * as api from './restful/api' console.log(api); Vue.prototype.$http = api; // 可以在各个组件中使用this.$http方法 Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法，绑定给原型对象后，就可以在各个组件中使用this.$http方法了。
（4）Course组件使用新封装的axios
在Couse.vue中，可以通过this.$http获取 Axios对象，使用封装好的接口来发送get请求。
<script> export default { name: "Course", data() { return { categoryList: [], // 课程分类列表 }; }, // 生命周期 在created方法发起ajax请求 created () { console.log(this.$http); // Axios对象 // this.$http.get('course_sub/category/list/') // 发送get请求 this.$http.categoryList() .then(res=>{ // 请求之后对应的结果 console.log(res); if (!res.error_no) { this.categoryList = res.data; } }) .catch(err=>{ console.log(err); }) } }; </script>
5、分类列表实现
在Couse.vue中，添加课程分类对象到课程分类列表中：
<script> export default { name: "Course", data() { return { categoryList: [], // 课程分类列表 }; }, // 生命周期 在created方法发起ajax请求 created () { console.log(this.$http); // Axios对象 // this.$http.get('course_sub/category/list/') // 发送get请求 this.$http.categoryList() .then(res=>{ // 请求之后对应的结果 console.log(res); if (!res.error_no) { this.categoryList = res.data; let category = { // 课程分类对象 id: 0, category: 0, name: "全部" }; this.categoryList.unshift(category); // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度 } }) .catch(err=>{ console.log(err); }) } }; </script>
（1）Javascript unshift()方法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回值：数组对象的新长度。
如果要把一个或多个元素添加到数组的尾部，需使用 push() 方法。
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。
（2）显示效果如下所示
6、分类列表样式
对给激活的列表样式设置特殊样式，并实现分类列表点击跳转：
（1）设置激活中的分类列表样式
这里使用 v-bind 绑定 class，类名 active 依赖于 "index===currentIndex" 的判断结果。
<template>
<div class="course">
<div class="container clearfix">
<!-- 课程分类 -->
<ul class="coursebox">
<li v-for="(category,index) in categoryList" :key="category.id"
:class="{active:index===currentIndex}">
{{category.name}}
</li>
</ul>
<!-- 代码省略 -->
</div>
</div>
</template>
<script>
export default {
name: "Course",
data() {
return {
categoryList: [], // 课程分类列表
currentIndex: 0 // 分类列表选中
};
},
// 代码省略
};
</script>
<style lang="css" scoped>
ul li{
float: left;
margin-right: 24px;
cursor: pointer;
}
ul li.active{
color: #00b4e4;
}
</style>
显示效果：
（2）分类列表点击样式切换
在课程分类的li 标签中绑定点击事件，并编写方法处理点击事件：
<template>
<div class="course">
<div class="container clearfix">
<!-- 课程分类 -->
<ul class="coursebox">
<li v-for="(category,index) in categoryList" :key="category.id"
:class="{active:index===currentIndex}" @click="categoryClick(index)">
{{category.name}}
</li>
</ul>
<!-- 代码省略 -->
</div>
</div>
</template>
<script>
export default {
name: "Course",
data() {
return {
categoryList: [], // 课程分类列表
currentIndex: 0 // 分类列表选中
};
},
methods: {
categoryClick(index) {
this.currentIndex = index; // 修改分类列表的样式
}
},
// 生命周期 在created方法发起ajax请求
created () {
// 代码省略
}
};
</script>
显示效果：
三、免费课程——全部课程实现
1、准备全部课程API
将 src/restful/api.js 文件修改如下：
// 导入axios import Axios from 'axios' Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/'; // 设置公共url // 分类列表 api // export const categoryList = function function_name(argument) { export const categoryList = () => { // 匿名函数改为箭头函数 return Axios.get('course_sub/category/list/').then(res=>{ return res.data; // 可以简写为.then(res=>res.data); }) }; export const allCategoryList = (categoryId) => { return Axios.get(`courses/?sub_category=${categoryId}`).then(res=>res.data); };
ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来。这样可以简化操作，不需要再使用大量的""和+来拼接字符串和变量。
2、get请求获取全部课程信息
改写Course.vue组件，使用 created 钩子调用 methods 中的方法来实现axios请求发送。
<script> export default { name: "Course", data() { return { categoryList: [], // 课程分类列表 currentIndex: 0, // 分类列表选中 categoryId: 0, // 获取所有的课程列表的id }; }, methods: { categoryClick(index) { this.currentIndex = index; // 修改分类列表的样式 }, // 获取分类列表 getCategoryList() { // this.$http.get('course_sub/category/list/') // 发送get请求 this.$http.categoryList() .then(res=>{ // 请求之后对应的结果 console.log(res); if (!res.error_no) { this.categoryList = res.data; let category = { // 课程分类对象 id: 0, category: 0, name: "全部" }; this.categoryList.unshift(category); // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度 } }) .catch(err=>{ console.log(err); }) }, // 获取全部的课程列表 getAllCategoryList() { this.$http.allCategoryList(this.categoryId) .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err); }) } }, // 生命周期 在created方法发起ajax请求 created () { // console.log(this.$http); // Axios对象 this.getCategoryList(); this.getAllCategoryList(); } }; </script>
在console中查看请求返回的数据：
3、 全部课程列表详情数据
在获取全部课程列表时，可以看到返回的json中包含data: Array(23)，这是一个数组，数组中有一个个课程对象，包含课程详情数据。
<script> export default { name: "Course", data() { return { categoryList: [], // 课程分类列表 currentIndex: 0, // 分类列表选中 categoryId: 0, // 获取所有的课程列表的id courseDetail: [] // 课程列表详情数据 }; }, methods: { categoryClick(index) { this.currentIndex = index; // 修改分类列表的样式 }, // 获取分类列表 getCategoryList() { // 代码省略 }, // 获取全部的课程列表 getAllCategoryList() { this.$http.allCategoryList(this.categoryId) .then(res=>{ console.log(res); if (!res.error_no) { // 如果没有错误 this.courseDetail = res.data; } }) .catch(err=>{ console.log(err); }) } }, // 生命周期 在created方法发起ajax请求 created () { // console.log(this.$http); // Axios对象 this.getCategoryList(); this.getAllCategoryList(); } }; </script>
将返回结果中的data数组赋给 this.courseDetail。
4、全部课程中数据渲染
v-for 循环data 数组，获取其中的课程对象，通过模板语法绑到页面中。
<template> <div class="course"> <div class="container clearfix"> <!-- 课程分类 --> <ul class="coursebox"> <li v-for="(category,index) in categoryList" :key="category.id" :class="{active:index===currentIndex}" @click="categoryClick(index)"> {{category.name}} </li> </ul> <div class="courseList"> <div class="detail" v-for="(course, index) in courseDetail" :key="course.id"> <div class="head"> <img src="" alt="" class="backImg"> <b class="mask"></b> <p>{{ course.name }}</p> </div> <div class="content"> <p>{{ course.teacher_description }}</p> <div class="content-detail"> <div> <img src="data:image/svg+xml;base64,PD...Zz4K" alt=""> <span>{{course.learn_number}}</span> <span class="span3" v-if="course.promotion_price"> <span class="s">￥{{course.promotion_price}}</span> <span class="t">{{course.promotion_name}}</span> </span> <span class="span4" v-else>￥{{course.price}}</span> </div> </div> </div> </div> </div> </div> </div> </template>
绑定数据后显示效果如下所示：
5、课程背景色变化渲染
使用 forEach 方法调用数组的每个元素，并将元素传递给回调函数。注意：forEach() 对于空数组是不会执行回调函数的。
基于 forEach 方法来实现背景色变化渲染：
<template>
<div class="course">
<div class="container clearfix">
<!-- 课程分类 -->
<ul class="coursebox">
<li v-for="(category,index) in categoryList" :key="category.id"
:class="{active:index===currentIndex}" @click="categoryClick(index)">
{{category.name}}
</li>
</ul>
<div class="courseList">
<div class="detail" v-for="(course, index) in courseDetail" :key="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>
<!-- 代码省略-->
</div>
</div>
</div>
</template>
<script>
export default {
name: "Course",
data() {
return {
categoryList: [], // 课程分类列表
currentIndex: 0, // 分类列表选中
categoryId: 0, // 获取所有的课程列表的id
courseDetail: [], // 课程列表详情数据
bgColors: ['#4AB2BF','#1895C6','#4C87E0','#A361D9','#F7AE6A','#FF14A0', '#61F0E1',
'#6282A7','#27998E','#3C74CC','#A463DA','#F0A257','#DD4B7A', '#59C6BD','#617FA1',
'#1B92C3','#30A297','#3B73CB','#9E57CA','#A463DA','#1895C6','#A361D9','#FF14A0']
};
},
methods: {
// 代码省略
// 获取全部的课程列表
getAllCategoryList() {
this.$http.allCategoryList(this.categoryId)
.then(res=>{
console.log(res);
if (!res.error_no) { // 如果没有错误
this.courseDetail = res.data;
// 添加背景色
this.courseDetail.forEach((item, index)=>{ // 遍历数组中对象
this.bgColors.forEach((bgColor, i)=>{ // 遍历数组中颜色
if (i===index) {
item.bgColor = bgColor
}
})
});
console.log(this.courseDetail);
}
})
.catch(err=>{
console.log(err);
})
}
},
// 生命周期 在created方法发起ajax请求
created () {
// console.log(this.$http); // Axios对象
this.getCategoryList();
this.getAllCategoryList();
}
};
</script>
给背景色绑定为行内样式，优先显示。同时绑定上背景图片，优化显示效果，效果如下所示：
四、分类列表切换课程
在categoryId=0时，调用getAllCategoryList方法时，默认获取所有课程列表的数据。
要实现分类列表切换，显示对应课程信息，需要在点击事件中添加对应课程分类的categoryId信息。
1、修改分类列表点击事件传参
<template> <div class="course"> <div class="container clearfix"> <!-- 课程分类 --> <ul class="coursebox"> <li v-for="(category,index) in categoryList" :key="category.id" :class="{active:index===currentIndex}" @click="categoryClick(index, category.id)"> {{category.name}} </li> </ul> <!-- 代码略 --> </template>
在点击事件中除了传递index外，还传递了category.id信息。
2、修改分类列表点击事件
categoryClick事件点击触发后，除了获取到对应的传参外，还应执行getAllCategoryList函数，获取对应分类的所有课程。
需要注意，getAllCategoryList() 方法中的 this.categoryId 已经修改为对应的传参值，无需修改方法传参。
methods: { categoryClick(index, id) { this.currentIndex = index; // 修改分类列表的样式 this.categoryId = id; // 赋值课程列表对应id this.getAllCategoryList() }, // 获取全部的课程列表 getAllCategoryList() { console.log(this.categoryId); // 代码略 }
在 getAllCategoryList() 方法中打印 this.categoryId，确定它的值：
点击全部打印0，点击Python打印1，点击Linux运维打印2。
3、显示效果
点击Linux运维显示如下：
点击Go语言显示如下：
