简单了解前、后端分离与Vue.js的基本实践（上）

原文链接：

已授权发布

概述

在本期中，我们将优化之前的实践项目。通过优化工作的实践，我们会对时下流行的前、后端分离技术有一个初步的认识，并能使用时下流行的前端框架Vue.js的一些基本功能。

为什么要前、后端分离？

我们先了解清楚为什么，再来考虑怎么做。

让我们回顾一下在之前从第五期到第八期的实践，我们的网站程序是拥有前端展现的，并且是靠两个静态文件 index.html 和 return.html 做到这点。我们当时的作业方式是，先编写好这两个前端文件，并灌入一些假数据调试好样式，然后再到编写后端程序时，去改写这两个文件，去除其中的假数据，并替换成flask框架所采用的模板引擎（Jinja2）对应的标记语言代码。

实际上，上面的这个作业方式现在十分常见。如果你现在在一家互联网公司工作，很有可能这家公司的前端工程师和后端工程师也是这么配合干活的，即使后端采用的是Java或者别的程序语言。总是UI做好效果图后，交给前端，前端编写好静态页（.html文件），打包静态页、样式表（CSS）、脚本（JS）还有图片等资源给到后端开发，后端开发再根据需求改写好静态文件和编写后台逻辑。

那么这样做问题在哪里呢？问题到处都是！

首先，前端编写静态页时，为了样式调试的便利，往往需要自己往页面上写一些假数据。而不同的页面一般需要大量的测试数据编写工作，实在是浪费了前端工程师宝贵的时间。可以想象到，最佳的方式肯定是调用真实数据，那么为什么不这样做呢？因为前端要这样做，需要后台给接口传出数据，就像豆瓣的开放接口这样。但后端这样做，等同于改变了之前的程序架构，朝前、后端分离的方向去做了。

再有，一个更要命的问题就是网站界面改版。比如逢年过节各大网站都喜欢搞些节日元素，或者经过一段时间也喜欢改个版让用户感受下新鲜气息。但这种改版基本都是纯前端上的变化，功能逻辑层面几乎都没什么改变，我们之前实践的体会，应该很容易的让我们联想到，一旦是这样的需求，我们需要重制静态文件，然后在后端（Python程序）不作任何修改的情况下，再改写前端页面。既然后端功能逻辑没什么变化，为什么不让前端去承担全部工作呢？很简单，因为实际工作中，前端工程师和后端工程师是不同的语言栈，就拿Flask来说，学会jinja2的 {{ xxx }} 这种语法根本不是前端工程师该做的，更别说通常前端工程师写代码用的编辑器和开发环境，和后端用的根本就不同，所以，结果就是前端工程师不能把后端改写过的静态文件（很可能已经不是.html文件了，比如PHP里，一般情况下改写后就成了PHP文件）拿来直接修改；后端工程师也不会直接去改已和后端程序耦合的模板文件。

偶尔，因为页面变化实在太过简单，后端可以直接去改模板文件，但这是非常极端的情况。

综上，以前的前端和后端过分耦合的作业方式，容易造成程序可用性不高（拿假数据做的总归不真实），以及开发效率低下（前端要花时间制造调试数据；没后端大哥什么事的，非让人插一脚）。

虽然还有很多不好的地方，这里不多赘述。只上面这样的原因，足够让我们看到传统作业方式的缺陷。

现在我们再看看自己程序面临的问题，来进一步加深对前、后端分离的必要性的认识。

再问：这次为什么要前、后端分离？

豆瓣的电影查询接口，有下图中描述的限制：

怎么理解这个限制呢？因为我们的程序逻辑是，用户前台提交查询请求到我们的服务器（网站程序）上，我们的服务器（网站程序）再去查豆瓣，豆瓣返回结果给我们后，我们再返回给用户。即每次查询，是由我们的服务器最终提交给豆瓣的，而服务器的ip是固定的一个（单ip），也就是说，因为最终的查询是我们服务器作出的，所以我们每小时只有150次查询机会，用完就没了。如果每个用户随便查询几次（这太正常了），我们的网站程序可能一小时还不能服务多于10个人，这实在是太坑爹了。

我们马上能想到的一个问题就是，能不能让用户直接去查询豆瓣，不要通过我们的服务器去查呢？

答案是当然可以，如果把前、后端分离了，就能非常容易的实现这点。这样，看来我们这次还真是要马上学习下怎么弄，不然之前做的程序也太弱鸡了（虽然已经很弱鸡了）。

初识Vue

我们先弄清楚Vue这个英文单词怎么读。Vue不读V-U-E（逐字母发音），而是与view读音接近，view这个词学Python写过flask的早已不陌生了。

在前端的领域的发展史中，前后涌现了不少新式技术，比如

应该多少有点了解，至少听过的jQuery。jQuery是一个非常经典的前端工具库，事实上我们这次的前、后端分离光靠jQuery就行，完全用不着Vue，但为什么要让大家接触Vue呢？因为Vue包含了很多近代前端开发领域的先进编程思想，而且入门门槛不高的同时也兼有深度，并且愈来愈多的互联网公司开始采用这门技术，所以相关的资源非常丰富。更为重要的是，Vue是我们国人同胞开发的，这意味着Vue有十分完善的中文资料，这十分有助于我们更好的掌握相关知识和将之应用。

Vue与jQuery一样，全部是基于JavaScript这门语言构建。但两者区别很大，前者是框架，后者是一个库。怎么理解这个说法呢？这就好比Flask和Requests的区别，大家可以类比的想象一下。

Vue可以从很多方面去解读其用处和价值，这之中最常遇到的两个概念便是「双向数据绑定」和「渐进式框架」。有关这些概念的理解，我觉得最好的方式便是充分的实践，所以我这里暂且不和大家说明这些概念，而在之后的实践中，通过具体的案例再向大家作以相关的说明。

Vue的简单应用

大凡大家对HTML（前端）有一点基础，并使用过jQuery，就会知道应用jQuery的方式之一就是在网页里写入jQuery库的网址，这样jQuery就会生效于当前的网页应用中。相比较我们在Python中使用的pip预先安装库的方式，这实在是很有特色的一种方式。让我们就用曾经熟悉的方式，开始使用Vue。

    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue">
       
<div id="app">
    
{{ message }}