ngrx 入门---2、JSON Server服务器搭建

ngrx入门

一、引入npm包

npm install json-server

二、定义数据文件

1、在工程文件夹下，和package.json同一级，建立文件data.js
2、修改data.js为

module.exports = function () {
    return { 
        products: [
            { id: 1, name: "Kayak", category: "Watersports", 
                description: "A boat for one person", price: 275 },
            { id: 2, name: "Lifejacket", category: "Watersports", 
                description: "Protective and fashionable", price: 48.95 },
            { id: 3, name: "Soccer Ball", category: "Soccer", 
                description: "FIFA-approved size and weight", price: 19.50 },
            { id: 4, name: "Corner Flags", category: "Soccer", 
                description: "Give your playing field a professional touch", 
                price: 34.95 },
            { id: 5, name: "Stadium", category: "Soccer", 
                description: "Flat-packed 35,000-seat stadium", price: 79500 },
            { id: 6, name: "Thinking Cap", category: "Chess", 
                description: "Improve brain efficiency by 75%", price: 16 },
            { id: 7, name: "Unsteady Chair", category: "Chess", 
                description: "Secretly give your opponent a disadvantage", 
                price: 29.95 },
            { id: 8, name: "Human Chess Board", category: "Chess", 
                description: "A fun game for the family", price: 75 },
            { id: 9, name: "Bling Bling King", category: "Chess", 
                description: "Gold-plated, diamond-studded King", price: 1200 }
        ],
        orders: []
    }
}

三、定义启动脚本

修改package.json，配置启动脚本

{
  "name": "pet-tags-ngrx",
  "version": "0.0.0",
  "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" 
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.4",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1",
    "@ngrx/store": "^11.0.1",
    "@ngrx/store-devtools": "^11.0.1",
    "bootstrap": "^4.6.0",
    "json-server": "^0.16.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler-cli": "~11.2.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

增加 “json”: “json-server data.js -p 3500” 这一行

四、启动json-server服务器

npm run json

五验证服务启动

在浏览器中输入： http://localhost:3500/products

代码

git clone -b step2 https://gitee.com/lxhjh2015/ngrx.git