项目实训：虚拟现实环境下的远程教育和智能评估系统（十）-CSDN博客

本文链接：https://blog.csdn.net/Hunaldozz/article/details/139904743

关于学生端的前端页面开发

因为前端和后端通常是分离的。前端（用户界面）通过API接口与后端（服务器端）进行通信，以实现数据的获取、提交和更新等功能。

首先调用前端页面所需用到的api函数

我一共调取并编写了以下的api函数用于前后端的链接

以course,js文件为例，这一个文件里主要调用的是一些与课程功能相关的后端api函数：

/ 课程列表(搜索)
export const courseList = (params = {}) => {
  return http().post('/course/api/course/search', params)
}

// 课程详情
export const courseDetail = (params = {}) => {
  return http().post('/course/api/course/view', params)
}

// 课程评论列出
export const courseCommentPage = (params = {}) => {
  return http().post('/course/api/course/comment', params)
}

// 课程详情(登录后)
export const userCourseDetail = (params = {}, token) => {
  return http(token).post('/course/auth/course/view', params)
}

// 获取播放sign
export const playSign = (params = {}, token) => {
  return http(token).post('/course/auth/course/sign', params)
}

export function userStudyePage(params, pageCurrent = 1, pageSize = 20) {
  return http().post('/course/admin/user/study/page', { pageCurrent: pageCurrent, pageSize: pageSize, ...params })
}

// 同步学习进度
export const studyProgress = (params = {}) => {
  return http().post('/course/api/user/study/progress', params)
}

// 创建订单
export const createOrder = (params = {}) => {
  return http().post('/user/auth/order/pay/create', params)
}

// 订单信息
export const orderInfoView = (orderNo) => {
  return http().get('/user/auth/order/info/view?orderNo=' + orderNo)
}

// 课程评论添加
export const courseCommentAdd = (params = {}) => {
  return http().post('/course/auth/user/course/comment/add', params)
}

// 课程收藏添加
export const courseCollectAdd = (params = {}) => {
  return http().post('/course/auth/user/course/collect/add', params)
}

// 免费课程添加
export const userCourseAdd = (params = {}) => {
  return http().post('/course/admin/user/course/save', params)
}

1. `courseList(params)`

作用： 获取课程列表（搜索功能）。
HTTP请求： 使用 http().post 方法向 /course/api/course/search 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

2. `courseDetail(params)`

作用： 获取课程详情。
HTTP请求： 使用 http().post 方法向 /course/api/course/view 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

3. `courseCommentPage(params)`

作用： 获取课程评论列表。
HTTP请求： 使用 http().post 方法向 /course/api/course/comment 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

4. `userCourseDetail(params, token)`

作用： 获取登录用户的课程详情。
HTTP请求： 使用 http(token).post 方法向 /course/auth/course/view 发送POST请求，参数为 params，并使用 token 进行身份验证。
返回值： 返回一个Promise对象，用于处理异步操作。

5. `playSign(params, token)`

作用： 获取播放签名。
HTTP请求： 使用 http(token).post 方法向 /course/auth/course/sign 发送POST请求，参数为 params，并使用 token 进行身份验证。
返回值： 返回一个Promise对象，用于处理异步操作。

6. `userStudyePage(params, pageCurrent = 1, pageSize = 20)`

作用： 分页获取用户学习页面信息。
HTTP请求： 使用 http().post 方法向 /course/admin/user/study/page 发送POST请求，参数为 { pageCurrent, pageSize, ...params }。
返回值： 返回一个Promise对象，用于处理异步操作。

7. `studyProgress(params)`

作用： 同步用户学习进度。
HTTP请求： 使用 http().post 方法向 /course/api/user/study/progress 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

8. `createOrder(params)`

作用： 创建订单。
HTTP请求： 使用 http().post 方法向 /user/auth/order/pay/create 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

9. `orderInfoView(orderNo)`

作用： 获取订单信息。
HTTP请求： 使用 http().get 方法向 /user/auth/order/info/view 发送GET请求，参数为 orderNo。
返回值： 返回一个Promise对象，用于处理异步操作。

10. `courseCommentAdd(params)`

作用： 添加课程评论。
HTTP请求： 使用 http().post 方法向 /course/auth/user/course/comment/add 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

11. `courseCollectAdd(params)`

作用： 添加课程收藏。
HTTP请求： 使用 http().post 方法向 /course/auth/user/course/collect/add 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

12. `userCourseAdd(params)`

作用： 添加免费课程。
HTTP请求： 使用 http().post 方法向 /course/admin/user/course/save 发送POST请求，参数为 params。
返回值： 返回一个Promise对象，用于处理异步操作。

创建和配置Axios实例的模块

Axios是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。主要用于处理HTTP请求的发送和响应。它包含了一些自定义的拦截器，用于处理请求和响应中的一些特定逻辑，如Token管理、错误提示等。