angular 6 from rookie to master - 3 [BookLibrary project - bootstrap]

1. Project bootstrap

From this chapter we are going to create a new project called BookLibrary

ng new book-library

2. Installing the Additional NPM Packages

cd book-library

npm install [email protected]
npm install [email protected]
npm install --save-dev [email protected]
npm install --save-dev [email protected]

3. Add css support

angular.json

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css"
],

4. Preparing the RESTful Web Service

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "json": "json-server data.js -p 3500 -m authMiddleware.js"
  }

5. Fake data

add data.js in the project root

data.js

module.exports = function () {
  return {
    books: [
      { id: 1, name: "Java 8实战", category: "JAVA", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 2, name: "Spring微服务实战", category: "MicroService", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 3, name: "Akka实战：快速构建高可用分布式应用", category: "BigData", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 4, name: "Docker实战", category: "DevOps", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 5, name: "Java虚拟机规范", category: "JAVA", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 6, name: "MySQL技术内幕：InnoDB存储引擎（第2版）", category: "Database", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "Digital" },
      { id: 7, name: "PHP7内核剖析", category: "PHP", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "Digital" },
      { id: 8, name: "响应式架构：消息模式Actor实现与Scala、Akka应用集成", category: "BigData", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
      { id: 9, name: "码出高效：Java开发手册", category: "JAVA", owner: "KG", type: "PAPER BOOK", location: "", team: "" },
      { id: 10, name: "Spring Cloud与Docker微服务架构实战", category: "MicroService", owner: "KG", type: "PAPER BOOK", location: "", team: "" }
    ],
    orders: []
  }
};

6. Autentication by json-server

authMiddleware.js

const jwt = require("jsonwebtoken");

const APP_SECRET = "myappsecret";
const USERNAME = "admin";
const PASSWORD = "secret";

module.exports = function (req, res, next) {

    if ((req.url == "/api/login" || req.url == "/login") 
            && req.method == "POST") {
        if (req.body != null && req.body.name == USERNAME 
                && req.body.password == PASSWORD) {
            let token = jwt.sign({ data: USERNAME, expiresIn: "1h" }, APP_SECRET);
            res.json({ success: true, token: token });
        } else {
            res.json({ success: false });
        }
        res.end();
        return;
    } else if ((((req.url.startsWith("/api/products") 
                || req.url.startsWith("/products")) 
           || (req.url.startsWith("/api/categories") 
                || req.url.startsWith("/categories"))) && req.method != "GET")
        || ((req.url.startsWith("/api/orders") 
            || req.url.startsWith("/orders")) && req.method != "POST")) {
        let token = req.headers["authorization"];
        if (token != null && token.startsWith("Bearer<")) {
            token = token.substring(7, token.length - 1);
            try {
                jwt.verify(token, APP_SECRET);
                next();
                return;
            } catch (err) { }
        }
        res.statusCode = 401;
        res.end();
        return;
    }
    next();
}

7. Modify index.html

modify the body as below

  BookLibrary Will Go Here

8. Folder Structure

book-library/src/app/model This folder will contain the code for the data model
book-library/src/app/library This folder will contain the functionality for basic library
book-library/src/app/admin This folder will contain the functionality for administration

9. Run Application

ng serve --port 3000 --open

image.png

10. Starting the RESTful Web Service

npm run json

image.png

image.png