瑞吉外卖项目——前后端分离

news/2025/1/6 7:24:43/

前后端分离开发

介绍

前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。

目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。

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

开发流程

前后端分离开发后，面临一个问题，就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目?

  • **接口(API接口)**就是一个http的请求地址，主要就是去定义∶请求路径、请求方式、请求参数、响应数据等内容。

前端技术栈

开发工具

  • Visual Studio Code
  • hbuilder

技术框架

  • nodejs
  • VUE
  • ElementUl
  • mock
  • webpack

Yapi

介绍

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。

YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。

源码地址: https://github.com/YMFE/yapi

要使用YApi，可以自己进行部署。

Swagger

介绍

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息，再通过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>

使用方式

操作步骤:

  1. 导入knife4j的maven坐标

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

  2. 导入knife4j相关配置类

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

最终的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 {/*** 设置静态资源映射** @param registry*/@Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {log.info("开始进行静态资源映射...");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*/@Overrideprotected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {log.info("扩展消息转换器");//创建对象转换器MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();//设置对象转换器，底层使用Jackson将Java对象转为jsonmessageConverter.setObjectMapper(new JacksonObjectMapper());//将上面的消息转换器对象追加到mvc框架的转换器集合中（并设置优先级）converters.add(0, messageConverter);}@Beanpublic 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();}
}

  1. 在LoginCheckFilter中设置不需要处理的请求路径

    //定义不需要处理的请求路径
String[] urls = new String[]{"/employee/login","/employee/logout","/backend/**","/front/**","/user/login",//移动端登录"/user/sendMsg",//移动端发送短信"/user/login","/doc.html","/webjars/**","/swagger-resources","/v2/api-docs"
};

启动项目访问http://localhost:8080/doc.html查看生成的接口文档

常用注解

注解说明
@Api用在请求的类上，例如Controller，表示对类的说明
@ApiModel用在类上，通常是实体类，表示一个返回响应数据的信息
@ApiModelProperty用在属性上，描述响应类的属性
@ApiOperation用在请求的方法上，说明方法的用途、作用
@ApilmplicitParams用在请求的方法上，表示一组参数说明
@ApilmplicitParam用在@ApilmplicitParams注解中，指定一个请求参数的各个方面

项目部署

部署架构

1

部署环境说明

服务器:

  • 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命令设置执行权

    chmod 777 reggieStart.sh

  • 第三步:执行reggieStart.sh脚本文件，自动部署项目


http://www.ppmy.cn/news/49351.html

相关文章

LSM Tree

LSM Tree

LSM Tree即Log Structured Merge Tree&#xff0c;如下是一些阅读材料。 Rocksdb Leveled CompactionLSM Tree/MemTable/SSTable基本原理REMIX:Efficient Range Query for LSM-trees深入解析什么是LSM-TreeLSM-Tree介绍浅析LSM-tree(WiscKey, Bourbon, Rum)LSM树详解简述LSM-T…
阅读更多...
第五章 Linux实际操作——用户管理

第五章 Linux实际操作——用户管理

第五章 Linux实际操作——用户管理 5.1 基本介绍5.2 添加用户5.3 指定、修改密码5.4 删除用户5.5 查询用户信息指令5.6 切换用户5.7 查看当前用户、登录用户5.8 用户组5.9 用户和组相关文件8.9.1/etc/passwd 文件8.9.2/etc/shadow文件8.9.3/etc/group文件 5.1 基本介绍 Linux系…
阅读更多...
客快物流大数据项目（一百一十五）：熔断器 Spring Cloud Hystrix

客快物流大数据项目（一百一十五）：熔断器 Spring Cloud Hystrix

文章目录 熔断器 Spring Cloud Hystrix 一、​​​​​​​Hystrix 简介 二、什么是雪崩效应
阅读更多...
vue+springboot上传大文件

vue+springboot上传大文件

前言 众所周知&#xff0c;上传大文件是一件很麻烦的事情&#xff0c;假如一条路走到黑&#xff0c;直接一次性把文件上传上去&#xff0c;对于小文件是可以这样做&#xff0c;但是对于大文件可能会出现网络问题&#xff0c;请求响应时长等等导致文件上传失败&#xff0c;那么…
阅读更多...
Redis删除键命令: 入门用del，老手用unlink，有何区别？

Redis删除键命令: 入门用del，老手用unlink，有何区别？

在Redis中&#xff0c;删除键是一项常见操作。Redis提供了两种删除键的方式&#xff1a;del和unlink。这两种方式看似类似&#xff0c;但实际上它们之间存在着不同之处。在本文中&#xff0c;我们将深入探讨这两种删除键的区别以及它们在实际应用中的使用。 一、del命令 del…
阅读更多...
sed正则表达式替换字符方法

sed正则表达式替换字符方法

在 Linux 命令行中&#xff0c;可以使用 sed 命令来替换指定文件中的指定字符。具体方法如下&#xff1a; sed -i s/<old_string>/<new_string>/g <filename>其中&#xff0c;<old_string> 表示要被替换的字符串&#xff0c;<new_string> 表示替…
阅读更多...
在OLED上显示各种各样的数据（文字、字母、图片）

在OLED上显示各种各样的数据（文字、字母、图片）

今天来说一说OLED&#xff0c;也同时记录一下成果。 在学习OLED之前需要知道IIC协议&#xff0c;不了解的可以看&#xff08;IIC协议相关_dxdlnu的博客-CSDN博客&#xff09; 什么是OLED? OLED_百度百科 (baidu.com) 一.OLED写入指令和数据 因为OLED是有写入指令/数据的操作…
阅读更多...
RK3399平台开发系列讲解（PCI/PCI-E）PCIE相关配置说明

RK3399平台开发系列讲解（PCI/PCI-E）PCIE相关配置说明

🚀返回专栏总目录 文章目录 一、DTS 配置二、menuconfig 配置三、cmdline 配置沉淀、分享、成长，让自己和他人都能有所收获！😄 📢 本篇将介绍在使用 RK3399 平台 PCIE 时候的配置。 一、DTS 配置 ep-gpios = <&gpio3 13 GPIO_ACTIVE_HIGH>; 此项是设置 PCIe…
阅读更多...
最新文章

Copyright @ 2022~2023