Node.js 切近实战(二) 之图书管理系统(图书信息录入)

上一节我们讲了图书管理系统的登录,相信大家对jade模板和angular js也有了了解,今天的话我们来看一下图书信息录入。在这里我们准备使用Nosql数据库,本篇博客中使用的是MongoDB。OK。Mongo DB的安装我就不多说了,那么Node.Js平台使用mongoDB我们使用什么扩展包好呢,我觉得还是mongoose比较合适,封装了好多针对mongodb的方法,简单易用。

首先我们来看一下图书model的设计bookInfo.js。

var mongoose = require(‘mongoose‘);
var Schema = mongoose.Schema;

var bookSchema = new Schema({
    _id: Schema.Types.ObjectId,
    Title: { type: String, index: true, required: true },
    ISBN: { type: String, required: true , unique: true },
    Author: { type: String },
    Price: { type: Number, min: 0.1, max: 99999 },
    Press: { type: String, required: true },
    PressDate: { type: Date, default: Date.now },
    Description: { type: String, required: true },
    Image: { type: Schema.ObjectId }
}, {
    strict: true, 
    toObject: {
        virtuals: true
    },
    toJSON: {
        virtuals: true
    }
});

bookSchema.virtual(‘bookFullName‘).get(function () {
    return this.title + ‘(‘ + (this.author? this.author:‘‘) + ‘)‘;
});

bookSchema.methods.saveBookInfo = function (callback) {
    this._id = new mongoose.Types.ObjectId;
    this.save(callback);
}

bookSchema.set(‘collection‘, ‘books‘);
var bookModel = mongoose.model("books", bookSchema);
exports.bookModel = bookModel;

首先在代码中我们看到引用了mongoose扩展包,在VS中我们可以这样引用扩展包。

点击Install New npm Packages

搜索mongoose,找到后点击Install Package或者你用命令行安装也行。

OK,此时我们require(‘mongoose‘)加载mongoose模块。接着我们定义了一个bookSchema,定义了一些字段,type是它的类型,index是否支持索引,required是否可以为空,类似于sqlserver的is not null,unique是不重复约束,default默认值,

ObjectId是该条数据唯一标识,类似SqlServer的主键,格式类似于GUID。在这里我们发现Image这个字段是一个ObjectId,说明这是一个外部唯一标识,类似于SqlServer的外键。接下来是strict:true,这个意思是必须是我们定义的字段才能存到mongodb中,未经过schema定义的字段是存不进去的。OK,Schema定义好之后,我们给bookSchema定义了一个virtual字段,virtual字段就是虚拟的,意思是在查询返回时,可以在返回结果中包含这个虚拟字段。但是这个字段本身不是mongodb schema中的。

另外上面的toJson和ToObject都是针对这个virtual字段的,如果为false,则不论是返回Json还是Object都不会包含这个virtual字段。

接下来我们给Schema定义了method,saveBookInfo,先将主键值生成,再走save方法,save方法是mongoose提供的,mongoose提供了一系列增删改查的方法,单个批量都支持,非常方便。

最后我们设置collection的名称,并定义model,并将bookModel 模块公开。

好了,到这里,关于Schema的定义就说完了,接下来我们要给客户端页面提供rest api了,先链接mongodb,代码如下

#!/usr/bin/env node
var debug = require(‘debug‘)(‘ChinaBook‘);
var mongoose = require(‘mongoose‘);
initMongoose();
var app = require(‘../app‘);
app.set(‘port‘, process.env.PORT || 3000);

var server = app.listen(app.get(‘port‘), function() {
    debug(‘Express server listening on port ‘ + server.address().port);
});

function initMongoose(){
	mongoose.connect(‘localhost:27017/ChinaBook‘,function(err, db){
		if (err) {
			console.log(‘Unable to connect to the mongoDB server. Error:‘, err);
		} else {
			console.log(‘Connection established to‘, ‘localhost:27017/ChinaBook‘);
		}
	});

}

initMongoose就是连接使用mongoose api 连接mongodb,连接上之后,再进入我们的controller代码bookmng.js。

var bookSchemas = require(‘../model/bookinfo.js‘);
var bookMsgRes = require(‘../framework/message/book_msg.js‘);
var validator = require(‘validator‘);
var mongoose = require(‘mongoose‘);

var bookModel = bookSchemas.bookModel;

exports.bookSave = function (req, res) {
    if (validator.isNull(req.body.Title)) {
        res.json(bookMsgRes.buildJsonErrorRes(‘BookTitleEmpty‘));
        return;
    }
    
    if (!validator.isISBN(req.body.ISBN)) {
        res.json(bookMsgRes.buildJsonErrorRes(‘ISBNInCorrect‘));
        return;
    }
    
    if (!validator.isFloat(req.body.Price, { min: 0.01, max: 999999 })) {
        res.json(bookMsgRes.buildJsonErrorRes(‘PriceInCorrect‘));
        return;
    }
    
    if (validator.isNull(req.body.Press)) {
        res.json(bookMsgRes.buildJsonErrorRes(‘PressEmpty‘));
        return;
    }
    
    if (validator.isNull(req.body.Description)) {
        res.json(bookMsgRes.buildJsonErrorRes(‘DescriptionEmpty‘));
        return;
    }
    
    var bookEntity = new bookModel(req.body);
    bookEntity.saveBookInfo(function (error, doc) {
        if (error) {
            res.json({ isSuc: false, msg: error.message });
        } else {
            res.json({ isSuc: true });
        }
    });
}

在这里我们引入刚才定义的schema文件,拿到公开的bookModel模块。我们公开一个bookSave方法,参数为req,res,从这个名称我们都能看出这个是http request和http response。方法中先对传入的字段进行验证,验证我们使用的validator扩展包,还是像引mongoose那样去安装。Validator有很多验证方法

详情请看:https://www.npmjs.com/package/validator

OK,验证通过之后,我们直接将客户端传递的json数据转化成model,在这里只要客户端的字段和服务端schema的一致,就没有问题,你就想反序列化。最后我们调用booModel的saveBookInfo方法,结束。在这里需要注意,如果是post方式提交,则需要用req.body取值,如果是get?xx=xxx,就是req.query,如果是get/:id,则取值就是req.params.id。至此,我们的controller就写完了,那么我们现在将它公开称为rest api。

var router = express.Router();
router.post(‘/book‘, bookRoutes.bookSave);

那么在客户端只需要调用/book就可以了。

看一下客户端的页面代码以及js。

#book_typeIn(ng-controller=‘bookTypeInCtrl‘)
 label(style=‘font-size:17px‘) Book Info:
 hr.panel-line
 form(name=‘bookForm‘)
  .row.row-middle-height
   .col-md-12
    .col-md-1
     label Title:
    .col-md-5
     input.form-control(name=‘title‘ type=‘text‘ maxlength=‘50‘ placeholder=‘Book name‘ ng-model=‘Book.Title‘ required)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.title.$error.required‘) Title can‘t be empty.
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label ISBN:
    .col-md-5
     input.form-control(name=‘ISBN‘ type=‘text‘ ng-model=‘Book.ISBN‘ maxlength =‘30‘ required)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.ISBN.$error.required‘) ISBN can‘t be empty.
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label Author:
    .col-md-5
     input.form-control(type=‘text‘ maxlength =‘30‘ ng-model=‘Book.Author‘)
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label Price:
    .col-md-5
     input.form-control.tooltip-show(name=‘price‘ type=‘text‘ maxlength=‘10‘ ng-model=‘Book.Price‘ data-toggle=‘tooltip‘ data-placement=‘top‘ ng-pattern=‘/^[0-9]+(.[0-9]{2})?$/‘ title=‘Two decimal places‘)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.price.$error.pattern‘) Price is incorrect.
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label Press:
    .col-md-5
     input.form-control(name=‘press‘ type=‘text‘ maxlength=‘50‘ ng-model=‘Book.Press‘ required)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.press.$error.required‘) Press can‘t be empty.
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label PressDate:
    .col-md-5
     kendo-date-picker(name=‘pressDate‘ ng-model=‘Book.PressDate‘ k-format=‘yyyy-MM-dd‘ onkeydown=‘return false;‘ required)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.pressDate.$error.required‘) PressDate can‘t be empty.
  .row.row-margin.row-middle-height
   .col-md-12
    .col-md-1
     label Description:
    .col-md-5
     input.form-control(name=‘description‘ type=‘text‘ maxlength=‘200‘ ng-model=‘Book.Description‘ required)
    .col-md-6
     p.error-message(ng-show=‘submitted && bookForm.description.$error.required‘) Description can‘t be empty.
  .row-margin
     button.k-button.k-primary.btn-width-70(type=‘button‘ ng-click=‘bookInfoSave()‘) Save
     button.k-button.k-primary.btn-width-70(type=‘button‘ ng-click=‘bookInfoReset()‘ style=‘margin-left:10px‘) Reset

 block scripts
  script(type=‘text/javascript‘ src=‘/javascripts/local/book/bookTypeIn.js‘)

一个很简单的页面,使用了kendo的datepicker控件,angularjs的绑定,用一个book对象绑定,angular数字及非空,正则表达式验证, 很简单,就不多说了,看一下js。

var appModule = angular.module(‘bookTypeInModule‘, ["kendo.directives"]);
appModule.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

appModule.controller(‘bookTypeInCtrl‘, function ($scope, $http, $location) {
    angular.element(‘.tooltip-show‘).tooltip(‘show‘);
    Messenger.options = {
        extraClasses: ‘messenger-fixed messenger-on-top messenger-on-center‘,
        theme: ‘flat‘
    }
    
    var now = new Date();
    $scope.Book = {};
    
    $scope.bookInfoSave = function () {
        $scope.submitted = true;
        if (!$scope.bookForm.$valid) {
            return;
        }
        
        $http({
            method: "post",
            url: "/book",
            headers: { ‘Content-Type‘: ‘application/json‘ },
            data: $scope.Book
        }).success(function (data) {
            if (data.isSuc) {
                $scope.bookInfoReset();
                $scope.showMsg(‘success‘, ‘Saved successfully!‘);
            }
            else {
                $scope.showMsg(‘error‘, data.msg);
            }
        });
    }
    
    $scope.bookInfoReset = function () {
        $scope.Book = {};
        $scope.submitted = false;
    }

    $scope.showMsg = function (type, msg) {
        Messenger().post({
            message: msg,
            type: type,
            hideAfter: 2,
            showCloseButton: true
        });
    }

    $scope.onError = function (error) { 
        $scope.UploadError = error;
    }
});

angular.element(‘#book_typeIn‘).data(‘$injector‘, ‘‘);
angular.bootstrap(angular.element(‘#book_typeIn‘), [‘bookTypeInModule‘]);

弹出消息我们使用messager,在保存的时候,先检查客户端check有没有通过,通过了,直接将Book对象post到rest api /book,ok,到此,代码就全部完成了。注意最后一句,我们都知道angularjs只有一个启动入口,在这里我每点一个菜单,都会加载一个新页面,所以假如之前的这个页面已经被注入成启动页面,我们再将其设置为启动页面就会报错,所以我们先将该页面注入设置为空,再将该页面设置为启动页面就不会报错。

最后,我们看一下运行结果。

kendo控件还是很好看的,很很多套皮肤,验证效果如下

更多精彩,请看下节分享。唉,软通只给我8k,怎么办,还要继续努力。

时间: 2024-08-04 10:28:47

Node.js 切近实战(二) 之图书管理系统(图书信息录入)的相关文章

Node.js 切近实战(二) 之图书管理系统

上一篇Node.Js切近实战讲述了如何在VS上搭建Node.Js开发环境,相信看过那篇博客的同学,你已经对Node.Js有了好感,多了解些技术还是很有必要的.所谓实战见真功,还是要实战才行.我看博客园上一些专家荣誉的人写的博客,全是理论,没有实战,没有实战就没有发言权.熟能生巧,实战出理论. 我们看一下项目结构 典型的NodeJs三层架构,controller,model,view,这里每个部分什么职能,我就不多说了. 首先我们看一下登录界面,先上图,我看博客的时候,会首先看博客中有没有图,比如

Node.js 切近实战(二) 之图书管理系统(图书查询)

最近又当上了Master,负责带项目,有时候,遇到的问题我很郁闷.比如一个Story,需求中说的是将单个修改改为批量修改,举个例子,商品信息修改,之前是用一个商品id修改,但是现在改成多个商品id修改.我的意思是直接将文本框宽度高度加大,支持回车换行就行了,然后再将API修改为支持批量查询.这个界面上上面是一个Grid,下面是一个表单,选择Grid的数据后,会加载到下面表单.只能加载一条下去,就因为这个,有人提出如果加载一个下去,那么大个文本框只显示一个选中的商品id,视觉上无法接受.说是要将选

Node.js 切近实战(七) 之Excel在线(文件&文件组)

最近西安的天气真他妈的热,感觉还是青海的天气美,最高温28度.上周逛了青海湖,感觉还是意犹未尽,其实我还是很喜欢去一趟西藏的,但是考虑到花费也没人陪我,我暂时放弃这个念头.计划去一下重庆或者甘南,也许是现实的. OK,废话不多说,今天我们来看一下Excel在线部分的文件和文件组.首先我们来看一下页面,调一下胃口.俗话说无图无真相,先看图. 没错,还是Telerik Kendo UI,其实我面试的时候当听到别人说自己用的是EasyUI和ExtJs的时候,我就不那么上心,但是如果有人用的是Kendo

Node.js 切近实战(十二) 之Linux部署

之前的话我们的项目都是跑在windows上,今天我们要将我们的程序跑到linxu机器上.在看linux部署之前,我们先看一下node.js类似于asp.net mvc的过滤器或者叫拦截器.在app.js中我们加入如下代码 var beforeRequest = function (req, res, next) {     if (req.originalUrl == '/'          || req.originalUrl == '/login'          || req.orig

Node.js 切近实战(一) 之环境搭建

哥们先来吐槽一下,最近面试别人的一些经历.有的小伙干了五年,这五年干的是同样的活,三层架构,ASP.NET MVC,Jquery.看简历还能用,结果面试中才知道这五年自己没写过泛型类,泛型方法,委托自定义事件也都没用过,还说抽象类中必须都是抽象方法才可以.还有一小伙,干了十年,泛型委托一概不清楚.最近有个干了9年的,也呆过几家外企,感觉还挺牛,来了之后果然牛,敲着个二郎腿,声音比我还大,搞得好像他在面试我.9年了,只会最常用的一些东西,asp.net mvc,asp.net webforms,W

Node.js 切近实战(十) 之Excel在线(共享文件)

本篇文章我就不罗嗦了,主要讲的是共享文件列表,主要功能就是查看别人共享的文件. 打开该界面,用户可以在左侧看到共享文件的人员的信息,点击该人可以查看该人共享了哪些文件.在Grid里面有查看文件修改记录,编辑,标记为星标文件等功能.OK,我们先看一下UI代码. div(style='padding:5px;')  include ../common/search.jade .row-margin  hr.panel-line   #splitter(style='height:750px;')  

Node.js 切近实战(十一) 之实时通讯

曾经在幽幽暗暗反反复复中追问,才知道平平淡淡从从容容才是真,听着歌曲,写博客,感觉就来了. 今天我们主要看一下Socket.IO实时通讯,先看一下界面. .row  .col-md-9   .panel.panel-primary    .panel-heading     h3.panel-title(style='font-size:13px;') Chat Message    .panel-body#div_msgbody(style='min-height:590px;max-heig

Node.js 切近实战(九) 之Excel在线(在线编辑)

最近实在是太想去西藏了,我自己总是喜欢人少的旅游地,喜欢一望无垠,喜欢蓝天白云大草原. 之前有一节我给大家讲过文件列表,如下,今天我们要讲的就是Excel在线编辑. 当我们双击文件图标的时候会跳转到一个Excel修改界面,如下. ok,这里我们使用的依然是Telerik Kendo UI中的SpreadSheet,看一下这个Spread Sheet是如何用的. 我们定义一个spreadsheet的div,我们看一下这个div怎么生成sheet. $("#spreadsheet").ke

Node.js 切近实战(八) 之Excel在线(文件权限)

最近美国又他妈的皮痒了,在南海找事,还说什么中国必须接受南海仲裁结果,我去你大爷的,你以为你是谁啊.说实话只要我们要决一死战的勇气,还管什么华盛顿航母,佛吉尼亚潜艇,大不了大家一起死,不,全世界一起死.怎么个死法,中国惹急了先给俄罗斯来几颗核弹,然后俄罗斯反击中国的同时,也会给欧洲扔几颗核弹,给美国扔很多核弹,然后欧洲英法会给其他国家扔核弹,美国给世界扔核弹,俄罗斯只给北冰洋扔就行了,中国给美国和太平洋扔就行了,这样世界就不复存在了. 今天我们来看一下文件权限管理,这个其实是对共享出去的文件的一