Giter Club home page Giter Club logo

loopback-example-relations's Introduction

loopback-example-relations

$ git clone https://github.com/strongloop/loopback-example-relations.git
$ cd loopback-example-relations
$ npm install
$ node .

In this example, we create a simple web app to demonstrate model relation concepts. The app consists of a single web page with a list of links to help us query and filter sample data via REST.

Prerequisites

Before starting this tutorial, you must install:

  • Node.js
  • LoopBack CLI tools; see lb

Tutorials

Knowledge

Procedure

Create the application

Application information

  • Name: loopback-example-relations
  • Directory to contain the project: loopback-example-relations
$ lb app loopback-example-relations
... # follow the prompts
$ cd loopback-example-relations

Create the datasource

  • Name: transient
  • Connector: other
    • Name: transient
$ lb datasource
... # follow the prompts, choose `other` to define custom connector

Create the models

Model information

  • Name: Customer
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
      • age
        • number
        • Not Required
  • Name: Order
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • description
        • String
        • Not Required
      • date
        • date
        • Not Required
  • Name: Account
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
      • date
        • date
        • Not Required
  • Name: Address
    • Data source: transient
    • Base class: Model
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • street
        • String
        • Not Required
      • city
        • String
        • Not Required
      • state
        • String
        • Not Required
      • zipCode
        • String
        • Not Required
  • Name: Author
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
  • Name: Book
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
  • Name: EmailAddress
    • Data source: transient
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • label
        • String
        • Not Required
      • address
        • String
        • Not Required
  • Name: Link
    • Data source: transient
    • Base class: Model
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • id
        • number
        • Required

        Please set "id": true manually for this property, like link.json

      • name
        • String
        • Not Required
      • notes
        • String
        • Not Required
  • Name: Reader
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
  • Name: Shipment
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • date
        • Date
        • Not Required
      • description
        • String
        • Not Required
$ lb model Customer
... # follow the prompts, repeat for other models

Upper-case in model's name would be interpreted as '-' in model's file name, eg: EmailAddress has email-address.json

Configure server-side views

LoopBack comes preconfigured with EJS out-of-box. This means we can use server-side templating by simply setting the proper view engine and a directory to store the views.

Create a views directory to store server-side templates.

$ mkdir server/views

Create index.ejs in the views directory. Create account.ejs in the views directory. Create email.ejs in the views directory. Create address.ejs in the views directory.

Configure server.js to use server-side templating. Remember to import the path package.

Replace root

Replace the default root.js with a new one which passes a given customer's id to template engine.

Add sample data

Create six boot scripts:

We add z- in front of the boot script names to make sure they load last since LoopBack boot loads boot scripts alphabetically.

Create model relations

Model relation information

  • Customer

    • has many
      • Order

        • Property name for the relation: orders
        • Custom foreign key: customerId
        • Require a through model: No
      • Other Relations: (please add them manually)

        "address": {
          "type": "embedsOne",
          "model": "Address",
          "property": "billingAddress",
          "options": {
            "validate": true,
            "forceId": false
          }
        },
        "emails": {
          "type": "embedsMany",
          "model": "EmailAddress",
          "property": "emailList",
          "options": {
            "validate": true,
            "forceId": false
          }
        },
        "accounts": {
          "type": "referencesMany",
          "model": "Account",
          "property": "accountIds",
          "options": {
            "validate": true,
            "forceId": false
          }
        },
        
  • Book(please add them manually)

    "people": {
        "type": "embedsMany",
        "model": "Link",
        "scope": {
          "include": "linked"
        }
    }
    
  • Link(please add them manually)

    "linked": {
      "type": "belongsTo",
      "polymorphic": {
        "idType": "number"
      },
      "properties": {
        "name": "name"
      },
      "options": {
        "invertProperties": true
      }
    }
    
  • Order

    • belongs to
      • Customer
        • Property name for the relation: Leave blank - defaults to customer
        • Custom foreign key: Leave blank
    • has many
      • Shipment
        • Property name for the relation: Leave blank - defaults to shipments
        • Custom foreign key: Leave blank
  • Shipment

    • belongs to
      • Order
        • Property name for the relation: Leave blank - defaults to order
        • Custom foreign key: Leave blank
$ lb relation
? Select the model to create the relationship from:
...
> Customer
... # follow the prompts, repeat for other models

Some relations are not available in lb, please add them in model-name.json manually. LoopBack automatically derives relation and foreign key names when you leave the values empty.

Try the API

Start the application with node . and browse to [localhost:3000][localhost]. You should see various links. Each endpoint is defined as follows:

hasMany

embedsOne

embedsMany

referencesMany

polymorphic embedsMany


More LoopBack examples

loopback-example-relations's People

Contributors

superkhau avatar jannyhou avatar dhmlau avatar cgole avatar 0candy avatar crandmck avatar deniselee avatar rmg avatar sam-github avatar ascat avatar smartmouse avatar simonhoibm avatar siddhipai avatar sequoia avatar ricardovaranda avatar niekoost avatar hacksparrow avatar cxong avatar atherdon avatar antarasi avatar

Watchers

Steve Kanter avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.