如何用jsonserver模拟接口获取mock数据

在做这个解答时，我想说点别的东西。

前后端分离。

到底什么是前后端分离呢？网上有人说，前端是与浏览器打交道的，而后端是与服务器打交道的，这么说是没错。通常我们都会认为前端只要掌握html、css、js(前后端通吃)，而如今随着（pad/mobile/pad）的兴起，前端后开发人员的职责分得越来越明显，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。前端负责展现、交互，后端负责、数据接口

传统的前端开发协作模式有两种

一种是前端先写一个静态页面，写好后，让后端去套模板。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。

另一种协作模式是，前端直接去写模板，这样做的问题在于，前端编写过程中很依赖与后端环境，如果当后端没写完的情况下，前端几乎没法干活。

典型的例子是淘宝团队中途岛(Midway Framework)和SPA

关于SPA，我简单的理解为单页面应用，就是在程序内不发生任何跳转至任何页面，通过ajax或者是路由来实现在一个页面跳转，典型的框架是vue、angularJS、reactive。SPA式的前端分离，是从物理层区分，认为客户端就是前端、服务端就是后端。当然也有些人前端后分离从开发职责上前端负责负责View和Controller层，而后端负责Model层

关于数据mock，前端开发时，经常需要后台提供数据才能看到效果，所以在vue中通过jsonServer在模拟一个api，提供假的数据方便于前端测试  jsonserver地址

我在跟着视频动手做vue项目时，着实遇到一个关于jsonServer的大坑。

1、安装jsonServer   cnpm install jsonserver --save

2、在vue项目的build文件下的dev-server.js里面var app = express()配置

github上面关于jsonServer的代码

3、配置db.json

和build放在同一一级目录下

4、查看db.json，这个步骤不必要配置dev-server.js，只要安装jsonServer即可

通过http://localhost:3000访问

5、下面配置index.js文件，使用代理访问到数据mocks（之前就是没配置这个，卡在那里好久）

6、测试

8080端口访问到的内容

8081访问到内容

两个端口访问的内容是一样的，即代理成功

在代码里发起一个get请求

成功访问

json-server模拟接口获取mock数据

前后端分离的思考与实践（一）

浅谈WEB前后端分离

前端：将网站打造成单页面应用SPA（一）

这一关总算过去了