前后端分離開發(fā)
介紹
前后端分離開發(fā)，就是在項目開發(fā)過程中，對于前端代碼的開發(fā)由專門的前端開發(fā)人員負責，后端代碼則由后端開發(fā)人員負責，這樣可以做到分工明確、各司其職，提高開發(fā)效率，前后端代碼并行開發(fā)，可以加快項目開發(fā)進度。
目前，前后端分離開發(fā)方式已經被越來越多的公司所采用，成為當前項目開發(fā)的主流開發(fā)方式。
前后端分離開發(fā)后，從工程結構上也會發(fā)生變化，即前后端代碼不再混合在同一個maven工程中，而是分為前端工程和后端工程。
開發(fā)流程
前后端分離開發(fā)后，面臨一個問題，就是前端開發(fā)人員和后端開發(fā)人員如何進行配合來共同開發(fā)一個項目?
- **接口(API接口)**就是一個http的請求地址，主要就是去定義∶請求路徑、請求方式、請求參數、響應數據等內容。
前端技術棧
開發(fā)工具
- Visual Studio Code
- hbuilder
技術框架
- nodejs
- VUE
- ElementUl
- mock
- webpack
Yapi
介紹
YApi是高效、易用、功能強大的api管理平臺，旨在為開發(fā)、產品、測試人員提供更優(yōu)雅的接口管理服務?？梢詭椭_發(fā)者輕松創(chuàng)建、發(fā)布、維護 API，YApi還為用戶提供了優(yōu)秀的交互體驗，開發(fā)人員只需利用平臺提供的接口數據寫入工具以及簡單的點擊操作就可以實現(xiàn)接口的管理。
YApi讓接口開發(fā)更簡單高效，讓接口的管理更具可讀性、可維護性，讓團隊協(xié)作更合理。
源碼地址: https://github.com/YMFE/yapi
要使用YApi，可以自己進行部署。
Swagger
介紹
使用Swagger你只需要按照它的規(guī)范去定義接口及接口相關的信息，再通過Swagger衍生出來的一系列項目和工具，就可以做到生成各種格式的接口文檔，以及在線接口調試頁面等等。
官網:https://swagger.io/
knife4j是為Java MVC框架集成Swagger生成Api文檔的增強解決方案。
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>
使用方式
操作步驟:
-
導入knife4j的maven坐標
<dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> <version>3.0.2</version> </dependency> -
導入knife4j相關配置類
-
設置靜態(tài)資源，否則接口文檔頁面無法訪問
最終的WebMvcConfig配置類：
package com.jihua.reggie.config;
import com.github.xiaoymin.knife4j.spring.annotations.EnableKnife4j;
import com.jihua.reggie.common.JacksonObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
import java.util.List;
@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
/**
* 設置靜態(tài)資源映射
*
* @param registry
*/
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
log.info("開始進行靜態(tài)資源映射...");
registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
}
/**
* 擴展mvc的消息轉換器
*
* @param converters
*/
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
log.info("擴展消息轉換器");
//創(chuàng)建對象轉換器
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
//設置對象轉換器，底層使用Jackson將Java對象轉為json
messageConverter.setObjectMapper(new JacksonObjectMapper());
//將上面的消息轉換器對象追加到mvc框架的轉換器集合中（并設置優(yōu)先級）
converters.add(0, messageConverter);
}
@Bean
public Docket createRestApi() {
// 文檔類型
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.jihua.reggie.controller"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("瑞吉外賣")
.version("1.0")
.description("瑞吉外賣接口文檔")
.build();
}
}
-
在LoginCheckFilter中設置不需要處理的請求路徑
//定義不需要處理的請求路徑 String[] urls = new String[]{ "/employee/login", "/employee/logout", "/backend/**", "/front/**", "/user/login",//移動端登錄 "/user/sendMsg",//移動端發(fā)送短信 "/user/login", "/doc.html", "/webjars/**", "/swagger-resources", "/v2/api-docs" };
啟動項目訪問http://localhost:8080/doc.html查看生成的接口文檔
常用注解
| 注解 | 說明 |
|---|---|
| @Api | 用在請求的類上，例如Controller，表示對類的說明 |
| @ApiModel | 用在類上，通常是實體類，表示一個返回響應數據的信息 |
| @ApiModelProperty | 用在屬性上，描述響應類的屬性 |
| @ApiOperation | 用在請求的方法上，說明方法的用途、作用 |
| @ApilmplicitParams | 用在請求的方法上，表示一組參數說明 |
| @ApilmplicitParam | 用在@ApilmplicitParams注解中，指定一個請求參數的各個方面 |
項目部署
部署架構
部署環(huán)境說明
服務器:
- 192.168.138.100(服務器A)
- Nginx:部署前端項目、配置反向代理
- Mysql:主從復制結構中的主庫
- 192.168.138.101（服務器B)
- jdk:運行Java項目
- git:版本控制工具
- maven:項目構建工具
- jar: Spring Boot項目打成jar包基于內置Tomcat運行
- Mysql:主從復制結構中的從庫
- 172.17.2.94（服務器C)
- Redis:緩存中間件
部署前端項目
-
第一步:在服務器A中安裝Nginx，前端代碼傳到Nginx的html目錄下
-
第二步:修改Nginx配置文件nginx.conf（location和反向代理）
location / { root html/dist; index index.html; }#反向代理配置 location ^~ /api/ { rewrite ^/api/(.*)$ /$1 break; #url重寫 proxy_pass http://192.168.138.101:8080; }
部署后端項目
-
第一步∶在服務器B中安裝jdk、git、maven、MySQL，使用git clone命令將git遠程倉庫的代碼克隆下來
-
第二步:將啟動腳本reggieStart.sh文件上傳到服務器B，通過chmod命令設置執(zhí)行權文章來源：http://www.zghlxwxcb.cn/news/detail-419692.html
chmod 777 reggieStart.sh -
第三步:執(zhí)行reggieStart.sh腳本文件，自動部署項目文章來源地址http://www.zghlxwxcb.cn/news/detail-419692.html
到了這里，關于瑞吉外賣項目——前后端分離的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
