若依文件分析_若伊文件处理-CSDN博客

本文链接：https://blog.csdn.net/starzhou/article/details/121233191

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

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

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

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

1.3、路由动态赋值

例如：如果地址是/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/;} }}