Flask + AngularJS + Jinja2 实现前后端交互

1.需求

• 做一个网页，需要一个由后端控制内容的菜单。一开始的时候是所有内容都在jinja2模板中进行渲染。后面发现这样每个视图都需要传菜单的数据。就想着能不能写一个接口，前端只要请求这个接口进行渲染就可以了，这样就可以只在base模板中写菜单，后面的直接继承即可。

2.框架选择

• 由上面的需要，一开始还不知道这么写前端，只知道用ajax请求菜单的接口，能是能拿到数据。但是对于基板小白的笔者来说，怎样将拿到的数据放在该放的位置就是问题了。

• 好在前几天在看Spring Could 框架的时候看到了一篇教程，讲的是如何用AngularJS 消费RESTful web服务。看到里面用的AngularJS 很简单就实现了与Spring Could的交互。只要引入angularjs.js就能用了，其请求后端的$http也跟ajax的get方法差不多，最方便的是拿到数据后传给$scope就可以嵌入到html的任何地方，就像jinja2。

• 当然也有不足的地方。一是，AngularJS 的变量获取字符和jinja2的冲突了，都是用的{ { }}。二是，在手机上好像不能用，目前还不知道是什么原因。

3.设计开发

/BookStore/static/js/fronts/get_book_type.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
   
   
    $http.get('http://127.0.0.1:5000/get_book_type').
        then