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