从0到1学习node之express搭建简易论坛

我们需要搭建的这个简易的论坛主要的功能有:注册、登录、发布主题、回复主题。下面我们来一步步地讲解这个系统是如何实现的。

1. 应用生成器

使用上节学习到express的知识,我们也可以从0开始,一步步把系统搭建起来。不过express中还有一个应用生成器,使用这个应用生成器可以快速的创建一个应用的框架,然后我们再在这个框架中完善我们需要的内容。

首先安装应用生成器:

运行express --version若能正常输出版本号,则安装成功。

我们的论坛名称可以为node_express_forum,然后使用express创建一个框架:

运行后,生成器会在这个目录下生成几个目录和文件:

已经生成成功。进入到这个目录:

我们来看下生成的这个框架,方便知道后面怎么进行填充。

打开package.json后,我们看到还需要再安装几个模块才能运行:

好了,到现在框架已搭建完毕,我们来运行一下:

然后在浏览器中输入127.0.0.1:3000,就可以看到了:Express Welcome to Express。

2. 准备工作

基本框架已经创建好了,现在开始我们论坛的准备工作。这里我们的准备工作有3个:模板引擎,模型,数据库,路由。

2.1 模板引擎

express里默认使用的模板引擎是jade,不过我们也可以选择其他的模板引擎,我这里选择了ejs,因为感觉ejs更像是个html文件,方便维护,当然,每个人都有自己的喜好。

然后在app.js中修改模板引擎:

这里我会将views目录中的.jade文件清空,后续使用.ejs编写模板。

2.2 模型

这里我们说的模型是指MVC中的M,主要是进行数据库的连接和操作。创建models目录用来存放文件。

2.3 数据库

我们使用mysql数据库来存放数据,数据库名称可以叫做forum。里面有3张表:user, list, reply。

  • user表(用户)的字段有: id, username, password, regtime
  • list表(主题)的字段有: id, uid(用户id), title, content, createtime
  • reply表(回复)的字段有: id, pid(主题id), uid(用户id), content, createtime

2.4 路由

上节我们是使用app.use()app.get()等方式来实现路由,同时,express还提供了express.Router类来创建模块化。可挂载的路由。Router 实例是一个完整的中间件和路由系统,因此常称其为一个 “mini-app”。

routes/user.js中(这里我将其users.js改为了user.js):

然后在app.js中加载路由模块:

这样就可以访问/user/user/reg页面了。如果需要增加其他的路由,则依照此方式创建添加即可。

3. 注册与登录

我们论坛的功能:注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。

3.1 数据库连接

引入mysql模块,然后使用mysql.createPool()创建连接:

在models目录下创建db.js,其他需要操作数据库的,首先引入db.js:

3.2 注册功能

注册功能的流程我们非常熟悉了:

  1. 加载注册页面;
  2. 用户输入数据后提交;
  3. 处理表单数据然后进行数据库操作

我们在routes/user.js中创建一个reg的get方式的路由用来加载注册页面:

views目录下创建reg.ejs

运行程序,并用浏览器访问127.0.0.1:3000/user/reg,注册页面就出来了。

然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据,post方式过来的数据并不能使用req.query变量获取,而应该使用req.body

凡是设计到数据库处理的,我们都将其放到models中。这里,我们在models中创建一个user.js

我们将检测用户名和插入数据两个功能放到一起处理了,实际应用中,最好是在用户提交数据之前就对用户名进行检测。注册功能的model写好之后,就可以调用了,承接上面的代码,从数据库处理接着编写。

页面若跳转到首页,则说明注册成功了,查看下数据库是否将数据正确的插入了。

到这里,注册功能完成了,完成了吗?还没呢,我们这里注册完成后仅仅是跳转到了首页,还缺少的操作是:

  • 若直接跳转到首页,则默认是已经登录了,这里就需要记录用户的登录状态;
  • 若不跳转到首页,则注册成功后要跳转到登录页面让用户登录

我们这里使用第1种方式,稍后讲解如何记录用户的登录状态。

3.2 登录功能

登录过程与注册是非常类似的,而且比注册还要简单,只需要查询数据库中是否存在对应的用户名和密码即可。

首先编写一个登录页面:

然后在model/user.js中添加上对数据库的登录操作:

最后在routes/user.js中添加上登录的路由:

登录功能也编写好了。

3.3 保存登录状态

我们通常是使用session来保存用户的登录状态,express框架没有对session处理的功能,需要我们引入额外的模块express-session

然后在app.js中引用:

设置完成后,就可以使用session保存数据了。以登录成功后保存数据为例:

还有一个问题:如何把session中的数据传递给模板呢,比如没有登录时,显示“注册,登录”连接,登录后显示“用户名,登录”信息。

app.js中添加:

然后在模板中就可以使用user变量了:

4. 首页及详情页

我们在首页能够展示主题列表并能发表主题,点击链接进入详情页后能该主题进行回复。当然发表主题和对主题进行回复都是在已经登录的状态进行的。

4.1 首页

models目录创建list.js,从数据库中获取主题列表:

routes中的index.js中调用getIndexList获取数据,并调用index.ejs模板:

views/index.ejs创建首页模板:

展示数据完毕。

4.2 发表主题

我们在首页上添加了可以输入标题和内容的两个输入窗口,可以使用ajax的方式提交数据。

这里的提交接口是/list/addtopic,因此我们需要再创建一个这样的路由:在routes目录下创建list.js:

这里用到了list_m.addTopic,因此需要在models/list.js中添加 addTopic 方法:

4.3 详情页

在首页列表中,可以看到,我们将详情页的链接设置为了/list/1.html的方式,也可以设置成其他的方式(比如 /list?pid=1 等),只要设置好路由就行。

在详情页中需要获取到这个主题的详细信息和对这个主题的回复,因此在list_m中:

然后在路由中进行调用,这里使用async简单的控制了下两个异步的流程问题:

稍微解释下async.parallel的功能,下节我们会详细的讲解。 async.parallel([f1, f2, f3,…, fn], fb); 是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了,就可以调用模板渲染。

对主题的回复功能可以自己实现一下。

5. 总结

写着写着就发现篇幅这么大了,而且充斥了大量的代码,需要我们细心的理解。很多人可能从刚开始就想着,能不能在哪里下载到完成的代码呀,可以的。完整的程序可以我的github上进行下载:【node_express_form