后端技术文档模板-后端技术包括哪些

在开发的时候，慢慢感觉到Vue其实本质上也是一种模版技术，怎么说呢？听我细细分解。比如Java使用的jsp，Thymeleaf，还是Python使用的Django, 或者是jinja2, 这些都是模版技术，本质上就是后端返回模板对应的html，也就是找到这个模板对应的html文件，而这个html之中需要展示我们想要的内容后端技术文档模板，比如样式，布局，当然更重要的是数据。所以在HTML的标签之中，我们就可以直接使用后端方法返回给这个html页面模板页面的数据，然后在相应的地方展示出来。

Java与Thymeleaf

以Java为例，我们在开发Java Web项目的时候，我们需要的数据，就放在ModelAndView之中，我们就可以在前端的页面之中使用了。

在Thymeleaf之中使用，首先是引用命名空间

    
        
        
        
    

    
        

            

        
    
" class=" language-html">

通过上述的代码，我们的前端模板页面，就拿到了后端返回的message数据，并且在页面之中展示了出来。

Python与Jinja2

对于Jinja2来说，也是这个道理，我们使用关键字参数，使用render_template()，然后把模版名称和需要返回的数据都返回给了前端的页面，那这个时候模版页面就可以直接使用我们前端页面里面的数据了。

模版之中的代码，就可直接获取后端方法传过来的数据，使用{{}}取数据，有逻辑判断操作的话，就要使用使用{%%}表达式，这个是和模板语法特性相关的。

    
    
    
    


    {# 直接获取数据 #}
    
name: {{ name }}
    
 age: {{ age }}
    
home: {{ home }}

" class=" language-html">

更明显的循环，这个非常类似于Vue之中数据的填充，展示的部分几乎是异曲同工。下面把前端和后端的代码放在了一起便于展示。

    
    
    
    


    {# 直接获取数据 #}
    
name: {{ name }}
    
 age: {{ age }}
    
home: {{ home }}
    
四大名著
    

        {# for循环列表 #}
        {% for book in books %}
            
 {{ book }} 
        {% endfor %}
    
    
孙悟空
    {# for循环字典 #}
    {% for key, value in monkey.items() %}
        
 {{ key }} :{{ value }}
    {% endfor %}

" class=" language-python">

下面是上述的代码在页面之中的展示情况：

Vue“模板技术”

下面是vue的组件，在template之中就是专门为了展示而出现的，而在下面的script部分，我们定义的data，girls，selectGirl就是我们的需要的数据，正好是为了template之中展示而准备的。在Vue之中，由于他的双向绑定和虚拟Dom的特性，我们不需要像是jQuery一样去操作Dom而更新页面，而这些数据，其实也是像是jQuery一样，使用ajax请求从后端获取的，只不过在Vue之中请求的方式换成了axios，本质上是没有区别的。下面的图片就是展示状况。

    
    

         你好啊！ 
         来啊！ 
        

        {{data.girls}}, {{data.selectGirl}}, {{data}}
        

        
            {{index}} : {{item}}
        
    
    

        你选择了 === {{data.selectGirl}} === 为你服务！
    


" class=" language-html">

下面是上述的Vue代码展示的情况，其中我们点击了按钮，选择了数据后端技术文档模板，如下：

总结

从Vue来看，把thymeleaf和jinja2与vue相比，他们获取数据的方式，在展示这个层面上是非常相似的，尤其是字典循环列表的循环，和vue的赋值方式很像，对于更加普通的文本，一般都是直接使用{{xx}}的方式获取。

当我们没有进行前后端分离的时候，也就是直接由后端的方法，在返回视图的同时，返回给我们视图里面需要的数据，所以我们直接填充即可，但是如果是前后端分离的时候，那我们就需要去单独请求数据，要么使用jQuery的ajax，要么使用Vue的axios请求数据。

当然了，如果仅仅把Vue看成是一个模板技术，那就有点大材小用了，至少从功能上来说，Vue最少还有一个这些模板技术没有的，那就是路由管理，在Vue之中有专门的router/index.js来配置路由，而后端配合的模板技术，这块是由后端去管理的。