【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        编写前端代码的同学都知道，目前最火的前端代码是vue&element ui，而后端个人又比较喜欢用webpy，那么这两者是怎么配合的。现在都说要实现前后端分离，两者的json数据又是怎么交互的？正好可以花点时间交流下。

1、代码融合

        webpy代码比较简单，除了app.py之外，一般还有一个templates目录。这个templates目录就是mvc架构里面的v。而vue&element ui最终生成的是一个index.html加一个static目录，static目录中包含有js、css、fonts等子目录。所以，现在需要做的就是四步，

        第一步，将static拷贝到和app.py平级的目录，

        第二步，创建一个templates目录，将index.html文件拷贝到templates目录下，

        第三步，修改index.html文件，第一行添加如下内容，原有内容移到第二行，

$def with ()

        第四行，添加一个base.html文件，

        有了这四步之后，前后端就可以整合在一起了。

2、api的使用

        既然前后端实现了分离，那么除了第一次index.html之外，其他前后端的交互基本上都是用api来完成的，数据部分基本也都是json。这个时候，就需要分成两种情况。第一种，调试的时候，使用代理来实现调试；第二种，部署的时候，直接调试。

        在分析两种使用场景之前，可以先看下js里面一般是怎么用axios访问数据的，

        这是一个典型的axios应用场景。访问的方法是api，输入的数据是key1和key2。

2.1 代理测试

        如果是代理测试，那么势必要进行代理配置。项目中有vue.config.js的话，一般proxy在这个文件里面。如果没有这个文件，项目工程使用vue init来实现的，那么代理配置在build/webpack.dev.conf下面，直接修改proxy部分，

        有了这个配置，我们在npm run dev启动前端代码后，就可以让js访问到另外一个ip&端口的后端。这样势必涉及到url跨域的问题，所以webpy的工程也要稍作修改，

          上述代码中最重要的部分就是web.header的设置，有了这句话，基本上就可以解决跨域问题。当然，如果我们的代码是部署在iis中，那么就要在iis中解决web server跨域的问题。

2.2 正常测试

        有了上面的代理测试，正常测试就比较容易。唯一一个需要修改的地方，就是参数的个数问题。同样是后端webpy，如果两者是正常组合测试，那么同样的功能后端的代码是这么写的，

        了解了上面这几点，基本上就可以掌握了前后端联调的方法了。