基于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

· 结语

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