vue3可以用于前后端不分离吗
可以。因为Vue3发布的就是前后端分离，并提供DevOps功能，搏镇猜后台使用Spring Boot 前后端不分离。所以使用vue3可以用于前后端不分离，前后端分离的意基型思指通过Tomcat+Ngnix有效地进行解耦,是web应用的一种架构模式。旅嫌
SpringBoot-Vue实现增删改查及分页小DEMO
主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo，实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。
PS：假设以上的的工具你都安铅宽慎装好啦，写CRUD小DEMO时进坑了，这篇blog参考一下，仅供参考，仅供参考😤，，如有不足请不吝赐教。
1、File-New-Project...
2、选择 Spring Initializr ，然后选择默认的 url 点击next
1、更新pom.xml如下：
2、新建 demo\src\main\java\com\example\demo\entity\User.java
3、更新demo\src\main\resources\application.properties
4、新建demo\src\main\java\com\example\demo\mapper\UserMapper.java
5、新建demo\src\main\resources\mapper\UserMapper.xml
6、新建demo\src\main\java\com\example\demo\service\UserService.java
7、新建demo\src\main\java\com\example\demo\controller\UserCtrl.java
9、后端就写完了，整体结构如下：
1、win+R-cmd-进入项目目录依次执行命令： vue init webpack projectName 、 cd projectName 、 npm install 、 npm run dev 如图所示：
1、在项槐敬目根目录安装axios执行命令 npm install axios ，安装element ui 执行命令 npm i element-ui -S
2、更新vue01\src\App.vue
3、更新vue01\src\main.js
4、更新vue01\src\components\HelloWorld.vue
方式一：
在 vue01\config\index.js 文件中配置 proxyTable{} ，如下：
方式二：
在vue-cli项目根目录执行命令 npm run build ，巧粗编译完成后将dist/static文件夹copy至springboot项目的 src/main/resources/static 目录下然后直接启动springboot项目就OK了。
大材小用，✍这篇博客の源码在 我的GitHub 上。
SpringBoot+Vue项目中实现登录验证码校验
在各大项目中，为保证数据的安全性，通常在登录页面加入验证码校验，以防止爬虫带来的数据泄露危机。本文将介绍在前后端分离的项目中，怎样实现图形验证码校验。
第一步察搜罩：在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到session，同时，将图片进行base64编码，然后返回给前端。
第二步：在登录页面创建的同时获取验证码，并将后端传回来得key和编码后的字符串拼接，绑定img标签的src属性。此外，当用户点击验证码的img标签时，重新获取验证码，后端session更新验证码。
第三步：后端登录接口接收登录请求败闹时，将用户提交的验证码和session中的验证码进漏镇行比对，不相同则返回相应信息给前端进行提示，相同则进行账号密码的匹配。
记录一下springboot+vue实现消息提醒思路
1.在vue加载dom完成后，用create函轮嫌数去请求后台的消息，接收到之后统计消态缓息。然后用vue的徽标标记。当用户点击之后调用后台腊闭手查看消息。
(Docker Nginx) Spring boot+Vue 前后端分离部署 详细完整版
简述：Spring boot+Vue 前尺备后端分离项目部署，主要采用docker容器部署方式。
Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。
Vue项目：使用docker启动nginx服务器方式代理部署。
项陪穗目使用mysql8.0作为数据源，所以部署时需要使陵乱毁用docker构建mysql环境及项目自身环境。
连接出现1251错误时：
首先将项目进行打包：mumu-0.0.1-SNAPSHOT.jar
到此，springboot项目采用docker方式运行部署结束。
使用docker容器方式运行nginx服务器。
对于nginx服务器，重要的两个操作是：
所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及操作
启动命令：
vue3页面关闭事件
node.js
VUE监听页面刷新和关闭事件

大伟欧巴
原创
关注
1点赞·3154人阅读
背景：公司有一个数据看板枯郑，，需求是要统计看板有多少人看过，，每个人停留的曝光时间没乱颂
使用技术：目前使用的技术是 后端Springboot 权限用的是SpringSecurity，前端页面是
Vue+Element，公司看板的使用人大多利用谷歌浏览器查看。。
前端请求权限流程：用户登陆后会把用户的信息加密处理放进cookies，，然后会用vue的拦截器，，拦截要发送的请求，，并且在每个请求的headers里面带上Cookies里面的用户加密信息
// 创建axios实例
const service = axios.create({
baseURL: xxx // api 的 base_url
timeout: 2000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config = {
if (getToken()) {
config.headers['AESAuthor'] = 'AESAES ' + getToken() // 让每个请求携带自定义token
}
config.headers['Content-Type'] = 'application/json'
return config
},
error = {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
登录后复制

就像Java中的WebMvcConfigurer，可以通过这个实现跨域的处理，或陪判者单独针对某一路径的请求特殊处理
第一个重点！！！(这个问题后面会讲到)
线上环境：在服务器上面运行项目 是通过nginx访问vue的页面，并拦截vue发送的请求转发到后端服务
本地环境：vue通过nodejs转发请求到后端
本地环境处理：vue的页面请求是(例子)
但实际的后端接口路径应该是：
//nginx配置规则
location / { //页面请求走这个路径
root /data/app/web/xxx-xxx-xxx-xxx/dist;
try_files $uri $uri/ /index.html =404;
index index.html index.htm;
}
location /api { //api请求走这个路径
if ($request_uri ~* "WhchatUser/sendCode") {
return 403;
}
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Fix the "It appears that your reverse proxy set up is broken" error.
proxy_pass ;
proxy_read_timeout 90;
}
登录后复制

请求链路：通过vue的mounted事件创建一个createThisTime用以记录用户打开页面的时间，通过js的 beforeunload 和 unload 事件可以监听到页面的刷新和关闭事件，，在页面关闭的时候发送HTTP请求到后端，带上(1)用户的加密信息做鉴权，(2)当前时间 -createThisTime= 用户停留在这个页面的曝光时间
后端接口接收到请求之后往数据库插入一条数据。至此整个链路完成。
解决此需求的页面加载时只执行 onload 事件
页面关闭时，先 onbeforeunload 事件，再 onunload 事件
页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件
直接上代码了！！！
data() { //第一步初始化createTime参数
return {
createThisTime：0, //mounted时期赋值，用于统计曝光时间
_beforeUnload_time: 0, //beforeunload时期赋值，在unload时期用于判断是页面关闭还是刷新
_gap_time: 0, //unload时期赋值，在unload时期用于判断是页面关闭还是刷新
is_fireFox: false //判断是否是火狐浏览器，火狐浏览器的beforeunload就是关闭
}
}
mounted() {
//赋值
this.is_fireFox = navigator.userAgent.indexOf("Firefox")-1
this.createThisTime = new Date().getTime()
this._beforeUnload_time = 0
this._gap_time= 0
//!!!!创建监听事件(ListenerEvent)!!!!
window.addEventListener("beforeunload", e = {this.beforeunloadFn(e)});
window.addEventListener("unload", e = {this.unloadFn(e)});
}
//！！！核心，你夹紧点，我要来了！！！
methods(){
beforeunloadFn(e){
//对_beforeUnload_time进行赋值在unloadFn时期与_gap_time进行差距计算判断刷新还是关闭
this._beforeUnload_time = new Date().getTime();
//统计曝光时间，用于火狐浏览器的关闭
let waitTime = this._beforeUnload_time - this.createThisTime;
if(this.is_fireFox) {//火狐浏览器执行beforeunloadFn方法代表关闭页面
this.countKanbanData(waitTime)
}
},
unloadFn(e){
//统计曝光时间
let waitTime = new Date().getTime() - this.createThisTime;
//计算unload事件和beforeunload事件执行间隔，，用于判断是关闭还是刷新
this._gap_time = new Date().getTime() - this._beforeUnload_time;
//第二个重点！！！为何刷新页面的时候也要发送请求？
if(this._gap_time 5){ //关闭页面
this.countKanbanData(waitTime)
} else { //刷新页面
this.countKanbanData(waitTime)
}
},
destroyed() {
//remove监听事件
window.removeEventListener("beforeunload", e = {this.beforeunloadFn(e)});
window.removeEventListener("unload", e = {this.unloadFn(e)});
this._beforeUnload_time = 0
this._gap_time = 0
}
}
登录后复制

//！！！再夹紧点，努力努力快到了！！！
大家执行到这一步，基本流程没啥问题了，然后测试的时候会感觉，请求好像发出去了但感觉好像又没法发出去。。时灵时不灵的，主要原因是什么呢？
真相！！！：vue发送请求是异步的，这个请求的的却却是在发送，但是页面关闭的时候卸载的太快了，这个请求可能还没发送出去页面就卸载了，导致发射失败。好嘛，原因找到了，原来vue是个秒男。
那怎么解决呢？
1.写个foreach，，拖延vue卸载的事件，给异步的http发射时间，俗话就是吃点药
2.通过div的img标签，，原理也是延迟vue的卸载事件。
这两种方法会导致客人的体验感贼差，，像我这种粗又硬肯定是不屑使用的。
一番查找之后我有了个更好的办法。因为vue发送是异步的而且页面卸载的事件确实很快，关闭事件一般都是 0-5毫秒之间(this._gap_time5)。。名副其实的秒男~。所以我们不一定非要vue去发送请求，，可以让浏览器去异步的发送请求。
//大家准备好，我要冲刺了//
3.navigator.sendBeacon 超链接是官方文档
这个方法的作用就是，，将vue发送的任务，，交给浏览器的任务队列去执行，方法也是异步的，vue的页面卸载是不会影响到浏览器任务的执行的。而且该方法也不会对vue的卸载有影响，用户体验感贼好，说不定还会给点小费。
但是~，这个方法会有些小的限制
3.1这个方法必须是post，我们可以尝试利用自带的blog类型去传毒参数，后端可以直接通过@RequestBody标签接收参数，反正我们前后端交互最常用的格式就是json
3.2.这个方法的headers只能设置content_type，也就是说无法把鉴权用的token放进headers里面，无法放进headers里面就直接放到参数中传呗，，反正我抓包也可以看到headers里面的内容，加密主要还是要靠aes，想防篡改的话那就加上时间戳再MD5。这些就不讨论了
直接上代码
countKanbanData(waitTime){
//判断浏览器是否支持navigator.sendBeacon，，大部分的浏览器都支持
if (!navigator.sendBeacon) return;
//参数
let body = {
waitTime: waitTime,
tokenStr: getToken() //headrs中无法记录，，当参数传入再解析
};
let headers = {
type: 'application/json; charset=UTF-8'
};
let blob = new Blob([JSON.stringify(body)], headers);
//线上或者测试因为用的nginx做的代理 所以这么写
console.log("sendBeacon ", navigator.sendBeacon((this.currentEnv + 'openapi/countKanbanData'), blob));
//本地dev 通过node
// console.log("sendBeacon ", navigator.sendBeacon('openapi/countKanbanData', blob));
}
登录后复制

这三种方法我写的比较简单，，我找了个更加详细的文章大家可以细看
方法链接
开始填坑了~~~
上文我提了两个重点问题，，这两个如果不特殊处理的话会有一定的bug
4.第一个重点问题：上文提到了，我本地开发的环境和线上的环境是不一样的。。
本地通过node做代理如果是api的请求那么拦截器会拦截请求并且填充ip+port，那么此时的api调用的方式为
navigator.sendBeacon('openapi/countKanbanData', blob)
登录后复制
此时不需要写全路径
如果是线上的话，那么是由nginx去做代理，页面和api的请求由ngxin去拦截管理
此时需要写全路径，不然这个请求的url是不完整的
navigator.sendBeacon('', blob)
登录后复制
5.第二个重点问题：为毛不论是 刷新还是关闭都需要发送一次请求并记录
不论是刷新和关闭都记录
5.1 if close 此时waitTime是准确的 需要记录
5.2 if flush 因为用户(点击浏览器的刷新按钮) 或者 (ctrl+R) 或者 (通过网址再次键入) 此时都会将mounted中的createThisTime 刷新
如果不记录的话 会导致有部分停留时间被刷掉 而每次都记录的话 只会将此次的waitTime分割成多条