(原创)一个利用express进行快速开发实例

在上一篇“一个Restify+Mongoose+Redis的nodejs开发案例”中我使用了node的restify框架,此次机缘巧合下上手了express框架,而且是带着需求的实例开发。

以前早有耳闻express的大名,也知道有很多达人都是用它来搭建自己的博客,但出于“怂”,没敢上手,这次接触后,发现express还真express上手。

0. 小吹一下Express应用生成器

首先同样是通过“npm install express”来安装
然后按照中文官网上的教程Express 应用生成器就生成了一个完整的项目,真的是超级express,项目结构官网上都有截图。
应用启动后:

  • 访问"http://localhost:3000/"
(原创)一个利用express进行快速开发实例_第1张图片
/.png
  • 访问"http://localhost:3000/users"
(原创)一个利用express进行快速开发实例_第2张图片
/users.png

前者返回的是一个页面,后者返回的是数据,区别在于页面用render、数据用send,这个同其他框架(django/flask/resitfy)是一样的。

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

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

至于为何上面这段代码就将views/index.jade给返回了,没有研究过,就不瞎说了,专注实现后端接口就好。

1. 需求

现在微信当然应用很广泛,假设有一个在公众号上击剑手报名参加赛事活动的需求,现在快速出一个demo,需求过滤后的摘要如下:

  • 主办方可以编辑发布赛事活动(会有一系列的字段)
  • 有一个活动展示页面
    展示所有已发布的赛事活动的列表
    点击一下还可以看活动详情
    在活动详情中还可以看到所有已报名的选手列表
    再点击当然要看选手的信息
  • 有一个选手页面(我的中心)
    如果未注册,当然是要注册、补充信息
    已注册则展示个人已报名活动的列表
  • 选手报名参加活动
    此处需要对接微信支付(demo不处理)

2.接口实现

如前所说,专注后端接口实现,不负责页面处理。
首先根据上述摘要进行建模,有match(赛事)、fencer(击剑手)、enroll(报名)三个model,具体字段这里就不说了,可以查看代码中的schemas.js,哦对,数据库是MongoDB。
所有接口对于数据库的操作不外乎增删改查四个字,这里也不例外,将需求中的行为转化为对数据的操作:

  • match
    • 创建(/api/match/new): 活动的编辑发布
    • 遍历查询(/api/match/list):查询所有上线的活动
    • 详情查询(/api/match/detail):详情中需要展示报名信息,所以需要内嵌enroll的遍历查找
    • 删除:有上线就会有下线,虽然需求没有,但需要预先考虑到,以便设计字段进行软删除,而不是硬删除。
  • fencer的创建、详情查询(内嵌enroll的遍历查询)
    • 创建(/api/fencer/regist):选手的注册
    • 详情查询(/api/fencer/info): 选手信息的展示,包含已报名的活动(只需要查询enroll即可)
  • enroll的创建、详情查询
    • 创建(/api/enroll/join): 选手报名参加活动,为了支持前面二者的关联查询和展示,需要记录相应的id和名称
    • 详情查询(/api/enroll/detail): 报名记录的详情

3.测试/效果展示

同样是使用postman来进行测试
关于POST请求的数据解析,express的默认设置如下:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

第一行的设置是支持“Content-Type:application/json”
第二行的设置是不支持“Content-Type:application/x-www-form-urlencoded”,想支持的话需要将false修改为true
之前调试restify的post接口时,并没有特别注意格式,因为req.body都有数据,这次发现express需要postman中的Body和Headers统一设置才能生效:

  • Headers选择“Content-Type:application/x-www-form-urlencoded”,则Body也需要选择“x-www-form-urlencoded”
  • Headers选择“Content-Type:application/json”的话,则Body需要选择"raw",并严格按照JSON格式要求输入数据,否则会报错

下面展示部分接口访问的截图
1.创建活动


(原创)一个利用express进行快速开发实例_第3张图片
/api/match/new

2.活动列表

(原创)一个利用express进行快速开发实例_第4张图片
/api/match/list

3.没有报名记录的活动详情

(原创)一个利用express进行快速开发实例_第5张图片
/api/match/detail_1

4.有报名记录的活动详情

(原创)一个利用express进行快速开发实例_第6张图片
/api/match/detail_2

5.选手报名后的个人信息

(原创)一个利用express进行快速开发实例_第7张图片
/api/fencer/info

6.报名记录详情

(原创)一个利用express进行快速开发实例_第8张图片
/api/enroll/detail

4.代码repo

express_sample

你可能感兴趣的:((原创)一个利用express进行快速开发实例)