前端VSCode layui项目+后端IDEA Springboot项目实现前后端分离

软件：前端Vscode运行layui项目，后端IDEA运行springboot项目

1.前端

1、 安装插件Debugger for Chrome

2、配置文件，在launch.json文件添加配置信息

3、选择调试方式为本机chrome调试

4、在终端输入npm install -g live-server

5、在终端输入live-server命令
输入live-server遇到错误

解决：windows powershell 管理员身份打开，依次输入以下命令

set-ExecutionPolicy RemoteSigned

A

get-ExecutionPolicy

如下图，显示RemoteSigned

再次在layui程序终端运行live-server命令不再报错

2. 后端

springboot项目的application.properties文件设置项目端口号为8082

#项目端口号
server.port=8082

3. 前后端数据交互

参考了https://www.freesion.com/article/199570292/

1、配置nginx反向代理
在官网http://nginx.org/en/download.html下载nginx
解压后双击nginx.exe,在cmd中定位到nginx目录下运行start nginx命令
打开http:localhost:8080出现页面

表示启动成功

2、引入自定义配置文件
在nginx.conf文件的http中添加

#引入自定义配置文件
include reverse-procy.conf;

3、在nginx安装目录中新建reverse-procy.conf文件

在reverse-procy.conf文件编写以下内容

server {
    listen 8080;
    server_name localhost;    # 这是外网访问进来时的连接地址
    location /{
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8081;
    }
	location /api{
		rewrite ^.+api/?(.*)$ /$1 break;
		include uwsgi_params;
		proxy_pass http://localhost:8082;
	}
    
}

在cmd中用nginx -s reload命令重新加载nginx配置即可

4、为了实现前后端数据交互，需要用到Nginx的正向代理和反向代理
前端静态页面为 http://localhost:8081/
后端服务端口为 http://localhost:8082/

用户访问http://localhost:8080/login.html前端页面
登录页面使用ajax调取后端接口`

http://localhost:8082/user/login`

用到的就是nginx的反向代理
将

http://localhost:8080/api/user/login

映射为

http://localhost:8082/user/login

配置项让Nginx 监听了 localhost的8080端口，当用户访问 http://localhost:8080
的时候，Nginx会正向代理到 http://localhost:8081 端口（即前端layui框架的页面） 然后当用户访问
http://localhost:8080/api 的时候，nginx会反向代理到 http://localhost:8082

所以前端layui项目的url需要命名为/api开头的格式，在VSCode的终端使用live-server命令运行layui项目

之前默认的live-server项目端口是8080，需要在C:\Users\xuan\AppData\Roaming\npm\node_modules\live-server\index.js文件中将默认的8080端口改为8081端口

5、使用nigx反向代理后分别运行前后端项目
前端运行结果

后端运行结果

6、访问http://localhost:8080/login.html能够完成登录功能表示项目正常运行