⼩程序+springboot+mysql数据库最简单的数据传递
⼩程序+springboot+mysql数据库
最简单的数据传递
使⽤到的⼯具
**
1. 前端⼩程序界⾯：
**
主要修改两个⽂件
wxml⽂件，对⼩程序显⽰页⾯进⾏定义
js⽂件，对⽅法进⾏定义
let id,name,age,gender
Page({
getId(event){
id=event.detail.value
console.log(event.detail.value)
},
getName(event){
name=event.detail.value
console.log(event.detail.value)
},
getAge(event){
age=event.detail.value
age=event.detail.value
console.log(event.detail.value)
},
getGender(event){
gender=event.detail.value
console.log(event.detail.value)
},
add(){
console.log(id,name,age,gender)
let that=this
url:'localhost:8080/add',
method:"get",
header:{
"content-type":"application/x-www-form-urlencoded"
},
data:{
id:id,
name:name,
age:age,
gender:gender
},
success(res){
console.log("成功",res)
that.setData({result:res.data})
if(res.data.statusCode==200){
wx.showToast({
title:'添加成功'
})
}else{
wx.showToast({
icon:"none",
title:'添加失败',
})
}
},
fail(res){
console.log("失败",res)
}
})
},
delete(){
if(id){
url:'localhost:8080/deleteone',
method:"get",
header:{
"content-type":"application/x-www-form-urlencoded"
},
data:{
id:id
},
success(res){
console.log("删除成功",res)
if(res.data.statusCode==200){
wx.showToast({
title:'删除成功',
})
}else{
wx.showToast({
icon:"none",
title:'删除失败',
})
}
},
fail(res){
console.log("删除失败",res)
}
})
}else{
wx.showToast({
icon:"none",
title:'请输⼊id',
})
}
},
update(){
console.log(id,name,age,gender)
let that=this
url:'localhost:8080/add',
method:"get",
header:{
"content-type":"application/x-www-form-urlencoded"
},
data:{
id:id,
name:name,
age:age,
gender:gender
},
success(res){
console.log("成功",res)
that.setData({result:res.data})
if(res.data.statusCode==200){
wx.showToast({
title:'修改成功'
})
}else{
wx.showToast({
icon:"none",
title:'修改失败',
})
}
},
fail(res){
console.log("失败",res)
}
})
},
getall(){
let that=this
url:'localhost:8080/getAll',
method:"get",
header:{
"content-type":"application/x-www-form-urlencoded"
},
success(res){
console.log("查询成功",res)
if(res.data.statusCode==200){
that.setData({datalist:res.data})
}
else{
springboot结构
wx.showToast({
icon:"none",
title:'查询失败',
})
that.setData({datalist:res.data})
}
},
fail(res){
console.log("查询失败",res)
},
})}
})
<!--pages/mysql/mysql.wxml-->
<input bindinput="getId"placeholder="输⼊id"></input>
<input bindinput="getName"placeholder="输⼊姓名"></input>
<input bindinput="getAge"placeholder="输⼊年龄"></input>
<input bindinput="getGender"placeholder="输⼊性别"></input>
<button bindtap="add">增</button>
<button bindtap="delete">删</button>
<button bindtap="update">改</button>
<button bindtap="getall">查</button>
<block for="{{datalist}}"key="index">
<view>{{item.id}},{{item.name}},{{item.age}},{{der}}</view> </block>
wxml⽂件修改完成后的模拟器页⾯
**
2. 数据库结构：
**
**
3. spring boot后端结构：