前后台分离开发

前后台分离开发

简介

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

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

前后端分离开发后，从工程结构上也会发生变化，即前后端代码不在混合在同一个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.rhkb.cn/news/228539.html

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

相关文章

20231231_小米音箱接入GPT

20231231_小米音箱接入GPT

参考资料&#xff1a; GitHub - yihong0618/xiaogpt: Play ChatGPT and other LLM with Xiaomi AI Speaker *.设置运行脚本权限 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned *.配置小米音箱 ()pip install miservice_fork -i https://pypi.tuna.tsinghua.edu.cn/sim…
阅读更多...
单机+内部备份_全备案例

单机+内部备份_全备案例

此场景为单机数据库节点内部备份&#xff0c;方便部署和操作&#xff0c;但备份REPO与数据库实例处于同一个物理主机&#xff0c;冗余度较低。 前期准备 配置ksql免密登录(必须) 在Kingbase数据库运行维护中&#xff0c;经常用到ksql工具登录数据库&#xff0c;本地免密登录…
阅读更多...
Kafka安装及简单使用介绍

Kafka安装及简单使用介绍

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…
阅读更多...
电子邮件地址填写指南：格式与常见问题解答

电子邮件地址填写指南：格式与常见问题解答

一个专业的电子邮件地址是一个你只用于工作目的的通信帐户。当你给收件人发送电子邮件时&#xff0c;这是他们最先看到的细节之一。无论你的职位或行业如何&#xff0c;拥有一个专业的电子邮件地址都可以提高你和所在公司的可信度。 在本文中我们解释了专业的电子邮件地址是什么…
阅读更多...
Reac03:react脚手架配置(代理配置)

Reac03:react脚手架配置(代理配置)

react脚手架配置 reactAjax下载Axios配置代理第二种配置代理的方式 github搜索案例 reactAjax React本身只关注于界面&#xff0c;并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax(或自己封装) 常用的ajax请求库 j…
阅读更多...
STL——queue容器

STL——queue容器

1.queue基本概念 概念&#xff1a;queue是一种先进先出&#xff08;First In First Out,FIFO&#xff09;的数据结构&#xff0c;它有两个出口。 队列容器允许从一端新增元素&#xff0c;从另一端移除元素。 队列中只有队头和队尾才可以被外界使用&#xff0c;因此队列不允许…
阅读更多...
mongoose中http server服务器解决“Access-Control-Allow-Origin mongoose”跨域问题

mongoose中http server服务器解决“Access-Control-Allow-Origin mongoose”跨域问题

问题 使用mongoose做http服务器&#xff0c;自己构造的浏览器端jquery在访问server时&#xff0c;会遇到&#xff1a; Access to XMLHttpRequest at http://127.0.0.1:8000/ from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is pr…
阅读更多...
关于HTTPS

关于HTTPS

目录 什么是加密 对称加密 非对称加密 中间人攻击 引入证书 HTTPS是一个应用层的协议,是在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输,这就导致在传输的过程中出现一些被篡改的情况. 运营商劫持事件 未被劫持的效果,点击下载按钮,就会…
阅读更多...
uni-app引入vant表单（附源码）

uni-app引入vant表单（附源码）

新建项目 下载安装vant npm i vant main.js引入 import { Form } from vant; import { Field } from vant;Vue.use(Form); Vue.use(Field);代码引入 <van-form submit"onSubmit"><van-fieldclass"rePwd"v-model"username"name"请…
阅读更多...
代码随想录刷题笔记（DAY2）

代码随想录刷题笔记（DAY2）

今日总结&#xff1a;今天在学 vue 做项目&#xff0c;学校还有很多作业要完成&#xff0c;熬到现在写完了三道题&#xff0c;有点太晚了&#xff0c;最后一道题的题解明天早起补上。&#xff08;补上了&#xff09; Day 2 01. 有序数组的平方&#xff08;No. 977&#xff09;…
阅读更多...
【qt】解决qt里编辑qss后失效问题（qt编码问题）

【qt】解决qt里编辑qss后失效问题（qt编码问题）

1、先创建qss文本stylesheet.qss 以按钮为例 QPushButton {background-color:rgb(240,255,255);color: rgb(0, 0, 2);border-style: outset;border-color: beige;border-radius: 10px; }/* hover按钮悬浮&#xff0c;鼠标悬浮在按钮上的状态&#xff0c;按钮颜色 */QPushButto…
阅读更多...
Linux调试工具—gdb

Linux调试工具—gdb

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;HEART BEAT—YOASOBI 2:20━━━━━━️&#x1f49f;──────── 5:35 &#x1f504; ◀️ ⏸ ▶️ ☰ …
阅读更多...
HackTheBox - Medium - Linux - Encoding

HackTheBox - Medium - Linux - Encoding

Encoding 前言 经过10个月左右的网安自学&#xff0c;我想说的第一句话无疑是&#xff1a;感谢TryHackMe。当然&#xff0c;后续的HackTheBox&学院、CRTO等等&#xff0c;对我的帮助都很大。 许多师傅们都在年度总结&#xff0c;我也看了大家都收获很多&#xff0c;都很…
阅读更多...
软件工程PPT 笔记摘录（2）

软件工程PPT 笔记摘录（2）

分析软件需求 UML 提供了用例图来分析和描述用例视角的软件需求模型 UML 提供了交互图和状态图来描述行为视角的软件需求模型 UML 提供了类图来描述和分析业务领域的概念模型 顺序图&#xff1a;强调消息传递的时间序 通信图&#xff1a;突出对象间的合作 类图&#xff0…
阅读更多...
重温MySQL之索引那些事

重温MySQL之索引那些事

文章目录 前言一、概念1.1 索引作用1.2 索引类型1.3 B树索引结构1.4 B树索引源码分析 二、查询计划2.1 explain2.2 id2.3 select_type2.4 table2.5 partitions2.6 type2.7 possible_keys2.8 key2.9 key_len2.10 ref2.11 rows2.12 filtered2.13 Extra 三、索引优化3.1 索引失效3…
阅读更多...
C#高级 02异步编程

C#高级 02异步编程

基础知识 1.什么是异步任务 包含了异步任务的各种状态的一个引用类型 1)正在运行、完成、结果、报错等 2)另有ValueTask值类型版本对于异步任务的抽象 1)开启异步任务后&#xff0c;当前线程并不会阻塞&#xff0c;而是可以去做其他事情 2)异步任务&#xff08;默认&#xff…
阅读更多...
Java技术栈 —— Nginx的使用

Java技术栈 —— Nginx的使用

Java技术栈 —— Nginx的使用 一、认识Nginx二、搭建Nginx环境2.1 在Ubuntu上安装Nginx 三、使用Nginx3.1 配置负载均衡(HTTP) 一、认识Nginx 企业需要运行多个相同的副本&#xff0c;并将负载分散在整个系统集群上&#xff0c;为了高性能的负载均衡&#xff0c;引入了Nginx代…
阅读更多...
【Vue2 + ElementUI】el-table中校验表单

【Vue2 + ElementUI】el-table中校验表单

一. 案例 校验金额 阐述&#xff1a;校验输入的金额是否正确。如下所示&#xff0c;点击【编辑图标】会变为input输入框当&#xff0c;输入金额。当输入框失去焦点时&#xff0c;若正确则调用接口更新金额且变为不可输入状态&#xff0c;否则返回不合法金额提示 <templat…
阅读更多...
Python pycharm编辑器修改代码字体

Python pycharm编辑器修改代码字体

在pycharm编辑器下修改代码字体&#xff0c;可以按照以下步骤&#xff1a; 点开上图所示的菜单&#xff0c; 再点击File->Settings&#xff0c;进入设置页面。 我们找到Editor下的Font并点选&#xff0c;然后我们就可以在右侧修改字体相关配置了。 这里建议使用等宽字体&…
阅读更多...
SparkStreaming与Kafka整合

SparkStreaming与Kafka整合

1.3 SparkStreaming与Kafka整合 1.3.1 整合简述 kafka是做消息的缓存&#xff0c;数据和业务隔离操作的消息队列&#xff0c;而sparkstreaming是一款准实时流式计算框架&#xff0c;所以二者的整合&#xff0c;是大势所趋。 ​ 二者的整合&#xff0c;有主要的两大版本。 kaf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023