vuejs应用开发先后端分离

咱们知道，不管是web应用仍是app应用都有一个先后端，前端主要负责界面交互，后端负责数据持久化。在正规公司中通常是由两个团队来分别完成前端和后端的开发，在小公司或者我的开发的项目中，先后端颇有多是由一我的完成的。可是不管是一我的完成先后端仍是分别由两个团队来完成先后端的开发，都存在一个前端和后端交互的问题。通常来讲，前端和后端不可能同时就绪，他们分别会对对方有依赖关系。好比前端开发测试时，后端api接口并不存在，或者后端开发时前端也并不存在。这时就须要先后端独立开发模式了。支持先后端独立开发最重要的一点就是数据api接口的mock了，对于前端工程师来讲，我但愿有一个简化版的后端，能够支持简单的crud便可。对于后端工程师来讲，他也须要一个相似postman这样的哑前端充当headless的前端。

本文重点讨论针对前端工程师来讲如何创造一个可工做的哑后端。

后端模拟通常有几种方案：本地mock.js，远程mock服务，好比easy-mock就是一个好用的mock服务。

具体过程，第一步在vuejs开发环境的配置文件中

proxyTable: {
      sencod: {
        target: 'https://cnodejs.org/',     //从网上趴的接口的
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/api') == 0;   //这里的abc是和后台商量好=>api
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
      three: {
        target: ' https://easy-mock.com/mock/59d78f3b9d342f449f2fed3a/', //后面介绍这个接口
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/baseapi') == 0;   //这里的abc是和后台商量好=>baseapi
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
    },

上述代码就是告诉vue若是访问/baseapi这个url，则proxy到easy-mock的url来提供数据。

第2步：在easy-mock网站上建立本身的api接口