本文摘要:从2019年起,K12在线教育,就是个热词。今年疫情影响了大部门企业,但却是在线教育平台生长的契机。 不少高校改为线上授课,许多高校盘算机学院的上机实验也借助了线上教育平台提供的情况。好比,在线编程教育网站“实验楼”就在年头接到了海内部门高校的盘算机开课请求,让学校们可以使用实验楼的在线情况举行教学事情。而“实验楼”这样的在线编程教育网站是如何搭建的呢?在今天给大家分享的在线教育平台搭建教程里,我们就以“实验楼”为例,用 Vue.js 和 Django搭建一个浅易的实验楼。

豪利777注册

从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-shiyanlounpm run serve实验楼的情况下还不能直接检察效果,我们先来把后端转发也搭起来最后再一次性设置。使用 Django 搭建 API 转发出于宁静性思量,我们是不能直接使用实验楼的 API,所以需要一个转发。

Python 的使用不在本实验规模内,所以这里只需要安装运行即可。点击左上角 Terminal -> New Terminal 开启一个新的终端,安装 Python Django 情况,实验情况中已经安装,这里就不需要再重复操作:sudo pip3 install djangosudo pip3 install django-cors-headerssudo pip3 install requests下载转发 API:wget https://labfile.oss.aliyuncs.com/courses/1547/vue-shiyanlou-backend.zipunzip vue-shiyanlou-backend.zip启动后端:cd vue-shiyanlou-backendpython3 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 信息等都可以在这内里举行。

豪利777APP

src:这个目录下存放 Vue 相关的组件,很长一段时间你都市在这个目录下举行开发。src/main.js:它是 Vue 的第一个魅力所在,没有它就没有整个 Vue 页面。src/App.vue:是页面入口文件,通常不会放置太多工具。

你已经完全搭建起了 Vue 和 Python 情况,如果还没看到 Vue 的接待界面,马上点 web 服务 去看一下吧。本节实验竣事后推荐“生存实验情况”,后面的实验都市在本实验基础情况中举行。之后的内容另有“使用 Chrome 分析实验楼 API” “编写实验楼首页” “编写课程详情页”等等。

大家可以登陆“实验楼”,搜索“Vue.js 和 Django 仿浅易版实验楼”,即可检察全部内容。


本文关键词:手把手,教你,搭建,在线,教育平台,从,2019年起,豪利777下载

本文来源:豪利777-www.hwmtj.com

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

从2019年起,K12在线教育,就是个热词。今年疫情影响了大部门企业,但却是在线教育平台生长的契机。 不少高校改为线上授课,许多高校盘算机学院的上机实验也借助了线上教育平台提供的情况。好比,在线编程教育网站“实验楼”就在年头接到了海内部门高校的盘算机开课请求,让学校们可以使用实验楼的在线情况举行教学事情。而“实验楼”这样的在线编程教育网站是如何搭建的呢?在今天给大家分享的在线教育平台搭建教程里,我们就以“实验楼”为例,用 Vue.js 和 Django搭建一个浅易的实验楼。...

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

从2019年起,K12在线教育,就是个热词。今年疫情影响了大部门企业,但却是在线教育平台生长的契机。 不少高校改为线上授课,许多高校盘算机学院的上机实验也借助了线上教育平台提供的情况。好比,在线编程教育网站“实验楼”就在年头接到了海内部门高校的盘算机开课请求,让学校们可以使用实验楼的在线情况举行教学事情。而“实验楼”这样的在线编程教育网站是如何搭建的呢?在今天给大家分享的在线教育平台搭建教程里,我们就以“实验楼”为例,用 Vue.js 和 Django搭建一个浅易的实验楼。...

 咨询购买

咨询热线

 在线咨询  在线预约
TOP