引入json文件_使用json-server搭建的前端Mock数据系统

最近接手了一个Angular项目，因为原有项目缺乏Mock机制，因此重新搭建了一套，记录一下。

项目现状：

该项目是使用angular框架进行开发的MIS后台管理系统。接手后，我首先对项目进行了架构上的调整，主要参考了angular项目的最佳实践，参考文章如下：https://medium.com/@motcowley/angular-folder-structure-d1809be95542https://itnext.io/planning-the-architecture-of-your-angular-app-a4840bfec13bhttps://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7https://medium.com/dev-jam/5-tips-best-practices-to-organize-your-angular-project-e900db08702e

具体的不详述，最终优化后的项目结构如下：

├── 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

其中，最重要的部分是app文件夹，承载了项目中最重要的业务代码。除此之外，值得注意的是，原有项目将mock数据资源放在 /assets/json 路径下进行统一管理，每次调用文件时，都需要从这个路径下读取数据。

优化原因：

如上所述，目前的项目将mock数据放在assets中进行管理，通过改变各个模块的service中的数据请求路径来实现mock功能。因此，每次需要mock数据时，都需要修改每个service中的路径，引入本地的json文件。例如：

//home.service.ts -------------local代码
…………
  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 -------------线上代码
…………
  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",
  }

如上所示，如果需要实现home模块的mock功能，需要编写线上和本地两套代码，在本地开发时将线上代码删除，而线上联调时，又需要将local地址删除。
这样的开发方式使mock数据十分麻烦。为了减轻负担，原有的开发方式是将项目拆为线上和线下两套代码，这样省去了反复注释和删除代码的麻烦。但是这种做法同样存在很大弊端：1. 在两套代码中来回粘贴代码使得开发效率降低，且很容易因为误粘贴或是漏粘贴出现功能错误；2. 每次mock均需要大量修改service代码，service模块是angular项目的核心模块，一旦误删会导致严重的问题；3. 这种做法使无关代码参与到mock数据中来，不够优雅；
因此，需要建立一套mock数据机制，改变现有的两套代码的开发方式。

优化目标：

为解决现有mock方式存在的弊端，同时满足项目开发的新需求，新的mock方式需要达成以下目标：

1. 建立一键启动mock服务机制，使一套代码可以同时兼容线上和线下两种开发环境，废弃之前两套代码间相互粘贴的开发模式；
2. 隔离业务代码和mock数据功能，使mock数据部分的代码成为一个独立的模块，从而避免对业务代码的干扰；
3. 通过mock数据实现真正的前后端分离，使项目既能兼容原有的mock数据，又能满足新功能快速开发的需求；

技术选型：

json-server+faker.js

这两个都是好东西，具体不详述，可以看官网文档和参考文章：https://github.com/typicode/json-serverhttps://github.com/marak/Faker.js/https://www.npmjs.com/package/fakerhttps://segmentfault.com/a/1190000008574028https:/