art-template+Express+MongoDB小项目

前言

    为了体验前后端交互的内容，我找了art-template+Express+MongoDB（代码Github->https://github.com/molifenge/selfblog）这个简单的小项目练练手，页面极其简陋，不喜勿喷。本项目是使用前端引擎art-template+Express+MongoDB为主开发的项目，本文将对项目使用的技术和一些细节处进行讲解。

一、效果图

前台界面：文章列表页面+文章详情页面
1.前台页面（含分页功能）

2.文章详情页面+评论功能实现

后台界面：登录页面+用户列表页面+文章列表页面
1.用户登录：

2.用户增加删除（分页功能）

3.用户修改功能（密码比对失败不能修改）

4.文章添加功能（含图片上传）

5.文章修改删除功能

二、功能

已经完成功能

1. 用户登录
2. 用户添加、修改、删除（包含密码验证、数据分页功能）
3. 文章添加、修改、删除（包含图片上传、数据分页功能）
4. 前台文章列表页面显示
5. 文章详情页面
6. 文章评论功能

期待优化或实现

7. 用户注册功能
8. 文章修改时，日期默认原始日期显示
9. 前台文章列表页面自适应布局实现
10. 前台文章列表页面美化
11. 评论功能编辑器转Markdown编辑器

三、主要使用技术

12. 前端引擎art-template+express-art-template
13. Express
14. MongoDB
15. body-parser插件(处理post参数)
16. formidable插件(解析上传文件数据)
17. bcrypt插件(对密码进行加密)
18. mongoose-sex-page模块(分页功能实现)
19. Joi插件(数据校验)
20. express-session(用来存储登录用户的sessionId)

四、快速上手Express+MongoDB

Express的使用

4.1 Express

    Express是一个基于Node平台的web应用开发框架，它提供了一系列强大的特性，来帮助我们创建各种Web应用。

    首先，我们要先安装Express。

npm i express

    然后，我们利用express来创建网站服务器，以便后面进行页面交互：

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
//监听端口，这边监听的是8080端口，即可以通过localhost:8080/访问该项目中的文件
app.listen(8080):

4.2 Express的中间件

    中间件就是一堆方法，Node提供中间件可以拦截请求，从而对请求做出响应，或者是将请求交给下一个中间件。

以下是我看见过的一个关于中间件的示意图，表示的很清楚：

    而中间件主要由两个部分构成，即中间件方法和请求处理函数。中间件方法由Express提供，用来拦截请求；请求处理函数由程序员编写，用来处理请求。
    比如app.use(path,function(req,res,next))。第一个参数path是要请求的路径，第二个参数是对应的请求处理函数，这个function又包括三个参数，即req、res、next。req是请求；res是响应；next是一个方法，因为我们在程序中可能不止使用一个中间件，next方法就是用来放行请求，跳到下一个中间件的，这个参数在要用到的时候写，如果没用到可写可不写。

    在这次项目中，我主要使用了几个中间件：app.use()、app.get()、app.port()，还有内置中间件express.static()，这几个中间件的作用大都有些不同。
    app.use(path,function(req,res,next))——向页面path发出请求时（无论是什么请求），调用后面那个请求处理函数。
    app.get(path,function(req,res,next))——向页面path发出get请求时，调用后面那个请求处理函数。
    app.port(path,function(req,res,next))——向页面path发出get请求时（表单提交数据），调用后面那个请求处理函数。
    app.use(express.static(path.join(__dirname,'public)))——开放静态资源文件，这样就可以用url访问项目中的图片、css等静态资源了（public页面用来存放静态资源）。

4.3 项目中的路由文件

    在项目中，我把所有的前端页面放在了views文件夹中，所有的路由处理逻辑放在了route文件夹中。而后，根据项目前后台，进一步区分admin（后台）和home（前台）两个文件夹。

    为了使文件彼此之间依赖关系更加清晰，将所有的路由处理函数都封装成一个路由处理模块，然后将这个模块一整个代入。根据前后台功能，将路由处理分成两个主要文件，admin.js负责处理对后台系统页面的请求，home.js负责对前台页面的请求。于是在app.js中这样写：

//导入两个主要的路由处理逻辑
const admin = require('./route/admin');
const home = require('./route/home');
//当访问localhost:8080/admin时会向admin发出请求，home同上
app.use('/admin',admin);
app.use('/home',home);

而后，admin.js中通过express.Router()创建路由，随后用中间件来拦截页面请求并对应相应的路由处理模块。最后，不要忘记了将一整个模块导出，即module.exports = admin。文件中这样写：

// 后台管理
//引用express框架
const express = require('express');
//创建博客展示页面路由
const admin = express.Router();

//渲染登录页面
admin.get('/login',require('./admin/loginPage'));
//接收登录页面的数据并进行判断
admin.post('/login',require('./admin/login'));

//创建用户列表路由
admin.get('/user',require('./admin/userPage'));

//实现退出功能
admin.get('/logout',require('./admin/logout'));

// 1.用户管理
// 创建用户编辑页面路由
admin.get('/user-edit',require('./admin/user-edit'));
//创建实现用户添加功能路由
admin.post('/user-edit',require('./admin/user-edit-fn'));
// 用户修改路由
admin.post('/user-modify',require('./admin/user-modify'));
// 删除用户功能路由
admin.get('/delete',require('./admin/delete'));

// 2.文章管理
// 文章列表页面路由
admin.get('/article',require('./admin/article'));
// 文章编辑页面路由
admin.get('/article-edit',require('./admin/article-edit'));