此筆記內(nèi)容為黑馬瑞吉外賣項目的前后端分離開發(fā)部署部分。

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、鼓樓網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

目錄

問題分析

前后端分離開發(fā)

介紹

開發(fā)流程?

前端技術(shù)棧

Yapi

介紹

使用

Swagger

介紹

使用方式

測試

常用注解

項目部署?

部署架構(gòu)

部署環(huán)境說明

部署前端項目

部署后端項目

---

問題分析

---

• 開發(fā)人員同時負責(zé)前端和后端代碼開發(fā)，分工不明確
• 開發(fā)效率低
• 前后端代碼混合在一個工程中，不便于管理
• 對開發(fā)人員要求高，人員招聘困難

前后端分離開發(fā)

---

介紹

?前后端分離開發(fā)，就是在項目開發(fā)過程中，對于前端代碼的開發(fā)由專門的前端開發(fā)人員負責(zé)，后端代碼則由后端開發(fā)人員負責(zé)，這樣可以做到分工明確、各司其職，提高開發(fā)效率，前后端代碼并行開發(fā)，可以加快項目開發(fā)進度。目前，前后端分離開發(fā)方式已經(jīng)被越來越多的公司所采用，成為當(dāng)前項目開發(fā)的主流開發(fā)方式。

?前后端分離開發(fā)后，從工程結(jié)構(gòu)上也會發(fā)生變化，即前后端代碼不再混合在同一個maven工程中，而是分為前端工程和后端工程。

開發(fā)流程?

前后端分離開發(fā)后，面臨一個問題，就是前端開發(fā)人員和后端開發(fā)人員如何進行配合來共同開發(fā)一個項目?可以按照如下流程進行:

前端技術(shù)棧

開發(fā)工具

• Visual Studio Code
• hbuilder

技術(shù)框架

• nodejs
• VUE
• ElementUI
• mock
• webpack

Yapi

---

介紹

YApi是高效、易用、功能強大的api管理平臺，旨在為開發(fā)、產(chǎn)品、測試人員提供更優(yōu)雅的接口管理服務(wù)。可以幫助開發(fā)者輕松創(chuàng)建、發(fā)布、維護 API，YApi還為用戶提供了優(yōu)秀的交互體驗，開發(fā)人員只需利用平臺提供的接口數(shù)據(jù)寫入工具以及簡單的點擊操作就可以實現(xiàn)接口的管理。

YApi讓接口開發(fā)更簡單高效，讓接口的管理更具可讀性、可維護性，讓團隊協(xié)作更合理。

源碼地址:?GitHub - YMFE/yapi: YApi 是一個可本地部署的、打通前后端及QA的、可視化的接口管理平臺

要使用YApi，需要自己進行部署。

使用

使用YApi可以執(zhí)行下面操作

• 添加項目
• 添加分類
• 添加接口
• 編輯接口
• 查看接口

Swagger

---

介紹

使用Swagger你只需要按照它的規(guī)范去定義接口及接口相關(guān)的信息，再通過Swagger衍生出來的一系列項目和工具，就可以做到生成各種格式的接口文檔，以及在線接口調(diào)試頁面等等。

官網(wǎng):API Documentation & Design Tools for Teams | Swagger

使用方式

操作步驟:

1、導(dǎo)入knife4j的maven坐標(biāo)

com.github.xiaoyminknife4j-spring-boot-starter3.0.2

2、導(dǎo)入knife4j相關(guān)配置類

在配置包下的WebMvcConfig文件下

主要是加入@EnableSwagger2和@EnableKnife4j兩個注解，還有創(chuàng)建Docket 對象，這個對象是swagger給我們提供的，來描述接口文檔的信息。

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
  @Bean
  public Docket createRestApi() {
      //文檔類型
      return new Docket(DocumentationType.SWAGGER_2)
              .apiInfo(apiInfo())
              .select()
              .apis(RequestHandlerSelectors.basePackage("com.itheima.reggie.controller"))
              .paths(PathSelectors.any())
              .build();
  }
  private ApiInfo apiInfo() {
      return new ApiInfoBuilder()
              .title("瑞吉外賣")
              .version("1.0")
              .description("瑞吉外賣接口文檔")
              .build();
  }
}

3、設(shè)置靜態(tài)資源，否則接口文檔頁面無法訪問

在config包WebMvcConfig類下的addResourceHandlers方法里加上

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

4、在LoginCheckFilter中設(shè)置不需要處理的請求路徑

"/doc.html",
"/webjars/**",
"/swagger-resources",
"/v2/api-docs"

//定義不需要攔截的路徑
        String[] urls=new String[]{
                "/employee/login",
                "/employee/logout",
                "/backend/**",
                "/front/**",
                "/common/**",
                "/user/login",
                "/user/sendMsg",

                "/doc.html",
                "/webjars/**",
                "/swagger-resources",
                "/v2/api-docs"
        };

測試

啟動服務(wù)，localhost:8080/doc.html。doc.html是固定的

直接生成的文檔注解內(nèi)容并不是很完善?，可以搭配注解使生成的文檔更完善清楚。

常用注解

注解	說明
@Api	用在請求的類上，例如Controller，表示對類的說明
@ApiModel	用在類上，通常是實體類，表示一個返回響應(yīng)數(shù)據(jù)的信息
@ApiModelProperty	用在屬性上，描述響應(yīng)類的屬性
@ApiOperation	用在請求的方法上，說明方法的用途、作用
@ApilmplicitParams	用在請求的方法上，表示一組參數(shù)說明
@ApilmplicitParam	用在@ApilmplicitParams注解中，指定一個請求參數(shù)的各個方面

項目部署? 部署架構(gòu)

部署環(huán)境說明

• 192.168.88.129（服務(wù)器A)

  Nginx:部署前端項目、配置反向代理

  Mysql:主從復(fù)制結(jié)構(gòu)中的主庫

  Redis:緩存中間件

• 192.168.88.130（服務(wù)器B)

  jdk:運行Java項目

  git:版本控制工具

  maven:項目構(gòu)建工具

  jar: Spring Boot項目打成jar包基于內(nèi)置Tomcat運行

  Mysql:主從復(fù)制結(jié)構(gòu)中的從庫

這里我把Redis放到服務(wù)器A里了

部署前端項目

第一步:在服務(wù)器A中安裝Nginx，將課程資料中的dist目錄上傳到Nginx的html目錄下

第二步:修改Nginx配置文件nginx.conf

server{
  listen 80;
  server_name localhost;

  location /{
    root html/dist;
    index index.html;
  }

  location ^~ /api/{
          rewrite ^/api/(.*)$ /$1 break;
          proxy_pass http://192.168.88.130:8080;
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html{
      root html;
  }
}

前端頁面發(fā)送過來的請求路徑中有帶api，而我們后端的請求路徑中沒有api，所以使用nginx反向代理在轉(zhuǎn)發(fā)時重寫它的url。?利用到了正則，最后截取$1也就是api后的路徑

部署后端項目

第一步∶在服務(wù)器B中安裝jdk、git、maven、MySQL，使用git clone命令將git遠程倉庫的代碼克隆下來

第二步:將資料中提供的reggieStart.sh文件上傳到服務(wù)器B，通過chmod命令設(shè)置執(zhí)行權(quán)限

reggieStart.sh文件具體內(nèi)容

#!/bin/sh
echo =================================
echo  自動化部署腳本啟動
echo =================================

echo 停止原來運行中的工程
APP_NAME=reggie_take_out

tpid=`ps -ef|grep $APP_NAME|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Stop Process...'
    kill -15 $tpid
fi
sleep 2
tpid=`ps -ef|grep $APP_NAME|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Kill Process!'
    kill -9 $tpid
else
    echo 'Stop Success!'
fi

echo 準(zhǔn)備從Git倉庫拉取最新代碼
cd /usr/local/javaapp/reggie_take_out

echo 開始從Git倉庫拉取最新代碼
git pull
echo 代碼拉取完成

echo 開始打包
output=`mvn clean package -Dmaven.test.skip=true`

cd target

echo 啟動項目
nohup java -jar reggie_take_out-1.0-SNAPSHOT.jar &>reggie_take_out.log &
echo 項目啟動完成

第三步:執(zhí)行reggieStart.sh腳本文件，自動部署項目

注意:在Linux下和Windows下的路徑是不一樣的,記得修改圖片路徑,然后把圖片放到你寫的目錄。

ps:本人是利用IDEA打包手動部署上去運行的，感覺更方便點😁。

完結(jié)？不可能！只要學(xué)不死就往死里學(xué)，沖?。?！

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

當(dāng)前名稱：【瑞吉外賣之前后端分離開發(fā)】-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article44/ddcsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、域名注冊、App開發(fā)、網(wǎng)站維護、面包屑導(dǎo)航、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)