前后端完全分离的项目架构思路【Vuejs+Nodejs+SpringBoot】

一个实现前后完全端分离的架构思路；
如果理解有误请读者师傅们务必在评论区指出

什么是前后端分离

看了很多文章，总结出这样一个理解：
前后端分离就是：将HTML服务和数据服务完全分离，利用HTML中的JS代码实现Ajax，从后端获得数据并动态渲染在浏览器上。也就是需要两个服务，一个纯提供HTML/CSS/JS文本，一个纯提供数据。
如果读者师傅还是不太理解，可以看一下这几个文章，讲的比较详细，或者继续看本文也可以：
知乎：到底什么是前后端分离？
博客园：【原创】基于VueJs的前后端分离框架搭建之完全攻略
博客园：基于NodeJS进行前后端分离
如果还是不能理解，那就请继续看本文

通过对比理解前后端分离

在以前，包括做数据库课设的时候，我们开发web应用的思路可能是这样的：浏览器向服务器请求HTML，然后服务器向数据库发送查询语句，数据库将查询结果拼接到HTML文本中，返回给浏览器。
这就是前后端不分离的应用，这种应用的缺点很明显：“耦合度”不低，这种服务端只适合向用户提供网页的前端服务，而如果当业务需要扩展时，比如需要开发手机APP，或者微信小程序，就得再写一套后端，用来适配APP和小程序的数据需求。这明显是很麻烦的。
那么前后端分离的架构思路就来了，其实我觉得将这个思路称为前端+数据端更合适，如下：
红色线上方的称为前端，下方的称为后端

项目架构/技术架构

本文标题提到的【Vuejs+Nodejs+SpringBoot】的思路如下：

当用户访问网站时，请求的是静态资源的服务器，然后服务器将带有Vuejs的HTML文本返回给浏览器，浏览器执行Vue脚本结合axios，向动态资源服务器API请求动态数据和权限等信息，数据服务器查询数据库后返回给Vue。上图中实现了代码和数据权限的分离，左侧称为大前端，右侧称为后端。
而静态资源服务器的实现非常简单，只需要用Node.js根据路由读不同的视图文件并传给浏览器就OK了，一个简单的例子如下：

var express = require('express')
var fs = require('fs')

var app = express()

app.get('/', function(req, res){
     
        console.log('Received a GET request')
        const data = fs.readFileSync('./index.html', 'utf-8')
        res.send(data)
})

app.post('/', function(req,res){
     
        console.log('Received a POST request')
        res.send('The page:"/" only allow GET!')
})

app.listen(4400, function(){
     
        console.log('started!')
})

当使用GET方式获取’/'页面时，会将index.html读出来，并传给浏览器：

使用POST请求时（左侧是一个浏览器插件，可以方便地自定义POST请求）：
控制台的输出：

应用架构

结语

如果该文有任何不合理之处，请读者师傅务必在评论区指出，感激不尽！
以上，共勉