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

news2024/12/25 14:06:53

前后端分离开发

介绍

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

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

前后端分离开发后，从工程结构上也会发生变化，即前后端代码不再混合在同一个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
     */
    @Override
    protected 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
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        log.info("扩展消息转换器");
        //创建对象转换器
        MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
        //设置对象转换器，底层使用Jackson将Java对象转为json
        messageConverter.setObjectMapper(new JacksonObjectMapper());
        //将上面的消息转换器对象追加到mvc框架的转换器集合中（并设置优先级）
        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();
    }
}

  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.coloradmin.cn/o/437552.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Compose 学习总结

Compose 学习总结

ompose发布正式版已经有一段时间了。趁最近比较闲&#xff0c;抓紧学习一波。 学习过程中&#xff0c;主要以实战项目中常用技术为目标。下面是项目地址&#xff0c;会长期更新&#xff0c;希望能给正在学习Compose的小伙伴一点参考。同时您有什么好的建议&#xff0c;也可以提…
阅读更多...
嗖的一下！3分钟用ChatGPT生成海南旅游思维导图！

嗖的一下！3分钟用ChatGPT生成海南旅游思维导图！

大家好&#xff0c;我是菜鸟哥&#xff01; 五一长假即将来临&#xff0c;很多小伙伴都要准备出去玩了&#xff01;旅游肯定要做攻略啊&#xff0c;比如热门的景点海南三亚&#xff0c;北京&#xff0c;上海&#xff0c;成都这些都是打卡的网红景点&#xff01;小编比较喜欢去海…
阅读更多...
IIC协议相关

IIC协议相关

一.IIC协议初识 IIC(集成电路总线)&#xff0c;半双工同步通信方式 *特点 1.简单性和有效性 由于接口直接在组件之上&#xff0c;因此IIC总线占用的空间特别小&#xff0c;减少了电路板的空间和芯片管脚的数量&#xff0c;降低了互联成本&#xff0c;总线的长度可高达25英尺…
阅读更多...
Figma转Sketch的3种免费又快捷的方法！

Figma转Sketch的3种免费又快捷的方法！

Figma和Sketch是UI设计师常用的两款软件。Figma属于在线协作设计工具&#xff0c;而Sketch是一款本地应用程序。它们都有许多优点&#xff0c;深受许多设计师的喜爱。然而&#xff0c;在实际工作中&#xff0c;有时需要将这两种文件进行转换&#xff0c;例如将需要在Sketch中使…
阅读更多...
AI绘画——Night Sky YOZORA Model 模型 ——“实现终极图像质量和大图像尺寸（＞1536 x 1024）”

AI绘画——Night Sky YOZORA Model 模型 ——“实现终极图像质量和大图像尺寸（＞1536 x 1024）”

目录 Night Sky YOZORA Model 模型 ——“实现终极图像质量和大图像尺寸&#xff08;>1536 x 1024&#xff09;”由YozoRaAru培训 如果你需要更好的色彩表现&#xff0c;我推荐你试一下Color Box 省流版介绍&#xff1a;一个字“炫”&#xff0c;tag也是越炫越好 以下是…
阅读更多...
javaweb830在线答疑系统dzkfA1A5程序

javaweb830在线答疑系统dzkfA1A5程序

2&#xff0e;系统用户管理&#xff1a;不管是超级管理员还是普通管理员都需要管理系统用户&#xff0c;包括普通管理员的添加、删除、修改、查询&#xff0c;修改管理员的登录密码&#xff0c;新添加的管理员用户可以登录系统。 3&#xff0e;注册用户管理&#xff1a;游客在前…
阅读更多...
多因子优化，多任务优化，多模式优化之间的区别

多因子优化，多任务优化，多模式优化之间的区别

最近几年在进化计算这个圈子里多任务优化Multitasking很火&#xff0c;其中包含多因子Multifactorial Evolutionary, 多任务 Multitasking Evolutionary, 和多模式进化 Multiform Evolutionary。 今天就来讲讲他们之间的区别。 多因子优化 在“Enhancing Evolutionary Multi…
阅读更多...
CCF-CSP真题《202303-1 田地丈量》思路+python，c++满分题解

CCF-CSP真题《202303-1 田地丈量》思路+python，c++满分题解

想查看其他题的真题及题解的同学可以前往查看&#xff1a;CCF-CSP真题附题解大全 试题编号&#xff1a;202303-1试题名称&#xff1a;田地丈量时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 西西艾弗岛上散落着 n 块田地。每块田地可视为…
阅读更多...
HTTP与HTTPS详解

HTTP与HTTPS详解

一、HTTP的概念 HTTP是超文本传输协议&#xff0c;是一种应用层协议&#xff0c;是基于为浏览器/服务器间提供统一的信息交换格式而出现的&#xff0c;其发展历程为HTTP/1.0、HTTP/1.1、HTTP/2、HTTP/3。 在HTTP/3之前&#xff0c;HTTP都是基于TCP传输的。 二、HTTP报文格式 …
阅读更多...
设计模式之状态模式(C++)

设计模式之状态模式(C++)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、状态模式是什么&#xff1f; 状态模式是一种行为型的软件设计模式&#xff0c;当一个对象的内在状态改变时&#xff0c;其行为…
阅读更多...
C++ Linux Web Server 面试基础篇-操作系统(二)

C++ Linux Web Server 面试基础篇-操作系统(二)

⭐️我叫忆_恒心，一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您，麻烦点个赞👍呗！ 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧，喜欢的小伙伴给个三连支持一下呗。👍⭐️❤️ Qt5.9专栏定期更新Qt的一些项目Demo 项目与…
阅读更多...
ClickHouse分区表的正面与侧面

ClickHouse分区表的正面与侧面

当我们处理连续数据并需要基于移动窗口&#xff08;如&#xff0c;仅使用过去三个月数据&#xff09;计算时使用分区功能非常有用&#xff0c;因为分区无需删除数据&#xff0c;就能高效避过不使用的&#xff08;或过期&#xff09;数据。本文介绍分区表原理&#xff0c;对比查…
阅读更多...
一文读懂｜数字化到底是什么？

一文读懂｜数字化到底是什么？

现在大家都在说数字化&#xff0c;数字化到底是什么&#xff1f; 翻阅很多关于数字化的文章&#xff0c;大部分都在混淆术语&#xff0c;部分文章已经开始将数字化标记为数字化转型&#xff0c;以安抚管理层、获得项目批准或进行销售...... 所以这篇内容&#xff0c;我会尽可…
阅读更多...
第十四章 动手，高级写法应用让SQL飞

第十四章 动手，高级写法应用让SQL飞

参考《收获&#xff0c;不止SQL优化》作者: 梁敬彬 / 梁敬弘 所谓高级SQL&#xff0c;就是内部被优化过的SQL&#xff0c;可以用简单的语法实现复杂的功能&#xff0c;同时性能上还有提升。比如INSERT ALL、WITH子句、MERGE…… 一、 高级写法思维导图&#xff08;自己整理&am…
阅读更多...
java连接webservice

java连接webservice

前言 WebService 也叫XML Web Service&#xff0c;WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求&#xff0c;轻量级的独立的通讯技术。是通过SOAP在Web上提供的软件服务&#xff0c;使用WSDL文件进行说明&#xff0c;并通过UDDI进行注册。 一、…
阅读更多...
什么是 IT 基础架构管理

什么是 IT 基础架构管理

各行各业的企业组织不断面临创新和扩展的压力。就在十多年前&#xff0c;一个企业组织可以争取时间&#xff0c;在投资新技术方面保持保守&#xff0c;同时仍然保持竞争优势。快进到今天&#xff0c;随着业务实践的变化和新技术的不断涌现&#xff0c;商业和技术格局更加动态。…
阅读更多...
【C++】文件IO流及stringstream流的使用

【C++】文件IO流及stringstream流的使用

文章目录 一、引入二、自定义类型隐式类型转换三、sync_with_stdio同步四、文件IO流4.1 open和close文件4.2 写入文件与读出文件 五、stringstream流的使用5.1 将数值类型数据格式化为字符串5.2 序列化和反序列化 一、引入 int main() {string str;while (cin >> str){c…
阅读更多...
适合零基础小白，循序渐进学习--文件操作--相关函数

适合零基础小白，循序渐进学习--文件操作--相关函数

目录 一. 前言 二. 正文 2. 1什么是文件 &#xff08;1&#xff09;程序文件 &#xff08;2&#xff09;数据文件 2.2文件名 2.3文件类型 2.4 文件缓冲区 2.5 文件指针 2.7 文件操作函数 (1) fopen()--- 打开文件 (2) fclose()--- 关闭文件 2.7 文件的顺序读写&…
阅读更多...
ArcGIS制图技巧

ArcGIS制图技巧

目录 1、经纬度网置于底层 2、设置经纬网刻度为英文 3、设置左右经纬度为垂直&#xff0c;不显示分秒&#xff0c;以及改变字体等 4、拖动制图中的图层 5、设置经纬度网为曲线 6、根据经纬度导入样本点 1、经纬度网置于底层 最初我们的网格是下图这个样子&#xff1a; 然…
阅读更多...
智慧化工业企业能耗管理系统平台的构建

智慧化工业企业能耗管理系统平台的构建

节能监测技术是节能减排、有效节能的重要支撑技术&#xff0c;当前能源资源日渐枯竭的紧张形势下&#xff0c;节能意识的增强以及各行业对节能技术的需求不断增加&#xff0c;使得节能技术的开发越来越受到人们的重视。工业企业能耗监测系统的构建是按照“统一规划、分期分批”…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023