基于Express的线上教育平台

2021年9月30日 10点热度 0条评论 来源: 热心码农小冯

基于Express的在线教育网站项目

· 项目预览



· 前言

每种语言都有其运行环境,如python的运行依靠的是python解释器,Java的运行依靠的是JVM,但是JavaScript语言相对特殊,咱们每个人的电脑上都已经安装了它的运行环境——浏览器。
所以说想要学习JavaScript语言是相当容易的,只要打开我们的浏览器,就可以开始编写JavaScript程序了。
首先打开Chrome浏览器(推荐使用Chrome浏览器),“Ctrl+Shift+I"打开开发者工具,然后点击"Console”,就进入了JavaScript环境了:

  • 我们可以尝试编写一个hello world程序,这里的console.log()就相当于python中的print(),Java种的System.out.println():

到了2009年,Nodejs被开发出来,它是一个基于Chrome V8引擎的JavaScript运行环境,使得JavaScript不止可以运行在浏览器上,从此JavaScript成为了与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言,也就是说,JavaScript现在可以充当一种后端语言的角色了。

同时,本项目用到了Nodejs的Express框架,它是一个保持最小规模的且灵活的Node.js Web应用程序开发框架,为Web和移动应用程序提供一组强大的功能,它相比于Java的那些Web框架更加容易上手,在充当小型项目的服务端时,完全可以胜任。

· 准备工作

  • 安装Nodejs环境,在各论坛可以很容易的搜索到Nodejs在Windows、Ubuntu或者MacOS下的安装配置教程。
  • 下载WebStorm(JavaScript IDE),学生可凭edu邮箱免费使用,在各论坛也可搜索到WebStorm的安装教程。

· 新建Exprsss项目

打开WebStorm,点击“新建项目”,在左侧选择Express项目,右侧输入你想存放此项目的路径和项目名,其余默认就好,最后点击创建:

新建项目过程中WebStorm会自动帮我们下载一些必要的Node包,以及生成特定的目录结构:

  • "public"目录下存放我们的一些静态文件;
  • "routes"目录下 存放了我们的路由JavaScript文件,至于路由是什么,后续我会结合教育网站项目说明;
  • "views"目录下存放我们的前端模板文件;
  • "app.js"时我们项目的入口文件,十分重要。

· 测试运行

我们先不改动当前新建项目的任何内容,先点击运行:

如果前面的步骤没有出错,那么在控制台可以看到我们的程序已经在监听3000端口号了:

现在我们打开Chrome,输入"http://localhost:3000/",就可以看到咱们的新建项目的运行结果了:

· 然后尝试修改一些内容

比如我们能现在想把主页中的"Express"修改为"Hello World"的话,我们该怎么做?
我们先来分析一下自动生成的代码中的一些关键代码:

app.js

// 其他处省略
var indexRouter = require('./routes/index'); // 1
// 其他处省略
app.use('/', indexRouter); // 2
  • 代码 1 指的是把"routes"目录下的"index.js"文件引入,并赋给变量"indexRouter";
  • 代码 2 指的是当客户请求"/"(即"http://localhost:3000/")路径时,交给"indexRouter"这个路由去处理;
  • 这两行代码总的效果就是,当客户请求"/"路径时,交由"routes"目录下的"index.js"去处理。
  • 然后我们再来看"routes"目录下的"index.js"是如何工作的:

/routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) { 
  res.render('index', {  title: 'Express' });
});

module.exports = router;

/* GET home page. */注释下的三行代码,实现的是当客户请求"/“路径时,给客户返回"views"目录下的"index.pug"文件(是一种html模板文件,看不懂不要紧,咱们项目的实现会替换成html文件),并给它注入一个参数”{ title: ‘Express’ }",然后我们再去看"views"目录下的"index.pug"文件:

/views/index.pug

extends layout

block content
  h1= title // 1
  p Welcome to #{ title} // 2

我们在 1 处和 2 处看到了title字样,也就是说我们刚才把"{ title: ‘Express’ }"注入到此,并在 1 处和 2 处对此参数进行了接收,一处以h1大标题的形式显示,另一处与字符串"Welcome to "拼接后以p标签的形式,如果学过一点点html的话,应该对h1标签和p标签并不陌生,只不过pug与html的语法略有不同,但应该可以读懂。

回到刚才的问题,咱们想把主页中的"Express"修改为"Hello World"的话,怎么办呢?

在下面给出修改后的运行结果,同学可以自行尝试,不难:

· 导入项目

先附上项目的Git仓库地址:https://gitee.com/xfeng96/express-edu
同学可以通过以下方式克隆项目至本地:

git clone https://gitee.com/xfeng96/express-edu.git

克隆至本地后,运行如下命令:

cd express-edu
npm install // 下载项目所依赖Node包,如Express,Mysql等

由于项目中使用了数据库,还需要正确创建Mysql数据库,以及对应表,下面给出表的结构:

数据库名为"edu",库里有两个表:“courseinfo”(用于存放课程信息)和"userinfo"(存放用户信息,如账号密码),请同学自行创建:

"courseinfo"表结构,请同学自行创建并填写初始内容:

"userinfo"表结构,请同学自行创建并填写初始内容:

此外还有项目中所有需要连接数据库的地方,请做出相应更改:

var connection = mysql.createConnection({ 
    host: '127.0.0.1',
    port: '3306',
    user: 'root', // 本机的 Mysql 用户名
    password: 'root', // 本机的 Mysql 密码
    database: 'edu'
});
connection.connect();

修改完毕后就可以点击运行了,或者以命令行的形式运行:

cd express-edu
npm install
node ./bin/www

· 结语

通过以上的简单讲解,再通过大家对项目源码的一些简单的阅读,一定可以实现对一些功能的改动!

    原文作者:热心码农小冯
    原文地址: https://blog.csdn.net/m0_46441797/article/details/114841469
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。