「Web全栈教程」手把手教你用 Vue.js + Django 搭建在线教育平台

今年疫情影响了大部分企业,但却是在线教育平台发展的契机。不少高校改为线上授课,许多高校计算机学院的上机实验也借助了线上教育平台提供的环境。

比如,「实验楼」就在年初接到了国内部分高校的计算机开课请求,让学校们可以使用实验楼的在线环境进行教学工作。

那么, 实验楼”这样的在线编程教育网站是如何搭建的呢?

今天给大家分享一个 Web 全栈项目: 以「实验楼」为例,用 Vue.js 和 Django 搭建一个在线教育网站!

课程选择用 Django + Vue.js 来构建前后端分离项目,不仅简洁清晰,而且十分地便捷,重点讲述了运用 Django + Vue.js 来构建前后端分离项目的过程,并直观地展示了两者在运用上的技术细节。

课程知识点:

  • Chrome 分析网络和代码调试、逆向网站 API

  • 基础静态网页的分析布局、整理样式

  • 路由、钩子、前后端通信、Cookies 处理

  • 动画过渡、flex 布局、登录交互

  • Vuex 全局状态管理

  • 设计与封装通用性组件

适合人群:

了解一定前端知识,想要学习 Vue.js 、了解完整开发到上线流程的学员。

课程地址:

https://www.shiyanlou.com/courses/1547

建议大家可以在浏览教程的时候,打开浏览器进入课程页面

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


教程节选:

(以下是教程 第一节 内容,想访问全部内容,点击文末的「阅读原文」,查看全部内容。)

本节实验主要介绍 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。


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

???????????? 点击阅读原文,了解课程详细内容

发布了70 篇原创文章 · 获赞 714 · 访问量 94万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览