笔者所在的公司最近要开发一个简单的管理系统，基于界面美观的角度看考虑，初步讨论后我们决定前端用VUE的vue-admin-template框架进行界面展示，另使用python的bottle框架来定义一个http接口，连接前后端。
首先我们用bottle框架写了个简单的test demo，并成功定义了http接口。
然后我们试图把vue跟服务端进行连接(框架作者写的关于template的教程我没找到，只找到了他的另一个框架element的教程，原理是一样的地址如下
根据图中所给的操作，把url改成bottle设定的地址，然后就出现了如下错误。
然后我们把市面上解决“前后端跨域问题”的博客里讲的方法都试了一下，都失败了（tip：有哪位读者想自己试试的话记得搜“vue前后端跨域”）。各种看博客分析得到结论，是vue框架跟python框架模板引擎不匹配的问题
在这种高度集成的框架里，基本只有两种方案可能满足前后端严格分离的需求。一个是把通过动态页面生成的静态页面打包放到bottle的服务工程内部，我们要开发的是一个全新的系统，未来要增删很多功能，用这种方法显然效率太低
第二种方法则是找到vue-admin-template的模板引擎，换个跟此模板引擎匹配的python框架。结果发现vue用的模板引擎是vue自己的，所以市面上很难找到合适的python框架。
两种方案都无法实现，那么我们索性接受跨域，使用nginx通过代理和反向代理的方法实现。(简单解释一下，比如我的工程里，vue用的端口是9527，python是8081，我们用8090作代理，判断哪些要发到9527，哪些要发到8081).
环境：在windows或linux上都安装好nginx（这里演示一下linux） 此为linux版本nginx的下载地址
启动nginxsudo nginx -s reload
在浏览器输入虚拟机地址，出现下图即为成功
在nginx里，加上python文件跟vue的server，大概是这个亚子
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
server {
listen 8090（nginx端口）;
location /test{
proxy_pass http://localhost:8081/test（python端）;
include proxy_params;
}
location / {
proxy_pass http://localhost:9527/（vue端）;
include proxy_params;
}
}
在vue规定端口的js里，把端口改成我们的nginx的路径
另一方面在python里，把vue的response规定好（从vue端口启动vue，用f12查一下登录时的response） 后端的代码是这个亚子
def login():
return {"code":20000,"data":{"token":"admin-token"}}
@get('/test/user/info')
def writer_of_this_article():
return {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}
接下来就是见证奇迹的时刻
当当当当
