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接口

巴特西

vuejs应用开发前后端分离

最新文章

热门文章