前后端分离开发

注：本文章基于黑马程序员相关视频及资料进行编写，代码简单，较容易理解，若有问题或者源码资料获取可以在评论区留言或者联系作者！

---

开篇

目前项目问题：

• 开发人员同时负责前端和后端代码开发，分工不明确
• 开发效率低
• 前后端代码混合在一个工程中，不便于管理
• 对于开发人员要求高，人员招聘困难

一、前后端分离开发

（1）介绍

前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职、提高开效率，前后端代码并行开发，可以加快项目开发进度，目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流的方式。

前后端分离开发，从工程结构上也会发生变化，即前后端代码不再混合在同一个maven工程中，而是分为前端工程和后端工程；

（2）开发流程

前后盾分离开发后，面临一个问题，就是前端人员和后端人员如何来进行配合来共同开发一个项目？
可以按照如下的流程进行：

接口（API接口）：就是一个http请求，主要就是去定义：请求路径、请求方式、请求参数、响应数据等内容；
具体如下所示:

（3）前端开发框架

前端开发工具：

• Visual Studio Code
• hbuilder

技术框架：

• nodejs
• VUE
• ElementUI
• mock
• webpack（打包工具）

---

二、Yapi

使用YApi，可以执行以下操作：

• 添加项目
• 添加分类
• 添加接口
• 编辑接口
• 查看接口

---

三、Swagger

（1）介绍

使用Swagger只需要按照它的规范去定义接口及接口相关信息，再通过Swagger衍生出来的一系列项目和工具，就可以做到生成各种格式的接口文档，以及在线接口调试页面等；

（2）使用方式

1. 导入klife4j的maven坐标

 <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>2.0.7</version>
        </dependency>

2. 导入knife4j的相关配置类
   先使用注解开启swagger的两个注解开启swwagger功能;
   @EnableSwagger2
   @EnableKnife4j

    @Bean
    public Docket createRestApi(){
        //文档类型
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.pojo123.jinhao.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("jinhao外卖")
                .version("1.0")
                .description("jinhao外卖接口文档")
                .build();
    }
}

3. 设置静态资源，否则接口文档页面无法访问

registry.addResourceHandler("doc.html").addResourceLocations("claapath:/META_INF/resources/");
       registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");

4. 在LoginCheckFilter中设置不需要处理的请求路径
   
5. 启动项目，访问http://localhost:8080/doc.html，即可进入接口管理页面：
   
   可以在文档管理-离线文档中进行文档的下载；

（3）常用注解

四、项目部署

（1）部署架构

（2）部署环境说明

（3）部署前端项目

（1）在服务器A中安装Nginx，将前端资源文件上床到Nginx的html目录下；

（2）修改Nginx配置文件nginx.conf

（4）部署后端项目

(1)在服务器B中安装jdk、git、maven、Mysql,使用git clone命令将git远程仓库的代码克隆下来

（2）将资料中提供的reggieStart.sh文件上传到服务器B，通过chmod命令执行权限

---

总结：

---

如果感觉内容写的还不错的话，一键三连不迷路！！！！
后面将会更新更多学习内容，一起学习吧！！！！！！