前后端项目分离开发

news2024/9/20 18:35:33

问题说明:

  • 开发人员同时负责前端和后端代码开发,分工不明确
  • 开发效率低
  • 前后端代码混合在一个工程中,不便于管理
  • 对开发人员要求高,人员招聘困难

解决方法:

前后端分离开发

介绍

前后端分离开发,就是在项目开发过程中,对于前端代码的开发由专门的前端开发人员负责,后端代码则由后端开发人员负责,这样可以做到分工明确、各司其职,提高开发效率,前后端代码并行开发,可以加快项目开发进度。目前,前后端分离开发方式已经被越来越多的公司所采用,成为当前项目开发的主流开发方式。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjorPE12-1690517333551)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610165746303.png)]

开发流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTggTjQj-1690517297033)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610165938839.png)]

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

举例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0EesL8M-1690517297034)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610170543719.png)]

YApi

  • 介绍:

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

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

源码地址:

https://github.com/YMFE/yapi   //使用YApi,需要自己进行部署
  • 使用:

Swagger

介绍

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,再通过Swagger衍生出来的一系列项目和工具,就可以做到生成各种格式的接口文档,以及在线接口调试页面等等。

官网:http://swagger.io/

knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。

使用方式:
  1. 导入knife4j的maven坐标
<dependency>
	<groupId>com.github.xiaomin</groupId>
	<artifactId>knife4j-spring-boot-starter></artifactId>
	<version>3.0.2</version>
</dependency>
  1. 导入knife4j相关配置类
    @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();
    }
  1. 设置静态资源,否则接口文档页面无法访问
    @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/");
    }
  1. 在LoginCheckFilter中设置不需要处理的请求路径
        //定义不需要处理的请求路径
        String[] urls = new String[]{
                "/employee/login",
                "/employee/logout",
                "/user/sendMsg",
                "/user/login",
                "/backend/**",
                "/front/**",
                "/doc.html",
                "/web.jars/**",
                "/swagger-resources",
                "/v2/api-docs"
        };
常用注解:
注解说明
@Api用在请求的类上,例如Controller,表示对类的说明
@ApiModel用在类上,通常是实体类,表示一个返回响应数据的信息
@ApiOperation用在请求的方法上,说明方法的用途、作用
@ApiImplcitParams用在请求的方法上,表示一组参数说明
@ApiImplicitParam用在@ApiImpliciParams注解中,指定一个请求参数的各个方面
@ApiModelProperty用在属性上,描述响应类的属性

项目部署

  • 部署架构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2RjTDNK-1690517297035)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230611155507456.png)]

  • 部署环境说明

服务器:

  • 192.168.163.128(服务器ubuntu)

    • Nginx:部署前端项目、配置反向代理
    • Mysql:主从复制结构中的主库
  • 192.168.168.129(101)(服务器centos7)

    • jdk:运行Java项目
    • git:版本控制工具
    • maven:项目构建工具
    • jar:Spring Boot项目打包成jar包基于内置Tomcat运行
    • Mysql:主从复制结构中的从库
  • 127.0.0.1(服务器C)

    • Redis:缓存中间件
  • 部署前端项目

上传文件到nginx/html下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYoV9tx2-1690517297036)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230611170112614.png)]

  • 部署后端项目

基于内置Tomcat运行

  • Mysql:主从复制结构中的从库

  • 127.0.0.1(服务器C)

    • Redis:缓存中间件
  • 部署前端项目

上传文件到nginx/html下

  • 部署后端项目

将后端打包为jar包的形式在129.168.163.129服务器上运行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/802514.html

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

相关文章

【java】【面对对象高级2】继承

目录 1、概念 2、继承的执行原理 3、继承有啥好处 3.1 People父类 3.2 Teacher子类 3.3 主程序 4、继承的相关注意事项 4.1 权限修饰符 4.2 单继承、Object类 4.2.1 单继承 4.2.2 Object类 4.3 方法重写&#xff08;声明不变、重新实现&#xff09; 4.3.1 认识方法重写…

2023JAVA 架构师面试 130 题含答案:JVM+spring+ 分布式 + 并发编程》...

此文包含 Java 面试的各个方面&#xff0c;史上最全&#xff0c;苦心整理最全 Java 面试题目整理包括基JVM算法数据库优化算法数据结构分布式并发编程缓存等&#xff0c;使用层面广&#xff0c;知识量大&#xff0c;涉及你的知识盲点。要想在面试者中出类拔萃就要比人付出更多的…

selenium等待的三种方式(详细)

1.强制等待 time.sleep(3) 这种方式会是操作强行等待3s才会进行下一步操作&#xff0c;但是这种放法&#xff0c;可能会延长测试的时间&#xff0c;如果元素在1s中出现&#xff0c;就会浪费2s的时间&#xff0c;并且这种放法单次有效&#xff0c;每次需要等待元素的操作都需要…

如何打造亚马逊一流新品运营方案?

优化亚马逊新品运营方案需要商家采取一系列策略&#xff0c;以在激烈的市场竞争中脱颖而出。以下是一些针对亚马逊新品运营的优化建议&#xff1a; 1.深入了解产品和市场&#xff1a; 在上线新品之前&#xff0c;商家需要对产品和市场进行深入了解。了解目标客户群体、市场需…

重要通知|关于JumpServer开源堡垒机V2版本产品生命周期的相关说明

JumpServer&#xff08;https://github.com/jumpserver&#xff09;开源项目创立于2014年6月&#xff0c;已经走过了九年的发展历程。经过长期的产品迭代&#xff0c;JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议&#xff0c;是符合4A&a…

微信小程序radio单选按钮选中与取消

wxml <view bindtapcheckedTap><radio checked"{{checked}}">设为默认</radio> </view> wxss <style lang"less" > radio .wx-radio-input {border-radius: 50%; /* 圆角 */width: 24rpx;border: 2rpx solid #5e5e5f;hei…

网安周报 | 银行业成为开源软件供应链攻击的目标

网安周报是棱镜七彩推出的安全资讯专栏&#xff0c;旨在通过展示一周内发生的与开源安全、软件供应链安全相关攻击事件&#xff0c;让用户了解开源及软件供应链威胁&#xff0c;提高对安全的重视&#xff0c;做好防御措施。 1、银行业成为开源软件供应链攻击的目标 网络安全研…

nn.BCELoss与nn.CrossEntropyLoss

BCELoss与CrossEntropyLoss都是用于分类问题。可以知道&#xff0c;BCELoss是Binary CrossEntropyLoss的缩写&#xff0c;BCELoss是CrossEntropyLoss的一个特例&#xff0c;只用于二分类问题&#xff0c;而CrossEntropyLoss可以用于二分类&#xff0c;也可以用于多分类&#xf…

文档管理NAS储存安全吗?

关键词&#xff1a;私有化、知识管理系统、文档管理、群晖NAS、协同编辑 随着企业不断发展扩大&#xff0c;企业的知识文档也逐渐增多&#xff0c;很多企业方便管理及考虑数据安全问题会将文件数据储存至NAS。 但将企业文档数据放在NAS上就足够安全的吗&#xff1f; 天翎文档管…

【快应用】通用方法getBoundingClientRect的使用

【关键词】 快应用开发、通用方法、getBoundingClientRect 【背景】 快应用通用方法中提供了getBoundingClientRect方法来获取当前组件的布局位置&#xff0c;之前处理的快应用问题中&#xff0c;有个cp却把这种场景误解为可以获取到文字的宽度和高度&#xff0c;这是不合理的…

在线平面设计工具盘点,提升效率首选

在移动应用程序或网页UI设计项目中&#xff0c;在线平面图工具是必不可少的。市场上的在线平面图工具绘制软件丰富多样&#xff0c;层出不穷。作为一名UI设计师&#xff0c;有必要了解哪些在线平面图工具既简单又专业。本文将分享6种在线平面图工具&#xff0c;每种在线平面图工…

Vue 加载远程组件的解决方案

背景 最近的项目有一个加载远程组件的需求。基于此我对 Vue 加载远程组件的方案进行了研究&#xff0c;并且整理了两个可行的解决方案。 HTML 文件 umd 组件 这个方案是最简单、最容易实现的。组件以 umd 的格式进行打包&#xff0c;然后在 HTML 文件中直接使用。 <div…

Glide原理分析

工程目录图 Glide源码分析 - 缓存源码分析 活动缓存 &#xff1a;当前activity有效内存缓存&#xff08;LRU算法&#xff0c;核心linkhashmap&#xff09;,当前运行的整个app生命周都有效&#xff0c;有大小限制&#xff0c;防止app oom磁盘缓存&#xff0c;整个app都有效&…

汇编语言(第4版)实验9 根据材料编程

参考答案&#xff1a; ①经分析&#xff0c;完整程序代码如下。 assume cs:codesg,ds:datasgdatasg segment db welcome to masm! datasg endscodesg segment start: mov ax,0b800hmov es,axmov si,0722hmov ax,datasgmov ds,axmov cx,16mov bx,0s: mov al,ds:[bx]mov ah,0…

语音识别 — 特征提取 MFCC 和 PLP

一、说明 语音识别是一种技术&#xff0c;通过计算机和软件系统&#xff0c;将人们的口头语言转换为计算机可读的文本或命令。它使用语音信号处理算法来识别和理解人类语言&#xff0c;并将其转换为计算机可处理的格式。语音识别技术被广泛应用于许多领域&#xff0c;如语音助手…

Spring学习之Spring启示录

文章目录 OCP开闭原则依赖倒置原则控制反转依赖注入DI OCP开闭原则 什么是OCP&#xff1f; OCP是软件七大开发原则当中最基本的一个原则&#xff1a;开闭原则对什么开&#xff1f;对拓展开对什么闭&#xff1f;对修改关系 如果为了一个功能拓展&#xff0c;需要修改之前运行良…

项目播报 | 新基德携手璞华易研PLM,打造企业新一代研发管理平台

近日&#xff0c;“新基德PLM&#xff08;Product Lifecycle Management&#xff0c;产品生命周期管理&#xff09;项目”在新基德&#xff08;深圳&#xff09;电子有限公司&#xff08;以下简称&#xff1a;新基德&#xff09;正式启动。新基德是一家集手机研发、生产、销售、…

2023 数字生态发展大会,和鲸 ModelWhale 入选中国信通院“铸基计划”《高质量数字化转型产品及服务全景图》

7月27日&#xff0c;由中国信通院主办的“2023数字生态发展大会”暨中国信通院“铸基计划”年中会议在北京召开。本次大会重磅发布了《高质量数字化转型产品及服务全景图&#xff08;2023&#xff09;》&#xff0c;和鲸科技旗下数据科学协同平台 ModelWhale 成功入选&#xff…

android jetpack DataStore(java)代替SharedPreferences

目录 Preferences DataStore 怎么用&#xff1f;导入依赖创建 Preferences DataStore读取内容写入内容 Proto DataStore怎么用&#xff1f;导入依赖创建proto创建Serializer使用DataStore DataStore 提供两种不同的实现&#xff1a;Preferences DataStore 和 Proto DataStore。…

【C语言进阶】重新认识字符型变量

引例 首先我们看一个简单的例子 #include <stdio.h> #include <stdlib.h>int main() {double x4 2023.727;char c (int)x4 / 10;printf("c%6c\tc%6hd\n",abs(c),abs(c));return 0; } }这小例子的结果是多少呢&#xff1f; 结果是 “c 6 c 54” 有知…