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

2023年5月25日上午5:33 • 人工智能概论

基于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技术站

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

相关文章