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

目录

第一部分 前端

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

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

第一部分 前端 1 当前网页对应的网址是localhost/system/role对应哪个页面

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

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

1.1、路由动态赋值

 

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

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

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

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

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

 

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

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

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

 

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

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

process.env.VUE_APP_BASE_API

 

 这里/prod-api代表什么？

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

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

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

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

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

 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/;} }}

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

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