运行结果：
1.3、可视化布局
如果想快速高效的布局可以使用一些在线辅助工具，如：
http://www.ibootstrap.cn/
点击下载可以获得生成的HTML脚本。
二、使用MongoDB创建数据库
2.1、启动MongoDB数据库
数据库的具体安装、配置在前面的章节中已经讲解过，可以参考。
如果服务与配置都没有完成的话可以启动：C:\Program Files\MongoDB\Server\3.4\bin\mongod.exe
2.2、启动数据库GUI管理工具
2.3、创建数据库与集合
在localhost上右键“create database”创建名称为BookStore的数据库。
创建一个用于存放图书的集合名称为books。
在集合中添加5本图书。
db.getCollection('books').insert({id:201701,title:"使用AlarJS开发下一代应用程序",picture:"b1.jpg",price:55.0,author:"brad green"});三、创建一个Express项目
这里使用Eclipse（HBuilder）为开发工具，添加Nodeclipse插件，新增一个Express项目：
3.1、创建app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, books = require('./routes/books')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', books.list);
app.get('/books', books.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});四、Monk访问MongoDB数据库
monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。
git仓库地址：https://github.com/Automattic/monk
文档：https://automattic.github.io/monk/
安装：npm install --save monk
4.1、创建连接
const monk = require('monk')
// Connection URL
const url = 'localhost:27017/myproject';
const db = monk(url);
db.then(() => {
console.log('Connected correctly to server')
})4.2、插入数据
const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
.then((docs) => {
// docs contains the documents inserted with added **_id** fields
// Inserted 3 documents into the document collection
}).catch((err) => {
// An error happened while inserting
}).then(() => db.close())
users.insert({ woot: 'foo' })
users.insert([{ woot: 'bar' }, { woot: 'baz' }])4.3、更新数据
const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
.then((docs) => {
// Inserted 3 documents into the document collection
})
.then(() => {
return collection.update({ a: 2 }, { $set: { b: 1 } })
})
.then((result) => {
// Updated the document with the field a equal to 2
})
.then(() => db.close())
users.update({name: 'foo'}, {name: 'bar'})4.4、删除数据
const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
.then((docs) => {
// Inserted 3 documents into the document collection
})
.then(() => collection.update({ a: 2 }, { $set: { b: 1 } }))
.then((result) => {
// Updated the document with the field a equal to 2
})
.then(() => {
return collection.remove({ a: 3})
}).then((result) => {
// Deleted the document with the field a equal to 3
})
.then(() => db.close())
users.remove({ woot: 'foo' })4.5、查找数据
const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
.then((docs) => {
// Inserted 3 documents into the document collection
})
.then(() => collection.update({ a: 2 }, { $set: { b: 1 } }))
.then((result) => {
// Updated the document with the field a equal to 2
})
.then(() => collection.remove({ a: 3}))
.then((result) => {
// Deleted the document with the field a equal to 3
})
.then(() => {
return collection.find()
})
.then((docs) => {
// docs === [{ a: 1 }, { a: 2, b: 1 }]
})
.then(() => db.close())users.find({}).then((docs) => {})
users.find({}, 'name').then((docs) => {
// only the name field will be selected
})
users.find({}, { fields: { name: 1 } }) // equivalent
users.find({}, '-name').then((docs) => {
// all the fields except the name field will be selected
})
users.find({}, { fields: { name: 0 } }) // equivalent
users.find({}, { rawCursor: true }).then((cursor) => {
// raw mongo cursor
})
users.find({}).each((user, {close, pause, resume}) => {
// the users are streaming here
// call `close()` to stop the stream
}).then(() => {
// stream is over
})
//创建的数据库
var monk = require('monk')
var db = monk('localhost:27017/bookstore')
//读取数据：
var monk = require('monk')
var db = monk('localhost:27017/monk-demo')
var books = db.get('books')
books.find({}, function(err, docs) {
console.log(docs)
})
//插入数据：
books.insert({"name":"orange book","description":"just so so"})
//查找数据：
books.find({"name":"apple book"}, function(err, docs) {
console.log(docs)
})
复制代码
五、创建Rest后台服务
在routes目录下增加的books.js文件内容如下：
复制代码
/*
* 使用monk访问mongodb
* 以rest的方式向前台提供服务
*/
//依赖monk模块
var monk = require('monk');
//连接并打开数据库
var db = monk('localhost:27017/BookStore');
//从数据库中获得books集合，类似表，并非所有数据， key
var books = db.get('books');
//列出所有的图书json
exports.list = function(req, res) {
//无条件查找所有的图书，then是当查找完成时回调的异步方法
books.find({}).then((docs) => {
//返回json给客户端
res.json(docs);
}).then(() => db.close()); //关闭数据库
};
//获得最大id
exports.getMax=function(req,res){
//找一个，根据id降序排序，
books.findOne({}, {sort: {id: -1}}).then((bookObj)=>{
res.json(bookObj);
}).then(() => db.close());;
}
//添加图书
exports.add = function(req, res) {
//先找到最大的图书编号
books.findOne({}, {sort: {id: -1}}).then((obj)=>{
//从客户端发送到服务器的图书对象
var book=req.body;
//设置图书编号为最大的图书编号+1
book.id=(parseInt(obj.id)+1)+"";
//执行添加
books.insert(book).then((docs) => {
//返回添加成功的对象
res.json(docs);
}).then(() => db.close());
});
};
//删除图书
exports.del = function(req, res) {
//从路径中取参数id,/:id
var id=req.params.id;
//移除编号为id的图书
books.remove({"id":id}).then((obj)=>{
//返回移除结果
res.json(obj);
}).then(() => db.close());
};
//更新
exports.update = function(req, res) {
//获得提交给服务器的json对象
var book=req.body;
//执行更新,第1个参数是要更新的图书查找条件，第2个参数是要更新的对象
books.update({"id":book.id}, book).then((obj)=>{
//返回更新完成后的对象
res.json(obj);
}).then(() => db.close());
};为了完成跨域请求，修改http头部信息及路径映射，app.js文件如下：
var express = require('express'),
routes = require('./routes'),
books = require('./routes/books'),
http = require('http'),
path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "content-type");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == "OPTIONS") {
res.send("200");
} else {
next();
}
});
// development only
if('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', books.list);
//获得所有的图书列表
app.get('/books', books.list);
//最大的编号
app.get('/books/maxid', books.getMax);
//添加
app.post('/books/book', books.add);
//删除
app.delete('/books/id/:id', books.del);
//更新
app.put('/books/book', books.update);
http.createServer(app).listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});查询所有：
其它服务的测试可以使用Fiddler完成。
六、使用AngularJS调用后台服务
这里的UI使用BootStrap完成，前端使用AngularJS调用NodeJS发布的服务，将数据存放在MongoDB中。
index.js页面如下：
天狗书店
.cover {
height: 40px;
width: auto;
}
.addBook {
padding-top: 10px;
}
.w100 {
width: 50px
}
.w200 {
width: 200px;
}
.w300 {
width: 300px
}
Toggle navigation
天狗书店
前端
Java
.Net
更多类型
Action
Another action
Something else here
Separated link
One more separated link
搜索
Third Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
新书上架
×
添加/编辑图书
编号
书名
图片
价格
作者
保存
清空
关闭
|
序号
|
编号
|
书名
|
图片
|
价格
|
作者
|
操作
|
{{$index+1}}
|
{{b.id}}
|
{{b.title}}
|
|
{{b.price | number:1}}
|
{{b.author}}
|
删除
编辑
|
//定义模块，指定依赖项为空
var bookApp = angular.module("bookApp", []);
//定义控制器，指定控制器的名称，$scope是全局对象
bookApp.controller("BookController", ['$scope', '$http', function($scope, $http) {
$scope.books = [];
$scope.save = function() {
$http({
url: "http://127.0.0.1:3000/books/book",
data: $scope.book,
method: $scope.book.id ? "PUT" : "POST"
})
.success(function(data, status, headers, config) {
if($scope.book.id) {
alert("修改成功");
} else {
$scope.books.push(data);
}
})
.error(function(data, status, headers, config) {
alert(status);
});
}
$scope.edit = function(b) {
$scope.book = b;
}
$scope.clear = function() {
$scope.book = {};
}
//初始化加载
$http.get("http://127.0.0.1:3000/")
.success(function(data, status, headers, config) {
$scope.books = data;
})
.error(function(data, status, headers, config) {
alert(status);
});
$scope.del = function(id, index) {
$http.delete("http://127.0.0.1:3000/books/id/" + id)
.success(function(data, status, headers, config) {
$scope.books.splice(index, 1);
})
.error(function(data, status, headers, config) {
alert(status);
});
}
}]);
运行结果：
新书上架：
编辑图书
添加成功后：
感谢各位的阅读！关于“如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
标题名称：如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目
文章路径：http://kswjz.com/article/jicoso.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
