建筑网站建设案例,杭州网站建设技术支持,苏州网络推广公司网站建设,抖音代运营公司排名前十vue实现与后台springboot传递数据【传值/取值】
提示#xff1a;帮帮志会陆续更新非常多的IT技术知识#xff0c;希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有#xff1a;学习and理解的关联性。【帮帮志系列文章】#xff1a;每…vue实现与后台springboot传递数据【传值/取值】
提示帮帮志会陆续更新非常多的IT技术知识希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有学习and理解的关联性。【帮帮志系列文章】每个知识点都是写出代码和运行结果且前后关联上的去分析和说明能大量节约您的时间。
所有文章都*不会*直接把代码放那里让您自己去看去理解。我希望我的内容对您有用而努力~ 文章目录 vue实现与后台springboot传递数据【传值/取值】前言vue工程安装axios及axios的语法一、编写网页界面二、编写后台对应的类三、启动总结 本文章是系列文章技术栈内容为【springbootvue】【前后分离】 【详细图文实操步骤分享节约时间版】。最终完成一个商业化项目。内容有 springboot知识 mybatisPlus知识 vue知识 node.js知识
本小节的内容是 vue篇章 之 09.vue实现与后台springboot传递数据【传值/取值】 每一个文章小节都会把 标题 说的很清楚。前后关联看可以快速实现前后分离。本质上额外文章链接和文章自己标题内容关系不大。
前面小节文章已经实现springboot的创建springboot关联前端数据swagger和springboot通过mybatisplus操作数据库 【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速) 【上榜文章一文搞定】现在springboot是3.x以上版本jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot 文章里面也有 为什么只能是jdk17起和地址指定为阿里云报错的解决办法
前面小节已经安装好node.js和分享了一些vue语法及RESTful风格及安装配置swagger使用和 如何启动vue项目及vue语法组件化不同标签应对的作用说明 通过工具生成的vue案例(工具生成vue项目工程结构里面有一个欢迎界面网页)为切入点逐步逐步修改分享讲解完成vue项目如何启动。及自行编写一些标签和样式来替换默认的内容帮助理解包括里面的标签js代码样式如何配合的 前言
完成 前端 vue.js工程结构准备 前端能启动vue项目即可(vue项目的工程结构及语法分享在前面章节)。vue项目里面网页怎么写取后台的值和发送数据到后台是本文章分享的内容下面
完成 后台 springboot工程结构准备 包括springboot项目dao、service、controller、pojo实体类。controller类里面的方法能拿实现不同提交方式(get post put delete) 去调用service/dao。 dao通过mybatisPlus操作mysql数据库(前面章节有分享)
vue工程安装axios及axios的语法 命令 npm install axios 可以在终端里面写命令。我是在 前面已经写好的 vue项目里 vsCode终端 去写的这个命令
axios语法
get提交
axios.get(/user?uid1).then(function(response){//提交后台成功执行的内容(then里面)response是相应结果}).catch((function(error){//提交后台失败执行的内容(catch里面)error是错误信息})post提交
axios.post(/user,{name:bob,age:18}).then(function(response){//提交后台成功执行的内容(then里面)response是相应结果}).catch((function(error){//提交后台失败执行的内容(catch里面)error是错误信息})重要axios语法写在哪里 其实下面有直接可以使用的案例 但这一段分享一个概念
vue提供了很多生命周期的函数,就是这个xxx.vue文件从创建到加载/挂载然后到使用最后到销毁等等 不同的vue文件的生命周期 什么时候自动去调用函数
比如 组件什么时候被创建答被使用的时候在网页里面逐行逐行 标签 加载下来加载到您现在使用vue标签如前面案例的bangbangzhi标签(bangbangzhi标签表示我们自己创建的bangbangzhi.vue)。 需要显示bangbangzhi标签的时候 bangbangzhi标签 会被创建 一个vue对象 然后需要就是加载。 最后用户切换网页了 \ 关闭网页了 组件就销毁 附vue推荐组件开发三个标签组成一个组件js标签样式 这三个【前面有分享】。这个组件可以是菜单栏可以是网页头部可以是网页尾部。。等等 当现在用户正在查看的网页网页里面有用到这个组件的时候组件就需要加载-显示
不同的生命周期vue提供对应的不同函数(我们在代码里面写 methods: 这个是自定义函数自己定义自己调用和vue的生命周期没关系)
【现在我需要发送请求给后台后台服务器发送数据给我们所以标签还没有显示之前就需要自动去执行】 用created函数这个vue是自带的加载组件显示之前的时候 会自动调用 调用之后会声明一些对象来存储数据存储后台发过来的数据。生命周期结束组件销毁。这个对象存数据也跟着销毁了~ 一、编写网页界面
App.vue里面修改
templateimg altVue logo src./assets/logo.pngbangbangzhi/bangbangzhibangbangzhi/bangbangzhibangbangzhi/bangbangzhi !-- 这个标签是一个vue文件前一小节分享了《自行编写网页标签内容》 --h1{{ uD.uname }}/h1 !-- 取出ud里面的值 --
/templatescript
//可以导入很多个自己写的组件 一个网页头部尾部菜单栏左边div中间内容。 哪个网页要用就对应导入哪几个
import bangbangzhi from ./components/bbz.vue
import axios from axiosexport default {name: App,created:function(){ //创建当前vue对象的时候,自动执行created函数axios.get(http://localhost:8081/getUser).then((response){ //后台把springboot的端口修改成了8081this.uD response.data //get提交到后台将后台接收的值放到uD变量里面})},data(){return {uD : //当前仅仅声明uD变量,不给数据. 数据在 created里面赋值}},components: {bangbangzhi //把上面我们自己在同层级位置的components文件夹里面创建的 vue文件 声明为一个标签}
}
/script这个是截屏内容也不多看vue文件的位置和里面有啥(就一个h1标签) 在script标签里面引入vue文件并声明为一个标签。在template引用即可(可以多次例子用了3次) 二、编写后台对应的类
编写后台controller
RestController
CrossOrigin//axios跨域的问题 不写可能报错不信任其他地址的数据 加上这个注解即可
public class UserController {GetMapping(/getUser)public User getUser(){ //这里没有写参数去接收前端的数据是因为突出文章主题其他少一点(需要接参数正常写即可)User user userDao.selectById(1);return user;}
}
实体类
public class User {TableIdprivate int uid;private String uname;//这个就是vue里面取值的成员变量private int uage;
...构造函数 get set 略
dao层使用mybatisPlus [略] 前面几个章节有数据库 三、启动 您哪个网页需要使用后台的数据就写上
axios.get(地址).then((response){ this.变量名 response.data })//需要post 带数据上面有语法分享说明一下我用的h1标签来举的例子template标签可以复杂一点。有表格循环标签列表if标签 等等等vue语法template标签从js里面 {{ 取值 }} 或者 v-xxx取值。并不是本文章分享的重点内容(本系列有)前面文章分享了vue的各种内容显示方法代码示例。后台也可以返回list集合对象。
默认网页刷新就需要显示就写在created:里面 点击按钮才提交请求给后台就写在自己定义的方法函数体里面按钮绑定函数 总结
说明一下整个这个系列实现前后分离的springbootvue项目。序号文章一共也就10几篇只有核心图文重点操作步骤来实现这个目标(基本上您边看边写一个小时或者一上午就能跟着一起手搓一个前后分离项目然后您可以自行添加功能和内容在您项目里面)
其他扩展细节知识点本系列省略了(或者有链接)如 axios还有一些案例但是现在案例基本满足大部分情况毕竟当前我们的目的是快速手搓一个前后分离的全栈。 axios的其他功能及使用管它*现在*用不用的上内容全部丢进来。各位看官自行消化。那~可能会很多很多了又耗时。当前 系列 手搓出来之后您可以自行加功能和内容
会陆续更新非常多的IT技术知识及泛IT的电商知识可以点个关注共同交流。ღ( ´ᴗ )比心 也欢迎评论提问。 我会依次回答~
