这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/ReadingClub
一、form验证
MVC的form验证有三个地方可以做,第一道关就是前端提交之前,第二道关就是在数据保存之前,也就是在controller中做验证,第三道关就是数据保存的时候,也就是如果提交的数据模型不符合实体定义的约束,数据是无法保存的,这是最后一道防线。第一道关主要是依赖于js或者jquery框架,比较常用的是jquery.validate.js。如果是Asp.net MVC 可以自动生成验证规则,这里就不细究了,网上有很多文章。第二层和各自的业务逻辑有关,也需要做一些必要验证,防止前端禁止JavaScript,而提交不合法数据,这里是要讲基于Mongoose的第三层验证。
1.回顾模型定义
我们先回顾一下之前用Mongoose定义的book模型:
var bookSchema = new mongoose.Schema({ title: { type: String, required: true }, rating: { type: Number, required: true, min: 0, max: 5 }, info: { type: String, required: true }, img: String, tags: [String], brief: { type: String, required: true }, ISBN: String, });
每个属性定义了类型和是否必须,还可以添加min,max,默认值等其他约束。如果提交的模型不满足这些约束,将不能保存成功。相当于Asp.net MVC中的DataAnnotations的作用。后面的form验证就基于此。
2.添加路由
我们需要增加4个路由规则,2个用于添加(一个get,一个post),一个用于删除,一个用于上传图片:
router.get('/book/create', homeController.bookcreateview); router.post('/book/create', homeController.doBookCreate); router.delete('/book/:id', homeController.delete); router.post('/uploadImg', homeController.uploadImg);
基于Express的路由,我们可以创建Restful的路由规则。路由位于app_server文件夹下。
3.添加控制器方法
home.bookcreateview:
module.exports.bookcreateview = function (req, res) { res.render('bookCreate', { title: '新增推荐图书' }); };
这里直接是一个get请求,所以直接用render去渲染视图,当然这个bookCreate视图接下来会创建。
doBookCreate:
module.exports.doBookCreate = function (req, res) { var requestOptions, path, postdata; path = "/api/book"; postdata = { title: req.body.title, info: req.body.info, ISBN: req.body.ISBN, brief: req.body.brief, tags: req.body.tags, img: req.body.img, rating:req.body.rating, }; requestOptions = { url: apiOptions.server + path, method: "POST", json: postdata, }; request(requestOptions, function (err, response, body) { console.log("body.name", body.name, response.statusCode); if (response.statusCode === 201) { res.redirect("/detail/"+body._id); } else if (response.statusCode == 400 && body.name && body.name == "ValidationError") { res.render('bookCreate', { title: '新增推荐图书', error:"val"}); } else { console.log("body.name",body.name); info(res, response.statusCode); } }); };
info:
function info (res, status) { var title, content; if (status === 404) { title = "404, 页面没有找到"; content = "亲,页面飞走了..."; } else if (status === 500) { title = "500, 内部错误"; content = "尴尬...,发生错误"; } else { title = status + ", 有什么不对劲"; content = "某些地方可能有些错误"; } res.status(status); res.render('info', { title : title, content : content, status: status, }); };