前言

到底什么是前后端分离？通俗的来说就是前端的开发与后端的开发分离，前后端分离已成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个 NodeJS）有效地对前端和后端的开发进行解耦。其实，前后端分离的核心思想就是前端 HTML 页面通过AJAX调用后端的RESTFUL API接口，并通过JSON数据进行交互。

为什么要进行前后端分离？

  1. 前后端耦合的缺点（以 JSP 为例）
    • 动态资源和静态资源全部耦合在一起，服务器压力大
    • 第一次请求 JSP，必须要在 WEB 服务器中编译成 Servlet，第一次运行会较慢
    • 如果 JSP 中的内容很多，页面响应会很慢，因为是同步加载，一次输出所有内容
    • ······
  2. 前后端分离的优点
    • 前后端分离可以真正地实现前后端解耦，前端服务器使用 Nginx，前端服务器负责控制页面引用、跳转和路由，前端页面通过 AJAX 异步调用后端的接口，后端服务器使用 Tomcat，加快整体响应速度
    • 前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页面也会正常访问，只不过数据刷不出来而已
    • 前后端分离的模式下，后台的接口可以复用。（多端应用）
    • 页面显示再多的内容也不怕了，因为从同步加载改成了异步加载。
    • ······

如何实现前后端分离？

这里讲解的方式是 SpringBoot+Vue 进行分离，分别部署到 Tomcat 与 NodeJs 两个不同的服务器上。

创建一个 SpringBoot 项目

…

使用 vue-cli 创建 vue 项目

vue-cli 官网：https://cli.vuejs.org/zh/

  1. 安装 nodejs 环境

    官网下载

    一直默认下一步就行，路径可以自定义，安装完之后输入node -v，npm -v查看版本号。

    image-20210305234857573

  2. 安装vue-cli

    • npm 默认是从国外的服务器下载，受网络影响较大。设置淘宝镜像可以解决这个问题
    1
    npm config set registry https://registry.npm.taobao.org
    • 检测是否设置成功
    1
    npm config get registry
    image-20210306000227284
    • 全局安装vue-cli
    1
    npm install -g @vue/cli
    • 检查是否安装成功
    1
    vue --version
    image-20210306000556387

  3. 创建新项目

    • 运行以下命令来创建一个新项目：
    1
    vue create hello-world
    • 选择相应的设置(预设)完成创建
    image-20210306002818051
    • 创建成功
    image-20210306003126725

  4. 启动 vue 项目

1
npm run serve

配置 vue 项目

  • 安装axios
1
npm install axios

  • 初始化 vue 项目结构

    使用vue-cli创建 vue 项目会有一个初始页面，我们在开发过程中并不需要，将无用的东西去掉

解决跨域的问题

在 Web 端 Vue 项目开发过程中，跨域问题是不可避免的；

Webpack 配置 proxy 实现代理——开发环境

我们的项目工程是通过Vue-cli3来搭建的，因此没有了Webpack的显式配置文件；需要我们在工程根目录下手动创建vue.config.js去实现 Webpack 的配置

  1. 新增vue.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    module.exports = {
      devServer: {
        host: '127.0.0.1',
        port: 8080,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
          '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
            target: "http://localhost:8081", //目标地址，一般是指后台服务器地址
            changeOrigin: true, //是否跨域
            pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
              '^/api': ""
            }
          }
        }
      }
    }

    配置完成后，我们发起的每次 http 请求的 Request Url 的前面一部分都会和我们配置的源一样；

    举例：

    1
    axios.get("/api/getUserList")

    我们项目跑在开发环境下的http://localhost:8080上，那么上述请求的 Request Url 的就是 http://localhost:8080/api/bookCate;这应该就是我们的代理服务器中该资源的地址，与客户端同源；而数据的实际来源则是http://localhost:8081/api/bookCate，这样即实现代理跨域；

总结

前后端分离并非仅仅是一种开发模式，而是一种架构模式（前后端分离架构）。千万不要以为只有在写代码的时候把前端和后端分开就是前后端分离了，这样的理解太片面了。前后端分离是需要区分前后端项目的，即前端项目和后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，两组不同的开发人员。前后端开发工程师需要约定交互的接口，实现并行开发。而在开发结束之后，前端项目和后端项目都需要进行独立部署，前端通过 AJAX 来调用 HTTP 请求，调用后端的 RESTFUL API。前端只需要关注页面的样式与动态数据的解析和渲染，不用关心数据是怎么产生的；后端则专注于具体的业务逻辑，返回前端展现所需要的业务数据即可。