第四篇【传奇开心果系列】Vant开发移动应用示例：在线教育

系列博文目录

Vant开发移动应用示例系列博文

博文目录

一、项目目标

使用vant实现在线教育应用：提供在线课程、学习资料、作业提交等功能，可以用于在线教育、培训机构等。

二、编程思路

使用vant框架可以很方便地实现教育类小程序的各种功能。以下是一些常见功能的实现方式：

1. 在线课程列表：使用vant的列表组件 van-list 来展示在线课程列表，并通过接口获取课程数据进行渲染。可以添加点击事件，跳转到课程详情页面。

2. 课程详情页：使用vant的卡片组件 van-card 来展示课程详情，包括课程名称、讲师信息、课程简介等。可以在页面中添加按钮或其他交互组件，如购买按钮或加入学习按钮。

3. 学习资料：使用vant的文件选择器 van-uploader 来实现学习资料的上传和下载功能。学生可以上传作业或下载老师提供的学习资料。

4. 作业提交：使用vant的表单组件 van-form 和输入框组件 van-field 来实现作业提交功能。学生可以在表单中填写作业内容，并通过接口将作业提交到服务器。

除了以上功能，还可以结合vant的其他组件来实现更多教育类小程序的功能，如在线测试、讨论区、学习打卡等。同时，vant框架也提供了样式定制和主题配置的能力，可以根据自己的需求进行个性化定制。

三、初步实现项目目标示例代码

当然，以下是一个使用vant框架实现教育类小程序的示例代码：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

这是一个简单的示例，展示了如何使用vant的列表组件 van-list 和单元格组件 van-cell 来展示在线课程列表，并通过点击事件跳转到课程详情页。

在实际开发中，您还需要创建相应的页面和组件，并根据业务需求进行逻辑处理和接口调用。以上示例只是一个基础的参考，具体的实现方式会根据您的具体需求和项目架构而有所不同。

四、第一次扩展示例代码

扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码扩展了课程详情页面，添加了学习资料上传和作业提交的功能。使用vant的文件选择器 van-uploader 实现学习资料的上传，通过事件 @after-read 处理上传后的文件列表。使用vant的表单组件 van-form 和输入框组件 van-field 实现作业提交功能，通过事件 @submit 处理提交作业的逻辑。

五、第二次扩展示例代码

继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码在课程详情页面添加了底部导航栏功能，使用vant的 van-tabbar 和 van-tabbar-item 组件来实现。通过设置 activeTab 的值来控制当前选中的导航栏项，并使用 to 属性设置导航栏项的跳转路径。

六、第三次扩展示例代码

继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码在课程详情页面添加了讨论区功能，通过调用接口获取讨论区帖子列表数据，并展示在页面上。可以根据实际需求进行进一步的交互和功能扩展，比如点击帖子跳转到帖子详情页，发表新的帖子等。

七、第四次扩展示例代码

继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
    <view class="discussion-list">
      <van-card v-for="discussion in discussions" :key="discussion.id">
        <p>{{ discussion.title }}</p>
        <van-button type="info" text="查看详情" @click="goToDiscussionDetail(discussion.id)" />
      </van-card>
    </view>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
    goToDiscussionDetail(discussionId) {
      // 跳转到讨论区帖子详情页，将帖子ID作为参数传递
      uni.navigateTo({
        url: `/pages/discussion-detail?id=${discussionId}`,
      });
    },
  },
};
</script>

以上示例代码在课程详情页面添加了讨论区功能，并展示了讨论区帖子列表。点击帖子的 “查看详情” 按钮，可以跳转到对应的帖子详情页。

八、第五次扩展示例代码

继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
    <view class="discussion-list">
      <van-card v-for="discussion in discussions" :key="discussion.id">
        <p>{{ discussion.title }}</p>
        <van-button type="info" text="查看详情" @click="goToDiscussionDetail(discussion.id)" />
      </van-card>
    </view>
    <van-modal v-model="showModal" title="课程评价" show-cancel-button>
      <van-rate v-model="rating" />
      <van-textarea v-model="comment" :rows="3" placeholder="请输入评价内容" />
      <van-button type="info" text="提交评价" @click="submitRating" />
    </van-modal>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
      showModal: false, // 是否显示评价模态框
      rating: 0, // 课程评分
      comment: '', // 评价内容
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
    goToDiscussionDetail(discussionId) {
      // 跳转到讨论区帖子详情页，将帖子ID作为参数传递
      uni.navigateTo({
        url: `/pages/discussion-detail?id=${discussionId}`,
      });
    },
    submitRating() {
      // 提交课程评价
      console.log('评分:', this.rating);
      console.log('评价内容:', this.comment);
      this.showModal = false; // 关闭评价模态框
      // 调用接口将评分和评价内容提交到服务器
    },
  },
};
</script>

以上示例代码在课程详情页面添加了课程评价功能。点击 “购买” 按钮后，弹出评价模态框，通过 van-modal 组件实现。可以选择评分并输入评价内容，点击 “提交评价” 按钮后，将评分和评价内容提交到服务器。

九、归纳总结

在前面的示例代码中，我们扩展了一个在线课程平台的功能。以下是这些功能的总结：

1. 在首页（index.vue）中，展示了在线课程的列表，并通过点击列表项跳转到对应的课程详情页。

2. 在课程详情页（course-detail.vue）中，展示了课程的详细信息，包括课程名称、教师信息和课程描述。还添加了购买按钮，用于购买课程。

3. 添加了学习资料上传的功能，使用vant的文件选择器 van-uploader 实现。用户可以上传学习资料文件，并将文件添加到文件列表中。

4. 添加了作业提交的功能，使用vant的表单组件 van-form 和输入框组件 van-field 实现。用户可以输入作业内容并提交作业。

5. 添加了底部导航栏的功能，使用vant的 van-tabbar 和 van-tabbar-item 组件实现。用户可以切换到首页、讨论区和打卡页面。

6. 添加了讨论区的功能，在课程详情页展示了讨论区帖子列表。用户可以点击帖子标题，跳转到帖子详情页。

7. 添加了课程评价的功能，通过弹出评价模态框，用户可以选择评分并输入评价内容，然后提交评价到服务器。

这些示例代码涵盖了常见的在线课程平台功能，包括课程展示、购买、学习资料上传、作业提交、讨论区、底部导航和课程评价。您可以根据实际需求和项目架构进行相应的调整和扩展。

希望以上总结对您有所帮助！如果您还有其他问题，请随时提问。