从2019年起，K12在线教育，就是个热词。

今年疫情影响了大部分企业，但却是在线教育平台发展的契机。

不少高校改为线上授课，许多高校计算机学院的上机实验也借助了线上教育平台提供的环境。

比如，在线编程教育网站“实验楼”就在年初接到了国内部分高校的计算机开课请求，让学校们可以使用实验楼的在线环境进行教学工作。

而“实验楼”这样的在线编程教育网站是如何搭建的呢？

在今天给大家分享的在线教育平台搭建教程里，我们就以“实验楼”为例，用 Vue.js 和 Django搭建一个简易的实验楼。

建议大家可以在浏览教程的时候，打开“实验楼”官网，

使用平台搭建好的Linux在线环境，边敲代码边学习，效率更高。

教程节选：

（以下是教程 第一节 内容，想访问全部内容，可以登陆“实验楼”，搜索“Vue.js 和 Django 仿简易版实验楼”，即可查看全部内容。）

本节实验主要介绍 Vue CLI 的使用。学会使用 Vue CLI 创建 Vue 项目，了解 Vue 项目结构，对跨域有个简单了解，同时搭建 Vue 前端开发环境和 Django 后端开发环境，最终配置 Vue 开发环境跨域。

知识点

• Vue-cli 简介
• Vue-cli 创建基础项目
• 使用 Django 搭建 API 转发
• 跨域简述
• Vue 开发环境跨域配置
• 项目结构

项目总体概览

此项目所需的知识点是 HTML+CSS+JS。如果你此前没有这方面的知识，在跟随实验进行的前期可能会受到一些阻碍，不过好消息是，一旦你完成了实验，就会对 HTML+CSS+JS 有一个较为全面的认识，同时为了有成就性的进行开发，我们直接使用实验楼的后端 API，进行真实数据交互体验。

节奏基调

项目一开始不会安装及配置过多的内容，随着实验的深入会逐一将所需的内容安装，项目选用 Vue 作为前端框架，同时没有选用 CSS 框架，这样可以同时实践 HTML+CSS+JS。

Vue-cli简介

Vue-cli 是用来帮我们快速创建 Vue 开发的工具，提供可视化的项目配置、安装插件、同时提供开发服务。

当前阶段下我们只需要知道怎么用它来创建一个 Vue 并跑起来就好了。

Vue-cli 创建项目

安装 Vue-cli，这个过程可能有点儿慢，请耐心等待：

npm install -g @vue/cli

安装之前首先需要安装 Node.js，实验环境中已经安装好了。

接下来我们用 @vue/cli 创建一个名为 vue-shiyanlou 的项目：

vue create vue-shiyanlou

它会提示你选择 preset，这里按 Enter 键选择默认的就好。babel 是一个转码器，我们暂且不需要管它。eslint 是一个代码检查工具，它可以提示我们哪里代码写的不符合规范。

包管理方面使用 yarn 还是 npm 都不会对本实验有所影响。

最后看到：

就是创建成功了。使用命令把项目先跑起来：

cd vue-shiyanlou
npm run serve

实验楼的环境下还不能直接查看效果，我们先来把后端转发也搭起来最后再一次性配置。

使用 Django 搭建 API 转发

出于安全性考虑，我们是不能直接使用实验楼的 API，所以需要一个转发。

Python 的使用不在本实验范围内，所以这里只需要安装运行即可。

点击左上角 Terminal -> New Terminal 开启一个新的终端，安装 Python Django 环境，实验环境中已经安装，这里就不需要再重复操作：

sudo pip3 install django
sudo pip3 install django-cors-headers
sudo pip3 install requests

下载转发 API:

wget https://labfile.oss.aliyuncs.com/courses/1547/vue-shiyanlou-backend.zip
unzip vue-shiyanlou-backend.zip

启动后端：

cd vue-shiyanlou-backend
python3 manager.py runserver

已经运行起来啦，你可能还不知道有哪些 API，如何去获取它们。

不用着急，下节实验会一起探索如何去分析得到的这些 API。

跨域简述

上节中我们说到实验楼的 API 不能直接使用，这是因为浏览器出于安全性的考虑默认对一些没有配置跨域链接的限制。

要打破这一限制通常需要后端配合，我们自然无法去修改实验楼的服务器，所以只能通过一个中转来跨过浏览器这道坎。

Vue 开发环境跨域配置

Vue 开发环境下我们还需要做些配置来达到跨域，同时还要让项目在实验楼中跑起来才行。

首先在 vue-shiyanlou 目录下创建一个 vue.config.js 文件，大部分配置都可以在里面完成：

module.exports = {
  // 还记得我们安装的 eslint 吗，它可以用来规范代码，
  // 如果你不想要它的规范，可以配置这个把它关掉
  chainWebpack: config => {
    config.module.rules.delete("eslint");
  },

  devServer: {
    // 这个保证可以在实验楼环境下跑起代码
    disableHostCheck: true,

    // 开发环境下的跨域配置，现在你可能还不知道有什么用，
    // 当前你只需要知道， target 需要与我们搭建的转发域名相同即可。
    proxy: {
      "/api": {
        target: "http://localhost:8000/api", //设置你调用的接口域名
        changeOrigin: true,
        pathRewrite: {
          "^/api/": ""
        }
      }
    }
  }
};

不要忘记保存呀。

项目结构与总结

之后的一段时间内你都将与 Vue 打交道，熟悉一下 Vue 基本项目结构是有必要的：

• public/index.html：Vue 是一个单页面应用，这是它最终会呈现的页面，一些 CSS 引入，设置 meta 信息等都可以在这里面进行。
• src：这个目录下存放 Vue 相关的组件，很长一段时间你都会在这个目录下进行开发。
• src/main.js：它是 Vue 的第一个魅力所在，没有它就没有整个 Vue 页面。
• src/App.vue：是页面入口文件，通常不会放置太多东西。

你已经完全搭建起了 Vue 和 Python 环境，如果还没看到 Vue 的欢迎界面，马上点 web 服务 去看一下吧。

本节实验结束后推荐“保存实验环境”，后面的实验都会在本实验基础环境中进行。

之后的内容还有“使用 Chrome 分析实验楼 API” “编写实验楼首页” “编写课程详情页”等等。

大家可以登陆“实验楼”，搜索“Vue.js 和 Django 仿简易版实验楼”，即可查看全部内容。