瑞吉外賣-Day01

課程內容

• 軟件開發整體介紹

• 瑞吉外賣項目介紹

• 開發環境搭建

• 后台登錄功能開發

• 后台退出功能開發

1. 軟件開發整體介紹

作為一名軟件開發工程師,我們需要了解在軟件開發過程中的開發流程， 以及軟件開發過程中涉及到的崗位角色，角色的分工、職責， 並了解軟件開發中涉及到的三種軟件環境。那么這一小節，我們將從 軟件開發流程、角色分工、軟件環境 三個方面，來整體上介紹一下軟件開發。

1.1 軟件開發流程

1). 第1階段: 需求分析

完成產品原型、需求規格說明書的編寫。

產品原型，一般是通過網頁(html)的形式展示當前的頁面展示什么樣的數據, 頁面的布局是什么樣子的，點擊某個菜單，打開什么頁面，點擊某個按鈕，出現什么效果，都可以通過產品原型看到。

需求規格說明書， 一般來說就是使用 Word 文檔來描述當前項目有哪些功能，每一項功能的需求及業務流程是什么樣的，都會在文檔中描述。

2). 第2階段: 設計

設計的內容包含 產品設計、UI界面設計、概要設計、詳細設計、數據庫設計。

在設計階段，會出具相關的UI界面、及相關的設計文檔。比如數據庫設計，需要設計當前項目中涉及到哪些數據庫，每一個數據庫里面包含哪些表，這些表結構之間的關系是什么樣的，表結構中包含哪些字段，字段類型都會在文檔中描述清楚。

3). 第3階段: 編碼

編寫項目代碼、並完成單元測試。

作為軟件開發工程師，我們主要的工作就是在該階段， 對分配給我們的模塊功能，進行編碼實現。編碼實現完畢后，進行單元測試，單元測試通過后再進入到下一階段。

4). 第4階段: 測試

在該階段中主要由測試人員, 對部署在測試環境的項目進行功能測試, 並出具測試報告。

5). 第5階段: 上線運維

在項目上線之前， 會由運維人員准備服務器上的軟件環境安裝、配置， 配置完畢后， 再將我們開發好的項目，部署在服務器上運行。

我們作為軟件開發工程師， 我們主要的任務是在編碼階段， 但是在一些小的項目組當中， 也會涉及到數據庫的設計、測試等方面的工作。

1.2 角色分工

學習了軟件開發的流程之后， 我們還有必要了解一下在整個軟件開發過程中涉及到的崗位角色，以及各個角色的職責分工。

崗位/角色	職責/分工
項目經理	對整個項目負責，任務分配、把控進度
產品經理	進行需求調研，輸出需求調研文檔、產品原型等
UI設計師	根據產品原型輸出界面效果圖
架構師	項目整體架構設計、技術選型等
開發工程師	功能代碼實現
測試工程師	編寫測試用例，輸出測試報告
運維工程師	軟件環境搭建、項目上線

上述我們講解的角色分工, 是在一個項目組中比較標准的角色分工, 但是在實際的項目中, 有一些項目組由於人員配置緊張, 可能並沒有專門的架構師或測試人員, 這個時候可能需要有項目經理或者程序員兼任。

1.3 軟件環境

在我們日常的軟件開發中，會涉及到軟件開發中的三套環境， 那么這三套環境分別是: 開發環境、測試環境、生產環境。 接下來，我們分別介紹一下這三套環境的作用和特點。

1). 開發環境(development)

我們作為軟件開發人員，在開發階段使用的環境，就是開發環境，一般外部用戶無法訪問。

比如，我們在開發中使用的MySQL數據庫和其他的一些常用軟件，我們可以安裝在本地， 也可以安裝在一台專門的服務器中， 這些應用軟件僅僅在軟件開發過程中使用， 項目測試、上線時，我們不會使用這套環境了，這個環境就是開發環境。

2). 測試環境(testing)

當軟件開發工程師，將項目的功能模塊開發完畢，並且單元測試通過后，就需要將項目部署到測試服務器上，讓測試人員對項目進行測試。那這台測試服務器就是專門給測試人員使用的環境， 也就是測試環境，用於項目測試，一般外部用戶無法訪問。

3). 生產環境(production)

當項目開發完畢，並且由測試人員測試通過之后，就可以上線項目，將項目部署到線上環境，並正式對外提供服務，這個線上環境也稱之為生產環境。

 拓展知識:

​ 准生產環境: 對於有的公司來說，項目功能開發好, 並測試通過以后，並不是直接就上生產環境。為了保證我們開發的項目在上線之后能夠完全滿足要求，就需要把項目部署在真實的環境中, 測試一下是否完全符合要求啊，這時候就誕生了准生產環境，你可以把他當做生產環境的克隆體，准生產環境的服務器配置, 安裝的應用軟件(JDK、Tomcat、數據庫、中間件 ...) 的版本都一樣，這種環境也稱為 "仿真環境"。

​ ps.由於項目的性質和類型不同，有的項目可能不需要這個環境

2. 瑞吉外賣項目介紹

在開發瑞吉外賣這個項目之前，我們需要全方位的來介紹一下當前我們學習的這個項目。接下來，我們將從以下的五個方面， 來介紹瑞吉外賣這個項目。

2.1 項目介紹

本項目（瑞吉外賣）是專門為餐飲企業（餐廳、飯店）定制的一款軟件產品，包括 系統管理后台 和 移動端應用 兩部分。其中系統管理后台主要提供給餐飲企業內部員工使用，可以對餐廳的分類、菜品、套餐、訂單、員工等進行管理維護。移動端應用主要提供給消費者使用，可以在線瀏覽菜品、添加購物車、下單等。

本項目共分為3期進行開發：

階段	功能實現
第一期	主要實現基本需求，其中移動端應用通過H5實現，用戶可以通過手機瀏覽器訪問
第二期	主要針對移動端應用進行改進，使用微信小程序實現，用戶使用起來更加方便
第三期	主要針對系統進行優化升級，提高系統的訪問性能

2.2 產品原型

產品原型，就是一款產品成型之前，由產品經理繪制的一個簡單的框架，就是將頁面的排版布局展現出來，使產品的初步構思有一個可視化的展示。通過原型展示，可以更加直觀的了解項目的需求和提供的功能。

注意事項： 產品原型主要用於展示項目的功能，並不是最終的頁面效果。

在課程資料的產品原型文件夾下,提供了兩份產品原型。

1). 管理端

餐飲企業內部員工使用。 主要功能有:

模塊	描述
登錄/退出	內部員工必須登錄后,才可以訪問系統管理后台
員工管理	管理員可以在系統后台對員工信息進行管理，包含查詢、新增、編輯、禁用等功能
分類管理	主要對當前餐廳經營的 菜品分類 或 套餐分類 進行管理維護， 包含查詢、新增、修改、刪除等功能
菜品管理	主要維護各個分類下的菜品信息，包含查詢、新增、修改、刪除、啟售、停售等功能
套餐管理	主要維護當前餐廳中的套餐信息，包含查詢、新增、修改、刪除、啟售、停售等功能
訂單明細	主要維護用戶在移動端下的訂單信息，包含查詢、取消、派送、完成，以及訂單報表下載等功能

2). 用戶端

移動端應用主要提供給消費者使用。主要功能有:

模塊	描述
登錄/退出	在移動端, 用戶也需要登錄后使用APP進行點餐
點餐-菜單	在點餐界面需要展示出菜品分類/套餐分類, 並根據當前選擇的分類加載其中的菜品信息, 供用戶查詢選擇
點餐-購物車	用戶選中的菜品就會加入用戶的購物車, 主要包含 查詢購物車、加入購物車、刪除購物車、清空購物車等功能
訂單支付	用戶選完菜品/套餐后, 可以對購物車菜品進行結算支付, 這時就需要進行訂單的支付
個人信息	在個人中心頁面中會展示當前用戶的基本信息, 用戶可以管理收貨地址, 也可以查詢歷史訂單數據

2.3 技術選型

關於本項目的技術選型, 我們將會從 用戶層、網關層、應用層、數據層 這幾個方面進行介紹，而對於我們服務端開發工程師來說，在項目開發過程中，我們主要關注應用層及數據層技術的應用。

1). 用戶層

本項目中在構建系統管理后台的前端頁面，我們會用到H5、Vue.js、ElementUI等技術。而在構建移動端應用時，我們會使用到微信小程序。

2). 網關層

Nginx是一個服務器，主要用來作為Http服務器，部署靜態資源，訪問性能高。在Nginx中還有兩個比較重要的作用： 反向代理和負載均衡， 在進行項目部署時，要實現Tomcat的負載均衡，就可以通過Nginx來實現。

3). 應用層

SpringBoot： 快速構建Spring項目, 采用 "約定優於配置" 的思想, 簡化Spring項目的配置開發。

Spring: 統一管理項目中的各種資源(bean), 在web開發的各層中都會用到。

SpringMVC：SpringMVC是spring框架的一個模塊，springmvc和spring無需通過中間整合層進行整合，可以無縫集成。

SpringSession: 主要解決在集群環境下的Session共享問題。

lombok：能以簡單的注解形式來簡化java代碼，提高開發人員的開發效率。例如開發中經常需要寫的javabean，都需要花時間去添加相應的getter/setter，也許還要去寫構造器、equals等方法。

Swagger： 可以自動的幫助開發人員生成接口文檔，並對接口進行測試。

4). 數據層

MySQL： 關系型數據庫, 本項目的核心業務數據都會采用MySQL進行存儲。

MybatisPlus： 本項目持久層將會使用MybatisPlus來簡化開發, 基本的單表增刪改查直接調用框架提供的方法即可。

Redis： 基於key-value格式存儲的內存數據庫, 訪問速度快, 經常使用它做緩存(降低數據庫訪問壓力, 提供訪問效率), 在后面的性能優化中會使用。

5). 工具

git: 版本控制工具, 在團隊協作中, 使用該工具對項目中的代碼進行管理。

maven: 項目構建工具。

junit：單元測試工具，開發人員功能實現完畢后，需要通過junit對功能進行單元測試。

2.4 功能架構

1). 移動端前台功能

手機號登錄 , 微信登錄 , 收件人地址管理 , 用戶歷史訂單查詢 , 菜品規格查詢 , 購物車功能 , 下單 , 分類及菜品瀏覽。

2). 系統管理后台功能

員工登錄/退出 , 員工信息管理 , 分類管理 , 菜品管理 , 套餐管理 , 菜品口味管理 , 訂單管理 。

2.5 角色

在瑞吉外賣這個項目中，存在以下三種用戶，這三種用戶對應三個角色： 后台系統管理員、后台系統普通員工、C端(移動端)用戶。

角色	權限操作
后台系統管理員	登錄后台管理系統，擁有后台系統中的所有操作權限
后台系統普通員工	登錄后台管理系統，對菜品、套餐、訂單等進行管理 (不包含員工管理)
C端用戶	登錄移動端應用，可以瀏覽菜品、添加購物車、設置地址、在線下單等

3. 開發環境搭建

3.1 數據庫環境搭建

3.1.1 創建數據庫

可以通過以下兩種方式中的任意一種, 來創建項目的數據庫:

1).圖形界面

注意: 本項目數據庫的字符串, 選擇 utf8mb4

2).命令行

3.1.2 數據庫表導入

項目的數據庫創建好了之后, 可以直接將 資料/數據模型/db_reggie.sql 直接導入到數據庫中, 也可以通過兩種方式實現:

1).圖形界面

2).命令行

注意: 通過命令導入表結構時，注意sql文件不要放在中文目錄中

3.1.3 數據庫表介紹

數據庫表導入之后, 接下來介紹一下本項目中所涉及到的表結構:

序號	表名	說明
1	employee	員工表
2	category	菜品和套餐分類表
3	dish	菜品表
4	setmeal	套餐表
5	setmeal_dish	套餐菜品關系表
6	dish_flavor	菜品口味關系表
7	user	用戶表（C端）
8	address_book	地址簿表
9	shopping_cart	購物車表
10	orders	訂單表
11	order_detail	訂單明細表

上述的表結構, 我們目前先簡單的結合頁面原型了解一下, 大概有那些表, 每張表結構中存儲什么樣的數據, 有一個印象。對於具體的表結構, 以及表結構中的字段, 在講解具體的功能開發時, 我們再詳細介紹。

3.2 Maven項目搭建

3.2.1 創建maven項目

1). 在idea中創建maven project, 項目名稱 reggie_take_out

2). 檢查項目編碼

3). 檢查maven配置

4). 檢查JDK版本

JDK的版本選擇1.8;

3.2.2 搭建基礎環境

1).在pom.xml中導入依賴

<properties>
    <java.version>1.8</java.version>
</properties>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.4.5</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.4.2</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.20</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.76</version>
    </dependency>
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.1.23</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <version>2.4.5</version>
        </plugin>
    </plugins>
</build>

2).在工程的resources目錄下創建application.yml文件,並引入配置

server:
  port: 8080
spring:
  application:
  	#應用名稱 , 可選
    name: reggie_take_out
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
      username: root
      password: root
mybatis-plus:
  configuration:
    #在映射實體或者屬性時，將數據庫中表名和字段名中的下划線去掉，按照駝峰命名法映射 address_book ---> AddressBook
    map-underscore-to-camel-case: true
    #日志輸出
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID

3).創建包 com.itheima.reggie , 並編寫啟動類

import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@Slf4j
@SpringBootApplication
public class ReggieApplication {
    public static void main(String[] args) {
        SpringApplication.run(ReggieApplication.class,args);
        log.info("項目啟動成功...");
    }
}

@Slf4j :

​ 是lombok中提供的注解, 用來通過slf4j記錄日志。

當搭建完上述的基礎環境之后, 就可以通過引導類, 啟動該項目。

3.2.3 前端靜態資源導入

我們作為服務端開發工程師， 我們課程學習的重心應該放在后端的業務代碼上， 前端的頁面我們只需要導入課程資料中的前端資源， 前端頁面的代碼我們只需要能看懂即可。

1). 導入靜態資源

前端資源存放位置為 資料/前端資源 :

將上述兩個目錄中的靜態資源文件, 導入到項目的resources目錄下:

2). 創建配置類WebMvcConfig，設置靜態資源映射

用於在Springboot項目中, 默認靜態資源的存放目錄為 : "classpath:/resources/", "classpath:/static/", "classpath:/public/" ; 而在我們的項目中靜態資源存放在 backend, front 目錄中, 那么這個時候要想訪問到靜態資源, 就需要設置靜態資源映射。

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Slf4j
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    /**
     * 設置靜態資源映射
     * @param registry
     */
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("開始進行靜態資源映射...");
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    }
}

3). 訪問測試

http://localhost:8080/backend/index.html

4. 后台系統登錄功能

4.1 需求分析

1). 頁面原型展示

2). 登錄頁面成品展示

登錄頁面存放目錄 /resources/backend/page/login/login.html

3). 查看登錄請求

通過瀏覽器調試工具（F12），可以發現，點擊登錄按鈕時，頁面會發送請求（請求地址為http://localhost:8080/employee/login）並提交參數 username和password, 請求參數為json格式數據 {"username":"admin","password":"123456"}。

此時報404，是因為我們的后台系統還沒有響應此請求的處理器，所以我們需要創建相關類來處理登錄請求 ；

4). 數據模型(employee表)

5). 前端頁面分析

當點擊 "登錄" 按鈕, 會觸發Vue中定義的 handleLogin 方法:

在上述的前端代碼中, 大家可以看到, 發送登錄的異步請求之后, 獲取到響應結果, 在響應結果中至少包含三個屬性: code、data、msg 。

由前端代碼，我們也可以看到，在用戶登錄成功之后，服務端會返回用戶信息，而前端是將這些用戶信息，存儲在客戶端的 localStorage 中了。

localStorage.setItem('userInfo',JSON.stringify(res.data))

4.2 代碼開發

4.2.1 基礎准備工作

在進行登錄功能的代碼實現之前， 首先在我們的工程下創建包結構：

1). 創建實體類Employee

該實體類主要用於和員工表 employee 進行映射。 該實體類， 也可以直接從資料( 資料/實體類 )中拷貝工程中。

所屬包: com.itheima.reggie.entity

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;

@Data
public class Employee implements Serializable {
    private static final long serialVersionUID = 1L;

    private Long id;

    private String username;

    private String name;

    private String password;

    private String phone;

    private String sex;

    private String idNumber; //駝峰命名法 ---> 映射的字段名為 id_number

    private Integer status;

    private LocalDateTime createTime;

    private LocalDateTime updateTime;

    @TableField(fill = FieldFill.INSERT)
    private Long createUser;

    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
}

2). 定義Mapper接口

在MybatisPlus中, 自定義的Mapper接口, 需要繼承自 BaseMapper。

所屬包: com.itheima.reggie.mapper

@Mapper
public interface EmployeeMapper extends BaseMapper<Employee>{
}

3).Service接口

本項目的Service接口, 在定義時需要繼承自MybatisPlus提供的Service層接口 IService, 這樣就可以直接調用 父接口的方法直接執行業務操作, 簡化業務層代碼實現。

所屬包: com.itheima.reggie.service

public interface EmployeeService extends IService<Employee> {
}

4). Service實現類

所屬包: com.itheima.reggie.service.impl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.mapper.EmployeeMapper;
import com.itheima.reggie.service.EmployeeService;
import org.springframework.stereotype.Service;

@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService{
}

5). Controller基礎代碼

所屬包: com.itheima.reggie.controller

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;
	
}    

6). 導入通用結果類R

此類是一個通用結果類，服務端響應的所有結果最終都會包裝成此種類型返回給前端頁面。

所屬包: com.itheima.reggie.common

import lombok.Data;
import java.util.HashMap;
import java.util.Map;

/**
 * 通用返回結果，服務端響應的數據最終都會封裝成此對象
 * @param <T>
 */
@Data
public class R<T> {
    private Integer code; //編碼：1成功，0和其它數字為失敗
    private String msg; //錯誤信息
    private T data; //數據
    private Map map = new HashMap(); //動態數據

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }
    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }
    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }
}

A. 如果業務執行結果為成功, 構建R對象時, 只需要調用 success 方法; 如果需要返回數據傳遞 object 參數, 如果無需返回, 可以直接傳遞null。

B. 如果業務執行結果為失敗, 構建R對象時, 只需要調用error 方法, 傳遞錯誤提示信息即可。

4.2.2 登錄邏輯分析

處理邏輯如下：

①. 將頁面提交的密碼password進行md5加密處理, 得到加密后的字符串

②. 根據頁面提交的用戶名username查詢數據庫中員工數據信息

③. 如果沒有查詢到, 則返回登錄失敗結果

④. 密碼比對，如果不一致, 則返回登錄失敗結果

⑤. 查看員工狀態，如果為已禁用狀態，則返回員工已禁用結果

⑥. 登錄成功，將員工id存入Session, 並返回登錄成功結果

4.2.3 代碼實現

技術點說明:

A. 由於需求分析時, 我們看到前端發起的請求為post請求, 所以服務端需要使用注解 @PostMapping

B. 由於前端傳遞的請求參數為json格式的數據, 這里使用Employee對象接收, 但是將json格式數據封裝到實體類中, 在形參前需要加注解@RequestBody

/**
 * 員工登錄
 * @param request
 * @param employee
 * @return
 */
@PostMapping("/login")
public R<Employee> login(HttpServletRequest request,@RequestBody Employee employee){

    //1、將頁面提交的密碼password進行md5加密處理
    String password = employee.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());

    //2、根據頁面提交的用戶名username查詢數據庫
    LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(Employee::getUsername,employee.getUsername());
    Employee emp = employeeService.getOne(queryWrapper);

    //3、如果沒有查詢到則返回登錄失敗結果
    if(emp == null){
        return R.error("登錄失敗");
    }

    //4、密碼比對，如果不一致則返回登錄失敗結果
    if(!emp.getPassword().equals(password)){
        return R.error("登錄失敗");
    }

    //5、查看員工狀態，如果為已禁用狀態，則返回員工已禁用結果
    if(emp.getStatus() == 0){
        return R.error("賬號已禁用");
    }

    //6、登錄成功，將員工id存入Session並返回登錄成功結果
    request.getSession().setAttribute("employee",emp.getId());
    return R.success(emp);
}

4.3 功能測試

代碼實現完畢后, 啟動項目, 訪問url: http://localhost:8080/backend/page/login/login.html , 進行登錄測試。

在測試過程中， 可以通過debug斷點調試的方式來跟蹤程序的執行過程，並且可以查看程序運行時各個對象的具體賦值情況。而且需要注意, 在測試過程中，需要將所有的情況都覆蓋到。

1). 問題說明

當我們在進行debug端點調試時, 前端可能會出現如下問題: 前端頁面的控制台報出錯誤-超時;

2). 解決方案

前端進行異步請求時, 默認超時10000ms , 可以將該值調大一些。

由於修改了JS文件，需要手動清理一下瀏覽器緩存，避免緩存影響，JS不能及時生效。

5. 后台系統退出功能

5.1 需求分析

在后台管理系統中，管理員或者員工，登錄進入系統之后，頁面跳轉到后台系統首頁面(backend/index.html)，此時會在系統的右上角顯示當前登錄用戶的姓名。

如果員工需要退出系統，直接點擊右側的退出按鈕即可退出系統，退出系統后頁面應跳轉回登錄頁面。

1). 退出頁面展示

2).前端頁面分析

點擊 將會調用一個js方法logout, 在logout的方法中執行如下邏輯:

A. 發起post請求, 調用服務端接口 /employee/logout 執行退出操作 ;

B. 刪除客戶端 localStorage 中存儲的用戶登錄信息, 跳轉至登錄頁面 ;

5.2 代碼實現

需要在Controller中創建對應的處理方法, 接收頁面發送的POST請求 /employee/logout ，具體的處理邏輯：

A. 清理Session中的用戶id

B. 返回結果

/**
* 員工退出
* @param request
* @return
*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request){
    //清理Session中保存的當前登錄員工的id
    request.getSession().removeAttribute("employee");
    return R.success("退出成功");
}

5.3 功能測試

1). 代碼實現完畢后, 重啟服務, 訪問登錄界面 http://localhost:8080/backend/page/login/login.html ;

2). 登錄完成之后, 進入到系統首頁 backend/index.html, 點擊右上角 按鈕 執行退出操作, 完成后看看是否可以跳轉到登錄頁面 , 並檢查localStorage。