Yapi & Swagger & 前后端项目部署

分手后的思念是犯贱 2023-09-26 10:22 161阅读 0赞

**问题展示：**

**也就是说我们项目中写的既有后端代码、又有前端代码：**

![01888cab1d3c4a8da698ca7f1a5d3e30.png][]

## 一、前后端分离开发 ##

![7207570ee3b04d3daa923cb41651c787.png][]

开发流程：

![388c77991c874634a6b2e092b178dcd6.png][]

## 二、YApi ##

![e8699b36ce5242cd908d8f7a9fb3abab.png][]

### 2.1、介绍 ###

![8c8a3e9b68aa49ebb8f5e0a31f26395e.png][]

### 2.2、YApi使用 ###

![a28a2d0f9da14ad7a76b52d121a0c1d8.png][]

![cefc4436ef4a4eb8bae87c9e375de39f.png][]

真正开发项目当中，这上面的接口肯定不是我们前后端工作人员写的，上面的接口规范肯定是已经写好的，我们前后端工作人员只需要按照上面的接口规范的格式写一些处理代码即可，我们工作人员可以把上面的接口规范格式导出到我们电脑当中，然后我们就可以看着这些接口的规范进行写代码了：

![c824067a6c1c49f6a0f9475e58b4e911.png][]

![63eb6154f94b4905952018e09650c133.png][]

注：这里是以html格式导出的，还可以以其他的形式进行导出。

## 三、Swagger ##

![2595503073044641907e78ab1ada2f28.png][]

### 3.1、介绍 ###

![2c52e43ec7fd48ada377c57136326f64.png][]

### 3.2、使用方式 ###

![4ff344d67c8941009b7f6b53e43b9848.png][]

第一步：

![bc787ed647024c17a1b0ac19453f65a0.png][]

第二步：

![cc38f37628ca4928bb8a176c3aabe459.png][]

第三步：

![0096d591765249b28d14d4d70e34ddfc.png][]

![b30b78c90c0e45eea5d6c9291f5b96bf.png][]

第四步：

![3306ed396bc048a5b243fb0648941365.png][]

最终四个步骤配置好之后，我们开启项目服务器进行访问即可：

![ead6c31f5de84bed921264f595cc51a1.png][]

![647286c292264edab0cda0fd0dba8c56.png][]

![f936d692661d411482944b54215b7b8c.png][]

![c0d4fce607934c1eacc5a2c5f8f589f7.png][]

**并且我们还可以在这上面进行方法功能的测试（调试）：**

![3d5ca236d47f4b3981f780559bb2e390.png][]

![97fbb111ab124fd7ac3e945817a13a31.png][]

**而且我们还可以把这个接口文档下载到我们电脑上：**

![9ce7c5668c2c4f21a7e142f65d3531a7.png][]

### 3.3、Swagger常用注解 ###

![67de34da812e425e8caa830e3c95e214.png][]

注解演示：

实体类的类上和属性中的注解说明形式：

![c0fca8a653a341a6b506a2367ecb2358.png][]

类上的注解说明形式：

![e217d7ff36b14f55acf41a1b93aef553.png][]

功能方法上的注解说明形式：

![993651347ff74a788ab30c788e3efed1.png][]

功能方法中参数的注解说明形式：

![50c0de5b60074b04b7824daa95f32b93.png][]

**最终加完注解说明之后，我们再查看注解文档展示如下所示：**

**项目中没加注解说明之前，在接口文档中的展示形式如下所示：**

![36fbf10ef5be4ed292d2986b1296b8bf.png][]

**加完注解说明之后再看接口文档，就会发现确实更容易看得懂了（我们只需要在我们配置的注解中写上标记，然后就可以展示出来这些标记了，真不错i）：**

![4ebbc1059bf841848ff04bf06e568a56.png][]

## 四、项目部署 ##

![7207570ee3b04d3daa923cb41651c787.png][]

这里我们说过了，我们前后端分离之后，可以把后端工程java代码打包部署到tomcat服务器当中，把前端工程（html、css、js这些静态资源）打包部署到Nginx服务器当中，因此我们就演示一下该如何部署。

![6c7d49927f9b43288a47e5a61be22d44.png][]

### 4.1、部署架构 ###

![c29888de793f42239e0e615f13370b50.png][]

### 4.2、部署环境说明 ###

![d25b88a4c4054774ab1592554baacf29.png][]

### 4.3、部署前端项目 ###

![0ccefc3f0e764410a7b5ce37e4789fd7.png][]

然后前端静态资源放入到html目录下之后，我们可以打开nginx.conf配置文件进行一下修改配置：

![13f621c0a15a406d98b02655dca7f9d2.png][]

配置文件修改完之后记得重新加载一下配置文件，要不然不会生效 （忘记的话看Nginx笔记）

![93d5d2ca95014556b6be4ebbb6309b03.png][]

**这些前端静态资源部署好之后，我们就可以把Nginx这个服务器充当成反向代理服务器了（忘记的话看笔记）：**

将Nginx服务器配置成反向代理服务器：

![d1bbd55add55431495ceb2e593c5cb8e.png][]

**思考**为什么配置反向代理的时候会这样写呢，我们将Nginx反向代理笔记的时候也没有写这些横起来的东西啊：

![1e512ceafae7471482aa0078c0051c4d.png][]

![4ca856e9c565410b952cfda3e8150b24.png][]

分析：

![34a487aa924546f294626875950b90f9.png][]

### 4.4、部署后端项目 ###

第一步：首先第一步就是把项目的java代码部署在tomcat服务器当中，并且启动项目 （这些操作在Linux安装启动tomcat服务器笔记里都写过）

![3b3e773b763d48048abfbaf16d223b17.png][]

注意：jdk、mysql....这些都要下载到该Linux服务器当中。

最终我们把后端的java项目代码部署到tomcat服务器之后，我们知道Nginx服务器充当反向代理服务器就帮我们请求访问的是tomcat服务器中的资源，又因为比如登录功能方向代理服务器携带的请求的路径就是http：tomcat服务器ip：端口号/employee/login，因此就可以帮我们代理访问到tomcat服务器中部署的java项目的登录功能接口了：

![a28bca7b96a24bdcbd4526820f03d8f9.png][]

注：别忘记把端口号开放，因为Linux系统有防火墙默认是开启状态。

其实这里之所以可以访问到部署到tomcat服务器中的项目，和Linux笔记中Linux系统中安装tomcat服务器，然后部署项目访问方式其实是一模一样的。

**但是会有一个小的问题：**

![eeefa721672a4e5b94fafb224e1ebc48.png][]

**原因：**

![d5130a99e6bf47b6bdb94f88bc64e7a0.png][]

**解决问题：**

**就是把这个路径改写成Linux系统中的一个目录，并且在该目录下放入项目中所用到的照片，那么在Linux系统中这个项目想要照片的时候就可以在这个Linux系统的目录下找到这些所需要用到的照片了。（注意：修改完配置之后，要保证这些修改后的项目确定部署到了Linux系统中了，最好就是修改好代码之后重新打成jar包上传到Linux系统中去，那么就能保证这个修改的项目确实成功部署到Linux系统中了）**

![d6f7ee6580a342a48848ef8ce618683b.png][]

![b3aa2f654b39497a93aff91c83a0f3cf.png][]

![4358f717cf804bf9b2395bb7f07e2ee8.png][]

[01888cab1d3c4a8da698ca7f1a5d3e30.png]: https://img-blog.csdnimg.cn/01888cab1d3c4a8da698ca7f1a5d3e30.png
[7207570ee3b04d3daa923cb41651c787.png]: https://img-blog.csdnimg.cn/7207570ee3b04d3daa923cb41651c787.png
[388c77991c874634a6b2e092b178dcd6.png]: https://img-blog.csdnimg.cn/388c77991c874634a6b2e092b178dcd6.png
[e8699b36ce5242cd908d8f7a9fb3abab.png]: https://img-blog.csdnimg.cn/e8699b36ce5242cd908d8f7a9fb3abab.png
[8c8a3e9b68aa49ebb8f5e0a31f26395e.png]: https://img-blog.csdnimg.cn/8c8a3e9b68aa49ebb8f5e0a31f26395e.png
[a28a2d0f9da14ad7a76b52d121a0c1d8.png]: https://img-blog.csdnimg.cn/a28a2d0f9da14ad7a76b52d121a0c1d8.png
[cefc4436ef4a4eb8bae87c9e375de39f.png]: https://img-blog.csdnimg.cn/cefc4436ef4a4eb8bae87c9e375de39f.png
[c824067a6c1c49f6a0f9475e58b4e911.png]: https://img-blog.csdnimg.cn/c824067a6c1c49f6a0f9475e58b4e911.png
[63eb6154f94b4905952018e09650c133.png]: https://img-blog.csdnimg.cn/63eb6154f94b4905952018e09650c133.png
[2595503073044641907e78ab1ada2f28.png]: https://img-blog.csdnimg.cn/2595503073044641907e78ab1ada2f28.png
[2c52e43ec7fd48ada377c57136326f64.png]: https://img-blog.csdnimg.cn/2c52e43ec7fd48ada377c57136326f64.png
[4ff344d67c8941009b7f6b53e43b9848.png]: https://img-blog.csdnimg.cn/4ff344d67c8941009b7f6b53e43b9848.png
[bc787ed647024c17a1b0ac19453f65a0.png]: https://img-blog.csdnimg.cn/bc787ed647024c17a1b0ac19453f65a0.png
[cc38f37628ca4928bb8a176c3aabe459.png]: https://img-blog.csdnimg.cn/cc38f37628ca4928bb8a176c3aabe459.png
[0096d591765249b28d14d4d70e34ddfc.png]: https://img-blog.csdnimg.cn/0096d591765249b28d14d4d70e34ddfc.png
[b30b78c90c0e45eea5d6c9291f5b96bf.png]: https://img-blog.csdnimg.cn/b30b78c90c0e45eea5d6c9291f5b96bf.png
[3306ed396bc048a5b243fb0648941365.png]: https://img-blog.csdnimg.cn/3306ed396bc048a5b243fb0648941365.png
[ead6c31f5de84bed921264f595cc51a1.png]: https://img-blog.csdnimg.cn/ead6c31f5de84bed921264f595cc51a1.png
[647286c292264edab0cda0fd0dba8c56.png]: https://img-blog.csdnimg.cn/647286c292264edab0cda0fd0dba8c56.png
[f936d692661d411482944b54215b7b8c.png]: https://img-blog.csdnimg.cn/f936d692661d411482944b54215b7b8c.png
[c0d4fce607934c1eacc5a2c5f8f589f7.png]: https://img-blog.csdnimg.cn/c0d4fce607934c1eacc5a2c5f8f589f7.png
[3d5ca236d47f4b3981f780559bb2e390.png]: https://img-blog.csdnimg.cn/3d5ca236d47f4b3981f780559bb2e390.png
[97fbb111ab124fd7ac3e945817a13a31.png]: https://img-blog.csdnimg.cn/97fbb111ab124fd7ac3e945817a13a31.png
[9ce7c5668c2c4f21a7e142f65d3531a7.png]: https://img-blog.csdnimg.cn/9ce7c5668c2c4f21a7e142f65d3531a7.png
[67de34da812e425e8caa830e3c95e214.png]: https://img-blog.csdnimg.cn/67de34da812e425e8caa830e3c95e214.png
[c0fca8a653a341a6b506a2367ecb2358.png]: https://img-blog.csdnimg.cn/c0fca8a653a341a6b506a2367ecb2358.png
[e217d7ff36b14f55acf41a1b93aef553.png]: https://img-blog.csdnimg.cn/e217d7ff36b14f55acf41a1b93aef553.png
[993651347ff74a788ab30c788e3efed1.png]: https://img-blog.csdnimg.cn/993651347ff74a788ab30c788e3efed1.png
[50c0de5b60074b04b7824daa95f32b93.png]: https://img-blog.csdnimg.cn/50c0de5b60074b04b7824daa95f32b93.png
[36fbf10ef5be4ed292d2986b1296b8bf.png]: https://img-blog.csdnimg.cn/36fbf10ef5be4ed292d2986b1296b8bf.png
[4ebbc1059bf841848ff04bf06e568a56.png]: https://img-blog.csdnimg.cn/4ebbc1059bf841848ff04bf06e568a56.png
[6c7d49927f9b43288a47e5a61be22d44.png]: https://img-blog.csdnimg.cn/6c7d49927f9b43288a47e5a61be22d44.png
[c29888de793f42239e0e615f13370b50.png]: https://img-blog.csdnimg.cn/c29888de793f42239e0e615f13370b50.png
[d25b88a4c4054774ab1592554baacf29.png]: https://img-blog.csdnimg.cn/d25b88a4c4054774ab1592554baacf29.png
[0ccefc3f0e764410a7b5ce37e4789fd7.png]: https://img-blog.csdnimg.cn/0ccefc3f0e764410a7b5ce37e4789fd7.png
[13f621c0a15a406d98b02655dca7f9d2.png]: https://img-blog.csdnimg.cn/13f621c0a15a406d98b02655dca7f9d2.png
[93d5d2ca95014556b6be4ebbb6309b03.png]: https://img-blog.csdnimg.cn/93d5d2ca95014556b6be4ebbb6309b03.png
[d1bbd55add55431495ceb2e593c5cb8e.png]: https://img-blog.csdnimg.cn/d1bbd55add55431495ceb2e593c5cb8e.png
[1e512ceafae7471482aa0078c0051c4d.png]: https://img-blog.csdnimg.cn/1e512ceafae7471482aa0078c0051c4d.png
[4ca856e9c565410b952cfda3e8150b24.png]: https://img-blog.csdnimg.cn/4ca856e9c565410b952cfda3e8150b24.png
[34a487aa924546f294626875950b90f9.png]: https://img-blog.csdnimg.cn/34a487aa924546f294626875950b90f9.png
[3b3e773b763d48048abfbaf16d223b17.png]: https://img-blog.csdnimg.cn/3b3e773b763d48048abfbaf16d223b17.png
[a28bca7b96a24bdcbd4526820f03d8f9.png]: https://img-blog.csdnimg.cn/a28bca7b96a24bdcbd4526820f03d8f9.png
[eeefa721672a4e5b94fafb224e1ebc48.png]: https://img-blog.csdnimg.cn/eeefa721672a4e5b94fafb224e1ebc48.png
[d5130a99e6bf47b6bdb94f88bc64e7a0.png]: https://img-blog.csdnimg.cn/d5130a99e6bf47b6bdb94f88bc64e7a0.png
[d6f7ee6580a342a48848ef8ce618683b.png]: https://img-blog.csdnimg.cn/d6f7ee6580a342a48848ef8ce618683b.png
[b3aa2f654b39497a93aff91c83a0f3cf.png]: https://img-blog.csdnimg.cn/b3aa2f654b39497a93aff91c83a0f3cf.png
[4358f717cf804bf9b2395bb7f07e2ee8.png]: https://img-blog.csdnimg.cn/4358f717cf804bf9b2395bb7f07e2ee8.png