Versions Compared

Old Version 5

changes.mady.by.user xu ran

Saved on

compared with

New Version Current

changes.mady.by.user xu ran

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
themeDJangoConfluence
titleProject Structure
├── e2e
├── src
│   ├── app   
│   │   ├── core     
│   │   │   ├── models
│   │   │   └── services 
│   │   ├── shared
│   │   │   ├── components                  # container of all general components 
│   │   │   └── utils                       # container of all general functions 
│   │   ├── views                           # container of all business pages
│   │   │   ├── alarm 
│   │   │   └── ......                      
│   │   ├── app-routing.module.ts                                             
│   │   ├── app.component.css                                            
│   │   ├── app.component.less                                              
│   │   ├── app.component.html                                                                                         
│   │   ├── app.component.ts                                                                                                  
│   ├── assets 
│   │   ├── json                            # container of mock data assets     
│   │   ├── i18n                            # container of internationalization assets                      
│   │   └── images   
│   ├── environments 
│   ├── favicon.ico                        
│   ├── index.html    
│   ├── style.css  
│   ├── style.less                         
│   ├── my-theme.css 
│   ├── my-theme.less  
│   ├── main.ts  
│   ├── polyfill.ts   
│   ├── test.ts   
│   ├── tsconfig.app.json 
│   ├── tsconfig.spec.json 
│   ├── typing.d.ts 
├── .angular-cli.json
├── CHANGELOG.md                            # recorder of all the important changes 
├── karma.conf.js 
├── localproxy.conf.json                    # config for mock server proxy 
├── proxy.conf.json                         # config for server proxy 
├── tsconfig.json
├── package.json
└── README.md

...

Code Block
languagejs
themeDJangoConfluence
//home.service.ts ——————local codes
…………

  baseUrl = "./assets/json/"
  url = {
    home_serviceData: this.baseUrl + "/home_serviceData.json",
    home_alarmData: this.baseUrl + "/home_alarmData.json",
    home_alarmChartData: this.baseUrl + "/home_alarmChartData.json",
    home_servicebarData:this.baseUrl + "/home_servicebar.json",
    sourceNames: this.baseUrl + "/SourceName.json",
    listSortMasters:this.baseUrl+"/listSortMsters.json",
  }


//home.service.ts ——————online codes
…………
  url = {
    home_serviceData: this.baseUrl + "/uui-lcm/serviceNumByCustomer",
    home_alarmData: this.baseUrl + "/alarm/statusCount",
    home_alarmChartData: this.baseUrl + "/alarm/diagram",
    home_servicebarnsData: this.baseUrl + "/uui-lcm/ns-packages",
    sourceNames: this.baseUrl + "/alarm/getSourceNames",
    listSortMasters: this.baseUrl + "/listSortMasters",
  }

...

Since json-server provides basic service to the mock server, let’s setup first.

Code Block
languagejsbash
themeDJangoConfluence
npm install -g json-server

...

Code Block
languagejs
themeDJangoConfluence
titlepackage.json
"mockproxy": "ng serve --proxy-config localproxy.conf.json”, // switch local server to mock server
"mockconfig": "node ./src/app/mock/server.js --port 3002”,  // start local mock server
"mock": "npm run mockconfig | npm run mockproxy",

...

Code Block
DJango
languagejs
themeConfluence
titleserver.js
const jsonServer = require('json-server');
const server = jsonServer.create();
const middlewares = jsonServer.defaults();
const customersRouters = require('./routes');
const baseUrl = "/usecaseui-server/v1”;

// Set default middlewares
server.use(middlewares);

// Get mock data
const fs = require('fs');
const path = require('path');

let localJsonDb = {};  //import mock datas
const mockFolder = './src/app/mock/json'; //mock json path folder
const filePath = path.resolve(mockFolder);

fileDisplay(filePath);

function fileDisplay(filePath) {
    let fileList = [];
    // Return filelist on based of filePath
    const files = fs.readdirSync(filePath);
    files.forEach((filename) => {
        // Get filename's absolute path
        let filedir = path.join(filePath, filename);
        // Get the file information according to the file path and return an fs.Stats object
        fs.stat(filedir, (err, stats) => {
            if (err) {
                console.warn('Get files failed......');
            } else {
                let isFile = stats.isFile(); // files
                let isDir = stats.isDirectory(); //files folder
                if (isFile) {
                    fileList.push(path.basename(filedir, '.json'));
                    fileList.forEach(item => {
                        localJsonDb[item] = getjsonContent(item);
                    })
                }
                if (isDir) {
                    fileDisplay(filedir);
                }
                Object.keys(fakeoriginalData).map(item => {
                    localJsonDb[item] = fakeoriginalData[item];
                })
            }
        })
    })
    setTimeout(() => {
        runServer(localJsonDb);
    }, 100)
}

function getjsonContent(path) {
    let newpath = `./src/app/mock/json/${path}.json`;
    let result = JSON.parse(fs.readFileSync(newpath));
    return result;
}

function serverRewrite() {
    server.use(jsonServer.rewriter(customersRouters))
}

function runServer(db) {
    server.use(jsonServer.router(db));
}

server.listen(3002, () => {
    console.log('Mock Server is successfully running on port 3002!')
});

...

Code Block
languagejs
themeDJangoConfluence
………    
    let fileList = [];
    // Return filelist on based of filePath
    const files = fs.readdirSync(filePath);
    files.forEach((filename) => {
        // Get filename's absolute path
        let filedir = path.join(filePath, filename);
        // Get the file information according to the file path and return an fs.Stats object
        fs.stat(filedir, (err, stats) => {
            if (err) {
                console.warn('Get files failed......');
            } else {
                let isFile = stats.isFile(); // files
                let isDir = stats.isDirectory(); //files folder
                if (isFile) {
                    fileList.push(path.basename(filedir, '.json'));
                    fileList.forEach(item => {
                        localJsonDb[item] = getjsonContent(item);
                    })
                }
                if (isDir) {
                    fileDisplay(filedir);
                }
                Object.keys(fakeoriginalData).map(item => {
                    localJsonDb[item] = fakeoriginalData[item];
                })
            }
        })
    })
………
function getjsonContent(path) {
    let newpath = `./src/app/mock/json/${path}.json`;
    let result = JSON.parse(fs.readFileSync(newpath));
    return result;
}
………

...

Code Block
languagejs
themeDJangoConfluence
{  
………
  'uui-sotn_getPinterfaceByVpnId': { 'vpn-binding': [ [Object] ] },
  'uui-sotn_getPnfInfo': {
    'pnf-name': 'pnf1000',
    'pnf-id': '79',
    'in-maint': true,
    'resource-version': '195',
    'admin-status': 'up',
    'operational-status': 'up',
    'relationship-list': { relationship: [Array] }
  },
  'uui-sotn_getSpecificLogicalLink': {
    'link-name': 'nodeId-79-ltpId-4_nodeId-78-ltpId-4',
    'in-maint': false,
    'link-type': 'some type',
    'speed-value': 'some speed',
    'resource-version': '13031',
    'operational-status': 'up',
    'relationship-list': { relationship: [Array] }
  },
  xuran_test_data: {
    'esr-system-info-id': 'xuran',
    'service-url': 'http://10.10.10.10:8080/',
    'user-name': 'demo',
    'password': 'demo123456!',
    'system-type': 'ONAP',
    'resource-version': '18873'
  }
………
}

...

Code Block
languagejs
themeDJangoConfluence
function runServer(db) {
    server.use(jsonServer.router(db));
}

...

//import
Code Block
languagejs
themeConfluenceDJango
titleImport routes.js
const customersRouters = require('./routes’);
………
function serverRewrite() {
    server.use(jsonServer.rewriter(customersRouters))
}

...

//configuration in
Code Block
languagejs
themeConfluenceDJango
titleConfiguration in routes.js
…………
module.exports =
{
   ///////<-------------general interface--------->/////
        "/api/*": "/$1",
        "/*/*": "/$1_$2",
        "/*/*/*": "/$1_$2_$3",
        "/*/*/*/*": "/$1_$2_$3_$4",
        /////////////////////////////////////////////////////
}

...

Let’s install it first.

Code Block
languageactionscript3bash
themeDJangoConfluence
npm install faker


Then, let’s create a /mock/mock folder to manage the fake data generated by faker.js. In our project, we create two files in this folder.
The first one is responsible to the function of generating fake data.

//
Code Block
languagejs
themeConfluenceDJango
title
mock.js
const fakeData = require('./fakedata.js');
module.exports = {
    //Mock json
    'customer_info': fakeData.customer,
    'alarm_formdata_multiple': fakeData.customer,
    'home': fakeData.home,
    'language': fakeData.language,
}

...

//
Code Block
languagejs
themeDJangoConfluence
title
mock.js
const fakeData = require('./fakedata.js');
module.exports = {
    //Mock json
    'customer_info': fakeData.customer,
    'alarm_formdata_multiple': fakeData.customer,
    'home': fakeData.home,
    'language': fakeData.language,
}

...

Code Block
languagejs
themeDJangoConfluence
titleimport Import fake data object and merge it into the existed data object
// import fake data object and merge it into the existed data object
const fakeoriginalData = require('./fake/mock.js');  //import datas createdgenerated in fakedata.js
………..
   files.forEach((filename) => {
          …………….
 
          if (isDir) {
             fileDisplay(filedir);
          }
          Object.keys(fakeoriginalData).map(item => {
              localJsonDb[item] = fakeoriginalData[item];
          })
    })

...

Code Block
languagejs
themeDJangoConfluence
createServiceType: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*", 
getCustomerresourceVersion: this.baseUrl + "/uui-lcm/customers/*_*", 
getServiceTypeResourceVersion: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*",

...

//
Code Block
languagejs
themeConfluenceDJango
title
routes.js
"/uui-lcm/serviceNumByServiceType/:customer": "/CustomersColumn",
"/uui-lcm/customers/:customer": "/getCustomerresourceVersion”,
"/uui-lcm/customers/:customer/service-subscriptions/:id": "/getServiceTypeResourceVersion",

...

Code Block
languagejs
themeDJangoConfluence
titleService Module
    customers: this.baseUrl + "/uui-lcm/customers", /* get */
    deleteCustomer: this.baseUrl + "/uui-lcm/customers", /* delete */
    createCustomer: this.baseUrl + "/uui-lcm/customers/", /* put */
    ……………
 
    getAllCustomers() {
        return this.http.get<any>(this.url.customers);
    }
 
    createCustomer(customer, createParams) {
        let url = this.url.createCustomer + customer;
        return this.http.put(url, createParams);
    }
 
    deleteSelectCustomer(paramsObj) {
        let url = this.url.deleteCustomer;
        let params = new HttpParams({ fromObject: paramsObj });
        return this.http.delete(url, { params });
    }

...

Code Block
languagejs
themeDJangoConfluence
titleserver.js
const fs = require('fs');
const path = require('path');
const jsonServer = require('json-server');
const server = jsonServer.create();
const middlewares = jsonServer.defaults();
const customersRouters = require('./routes');
const baseUrl = "/usecaseui-server/v1";
…………
server.post(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/POST${prefix}`;
    req.method = 'GET';
    next();
})
server.put(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/PUT${prefix}`;
    req.method = 'GET';
    next();
})
server.delete(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/DELETE${prefix}`;
    req.method = 'GET';
    next();
})
……………

...

//
Code Block
languagejs
themeDJangoConfluence
title
routes.js
"/PUT/uui-lcm/customers/:name/service-subscriptions/:id": "/PUT_uui-lcm_customers_service-subscriptions”,
"/DELETE/uui-lcm/customers/:customer/service-subscriptions/:id": "/DELETE_uui-lcm_customers_service-subscriptions",

...

Code Block
DJango
languagejs
themeConfluence
titlepackage.json
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "server": "ng serve --proxy-config proxy.conf.json",
    "mockproxy": "ng serve --proxy-config localproxy.conf.json",
    "mockconfig": "node ./src/app/mock/server.js --port 3002",
    "mock": "npm run mockconfig | npm run mockproxy”,
    ………
 },

...

Code Block
languagejs
themeDJangoConfluence
title server.js
const jsonServer = require('json-server');
const server = jsonServer.create();
const middlewares = jsonServer.defaults();
const customersRouters = require('./routes');
const baseUrl = "/usecaseui-server/v1";

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// Get mock data
const fs = require('fs');
const path = require('path');

let localJsonDb = {};  //import mock datas
const fakeoriginalData = require('./fake/mock.js');  //import datas created in fakedata.js
const mockFolder = './src/app/mock/json'; //mock json path folder
const filePath = path.resolve(mockFolder);

fileDisplay(filePath);

function fileDisplay(filePath) {
    let fileList = [];
    // Return filelist on based of filePath
    const files = fs.readdirSync(filePath);
    files.forEach((filename) => {
        // Get filename's absolute path
        let filedir = path.join(filePath, filename);
        // Get the file information according to the file path and return an fs.Stats object
        fs.stat(filedir, (err, stats) => {
            if (err) {
                console.warn('Get files failed......');
            } else {
                let isFile = stats.isFile(); // files
                let isDir = stats.isDirectory(); //files folder
                if (isFile) {
                    fileList.push(path.basename(filedir, '.json'));
                    fileList.forEach(item => {
                        localJsonDb[item] = getjsonContent(item);
                    })
                }
                if (isDir) {
                    console.warn("=====> DO NOT support mock data in folder");
                    fileDisplay(filedir);
                }
                Object.keys(fakeoriginalData).map(item => {
                    localJsonDb[item] = fakeoriginalData[item];
                })
            }
        })
    })
    setTimeout(() => {
        serverRewrite();
        runServer(localJsonDb);
    }, 100)
}

function getjsonContent(path) {
    let newpath = `./src/app/mock/json/${path}.json`;
    let result = JSON.parse(fs.readFileSync(newpath));
    return result;
}

//only multi router data needs jsonServer.rewriter
function serverRewrite() {
    server.use(jsonServer.rewriter(customersRouters))
}

function runServer(db) {
    server.use(jsonServer.router(db));
}
server.post(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/POST${prefix}`;
    req.method = 'GET';
    next();
})
server.put(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/PUT${prefix}`;
    req.method = 'GET';
    next();
})
server.delete(`${baseUrl}/*`, (req, res, next) => {
    const prefix = req.url.replace(baseUrl, "");
    req.url = `${baseUrl}/DELETE${prefix}`;
    req.method = 'GET';
    next();
})

server.listen(3002, () => {
    console.log('Mock Server is successfully running on port 3002!')
});

...