前后端分离架构环境搭建

最新推荐文章于 2024-09-26 08:46:53 发布

Petricho_r

最新推荐文章于 2024-09-26 08:46:53 发布

阅读量837

点赞数

文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/qq_44780858/article/details/120202672

版权

简介

前后端分离架构实现了前端与服务端的完全解耦，前端与后端可同时进行开发（遵循开发文档），解决了那令人难受的套模板操作。这里以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);