怎么把在前端页面的的数据加入在数据库里面,前端页面显示的地址信息和新增地址信息怎么写
要将前端页面的数据加入数据库中,需要使用后端编程语言(如PHP、Python、Java等)编写服务器端代码,在代码中连接数据库,并将前端传递过来的数据插入到数据库中。
对于地址信息的显示和新增,可以使用以下两种方式:
前端页面显示地址信息
在前端页面中,可以使用HTML和CSS来设计地址信息的展示方式,然后通过JavaScript获取数据库中的地址数据,并将其显示在页面上。要实现这一功能,需要使用AJAX技术从前端页面向后端服务器发送请求,服务器返回数据后,再将数据显示在页面上。
新增地址信息
在前端页面中,可以设计一个表单,用于用户输入新增的地址信息。用户填写完表单后,可以通过JavaScript将表单数据发送到服务器,然后服务器将数据插入到数据库中。在服务器端,需要编写代码来接收表单数据,并将数据插入到数据库中。
1、创建云数据库集合
首先需要在微信开发者工具中创建云数据库集合,用于存储用户的地址信息。可以在云开发控制台中创建集合,并设置集合字段。
2、前端页面调用云函数
在前端页面中,可以使用小程序提供的云函数来调用云数据库。例如,可以在“我的地址”页面中,通过调用云函数获取用户的地址信息,并在页面中展示出来。
// 在前端页面中调用云函数获取用户的地址信息
wx.cloud.callFunction({
name: 'getAddressList',
success: res => {
console.log(res)
// 将获取到的地址信息展示在页面中
this.setData({
addressList: res.result.data
})
},
fail: err => {
console.error(err)
}
})
3、向云数据库中添加数据
在前端页面中,可以通过调用云函数,将用户新增的地址信息添加到云数据库中。例如,可以在“新增地址”页面中,通过调用云函数将用户输入的地址信息添加到云数据库中。
// 在前端页面中调用云函数添加用户的地址信息
wx.cloud.callFunction({
name: 'addAddress',
data: {
name: this.data.name,
phone: this.data.phone,
address: this.data.address
},
success: res => {
console.log(res)
// 添加成功后返回上一页
wx.navigateBack({
delta: 1
})
},
fail: err => {
console.error(err)
}
})
在云函数中,可以使用db.collection()方法来获取云数据库集合,并使用add()方法将数据添加到集合中
// 云函数添加用户的地址信息
exports.main = async (event, context) => {
try {
const db = cloud.database()
const result = await db.collection('address').add({
data: {
name: event.name,
phone: event.phone,
address: event.address
}
})
return result
} catch (err) {
console.error(err)
}
}
需要注意的是,云函数需要在云开发控制台中创建并部署,才能在前端页面中调用。