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

一、首页轮播图

1、elementUI走马灯

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

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

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

2、首页引入指示器样式

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

　　显示效果如下所示：

　　

二、免费课程页面

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: ''

});

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

3、免费课程列表实现

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

（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: ''

});

　　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" 的判断结果。

　　显示效果：

　　

（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 方法来实现背景色变化渲染：

　　给背景色绑定为行内样式，优先显示。同时绑定上背景图片，优化显示效果，效果如下所示：

　　

四、分类列表切换课程

　　在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语言显示如下：

　　

 

查看原文