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

其它服务的测试可以使用Fiddler完成。

const url = 'localhost:27017/myproject'; // Connection URLconst db = require;const collection = db.getcollection.insert([{a: 1}, {a: 2}, {a: 3}]) .then => { // docs contains the documents inserted with added **_id** fields // Inserted 3 documents into the document collection }).catch => { // An error happened while inserting }).thenusers.insertusers.insert([{ woot: 'bar' }, { woot: 'baz' }])

4.1、创建连接

二、使用MongoDB创建数据库

后台:

中文网:

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

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

git仓库地址:

这里的UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布的服务,将数据存放在MongoDB中。

一、Bootstrap

const url = 'localhost:27017/myproject'; // Connection URLconst db = require;const collection = db.getcollection.insert([{a: 1}, {a: 2}, {a: 3}]) .then => { // Inserted 3 documents into the document collection }) .then => { return collection.update({ a: 2 }, { $set: { b: 1 } }) }) .then => { // Updated the document with the field a equal to 2 }) .thenusers.update({name: 'foo'}, {name: 'bar'})

在线可视布局:

如果想快速高效的布局可以使用一些在线辅助工具,如:

文档:

图片

七、示例下载

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

功能:完成前后端分离的图书管理功能,总结前端学习过的内容。

四、Monk访问MongoDB数据库

也可使用包管理器也可以去官网下载后添加引用。

数据库的具体安装、配置在前面的章节中已经讲解过,可以参考。

作者

{{$index+1}}

三、创建一个Express项目

1.3、可视化布局

安装:npm install bootstrap@3

如果服务与配置都没有完成的话可以启动:C:Program
FilesMongoDBServer3.4基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析_node.js_脚本之家。binmongod.exe

index.js页面如下:

{{b.price | number:1}}

monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。

const url = 'localhost:27017/myproject'; // Connection URLconst db = require;const collection = db.getcollection.insert([{a: 1}, {a: 2}, {a: 3}]) .then => { // Inserted 3 documents into the document collection }) .then => collection.update({ a: 2 }, { $set: { b: 1 } })) .then => { // Updated the document with the field a equal to 2 }) .then => collection.remove .then => { // Deleted the document with the field a equal to 3 }) .then => { return collection.find => { // docs === [{ a: 1 }, { a: 2, b: 1 }] }) .then

users.find => {})users.find.then => { // only the name field will be selected})users.find({}, { fields: { name: 1 } }) // equivalentusers.find.then => { // all the fields except the name field will be selected})users.find({}, { fields: { name: 0 } }) // equivalentusers.find({}, { rawCursor: true }).then => { // 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 = requirevar db = monk('localhost:27017/bookstore')//读取数据:var monk = requirevar db = monk('localhost:27017/monk-demo')var books = db.get books.find({}, function { console.log//插入数据:books.insert({"name":"orange book","description":"just so so"})//查找数据:books.find({"name":"apple book"}, function { console.log复制代码五、创建Rest后台服务在routes目录下增加的books.js文件内容如下:复制代码/* * 使用monk访问mongodb * 以rest的方式向前台提供服务 *///依赖monk模块var monk = require;//连接并打开数据库var db = monk('localhost:27017/BookStore');//从数据库中获得books集合,类似表,并非所有数据, keyvar books = db.get;//列出所有的图书jsonexports.list = function { //无条件查找所有的图书,then是当查找完成时回调的异步方法 books.find => { //返回json给客户端 res.json => db.close; //关闭数据库};//获得最大idexports.getMax=function{ //找一个,根据id降序排序, books.findOne.then=>{ res.json => db.close;;}//添加图书exports.add = function { //先找到最大的图书编号 books.findOne.then=>{ //从客户端发送到服务器的图书对象 var book=req.body; //设置图书编号为最大的图书编号+1 book.id=+""; //执行添加 books.insert => { //返回添加成功的对象 res.json => db.close;};//删除图书exports.del = function { //从路径中取参数id,/:id var id=req.params.id; //移除编号为id的图书 books.remove=>{ //返回移除结果 res.json => db.close;};//更新exports.update = function { //获得提交给服务器的json对象 var book=req.body; //执行更新,第1个参数是要更新的图书查找条件,第2个参数是要更新的对象 books.update.then=>{ //返回更新完成后的对象 res.json => db.close;};

这里使用Eclipse为开发工具,添加Nodeclipse插件,新增一个Express项目:

3.1、创建app.js

演示:

添加JavaScript引用:

删除

const url = 'localhost:27017/myproject'; // Connection URLconst db = require;const collection = db.getcollection.insert([{a: 1}, {a: 2}, {a: 3}]) .then => { // Inserted 3 documents into the document collection }) .then => collection.update({ a: 2 }, { $set: { b: 1 } })) .then => { // Updated the document with the field a equal to 2 }) .then => { return collection.remove.then => { // Deleted the document with the field a equal to 3 }) .thenusers.remove

{{b.title}}

/** * Module dependencies. */var express = require , routes = require , books = require , http = require , path = require;var app = express();// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set;app.use;app.use);app.use;app.use(express.methodOverride;app.use;app.use(express.static(path.join);// development onlyif ('development' == app.get { app.use(express.errorHandler;}app.get;app.get;http.createServer.listen, function(){ console.log('Express server listening on port ' + app.get;

在localhost上右键“create database”创建名称为BookStore的数据库。

var express = require, routes = require, books = require, http = require, path = require;var app = express();// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set;app.use;app.use);app.use;app.use(express.methodOverride;app.use;app.use(express.static(path.join);app.all('*', function { 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; } else { next;// development onlyif('development' == app.get { app.use(express.errorHandler;}app.get;//获得所有的图书列表app.get;//最大的编号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.listen, function() { console.log('Express server listening on port ' + app.get;

六、使用AngularJS调用后台服务

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。

1.2、在页面中使用BootStrap

{{b.author}}

安装:npm install –save monk

为了完成跨域请求,修改http头部信息及路径映射,app.js文件如下:

价格

图片 1

编号

官网:

书名

在集合中添加5本图书。

创建一个用于存放图书的集合名称为books。

操作

{{b.id}}

  天狗书店     .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.                新书上架     ×  添加/编辑图书        保存   清空   关闭          序号 

4.2、插入数据

2.3、创建数据库与集合

在页面中引用BootStrap定义好的样式

前端:

编辑

Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错。

Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。

  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      默认 主要 成功 信息 警告 错误 链接   默认 默认 默认 默认      

点击下载可以获得生成的HTML脚本。

2.2、启动数据库GUI管理工具

1.1、添加引用

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

4.3、更新数据

技术:NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域

4.5、查找数据

4.4、删除数据

2.1、启动MongoDB数据库

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图