如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目

这篇文章给大家分享的是有关如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业成都多线机房，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

示例名称：天狗书店

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

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

效果：

如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目

一、Bootstrap

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

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

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

如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目

在线可视布局：http://www.ibootstrap.cn/

演示： http://expo.bootcss.com/

中文网：http://www.bootcss.com/

官网：http://getbootstrap.com/

安装：npm install bootstrap@3

如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目

1.1、添加引用

如何使用NodeJS+MongoDB+AngularJS+Bootstrap开发书店项目

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

1.2、在页面中使用BootStrap

添加CSS引用：

添加JavaScript引用：

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



 
  
  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

默认主要成功信息警告错误链接

默认默认默认默认

/** * 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')); });

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' }])

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'})

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' })

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()); };

天狗书店 .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开发书店项目

Hello, world!

Third Thumbnail label

其他资讯