手把手教你搭建在线教育平台

从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 仿简易版实验楼”查看。