手把手教你搭建在線教育平臺

從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 仿簡易版實驗樓」查看。