简单再回顾一下前后端分离的历程，以及他的优点（有的内容是粘贴的别人的，我只用来自己学习，侵权删）

我的大作业要用到python写后端代码，但是python写前端页面太够吧丑了，所以还是得学习学习Vue，在系统学习vue之前，我先回顾回顾之前学习过一小段时间的vue，以及了解一下前后端分离的好处

在 5 年前，前后端还是几乎是不分离的，web 开发中的代码尤其混杂，PHP 中有 JS，JSP 中有 JS，ASP 中有 JS，JS 中有 HTML，HTML 中有 CSS，HTML 中还有 JS，各种标签代码一锅粥，数据在各处流窜，眼花缭乱，极难维护。

比如这样一段包含模板标签的 html 代码：

<!--服务器端渲染 -->
<select>
    <option value=''>--请选择所属业务--</option>
    {% for p in p_list %}
    <option value="{{ p }}">{{ p }}</option>
    {% endfor %}
</select>

不去后端查代码，你无法知道 p_list 是何种对象，有何属性。

这种开发方式的问题越来越严重： 1、性能下降：由于网页全部由服务端渲染，每次刷新都需要服务器返回整个网页的内容，性能下降，给用户的体验就是慢，卡。 2、维护越来越困难：各种代码混在一起，可读性极差，耦合度极高，改动一处可能会引发灾难。 3、效率下降：一个人精力有限，很难精通所有语言，精通 javascript 的可能不会 Python，反之亦然，因此开发时需要临时再学习新知识，效率下降。

前后端半离不离

AJAX 的出现，让网页局部刷新成为可能。这一特性可以让用户留在当前页面中，同时发出新的HTTP请求，数据却可以不断地更新。解决了服务器每次请求都返回整个网页这种低效的机制。最早大规模使用 AJAX 的就是 Gmail，Gmail 的页面在首次加载后，剩下的所有数据都依赖于 AJAX 来更新大大提升了响应速度。也就是解决了上述问题 1。

虽然有 AJAX ，但大多数的页面还是有服务器端渲染的，也就是前后端半离不离的阶段，这仍然无法解决上述问题 2 和问题 3。

前后端彻底分离

后来随着前端技术的飞速发展，浏览器的不断迭代，前端 MVC 框架应运而生，如 React、Vue、Angular ，利用这些框架，我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站，同时这类框架都提供了前端路由功能，后台可以不再控制路由的跳转，将原本属于前端的业务逻辑全部丢给前端，这样前后端分离可以说是最为彻底，生成的代码的可读性和维护性都得到相应提高。如下面的一段代码：

<!--前端渲染 -->
<template>
    <select id="rander">
        <option value=''>--请选择所属业务--</option>
        <option v-for="list in lists" :value="list" v-text="list"></option>
    </select>
</template>

<script>
export default {
    data: {
        return {
            lists: ['选项一', '选项二', '选项三', '选项四']
        }
    }，
    ready: function () {
        this.$http({
            url: '/demo/',
            method: 'POST',
        })
        .then(function (response) {
            this.lists = response.data.lists // 获取服务器端数据并渲染
        })
    }
}
</script>

说到这里，什么是前后端分离，有一个简洁的判断标准：第一次在浏览器中输入网址请求服务器，此时服务器返回一个 html 页面，即首页，一般是 index.html，在后续的请求中，只要服务器端返回 html 页面，就不是前后端分离，只要服务器返回的是纯数据，就是前后端分离，跟所用的语言，框架，没有任何关系。

前后端彻底分离带来的优点是显而易见的：

1.提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。

2.局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

3.降低维护成本

通过目前主流的前端 MVC 框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

前后端分离但并不分家

前后端虽然分离，但对团队分家，分成前端团队和后端团队却未必是最合适的。分离的目的是减少沟通过程中信息的损耗，如果分成两个团队，沟通成本仍然会增加。通常的作法是一个团队里即有前端开发者，又有后端开发者，一开始大家都专注自己份内的事情，无需经常沟通，只需要最后前后端接口联调时需要对接一次。前后端分离的好处是：彼此的分工非常明确，专注于自己最擅长的事情。

你可能会问了，我就一个人，在 web 开发时，是否也搞前后端分离？

我的回答是，要的，这是一种良好的工程实践，使你的写前端时专注前端设计，写后端时专注后端数据，减少大脑在前后端切换的能量损耗，这会使你开发更轻松，更高效，更少 bug。

为什么要学点前端

前后端分离是一种必然趋势，前端慢慢地发展为大前端，前端工程师的作品直接面向用户，用户的体验好不好，直接决定产品的生死存亡，越来越多的公司开始重视前端开发，结果就是前端薪资的不断提升。相反后端工程师就是默默付出，没有前端的展示，一堆枯燥的数据好像并不能引起人们的兴趣，你写的代码性能好是应该的，性能差就被骂死，功劳好像都被前端抢走了。

那么，后端如何体现自己的价值呢？在适当的时候展示自己的实力即可，如何展示？还是需要借助 web 这种互联网工具，别人想看看你的数据，你二话不说，直接给他一个你做的网站的 url 链接，一打开就有良好的数据展示和交互，想象一下对方惊呼牛逼时自己的心情吧。

或者你想开发一个效率工具给大家用，web 开发都是最好的方式。

学习前端，可以更好的理解网站、浏览器的工作机制，爬虫原理，也可以发现其他网站的一些漏洞，bug，完善自己的编程知识体系。

另外，学会前端可以自己建站获取流量，帮别人建站获取报酬，收获都是非常大的。

因此，我建议后端工程师学点前端知识，不求精通，至少可以使用前端技术栈为自己服务。

DjangoRestFramework + Vue 前后端分离环境搭建

说了这么多，来点硬货吧。什么是 REST API，可以看看阮一峰老师的博客上的解释，这里就不啰嗦了。

DjangoRestFramework 是 Python 里开发 REST API 最好用的库，没有之一，当然这是我自己的观点，如果你不授受，就让我接受你的。

什么是 Vue ，为什么要学 Vue，因为 Vue 是一个轻量级，渐进式的前端框架，有非常活跃的社区和生态，学习成本低，开发效率高，随学随用，易于理解。

标签：前后,前端,分离,Vue,粘贴,历程,代码,侵权,页面
From： https://www.cnblogs.com/zhanshuang/p/17966156