vue和Springboot的整合

这篇具有很好参考价值的文章主要介绍了vue和Springboot的整合。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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里的buildvue和Springboot的整合
2.运行完后会出现dist这个文件夹
vue和Springboot的整合
3.复制上面的文件夹到Springboot项目的static文件里

vue和Springboot的整合
这个时候运行就不是vue的8080端口了是Springboot的端口文章来源地址https://www.toymoban.com/news/detail-511209.html

到了这里,关于vue和Springboot的整合的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 全面解析若依框架(springboot-vue前后分离--后端部分)

    前端启动 后端启动 创建数据库ry-vue,导入ry_2021xxxx.sql,quartz.sql,加载好依赖直接启动。 后端技术 SpringBoot Spring Security JWT MyBatis Druid Fastjson 分页实现 导入导出 上传下载(框架使用的简单,不做讲解) 权限控制 事务管理(这里使用@Transactional,不做讲解,具体和Spring的8种事务

    2024年01月16日
    浏览(56)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 创建springboot项目:2.7.8 pom依赖 yml 测试 编写代码生成器 启动类加注

    2024年02月04日
    浏览(58)
  • SpringBoot + Vue前后端分离项目实战 || 六:Jwt加密整合配置

    在之前的系统中,我们利用 UUID 配合 Redis 以达到角色登录的功能。 当前整个系统存在一个问题:人为 修改token值 后,用户仍然能在前端进行数据库操作,后台没有校验当前用户 token 就允许一些请求,导致系统存在 安全漏洞 。 解决方法: Jwt签名验证 。整合 Jwt 后,前端发

    2024年02月15日
    浏览(48)
  • SpringBoot&Vue&EmementUI前后端分离整合、统一封装axios、跨域配置

    🧑‍💻作者名称:DaenCode 🎤作者简介:CSDN实力新星,后端开发两年经验,曾担任甲方技术代表,业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开发。技术尚浅,闭关学习中······ 😎人生感悟:尝尽人生百味,方知世间冷暖。

    2024年02月09日
    浏览(41)
  • 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos

    通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后,实现了前后端分离,并实现了登录认证,认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服,采用SpringCloud Gateway做为服务网关,采用Nacos做为统一配置中心,并在服务网关部分解决了前端跨域调

    2024年02月12日
    浏览(62)
  • SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(66)
  • 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos + Sentinel

    通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后,实现了前后端分离,并实现了登录认证,认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服,采用SpringCloud Gateway做为服务网关,采用Nacos做为统一配置中心,并在服务网关部分解决了前端跨域调

    2024年02月11日
    浏览(48)
  • 在前后端分离的项目中,Springboot vue,前端把json传到后端,后端用一个类接收,json中的数据是怎么转换类型的

    在前后端分离的项目中,前端通常会将数据以 JSON 格式传输给后端,后端需要将接收到的 JSON 数据转换为对应的类型。这个过程可以通过后端框架和库来自动完成。 在Spring Boot中,后端可以使用相关的库来实现JSON数据的转换。常见的库包括Jackson、Gson和FastJson等。这些库提供

    2024年02月13日
    浏览(67)
  • SpringBoot+Shiro框架整合实现前后端分离的权限管理基础Demo

    记录一下使用SpringBoot集成Shiro框架实现前后端分离Web项目的过程,后端使用SpringBoot整合Shiro,前端使用vue+elementUI,达到前后端使用token来进行交互的应用,这种方式通常叫做无状态,后端只需要使用Shiro框架根据前端传来的token信息授权访问相应资源。 案例源码:SpringBoot+Sh

    2024年02月06日
    浏览(49)
  • 一、Sharding-JDBC系列01:整合SpringBoot实现分库分表,读写分离

    目录 一、概述 二、案例演示-水平分表 (1)、创建springboot工程 (2)、创建数据库和数据表 (3)、application.yaml配置分片规则   (4)、测试数据插入、查询操作 4.1、插入-控制台SQL日志  4.2、查询-控制台SQL日志  三、案例演示-水平分库 (1)、创建数据库和数据表  (2)、application.yaml配置

    2024年02月02日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包