html5中文学习网

您的位置: 首页?>?网站及特效实例?>?javascript特效 ? 正文

基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析_node.js_

[ ] 已经帮助:人解决问题

这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap。FX4HTML5中文学习网 - HTML5先行者学习网

示例名称:天狗书店FX4HTML5中文学习网 - HTML5先行者学习网

功能:完成前后端分离的图书管理功能,总结前端学习过的内容。FX4HTML5中文学习网 - HTML5先行者学习网

技术:NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域FX4HTML5中文学习网 - HTML5先行者学习网

效果:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

一、BootstrapFX4HTML5中文学习网 - HTML5先行者学习网

Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错。FX4HTML5中文学习网 - HTML5先行者学习网

Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。FX4HTML5中文学习网 - HTML5先行者学习网

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

在线可视布局:http://www.ibootstrap.cn/FX4HTML5中文学习网 - HTML5先行者学习网

演示: http://expo.bootcss.com/FX4HTML5中文学习网 - HTML5先行者学习网

中文网:http://www.bootcss.com/FX4HTML5中文学习网 - HTML5先行者学习网

官网:http://getbootstrap.com/FX4HTML5中文学习网 - HTML5先行者学习网

安装:npm install bootstrap@3FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

1.1、添加引用FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

也可使用包管理器也可以去官网下载后添加引用。FX4HTML5中文学习网 - HTML5先行者学习网

1.2、在页面中使用BootStrapFX4HTML5中文学习网 - HTML5先行者学习网

添加CSS引用:FX4HTML5中文学习网 - HTML5先行者学习网

添加JavaScript引用:FX4HTML5中文学习网 - HTML5先行者学习网

 

在页面中引用BootStrap定义好的样式FX4HTML5中文学习网 - HTML5先行者学习网

     bootstrap      

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information

Learn more

运行结果:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

1.3、可视化布局FX4HTML5中文学习网 - HTML5先行者学习网

如果想快速高效的布局可以使用一些在线辅助工具,如:FX4HTML5中文学习网 - HTML5先行者学习网

http://www.ibootstrap.cn/FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

点击下载可以获得生成的HTML脚本。FX4HTML5中文学习网 - HTML5先行者学习网

二、使用MongoDB创建数据库FX4HTML5中文学习网 - HTML5先行者学习网

2.1、启动MongoDB数据库FX4HTML5中文学习网 - HTML5先行者学习网

数据库的具体安装、配置在前面的章节中已经讲解过,可以参考。FX4HTML5中文学习网 - HTML5先行者学习网

如果服务与配置都没有完成的话可以启动:C:/Program Files/MongoDB/Server/3.4/bin/mongod.exeFX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

2.2、启动数据库GUI管理工具FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

2.3、创建数据库与集合FX4HTML5中文学习网 - HTML5先行者学习网

?在localhost上右键“create database”创建名称为BookStore的数据库。FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

创建一个用于存放图书的集合名称为books。FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

在集合中添加5本图书。FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

db.getCollection('books').insert({id:201701,title:"使用AlarJS开发下一代应用程序",picture:"b1.jpg",price:55.0,author:"brad green"});

三、创建一个Express项目FX4HTML5中文学习网 - HTML5先行者学习网

这里使用Eclipse(HBuilder)为开发工具,添加Nodeclipse插件,新增一个Express项目:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

3.1、创建app.jsFX4HTML5中文学习网 - HTML5先行者学习网

/** * Module dependencies. */var express = require('express') , routes = require('./routes') , books = require('./routes/books') , http = require('http') , path = require('path');var app = express();// all environmentsapp.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 onlyif ('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数据库FX4HTML5中文学习网 - HTML5先行者学习网

monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。FX4HTML5中文学习网 - HTML5先行者学习网

git仓库地址:https://github.com/Automattic/monkFX4HTML5中文学习网 - HTML5先行者学习网

文档:https://automattic.github.io/monk/FX4HTML5中文学习网 - HTML5先行者学习网

安装:npm install --save monkFX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

4.1、创建连接FX4HTML5中文学习网 - HTML5先行者学习网

const monk = require('monk')// Connection URLconst url = 'localhost:27017/myproject';const db = monk(url);db.then(() => { console.log('Connected correctly to server')})

4.2、插入数据FX4HTML5中文学习网 - HTML5先行者学习网

const url = 'localhost:27017/myproject'; // Connection URLconst 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、更新数据FX4HTML5中文学习网 - HTML5先行者学习网

const url = 'localhost:27017/myproject'; // Connection URLconst 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、删除数据FX4HTML5中文学习网 - HTML5先行者学习网

const url = 'localhost:27017/myproject'; // Connection URLconst 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、查找数据FX4HTML5中文学习网 - HTML5先行者学习网

const url = 'localhost:27017/myproject'; // Connection URLconst 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 } }) // equivalentusers.find({}, '-name').then((docs) => { // all the fields except the name field will be selected})users.find({}, { fields: { name: 0 } }) // equivalentusers.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集合,类似表,并非所有数据, keyvar books = db.get('books');//列出所有的图书jsonexports.list = function(req, res) { //无条件查找所有的图书,then是当查找完成时回调的异步方法 books.find({}).then((docs) => {  //返回json给客户端  res.json(docs); }).then(() => db.close()); //关闭数据库};//获得最大idexports.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文件如下:FX4HTML5中文学习网 - HTML5先行者学习网

var express = require('express'), routes = require('./routes'), books = require('./routes/books'), http = require('http'), path = require('path');var app = express();// all environmentsapp.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 onlyif('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'));});

查询所有:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

其它服务的测试可以使用Fiddler完成。FX4HTML5中文学习网 - HTML5先行者学习网

六、使用AngularJS调用后台服务FX4HTML5中文学习网 - HTML5先行者学习网

这里的UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布的服务,将数据存放在MongoDB中。FX4HTML5中文学习网 - HTML5先行者学习网

index.js页面如下:FX4HTML5中文学习网 - HTML5先行者学习网

     天狗书店            
新书上架
序号 编号 书名 图片 价格 作者 操作
{{$index+1}} {{b.id}} {{b.title}} {{b.price | number:1}} {{b.author}}

运行结果:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

新书上架:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

编辑图书FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

添加成功后:FX4HTML5中文学习网 - HTML5先行者学习网

FX4HTML5中文学习网 - HTML5先行者学习网

七、示例下载FX4HTML5中文学习网 - HTML5先行者学习网

前端:https://github.com/zhangguo5/AngularJS04.gitFX4HTML5中文学习网 - HTML5先行者学习网

后台:https://github.com/zhangguo5/AngularJS04_BookStore.gitFX4HTML5中文学习网 - HTML5先行者学习网

以上所述是小编给大家介绍的基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!FX4HTML5中文学习网 - HTML5先行者学习网
FX4HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助