前后台分离开发

前后台分离开发

简介

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

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

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

在这里插入图片描述

开发流程

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

可以按照如下流程进行：

在这里插入图片描述

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

在这里插入图片描述

前端技术栈

开发工具
  • Visual Studio Code
  • hbuilder
技术框架
  • nodejs
  • VUE
  • ElementUI
  • mock 模拟数据
  • webpack 前端打包

YApi

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

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

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

要使用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坐标

  2. 导入knife4j相关配置类（WebMvcConfig）

    添加两个注解，同时在该文件下添加如下两个方法

    @EnableSwagger2
@EnableKnife4j

    @Bean
public Docket createRestApi() {// 文档类型return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select().apis(RequestHandlerSelectors.basePackage("com.itheima.reggie.contaoller")).paths(PathSelectors.any()).build();
}private ApiInfo apiInfo() {return new ApiInfoBuilder().title("瑞吉外卖").version("1.0").description("瑞吉外卖接口文档").build();
}

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

    WebMvcConfig类中的addResourceHandlers方法

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

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

    log.info("拦截到请求：{}", requestURI);// 定义不需要处理的请求路径
String[] urls = new String[] {"/employee/login","/employee/logout","/backend/**","/front/**","/commmon/**","/user/sendMsg","/user/login","/doc.html",  // 新增"/webjars/**",  // 新增"/swagger-resources",  // 新增"/v2/api-docs"  // 新增
};

效果视图

在这里插入图片描述

常用注解

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

使用示例

  1. @Api

    @Api(tags = "套餐相关接口")
public class SetmealController {
}

  2. @ApiModel与@ApiModelProperty

    @ApiModel("返回结果")
public class R<T> implements Serializable {@ApiModelProperty("编码")private Integer code; //编码：1成功，0和其它数字为失败
}

  3. @ApiOperation、@ApiImplicitParams、@ApiImplicitParam

    @ApiOperation(value = "套餐分页查询接口")
@ApiImplicitParams({@ApiImplicitParam(name = "page", value = "页码", readOnly = true),@ApiImplicitParam(name = "pageSize", value = "每页记录数", readOnly = true),@ApiImplicitParam(name = "name", value = "套餐名称", readOnly = false)
})
public R<Page<SetmealDto>> page(int page, int pageSize, String name) {
}

  4. 效果，添加说明

    在这里插入图片描述

项目部署

部署架构

在这里插入图片描述

部署环境说明

服务器：

  • 192.168.138.100（服务器A）

    Nginx：部署前端项目、配置反向代理

    Mysql：主从复制结构中的主库

  • 192.168.138.101（服务器B）

    jdk：运行Java项目

    git：版本控制工具

    maven：项目构建工具

    jar：Spring Boot项目打成jar包基于内置Tomcat运行

    Mysql：主从复制结构中的从库

  • 172.14.2.94（服务器C）

    Redis：缓存中间件

部署前端项目

第一步：在服务器A中安装Nginx，将课程治疗中的dist目录上传到Nginx的html目录下

在这里插入图片描述

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

在这里插入图片描述

location / {root	html/dist;index	index.html;
}# 反向代理配置
location ^~ /api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://192.168.138.101:8080;
}

其中rewrite重写请求路径，例如：将/api/employee/login重写为/employee/login，最后请求地址为：http://192.168.138.101:8080/employee/login

部署后端项目

第一步：在服务器B中安装jdk、git、maven、MySQL，使用git clone命令将git远程仓库的代码克隆下来

第二步：将资料中提供的reggieStart.sh文件上传到服务器B，通过chmod命令设置执行权限为777

#!/bin/sh
echo =================================
echo  自动化部署脚本启动
echo =================================echo 停止原来运行中的工程
APP_NAME=reggie_take_outtpid=`ps -ef|grep $APP_NAME|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; thenecho '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} ]; thenecho 'Kill Process!'kill -9 $tpid
elseecho 'Stop Success!'
fiecho 准备从Git仓库拉取最新代码
cd /usr/local/javaApp/reggie_take_outecho 开始从Git仓库拉取最新代码
git pull
echo 代码拉取完成echo 开始打包
output=`mvn clean package -Dmaven.test.skip=true`cd targetecho 启动项目
nohup java -jar reggie_take_out-1.0-SNAPSHOT.jar &> reggie_take_out.log &
echo 项目启动完成

>符号是指：将正常信息重定向

&>可以将错误信息或者普通信息都重定向输出

末尾&表示后台运行

chmod 777 reggieStart.sh # 修改文件权限

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

在这里插入图片描述

访问服务器A，由于niginx默认80端口，前台不写端口默认访问也为80端口

访问192.168.138.100即可

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

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

相关文章

SpringBoot 日志打印

SpringBoot 日志打印

一. 自定义打印日志 开发者自定义打印日志实现步骤: • 在程序中得到日志对象 • 使用日志对象的相关语法输出要打印的内容. 得到日志对象: //日志工厂需要将需要打印的类的类型传递进去,这样我们才知道日志的归属类,才能更方便的定位到文体类 private static Logger logger …
阅读更多...
js_常用事件演示

js_常用事件演示

✨前言✨ 1.如果代码对您有帮助 欢迎点赞&#x1f44d;收藏⭐哟 后面如有问题可以私信评论哟&#x1f5d2;️ 2.博主后面将持续更新哟&#x1f618;&#x1f389;文章目录 &#x1f354;一、在JavaScript中什么是事件&#xff1f;&#x1f35f;二、为什么要使用事件&#x…
阅读更多...
杂文月刊投稿方式论文发表要求

杂文月刊投稿方式论文发表要求

《杂文月刊》是由国家新闻出版总署批准的正规文学类期刊。主要内容取向&#xff1a;杂文、散文、小说、诗歌、漫画、文学评论、艺术评论、戏剧文化、地方文化、非遗文化、美学艺术、教育等历史、文化、文学、艺术类的文章。是广大专家、学者、教师、学子发表论文、交流信息的重…
阅读更多...
gzip引入后node_modules中.cache compression-webpack-plugin占用内存过多

gzip引入后node_modules中.cache compression-webpack-plugin占用内存过多

1.Gzip Gzip&#xff08;GNU zip&#xff09;是一种常见的文件压缩格式和压缩算法&#xff0c;通常用于在 Web 服务器上对静态资源文件进行压缩&#xff0c;以减小文件大小并加快文件传输速度。在前端开发中&#xff0c;经常会使用 Gzip 压缩来优化网站的性能。 Gzip 压缩通过…
阅读更多...
前端八股文（CSS篇）二

前端八股文（CSS篇）二

目录 1.css中可继承与不可继承属性有哪些 2.link和import的区别 3.transition和animation的区别 4.margin和padding的使用场景 5.&#xff1a;&#xff1a;before和&#xff1a;after的双冒号和单冒号有什么区别&#xff1f; 6.display:inline-block什么时候会显示间隙 7…
阅读更多...
Spring Boot案例-员工分页查询

Spring Boot案例-员工分页查询

准备工作: 数据库的连接: #驱动类名称 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver #数据库连接的url spring.datasource.urljdbc:mysql://localhost:3306/tlias #连接数据库的用户名 spring.datasource.usernameroot #连接数据库的密码 spring.datasource.p…
阅读更多...
电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。

电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。

在数字化时代&#xff0c;采购管理也正经历着前所未有的变革。全过程数字化采购管理成为了企业追求高效、透明和规范的关键。该系统通过Spring Cloud、Spring Boot2、Mybatis等先进技术&#xff0c;打造了从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通过…
阅读更多...
C#使用switch多路选择语句判断何为季节

C#使用switch多路选择语句判断何为季节

目录 一、 switch语句 二、示例 三、生成 一、 switch语句 switch语句是多路选择语句&#xff0c;它通过一个表达式的值来使程序从多个分支中选取一个用于执行的分支。 switch表达式的值只可以是整型、字符串、枚举和布尔类型。 switch语句中多个case可以使用一个break。 在…
阅读更多...
ToDesk Linux 客户端安装（欧拉系统）

ToDesk Linux 客户端安装（欧拉系统）

下载链接 下载链接 https://newdl.todesk.com/linux/todesk-v4.3.1.0-x86_64.rpm &#xff08;使用4.3.1.0覆盖安装后&#xff0c;临时密码将会变更&#xff09; 安装命令&#xff1a; sudo rpm -Uvh todesk-v4.3.1.0-x86_64.rpm启动命令&#xff1a; todesk启动命令只能在桌…
阅读更多...
浅学正则表达式

浅学正则表达式

概念&#xff1a; 正则表达式在程序中代表一种规则&#xff0c;它是一种符号语言&#xff0c;需要理解每一个符号表示的含义。 应用场景&#xff1a; 1.表单验证 2.网页信息敏感词替换 3.字符串中提取我们想要的部分 …… 使用&#xff1a; 网址&#xff1a;“https://…
阅读更多...
手拉手后端Springboot整合JWT

手拉手后端Springboot整合JWT

环境介绍 技术栈 springbootmybatis-plusmysqljava-jwt 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis-plus 3.5.3.2 Json Web令牌简称JWT Token是在服务端产生的一串字符串是客户端访问资源接口(AP)时所需要的资源凭证。…
阅读更多...
[DAU-FI Net开源 | Dual Attention UNet+特征融合+Sobel和Canny等算子解决语义分割痛点]

[DAU-FI Net开源 | Dual Attention UNet+特征融合+Sobel和Canny等算子解决语义分割痛点]

文章目录 概要I Introduction小结 概要 提出的架构&#xff0c;双注意力U-Net与特征融合&#xff08;DAU-FI Net&#xff09;&#xff0c;解决了语义分割中的挑战&#xff0c;特别是在多类不平衡数据集上&#xff0c;这些数据集具有有限的样本。DAU-FI Net 整合了多尺度空间-通…
阅读更多...
【Qt之Quick模块】6. QML语法详解_3 QML对象特性

【Qt之Quick模块】6. QML语法详解_3 QML对象特性

概述 每一个QML对象类型都包含一组已定义的特性。当进行实例时都会包含一组特性&#xff0c;这些特性是在对象类型中定义的。 一个QML文档中的对象类型声明了一个新的类型&#xff0c;即实例出一个类型。 其中包含以下特性。 the id attribute &#xff1a; id特性property a…
阅读更多...
机器学习——主成分分析（PCA）

机器学习——主成分分析（PCA）

目录 背景 引入 特征维度约减 特征维度约减的概念 为何要维度约减? 维度约减的应用 常规维度约减方法 主成分分析 主成分分析 (PCA)基本思路 主成分的代数定义和代数推导 主成分的代数定义 主成分的代数推导 PCA算法两种实现方法 1、基于特征值分解协方差矩阵实…
阅读更多...
【Android Gradle 插件】Android Plugin DSL Reference 离线文档下载 ( GitHub 下载文档 | 查看文档 )

【Android Gradle 插件】Android Plugin DSL Reference 离线文档下载 ( GitHub 下载文档 | 查看文档 )

一、Android Plugin DSL Reference 文档下载 二、Android Plugin DSL Reference 文档查看 一、Android Plugin DSL Reference 文档下载 在之前的博客 【Android Gradle 插件】Android Plugin DSL Reference 文档介绍 ( 1.2 ~ 3.4 版本文档地址 | 4.1 ~ 7.1 版本文档地址 ) 中…
阅读更多...
第三十七周周报：文献阅读+掩码、多头注意力机制+位置编码

第三十七周周报：文献阅读+掩码、多头注意力机制+位置编码

目录 摘要 Abstract 文献阅读&#xff1a;基于注意力的LSTM大地震预报网络 现有问题 提出方法 基于注意力的LSTM网络 研究实验 实验目的 数据集 评估指标 数据预处理和特征提取 结果讨论 Masked Self-Attention&#xff08;掩码自注意力&#xff09; Muti-Head S…
阅读更多...
vue3-11

vue3-11

后端Java代码 src\router\a6router.ts文件 import { createRouter, createWebHashHistory } from vue-router import { useStorage } from vueuse/core import { Menu, Route } from ../model/Model8080 const clientRoutes [{path: /login,name: login,component: () > …
阅读更多...
flutter学习-day23-使用extended_image处理图片的加载和操作

flutter学习-day23-使用extended_image处理图片的加载和操作

文章目录 1. 介绍2. 属性介绍3. 使用 1. 介绍 在 Flutter 的开发过程中&#xff0c;经常会遇到图片的显示和加载处理&#xff0c;通常显示一个图片&#xff0c;都有很多细节需要处理&#xff0c;比如图片的加载、缓存、错误处理、图片的压缩、图片的格式转换等&#xff0c;如果…
阅读更多...
WinForm开发 - C# RadioButton(单选框) 设置默认选中或取消默认选中

WinForm开发 - C# RadioButton(单选框) 设置默认选中或取消默认选中

WinForm开发中RadioButton组件使用过程中的小技巧。 1、属性界面操作 如果有多个组件&#xff0c;希望不显示默认选中单选框只需要将其Checked属性全部设置为False即可&#xff0c; 如果希望默认多个组件中显示默认选中&#xff0c;将其Checked属性设置为True。 2、代码实…
阅读更多...
爱吃饼干的小白鼠2023年终总结

爱吃饼干的小白鼠2023年终总结

目录 前言 学习生活经历 回顾2023 参加活动 回顾点点滴滴 展望2024 2024年新的起点和目标 前言 大家好&#xff0c;我是爱吃饼干的小白鼠。今天刚好是2024年1月1日&#xff0c;时间飞逝&#xff0c;2023年过的飞快&#xff0c;我已经入驻CSDN有一年了&#xff0c;这一年…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023