前后端分离项目开发规范

目录

一、前后端分离开发模式

二、Restful风格的接口规范

三、工程搭建

四、前后端联调测试

五、springboot项目的配置文件

application.yaml/yml文件

六、记录日志

七、全局异常处理器


一、前后端分离开发模式

前端项目需要独立部署在前端服务器上(nginx)

后端项目也需要独立步数在后端服务器上(Tomcat)

前端需要向后端发起请求获取数据,而后端向前端响应数据→需要共同遵守同一份接口文档

依据页面原型+需求说明→设计API接口文档

具体开发流程:

需求分析→接口设计(API接口文档)→前后端并行开发→测试(前后端自己单独测试功能接口Postman、Apifox)→前后端联调测试

Apifox=Postman+Swagger+Mock+JMeter


二、Restful风格的接口规范

URL:定义资源

Http请求方式:描述操作

GET:查询、POST:新增、PUT:修改、DELETE:删除

复制代码
在Controller层接收请求,并返回响应的数据
在方法上面加@RequstMapping("/路径")注解
// @RequstMapping 不会限定请求方式,但@GetMapping限定只能发送GET请求

三、工程搭建

1、创建SpringBoot工程,并引入web开发起步依赖、mybatis、mysql驱动、lombok

2、创建数据库表dept,并在application.yml中配置数据库基本信息

3、准备基础代码结构,并引入实体类及统一的响应结果封装类Result

复制代码
@Data
public class Result{
     private Integer code; //编码:1成功,0失败
     private String msg;   //错误信息
     private Object data;  //数据
     
     public static Result success(){
        Result result = new Result();
        result.setCode(1);
        result.setMsg("success");
        return result;
    }

    public static Result success(Object data){
        Result result = new Result();
        result.setCode(1);
        result.setMsg("success");
        result.setData(data);
        return result;
    }
    public static Result error(String msg){
        Result result = new Result();
        result.setCode(0);
        result.setMsg(msg);
        return result;
    }
}

每次创建完一个空项目,需要检查一下JDK版本:项目结构SDK和语言;以及Maven的路径(Settings→Build→Build toosl);项目字符集(Settings→Editor→file Encodings→project Encoding utf-8)


四、前后端联调测试

前端工程(发送Ajax请求)请求服务器的地址为:http://localhost:90/api/depts,是如何访问到后端的Tomcat服务器的?→Nginx的反向代理

复制代码
//Nginx/conf/nginx.conf配置文件
server{
     listen:90(前端服务器的端口);   //这个是nginx服务器监听的端口号
     #省略...
     location ^~/api/{    //location:用于定义路径匹配规则,表示:只能匹配以/api/开头的路径
         rewrite ^/api/(.*)$ /$1 break;    //用于重写匹配到的路径
         proxy_pass http://localhost:8080(后端服务器的端口); //代理转发,将匹配到的请求转发给后端服务器
     }
}

//前端的请求路径:http://localhost:90/api/depts
//后端收到的请求路径:http://localhost:8080/depts

五、springboot项目的配置文件

application.properties文件是键值对形式→臃肿,层次结构不清晰

application.yaml/yml文件
  • 数值前边必须有空格

  • 使用缩进表示层级关系,只能用空格缩进,不能tab。空格数目不重要,只要对齐即可

  • 表示注释,从这个字符一直到行尾,都会被解析器忽略

配置文件还能定义对象/Map集合,数组/List/Set集合

复制代码
#定义对象/Map集合
user:
  name: 张三
  age: 18
  sex: 男

#定义数组/List/Set集合
list:
  - 张三
  - 李四
  - 王五

spring:
  application:
    name: springboot-mybatis-quickstart
  #数据库连接池
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/web01
    username: root
    password: TY168fafafa
    driver-class-name: com.mysql.cj.jdbc.Driver

# mybatis相关配置
mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/*.xml

六、记录日志

Slf4j:提供日志操作的标准接口及抽象类(是一种规范)

具体实现是:Log4j 或者 Logback框架

Logback快速入门

1、引入logback的依赖和配置文件logback.xml

复制代码
<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <!--  控制台输出  -->
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
            <!-- 格式化输出:%d 表示日期,%thread 表示线程名,%-5level表示级别从左显示5个字符宽度,%logger显示日志记录器的名称, %msg表示日志消息,%n表示换行符  -->
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern>
        </encoder>
    </appender>
    
    <!--  系统文件输出  -->
    <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <rollingPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedRollingPolicy">
            <!--  日志文件输出的文件名, %i表示序号  -->
            <FileNamePattern>D:/tlias-%d{yyyy-MM-dd}-%i.log</FileNamePattern>
            <!--  最多保留的历史日志文件数量  -->
            <MaxHistory>30</MaxHistory>
            <!--  最大文件大小,超过这个大小会触发滚动到新文件,默认为 10MB  -->
            <maxFileSize>10MB</maxFileSize>
        </rollingPolicy>
        <encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
            <!-- 格式化输出:%d 表示日期,%thread 表示线程名,%-5level表示级别从左显示5个字符宽度,%msg表示日志消息,%n表示换行符  -->
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern>
        </encoder>
    </appender>
    
    <!--  日志输出级别  -->
    <root level="ALL">  //具体要输出哪些日志  OFF表示不输出日志
        <appender-ref ref="STDOUT"/>  //日志往哪输出
        <appender-ref ref="FILE"/>
    </root>
</configuration>

2、定义日志记录对象,调用方法(debug/info/...)记录日志

复制代码
private static final Logger log=LoggerFactory.getLogger(当前类名.class);

但是Lombok底层已经帮我们创建好了日志记录对象,我们只需要在类上加@Slf4j注解即可

日志级别:

1、debug:记录程序的调试信息
2、info:记录正常系统运行日志,重要信息
3、error:记录错误异常信息

七、全局异常处理器

@RestControllerAdvice=@ControllerAdvice+@ResponseBody

相关推荐
不能只会打代码4 小时前
校享云 — 高校智慧后勤平台微服务架构设计与实践
spring cloud·docker·微服务·nacos·vue·校享云
是梦终空4 小时前
计算机毕业设计279—基于SpringBoot+Vue3校园商户意见反馈系统(源代码+数据库+17000字论文+ppt)
数据库·spring boot·vue·毕业设计·课程设计·毕业论文·源代码
刘某的Cloud5 小时前
Nginx 最小安全配置模板
linux·运维·nginx·安全·系统
欢醉6 小时前
k8s的pod容器中微服务无法创建新线程unable to create new native thread
kubernetes·springboot
yyt3630458411 天前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
2501_915716721 天前
Nginx网关讲解_小白版
运维·nginx
这里是杨杨吖2 天前
SpringBoot+Vue心理健康咨询系统 附带详细运行指导视频
spring boot·vue·心理健康
悦儿遥遥雨12 天前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx