vue和Springboot整合
vue和Springboot整合实现前后端分离
第一步:
分别创建两个项目一个为vue项目一个为Springboot项目分别用idea进行打开【vue项目也可以用webStrom打开】
第二步:
端口设置,先npm run dev 运行vue项目此时端口为8080端口,然后再在Springboot项目里修改端口号 防止端口冲突
server.port=8082
第三步
这个时候就可以进行vue项目以及Springboot项目编写了,在vue中使用axios进行请求发送,并且请求的地址与端口号要与Springboot在Controller一致。
//可以把传递的对象分装一个requestParme对象里【主要是在data()属性里用于输入框的数据进行传给后端】
CaseUpdata(index, row){
this.requestParme.id = this.tableData[index].id
this.requestParme.diseasetype = this.form.diseasetype;
this.requestParme.ismedication = this.form.ismedication;
let than = this ;
//这里的8082为Springboot的端口号
//axios.post('http://localhost:8082/mydemo/UpdateCase',this.requestParme)
.then(function (response) {
than.case();
})
.catch(function (error) {
console.log(error);
});
第四步
整合
点击package.json里的build
2.运行完后会出现dist这个文件夹
3.复制上面的文件夹到Springboot项目的static文件里文章来源:https://www.toymoban.com/news/detail-511209.html
这个时候运行就不是vue的8080端口了是Springboot的端口文章来源地址https://www.toymoban.com/news/detail-511209.html
到了这里,关于vue和Springboot的整合的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!