前端Vue项目——首页/课程页面开发及Axios请求 - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、首页轮播图

1、elementUI走马灯

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

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

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请求。

5、分类列表实现

在Couse.vue中，添加课程分类对象到课程分类列表中：

（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 标签中绑定点击事件，并编写方法处理点击事件：

显示效果：

三、免费课程——全部课程实现

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请求发送。

在console中查看请求返回的数据：

3、全部课程列表详情数据

在获取全部课程列表时，可以看到返回的json中包含data: Array(23)，这是一个数组，数组中有一个个课程对象，包含课程详情数据。

将返回结果中的data数组赋给 this.courseDetail。

4、全部课程中数据渲染

v-for 循环data 数组，获取其中的课程对象，通过模板语法绑到页面中。

绑定数据后显示效果如下所示：

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、修改分类列表点击事件传参

在点击事件中除了传递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语言显示如下：