前后台分离开发

前后台分离开发

简介

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

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

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

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

相关文章

【linux】tail的基本使用

【linux】tail的基本使用

在linux可以用find查找一个文件&#xff0c;可以用grep查找符合要求的文件内容&#xff0c;但是有的时候希望查看文件的前几行或者后几行&#xff08;其实这种场景经常可以遇到&#xff0c;比如接触到日志分析的时候&#xff09;&#xff0c;那就应该使用head和tail这两个工具了…
阅读更多...
2023-12-24 LeetCode每日一题（收集足够苹果的最小花园周长）

2023-12-24 LeetCode每日一题（收集足够苹果的最小花园周长）

2023-12-24每日一题 一、题目编号 1954. 收集足够苹果的最小花园周长二、题目链接 点击跳转到题目位置 三、题目描述 给你一个用无限二维网格表示的花园&#xff0c;每一个 整数坐标处都有一棵苹果树。整数坐标 (i, j) 处的苹果树有 |i| |j| 个苹果。 你将会买下正中心坐…
阅读更多...
【北亚数据恢复】mysql表被truncate，表数据被delete的数据恢复案例

【北亚数据恢复】mysql表被truncate，表数据被delete的数据恢复案例

云服务器数据恢复环境&#xff1a; 华为ECS云服务器&#xff0c;linux操作系统&#xff0c;mysql数据库&#xff08;innodb引擎&#xff09;。作为网站服务器使用。 云服务器故障&#xff1a; 在执行mysql数据库版本更新测试时&#xff0c;误将本应该在测试库上执行的sql脚本执…
阅读更多...
＜软考高项备考＞《论文专题 - 37 采购管理（2） 》

＜软考高项备考＞《论文专题 - 37 采购管理（2） 》

2 过程1-规划采购管理 2.1 问题 4W1H过程做什么记录项目采购决策、明确采购方法&#xff0c;及识别潜在卖方的过程作用&#xff1a;确定是否从项目外部获取货物和服务&#xff0c;如果是&#xff0c;则还要确定将在什么时间、以什么方式获取什么货物和服务为什么做为如何采购…
阅读更多...
阿贝云免费云服务器

阿贝云免费云服务器

最近体验了一下阿贝云的免费云服务器&#xff0c;总体感受是简单易上手。感兴趣的小伙伴们可以赶紧注册体验一下。 阿贝云官网&#xff1a; https://www.abeiyun.com 下图是我亲测的免费云服务器管理界面&#xff0c;免费云服务器的配置信是1核1GB&#xff0c;硬盘10GB&#x…
阅读更多...
VMware虚拟机网络配置——桥接模式

VMware虚拟机网络配置——桥接模式

VM虚拟机配置桥接模式&#xff0c;可以让虚拟机和物理主机一样存在于局域网中&#xff0c;可以和主机相通&#xff0c;和互联网相通&#xff0c;和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&…
阅读更多...
竞赛保研 基于机器视觉的12306验证码识别

竞赛保研 基于机器视觉的12306验证码识别

文章目录 0 简介1 数据收集2 识别过程3 网络构建4 数据读取5 模型训练6 加入Dropout层7 数据增强8 迁移学习9 结果9 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的12306验证码识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向…
阅读更多...
Yapi接口管理平台Centos7容器部署

Yapi接口管理平台Centos7容器部署

文章目录 0.Docker部署1.Docker部署1.1 MongoDB1.2 下载 Yapi 镜像1.3 初始化数据库1.4 启动 Yapi 服务1.5 访问 Yapi 2.docker-compose部署2.1 创建容器网络2.2 创建2.3 创建 mongodb-compose2.4 创建 yapi-compose2.5 启动容器2.6 访问 Yapi 0.Docker部署 参考&#xff1a;C…
阅读更多...
kafka 的零拷贝原理

kafka 的零拷贝原理

文章目录 kafka 的零拷贝原理 今天来跟大家聊聊kafka的零拷贝原理是什么&#xff1f; kafka 的零拷贝原理 零拷贝是一种减少数据拷贝的机制&#xff0c;能够有效提升数据的效率&#xff1b;   在实际应用中&#xff0c;如果我们需要把磁盘中的某个文件内容发送到远程服务器上…
阅读更多...
亲爱的程序猿们，元旦快乐！

亲爱的程序猿们，元旦快乐！

新年祝福 在这个充满欢笑和祝福的日子里&#xff0c;我想对你们说&#xff1a; 新的一年&#xff0c;愿你们像代码一样充满逻辑&#xff0c;像算法一样追求高效&#xff0c;像编程语言一样多样化&#xff01; 2024年即将到来&#xff0c;预测几个行业趋势&#xff1a; 人工…
阅读更多...
基于Echarts构建大数据招聘岗位数据可视化大屏

基于Echarts构建大数据招聘岗位数据可视化大屏

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
软件测试/测试开发丨Python 面向对象编程思想

软件测试/测试开发丨Python 面向对象编程思想

面向对象是什么 Python 是一门面向对象的语言面向对象编程&#xff08;OOP&#xff09;&#xff1a;Object Oriented Programming 所谓的面向对象&#xff0c;就是在编程的时候尽可能的去模拟真实的现实世界&#xff0c;按照现实世界中的逻辑去处理问题&#xff0c;分析问题中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023