Tornado and Vue SPA


使用 x-template 写 Vue 已经算很好的体验了,不过,总是想要更好点。

如果使用 SPA 的模式写,开发的时候有很多好处,无法不想去使用它。

虽然 SPA 模式其实与后端是什么关系并不大,不过既然使用上了 Tornado,就说说它们如何一起工作。

如果有部分功能页面已经用 jquery 或者 Vue x-template 模式写了,那么可能会考虑从此以后新上的页面都用 SPA 模式。

由于项目文件夹已经有很多东西了,创建一个新的 SPA 项目,就新建个文件夹,创建完之后再把一些文件拿过来放到现有项目里面混合到一起,如果不存在名字冲突的文件夹,那最好不过了。

构建好的文件,dist,静态文件而已,其实来说随便放哪里都可以,只要能被 web 服务器找到。考虑到 static 文件夹其实默认就被 Tornado 作为静态文件所在,所以放这个文件夹下面可能就简单些吧,以及如果 nginx 配置了对 static 文件夹的处理,就会也是一并自动处理了,那么,修改下 Vue 的构建目标地址就好。

例如类似下面这个 VueHandler 一样,我把项目构建放到了 static/dist 这里,给个路由到这里。这样一个旧项目,既用上了 SPA,也不影响原有项目。

class VueHandler(web.RequestHandler):

    @gen.coroutine
    def get(self, *ags, **kwargs):
        self.render('../static/dist/index.html')

class UsersHandler(web.RequestHandler):

    @gen.coroutine
    def get(self, *ags, **kwargs):
        self.redirect('users/index.html')

def make_app():
    handlers = [
        (r'/', HomeHandler),
        (r'/vue', VueHandler),
        (r'/users', UsersHandler),
        (r'/users/(.*)', web.StaticFileHandler, {'path': 'templates/users/dist'}),
    ]
    settings = dict(
        debug=True,
        template_path='templates',
        static_path='static',
        cookie_secret='',
    )
    return web.Application(handlers, **settings)

如果,是只是想某个页面使用 SPA 来改写,那么其实也差不多的,只不过 Vue 项目的地址是在某一个页面下,比如上面的 users,以兼容现有项目结构,仅仅是路由指向方式改一下也就可以了。