简介

前后端分离架构实现了前端与服务端的完全解耦，前端与后端可同时进行开发（遵循开发文档），解决了那令人难受的套模板操作。这里以SpringBoot+Vue做项目的基本框架。

环境准备：

服务端：

jdk8/以上
maven

前端

Node
Vue-cli脚手架

 # 创建一个名为hello-vue的工程
  vue init webpack hello-vue
 # 根据自己的需求选择，如果不确定就一直选择no，后面需要再加；
 # 安装依赖，我们需要安装vue-router、element-ui、 sass-loader 和node-sass四个插件
 # 进入工程目录
 cd hello-vue
 # 初始项目
 npm install
 # 安装vue-router
 npm install vue-router --save-dev
 # 安装element-ui
 npm i element-ui -S
 #安装SASS加载器
 cnpm install sass-loader node-sass --save-dev
 # 如果安装出现失败把npm换为cnpm（前提，你的node安装了淘宝镜像，安装语句：npm install --registry=https://registry.npm.taobao.org）  
 #启动测试
 npm run dev

你也可以通过Vue3提供的图形化界面来创建Vue项目，创建命令：vue ui

2. 搭建服务端环境，并引入基本jar包

我们创建一个SpringBoot项目，

初始化项目
测试我们选择一个web就ok了

编写统一返回后结果

目录结构
CustomizeResultCode：

 public interface CustomizeResultCode {
 
     /**
      * 获取错误状态码
      *
      * @return 错误状态码
      */
     Integer getCode();
 
     /**
      * 获取错误信息
      *
      * @return 错误信息
      */
     String getMessage();
 }

Result：

 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
 import java.util.HashMap;
 import java.util.Map;
 
 /**
  * 公共返回结果
  *
  * @author NieChangan
  */
 
 @Data
 public class Result {
 
     @ApiModelProperty(value = "是否成功")
     private Boolean success;
 
     @ApiModelProperty(value = "返回码")
     private Integer code;
 
     @ApiModelProperty(value = "返回消息")
     private String message;
 
     @ApiModelProperty(value = "返回数据")
     private Map<String, Object> data = new HashMap<>();
 
     /**
      * 构造方法私有化,里面的方法都是静态方法
      * 达到保护属性的作用
      */
     private Result() {
 
     }
 
     /**
      * 这里是使用链式编程
      * 成功
      *
      * @return
      */
     public static Result ok() {
         Result result = new Result();
         result.setSuccess(true);
         result.setCode(ResultCode.SUCCESS.getCode());
         result.setMessage(ResultCode.SUCCESS.getMessage());
         return result;
     }
 
     /**
      * 失败
      *
      * @return
      */
     public static Result error() {
         Result result = new Result();
         result.setSuccess(false);
         result.setCode(ResultCode.COMMON_FAIL.getCode());
         result.setMessage(ResultCode.COMMON_FAIL.getMessage());
         return result;
     }
 
     /**
      * 自定义返回成功与否
      *
      * @param success
      * @return
      */
     public Result success(Boolean success) {
         this.setSuccess(success);
         return this;
     }
 
     /**
      * 返回的异常信息
      *
      * @param message
      * @return
      */
     public Result message(String message) {
         this.setMessage(message);
         return this;
     }
 
     /**
      * 返回的状态码
      *
      * @param code
      * @return
      */
     public Result code(Integer code) {
         this.setCode(code);
         return this;
     }
 
     /**
      * 返回的数据
      *
      * @param key
      * @param value
      * @return
      */
     public Result data(String key, Object value) {
         this.data.put(key, value);
         return this;
     }
 
     public Result data(Map<String, Object> map) {
         this.setData(map);
         return this;
     }
 }

ResultCode：

 /**
  * @Author: NieChangan
  * @Description: 返回码定义
  * 规定:
  * #200表示成功
  * #1001～1999 区间表示参数错误
  * #2001～2999 区间表示用户错误
  * #3001～3999 区间表示接口异常
  */
 public enum ResultCode implements CustomizeResultCode {
     /* 成功 */
     SUCCESS(200, "成功"),
 
     /* 默认失败 */
     COMMON_FAIL(999, "失败"),
 
     /* 参数错误：1000～1999 */
     PARAM_NOT_VALID(1001, "参数无效"),
     PARAM_IS_BLANK(1002, "参数为空"),
     PARAM_TYPE_ERROR(1003, "参数类型错误"),
     PARAM_NOT_COMPLETE(1004, "参数缺失");
 
     private Integer code;
 
     private String message;
 
     ResultCode(Integer code, String message) {
         this.code = code;
         this.message = message;
     }
 
     @Override
     public Integer getCode() {
         return code;
     }
 
     @Override
     public String getMessage() {
         return message;
     }
 }

返回结果的使用：

首先我们所有api方法返回结果都为：Result
返回结果写法：

  return Result.ok()
         //状态码
         .code(ResultCode.SUCCESS.getCode())
         //状态信息
         .message(ResultCode.SUCCESS.getMessage())
         //返回给前端的数据（如果不需要返回数据就不用.data）
                 .data("data",data);

开发的踩坑记录（只做记录，具体解决办法自行百度）：

我们的SpringBoot版本：（如果你不了解该版本特点）建议用2.4一下的版本，
由于项目为前后端分离架构：你需要考虑到跨域，由于session不支持跨域，那么你得了解token的认证方式，来解决用户认证。你的api接口也得配置跨域，

前后端分离架构环境搭建

简介

环境准备：

服务端：

前端

目录：

1. 搭建Vue工程，并安装基本插件

2. 搭建服务端环境，并引入基本jar包

1. 搭建Vue工程，并安装基本插件

2. 搭建服务端环境，并引入基本jar包

返回结果的使用：

开发的踩坑记录（只做记录，具体解决办法自行百度）：