最近做的退费系统中有前端页面，作为一个前端小白要开始学习前端了吗？不可能的，因为我有今天的主角------若依框架。RuoYi是一款基于SpringBoot+Bootstrap的极速后台开发开源框架（划重点），有前后端分离版本、微服务版本、移动端版本，我使用的是前后端分离版本，前端用的VUE。
强大功能
1、根据数据库表自动生成前后端代码，可以选择字段是否在前端列表中展现、查询条件、必填项等。
2、自带用户、角色、菜单管理、权限管理、上传下载等基础功能，登录有验证码校验。
3、自带系统配置表，配置参数可以直接在页面配置。
......
用若依做简单的CRUD页面效率很高，减少很多工作量，只剩下有些特性化需求和页面需要独立开发
搭建项目
在官网把若依框架项目下载下来，导入maven依赖包，创建数据库ry并导入数据脚本ry_2021xxxx.sql，quartz.sql。需要在admin模块中添加正确的数据库、端口号等配置，配置完就能启动啦。
前端项目是VUE项目，需要下载nodejs，为什么VUE项目要下载nodejs呢？vue是通过 webpack来打包，而webpack 又基于 npm, npm需要nodejs环境。所以我们要下载nodejs和npm，下载完成后可以通过node -v和npm -v查看版本。
接着进入到项目路径，npm run dev就能启动vue项目啦~
跨域问题
打包前端工程到测试环境服务器，使用nginx访问dist文件夹，突然发现前端无法正确映射到后端的访问路径。我一直在看前端的vite.config.js，以为是有地方没配置正确，然后发现怎么改好像都不生效...
后面发现这个是npm run dev启动vue项目的时候才会生效，相当于是vue做代理，用nginx代理需要在nginx里面配置后端路径映射。
说起nginx代理就想到浏览器的跨域问题，跨域问题在面试中可能也会问到，其实就是同源策略(协议、域名、端口相同），浏览器不能访问不同源的url，目的是为了保护浏览器不受恶意攻击。
处理跨域问题有几种方案：
1、JSONP（JSON with Padding）：JSONP 是一种利用 script标签的跨域技术。通过在请求中指定一个回调函数名，服务器将数据包裹在该函数的调用中返回给客户端。这种方法只支持 GET 请求，并且需要服务器端的支持。
2、CORS（Cross-Origin Resource Sharing）：CORS 是现代浏览器支持的一种标准跨域解决方案。通过在服务器端设置响应头部，可以允许特定的域名或所有域名进行跨域请求。服务器端需要设置合适的响应头，例如在响应中添加 Access-Control-Allow-Origin 头部来指定允许的域名。
3、代理服务器（VUE和Nginx）：可以设置一个代理服务器，将浏览器的请求转发到目标域名下，然后将响应返回给浏览器。这种方法需要在自己的服务器上设置代理规则，将请求转发到目标服务器上，并将响应返回给浏览器。这样，浏览器实际上是与同源的服务器进行通信，不存在跨域问题。
4、WebSocket：WebSocket 是一种全双工通信协议，它可以在浏览器和服务器之间建立持久连接，允许双方进行实时数据传输。由于 WebSocket 协议并不受同源策略的限制，因此可以用于解决跨域通信的问题。