Ruoyi框架前后端交互的整个流程

约定不等于承诺〃 2022-11-01 05:56 20阅读 0赞

# 前提 #

Jdk、maven等环境部署成功，部署若依项目到本地

![20210224110109405.png][]

--------------------

# 第一部分 前端 #

**1、当前网页对应的网址是localhost/system/role对应哪个页面**

![20210224110439330.png][]

**     1.1、前端路由是动态的，url来自于数据库；**

**     1.2、前端文件夹名称以及文件名称、位置与数据库里一一对应**

**     1.3、路由动态赋值**

![20210224110510852.png][]

![20210224110531862.png][]

** 例如： 如果地址是/system/role  就找一个system文件夹下面有role文件夹的文件**

**2、点击某个页面，上面的数据是从数据库来的，前端如何发送请求给后端呢？**

![20210224110622148.png][]![20210224110632494.png][]

刚加载页面时，发送请求给后端，用created或者mouted\{\}

getList()是一个封装的请求，listRole在api的js文件中

![20210224110646217.png][]

你会发现vue里引入js的变量，都是js里的方法名称

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

export function listRole(query) {
    
      return request({
    
        url: '/system/role/list',
    
        method: 'get',
    
        params: query
    
      })}

***后端的端口以及全称是什么呢？始终看不到真实地址？***

**我们继续看request这个方法，在utils/request下**

![20210224110851168.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

**普通的前后端交互，看demo,  axios实例**

![20210224110912577.png][]

**这里注意，vue分开发环境与生产环境，这个**

process.env.VUE_APP_BASE_API

![20210224110925892.png][]

**这里/prod-api代表什么？**

**vue****项目前端页面相互访问，是通过router就可以实现。**

**而数据交互的前后端存在跨域（跨域就是端口不一样或域名不一样），前后端交互频繁，若服务器地址后期变更，不方便维护。**

**所以我们需要一个精简的路径来映射真实后端请求路径。**

**在开发环境下，使用vue的proxy就可以实现前后端交互：**

**Vue-cli3****做例子：在vue.config.js里面有信息**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

**以上仅在开发时有效，若部署到云服务器上，则不行。**

devServer: {
    
        host: '0.0.0.0',
    
        port: port,
    
        open: true,
    
        proxy: {
    
          [process.env.VUE_APP_BASE_API]: {
    
             target: `http://localhost:8090`,
    
           // target: `http://192.168.1.64:8080`,
    
            changeOrigin: true,
    
            pathRewrite: {
    
              ['^' + process.env.VUE_APP_BASE_API]: ''
    
            }}},
    
        disableHostCheck: true},

**Proxy:\{\}****是代理服务器**

**pathRewrite****意思是重写路径**

process.env.VUE_APP_BASE_API

**总结上述：上面提到axios请求url都有一个公共的头部baseurl，指向process.env.Vue\_APP\_BASE\_API，其值为/prod-api。在代理服务器中，把真实的后端请求地址与/prod-api映射起来了。**

**例子**

**前端地址：ip:80**

**后端地址：ip:8080/项目名**

**存在跨域**

**前端配置映射   /prod-api   -----------**** ip:8080/****项目名**

changeOrigin: true,// 允许跨域的必备代码

**生产环境下，以上**devServer: \{proxy….\}不起作用的，可注释掉（不注释也行），**在Nginx里配置就可以了**

user  root;
    worker_processes  1;
    #pid        logs/nginx.pid;
    events {
        worker_connections  1024;
    }
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
            listen       80;
            server_name  192.168.209.236;
            location / {
                root   /usr/share/nginx;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;
    }
               location ^~ /prod-api/ {
               proxy_pass http://192.168.209.236:8080/ruoyi-admin/;} }}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

**总结：只要请求存在跨域问题，就需要一个代理服务器把真实的后期请求地址与一个自定义的简短路径映射起来**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

**这个request封装axios方法，axios请求，都有一个公共的头部/prod-api，经过代理服务器映射，会转发到真实的后端服务器上**

--------------------

### 1、后端是如何接受前端的请求？ ###

先看ruoyi框架的后端整体结构

![20210224111234758.png][]

若依框架看似有多个独立的项目，但只有一个入口程序（ruoyi-admin里面RuoYoApplication），入门程序一旦启动，其他项目都会启动起来。

![20210224111300505.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6][]

Ruoyi-common是注解、过滤器，异常及工具类的封装。

Ruoyi-framework是事务管理；

Ruoyi-generator是自动生成bean等映射文件及vue前端；

Ruoyi-quartz是定时任务的配置

Ruoyi-system主要是bean类，接口类与实现类等;

Ruoyi-admin是业务层，直接与前端交互

业务层在ruouyi-admin里，从包名就可以看出具体的请求方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7][]

但是以下这个注解是什么意思呢？

@PreAuthorize

答案：权限认证，用户是否有操作的权限，有则执行，无则报错

@GetMapping("/list")

答：是路径，一个方法的全路径=类上路径+方法上路径；

若类上无路径，该方法的全路径就是方法上的路径；

前后端请求的案例：

![20210224111341771.png][]

![20210224111423528.png][]

![20210224111440122.png][]

![20210224111451287.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8][]

请求数据库到此结束。

--------------------

# 疑惑： #

各大模块之间都有独立的pom.xml文件，各个独立的模块之间如何通信的？？？

答：1、引入类  2、@Autowired自动装配

--------------------

为什么前端发送请求给这个项目，项目就能够精准的找到某个类的方法里呢？

答案：拦截器。所有请求，经过拦截器，都能精准转发。

--------------------

它是如何实现数据库与bean类映射的？

Mapper文件与数据库关联。

--------------------

它为什么不需要写映射文件就可以呢？什么起作用？

答案：有映射文件，只不过若依框架只需要执行sql语句，在前端就能自动生成bean service mapper以及xml文件，直接下载既可。

--------------------

这个方法中的参数(SysRole role)是不是不需要的，因为前端没有传递参数过来？

答案：在这个查询数据库中所有数据是不需要的，但是这个方法还对应前端条件查询，所以参数必不可少。

--------------------

List数据为什么不需要封装成jsonobject或者jsonarray就可以给前端，并且前端返回的还是…

答案：封装了，有专门的类 ，也有封装成Object自定义类

![20210224111531357.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9][]

--------------------

后端如何把数据返回给前端的？

答案：直接return就可以了，类必须是@RestController而不能是@Controller，前者返回数据，后者是调转页面。

--------------------

前端是如何展示数据的？

答案：获取后端数据，然后通过v-for渲染

--------------------

数据权限在前后端是如何控制的？

答案：不同的用户拥有不同的权限，登录成功时，查询用户拥有的权限并与token存储在redis里，前后端根据用户自带的权限展示出可以展示的。

证明：先登录一个普通的用户，看看页面的网络信息。

![20210224111756622.png][]

![20210224111804816.png][]

在点击登录的时候，首先验证用户名与密码是否正确。然后返回一个口令

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11][]

查询到的用户访问页面权限

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12][]

数据给前端，前端通过一些校验来显示或者隐藏一些东西

![20210224111843133.png][]

--------------------

后端采用权限限制访问，请问前端传什么值过来了，后端才放行了，为什么我们没看到呢？

答案：前后端访问是token令牌，每个用户都不同的token，token与该用户权限以键值对的方式存储。前后端根据这个用户权限展示或隐藏

--------------------

那么为什么后端会设置权限呢？

答案：防止postman以及爬虫人员解析出后端地址，没有后端权限，就能直接访问后端。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13][]

我们拿postman做实验：

管理员的特殊权限，普通用户看不到，但是当你知道后端地址，是不是就可以自己用postman查看返回的数据。

后端有权限设置，你没有token就不能访问后端，自然看不到数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14][]

是不是只要有token就可以拿到数据？

是的！！！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 16][]

每次请求都会被拦截器拦截查看权限

--------------------

**ruoyi后端框架的拦截器先把请求定位到某类某个方法，还是先校验登录口令？**

答案：先查看token口令权限，再转发请求。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 17][]

--------------------

**各个子包下的pom.xml是独立的，还是需要在总项目下pom.xml里包含？**

答案：包含的。

![20210224112015471.png][]

--------------------

**Ruoyi-system包下面的mapper的xml文件，怎么没有在.yml文件中被引用/调用**

答案:在admin项目包下配置了扫描路径

![20210224112021251.png][]

--------------------

[20210224110109405.png]: /images/20221024/a9c41b15de4c4968bc46306d3eddd590.png
[20210224110439330.png]: /images/20221024/cacb86ee88024d56926d4feac2be6a6d.png
[20210224110510852.png]: /images/20221024/5c081c812a2e4d3e88e1a9d00eec851a.png
[20210224110531862.png]: /images/20221024/6dab65c319214b5a8abe005e7f630963.png
[20210224110622148.png]: https://img-blog.csdnimg.cn/20210224110622148.png
[20210224110632494.png]: /images/20221024/a9308399655c46ecb5e845b9575fe354.png
[20210224110646217.png]: /images/20221024/3961d20cda514d6d9dc9346785fa5c06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20221024/dec5f2580eb24c94a615b3cd9e4dbd80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20221024/6a9b9035cecb469b8a25247c21487597.png
[20210224110851168.png]: /images/20221024/c758816470c848e9b1c72d1ab3ab15d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20221024/4b3791f4468447a59ef10757dcba73ef.png
[20210224110912577.png]: /images/20221024/3bb64a79a8cb43a68fed8bef05eda3ba.png
[20210224110925892.png]: /images/20221024/c79a19f933c643e4967d9d9113066a88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20221024/09814d4f0f534b79adc6c6108a5c54b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20221024/d64d93c50b08465f9e9b0e5cbb1d4f33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20221024/02937cf75df64401bbb53d9413cde927.png
[20210224111234758.png]: /images/20221024/a957ae9a815d400c9e60a8e6207cd149.png
[20210224111300505.png]: https://img-blog.csdnimg.cn/20210224111300505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6]: /images/20221024/ac58c7bd07f245dcaae9ffc6189dc2d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7]: /images/20221024/dc07c7567083405b81734d2bdbc030fa.png
[20210224111341771.png]: /images/20221024/de23d48a1fdd4d74a8dc2d06ed2e615f.png
[20210224111423528.png]: /images/20221024/4c2692f1b7944f7e806aa721750e1b35.png
[20210224111440122.png]: /images/20221024/2bf16fdeb3c7422aa8e140f0a9099991.png
[20210224111451287.png]: /images/20221024/12d10c682f374c8aacac87b3286e3d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8]: /images/20221024/80d46c7fe829458e82626c0ff9235532.png
[20210224111531357.png]: /images/20221024/201533690eef4685bdf947b315f1908e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9]: /images/20221024/fd5c18359f3c4b34a6a2e4abbc247d06.png
[20210224111756622.png]: /images/20221024/0a53fa54bf044e0b9bc87b95e066051f.png
[20210224111804816.png]: /images/20221024/b2fdf01a1bb84a089f1c218aeeebcd6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10]: /images/20221024/b2a9bec6740d4396ad309a647a8fd5a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11]: /images/20221024/f8465f26fa9a4529af612d63b612ac1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12]: /images/20221024/b3d8bc1967ba47cba448a2887da438bb.png
[20210224111843133.png]: /images/20221024/fa8e570777b74a38a3ebc706e68b38a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13]: /images/20221024/cb8abf3ad5764a63abed549c16f4522d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14]: /images/20221024/f67fa2065fbb4bf0b2f8157c3b4b41d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 15]: /images/20221024/f3db7d49af2543d6b05bf7c3c0c04508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 16]: /images/20221024/6fcdb699e92843788730961a83fcc2ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 17]: /images/20221024/77dfd594c4f74f46ad7a36e6147ee262.png
[20210224112015471.png]: /images/20221024/404e015e10674f99b4ae23e0e46ea5bb.png
[20210224112021251.png]: /images/20221024/09ce13552813487fbc0656ac98f91bd7.png