基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
书店案例分析的实现，我们将使用Node.js作为编写后端服务器的JavaScript运行时，MongoDB作为数据存储和检索的数据库，AngularJS和Bootstrap框架作为前端实现工具。
步骤一：在个人电脑上安装与配置上述所需软件(以windows系统为例)。
-
安装Node.js
从https://nodejs.org/en/ 下载node.js，根据提示一步步安装。 -
安装MongoDB
从https://www.mongodb.com/download-center下载最新的版本，同样，根据提示一步步安装。 -
初始化项目
启动命令行窗口（Windows系统按 Win-R 键同时按下，输入“cmd”并按 Enter 键即可），然后进入到一个空白的文件夹下，输入 npm init 命令，按照提示输入相应参数。 -
安装所需依赖
在该文件下输入 npm install --save express body-parser mongodb 等依赖模块安装。安装模块非常消耗时间，用户需耐心等候，直到依赖模块都成功安装。 -
编写配置文件
打开 package.json，添加一些自定义命令和依赖，如下：
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"body-parser": "^1.17.2",
"express": "^4.15.3",
"mongodb": "^2.2.31"
}
- 编写服务端代码
创建 server.js 文件，通过调用依赖的包实现后台逻辑。
var express = require('express');
var bodyParser = require('body-parser');
var mongodb = require('mongodb');
var app = express();
app.use(bodyParser());
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017/bookstore';
MongoClient.connect(url, function (err, db) {
if (err) throw err;
console.log("Connected successfully to server");
app.post('/api/createBook', function (req, res) {
var obj = {
"name": req.body["name"],
"author": req.body["author"],
"publisher": req.body["publisher"],
"ISBN": req.body["ISBN"],
"price": req.body["price"],
"count": req.body["count"],
};
db.collection("books").insertOne(obj, function (err, resp) {
if(err) throw err;
res.json({ status: 200, message: "successs" });
});
})
app.get('/api/getAllBooks', function (req, res) {
db.collection("books").find().toArray(function (err, result) {
if (err) throw err;
res.json(result);
});
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
});
然后通过输入 node server.js 启动服务
- 编写客户端代码。
在 index.html 页面中引入Bootstrap以及AngularJS等样式和效果，然后编写相应的JavaScript代码。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Bookstore</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body ng-controller="bookCtrl">
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>图书名</th>
<th>作者</th>
<th>出版社</th>
<th>ISBN</th>
<th>价格</th>
<th>库存</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in books">
<td>{{ x.name }}</td>
<td>{{ x.author }}</td>
<td>{{ x.publisher }}</td>
<td>{{ x.ISBN }}</td>
<td>{{ x.price }}</td>
<td>{{ x.count }}</td>
<td><button ng-click="update(x._id)">编辑</button></td>
</tr>
</tbody>
</table>
<button ng-click="create()">添加新书</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('bookCtrl', function ($scope, $http) {
$scope.books = [];
$http.get("/api/getAllBooks").then(function (response) {
$scope.books = response.data;
});
$scope.create = function () {
var payload = {
"name": "新书籍",
"author": "作者",
"publisher": "出版社",
"ISBN": Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
"price": parseFloat(Math.random() * 100).toFixed(2),
"count": parseInt(Math.random() * 100),
};
$http.post("/api/createBook", payload).then(function (response) {
$http.get("/api/getAllBooks").then(function (response) {
$scope.books = response.data;
});
});
}
$scope.update = function (id) {
alert(id);
}
});
</script>
</body>
</html>
通过浏览器打开该HTML文件，可以看到表格中已经展示出了部分图书信息，并可以通过添加新书功能进行图书添加。
以上所述均为书店案例分析的完整攻略，如果需要更多的样例，请查看实际开发过程中的具体需求。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析 - Python技术站
微信扫一扫 
支付宝扫一扫 