后端使用Python的基于Tornado框架的pyrestful插件，设计发布为REST规范的webservice，并解决跨域服务问题，前端通过axios进行访问rest接口。
Web 应用程序最重要的 REST 原则是，客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知。
Ajax 和 RESTful Web 服务本质上是互为补充的。它们都可以利用大量 Web 技术和标准，比如 HTML、JavaScript、浏览器对象、XML/JSON 和 HTTP。当然也不需要购买、安装或配置任何主要组件来支持 Ajax 前端和 RESTful Web 服务之间的交互。RESTful Web 服务为 Ajax 提供了非常简单的 API 来处理服务器上资源之间的交互。
对于使用了Python的Tornado框架，设计发布为REST规范的webservice，.综合了网上的方法，基本上有两种：一种是直接使用Tornado实现，有一个是使用pyrestful的插件，pyRestful是一个API，用于使用Tornado Web服务器开发restful服务。
注意：需要先安装tornado，详见第3章Tornado Web框架。
原样例提供Json、XML返回数据，以及GET、POST方法，本文只保留GET部分，详见https://github.com/rancavil/tornado-rest/blob/master/demos/books_service.py。
import tornado.ioloop import pyrestful.rest from pyrestful import mediatypes from pyrestful.rest import get, post, put, delete class Book(object): isbn = int title = str class BookResource(pyrestful.rest.RestHandler): @get(_path="/books/json/{isbn}", _types=[int], _produces=mediatypes.APPLICATION_JSON) def getBookJSON(self, isbn): book = Book() book.isbn = isbn book.title = "我的书编号是 "+str(isbn) # "My book for isbn " 英文替换汉字 return book if __name__ == '__main__': try: print("Start the service") app = pyrestful.rest.RestService([BookResource]) http_server = tornado.httpserver.HTTPServer(app) #http_server.listen(8090,address='192.168.16.71') http_server.listen(8090) tornado.ioloop.IOLoop.instance().start() except KeyboardInterrupt: print("\nStop the service")运行后端程序，启动服务。
浏览器访问，运行结果。
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。
我们写完接口，客户端测试post还是get请求自己脚本去调用都是正常返回，但是到前端调用就会碰到各种各样的问题，非常典型的就是跨域问题（Access-Control-Allow-Origin ）。
1 Access to XMLHttpRequest at ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.pyrestful解决方案，参照tornado 添加请求头进行允许跨域处理，详见如下两种方案：
方案一，在自己应用程序里加上请求头：
class BookResource(pyrestful.rest.RestHandler): """解决JS跨域请求问题""" def set_default_headers(self): self.set_header('Access-Control-Allow-Origin', '*') self.set_header('Access-Control-Allow-Methods', 'POST, GET') self.set_header('Access-Control-Max-Age', 1000) self.set_header('Access-Control-Allow-Headers', '*') self.set_header('Content-type', 'application/json') @get(_path="/books/json/{isbn}", _types=[int], _produces=mediatypes.APPLICATION_JSON) def getBookJSON(self, isbn): book = Book() book.isbn = isbn book.title = "我的书编号是 "+str(isbn) return book方案二，修改pyrestful源代码，加入处理请求头： 对应源代码\site-packages\pyrestful\rest.py。
class RestHandler(tornado.web.RequestHandler): ''' """解决JS跨域请求问题""" def set_default_headers(self): self.set_header('Access-Control-Allow-Origin', '*') self.set_header('Access-Control-Allow-Methods', 'POST, GET') self.set_header('Access-Control-Max-Age', 1000) self.set_header('Access-Control-Allow-Headers', '*') self.set_header('Content-type', 'application/json') ''' def get(self): """ Executes get method """ self._exe('GET')在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。
下载引入axios，地址为：https://github.com/axios/axios/
前端HTML项目结构如下图所示，样例代码为index.html。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/axios.js"></script> </head> <body> <div>开始测试</div> <div id="app"> {{ info }} </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('http://localhost:8090/books/json/1528') .then(response => (this.info = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script> </html>此测试项目部署到Nginx主服务目录html下，目录为testVue。启动Nginx，打开浏览器输入：“http://localhost/testVue”。
结果如下：
参考：
《Nginx+Vue.js+Tornado前后端分离架构环境实践（1）》 博客 ， 肖永威 ，2020年10月 《Nginx+Vue.js+Tornado前后端分离架构环境实践（2）》 博客 ，肖永威 ，2020年10月 《Tornado简单Get请求返回JSON字符串（Python）》 博客 ，LIJZ_Python ， 2018年3月 《[33]python Web 框架:Tornado》 博客 ， 周小董 ，2018年6月 《tornado基础入门（一）——简单了解tornado》 博客园 ， 不蜚又不鸣 ， 2016年11月 《Tornado中文教程》 OSCHINA ，wilelm tornado 2013年05月 《前后端分离与前后端不分离的区别》 博客园 ，skaarl ，2018年9月
