CSDN Topic Challenge Fase 2
Tema de participación: Notas del estudio
Este proyecto de capacitación se basa en la base de datos en la nube desarrollada por la nube para crear un muro de deseos simple.
01. Contenido de formación
Este proyecto de capacitación se basa en la base de datos en la nube desarrollada por la nube para crear un muro de deseos simple. Como sugiere el nombre, la "base de datos en la nube" es para almacenar todos los datos de deseos en este proyecto en la nube.
Primero, cree una nueva colección "Wishwall" en la consola de desarrollo en la nube y luego agregue varios registros. Cada registro tiene tres campos: título (cadena), fecha (cadena) y dirección (cadena), que representan el nombre de un deseo, fecha y lugar. El diseño de la base de datos en la nube se muestra en la Figura 1. 
▍Figura 1 Diseño de base de datos en la nube
Este proyecto incluye una página de muro de deseos, una página de adición de deseos y una página de detalles de deseos.
1. página del muro de deseos
Cargue automáticamente todos los deseos en la base de datos de la nube y muéstrelos. Cuando haga clic en un deseo específico, ingresará a la página de detalles. En este momento, debe pasar el valor de identificación del deseo a la página de detalles; cuando haga clic en " Agregar deseo", ingresará a la página de agregar. . El efecto de ejecución se muestra en la Figura 2.
▍Figura 10.42 Página del muro de deseos
2. añadir página
Tome el título de la página, la fecha y la dirección dentro y fuera de la base de datos en la nube "wishwall" como un nuevo registro, y la inserción salta con éxito a la página de wishwall. El efecto de ejecución se muestra en la Figura 3.
▍Figura 3 añadir página
3. página de detalles
Según el id pasado desde la página wishwall, se consultan y muestran los valores de título, fecha y dirección del registro. El efecto de ejecución se muestra en la Figura 4.
▍Página de detalles de la Figura 4
02. Código del proyecto
El código de pages/ wishwall/ wishwall.wxml es el siguiente:
<view class="zong">
<view class="yang1" wx:for="{
{wishs}}"
id="{
{item._id}}" bindtap='details'>
{
{item.title}}
</view>
<view class="yang1" bindtap='add' >
增加愿望
</view>
</view>El código de pages/ wishwall/ wishwall.js es el siguiente:
const app = getApp()
Page({
data: {
wishs: []
},
onLoad: function (e) {
var that = this
const db = wx.cloud.database()
db.collection('wishwall').get({
success: function (res) {
console.log(res.data)
that.setData({
wishs: res.data
})
}
})
},
details:function(e){
console.log(e.target.id) //点击了那条愿望
wx.navigateTo({
url: "../details/details?id="+e.target.id
})
},
add:function(e){
wx.navigateTo({
url: '../add/add',
})
}
})El código para pages/ wishwall/ wishwall.wxss es el siguiente:
page {
display: flex; flex-direction: column;
justify-content: flex-start; background-color: #005F8C;
}
.zong{
display: flex; flex-direction:row;
flex-wrap: wrap; padding: 20rpx;
align-items: center; justify-content: space-around;
}
.yang1{
padding: 30rpx; background-color:#ffffff;
margin-top: 20rpx; border-radius:10rpx;
}
.yang2{
padding: 30rpx; background-color: #f1b0e6;
margin-top: 20rpx; border-radius:10rpx; width: 100rpx;
}[Explicación del código] La función onLoad() de wishwall.js ejecuta automáticamente la operación de consulta en la base de datos en la nube, obtiene todos los datos de deseos en la base de datos en la nube y los asigna a "deseos", y luego usa el enlace de datos en wishwall.wxml Visualización renderizada.
El código de pages/ add/ add.wxml es el siguiente:
<view>请输入您的愿望</view>
<view><input class='in' auto-focus bindinput="title"></input></view>
</view>
<view class='title'>
<view>时间</view>
<picker mode="date" value='{
{date}}' start="2019-08-01"
end="2020-08-08" bindchange='date'>
<view class='in'>{
{date}}</view>
</picker></view>
<view class='title'>
<view>地点</view>
<picker mode="region" bindchange="bindRegionChange"
value="{
{region}}" custom-item="{
{customItem}}">
<view class="in">
{
{region[0]}}，{
{region[1]}}，{
{region[2]}}
</view>
</picker></view>
<view class="title"></view>
<button type="primary" bindtap="add" > 插入愿望</button>El código de pages/ add/ add.js es el siguiente:
Page({
data: {
title:'',
region: ['广东省', '广州市', '海珠区'],
date: "2019-08-08",address:"广东省广州市海珠区"
},
title:function(e){
this.setData({
title: e.detail.value
})
},
date: function (e) {
console.log(e)
this.setData({
date:e.detail.value
})
},
bindRegionChange: function (e) {
console.log('携带值为', e.detail.value[0] +
e.detail.value[1] + e.detail.value[2])
this.setData({
region: e.detail.value,
address: e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
})
},
add:function(e){
var that=this;
const db = wx.cloud.database()
db.collection('wishwall').add({
data: {
title:that.data.title,
date: that.data.date,
address: that.data.address
},
success: function (res) {
console.log(res)
}
})
wx.navigateTo({
url: '../wishwall/wishwall',
})
}
})El código de pages/ add/ add.wxss es el siguiente:
.in{
border: 1px solid #ffffff;
}
.title{
margin-top: 20rpx; margin-bottom: 20rpx; color:#ffffff;
}
page{
background-color: #005F8C;
}[Explicación del código] add.js obtiene los datos en add.wxml que el usuario completa en el formulario y luego realiza la operación de inserción en la base de datos en la nube. Una vez que la inserción es exitosa, vuelve a la página wishwall.wxml.
El código de páginas/detalles/detalles.wxml es el siguiente:
<view class="title">{
{item.title}}</view>
<view class='date'>{
{item.date}}</view>
<view class="address">{
{item.address}}</view>El código de páginas/detalles/detalles.js es el siguiente:
Page({
data: {
item: {
title: "白云山看山",date: "2019-08-08",address: "广东省广州市白云区"}
},
onLoad: function (options) {
console.log("传过来的数据是")
console.log(options.id)
var id = options.id
var that=this;
const db = wx.cloud.database()
db.collection('wishwall').where({
_id:id
}).get({
success: function (res) {
console.log(res.data)
that.setData({
item: res.data[0]
})
}
})
}
})El código de páginas/detalles/detalles.wxss es el siguiente:
.title{
margin-top: 100rpx;font-size: 2.5em; color: #ffffff; text-align:center;
}
page{
background-color: #005F8C;
}
.date{
margin-top: 50rpx; font-size: 1.5em; color: #ffffff; text-align:center;
}
.address{
margin-top: 30rpx; font-size: 1em; color: #ffffff; text-align:center;
}[Explicación del código] La función onLoad() de detail.js consulta la información de deseos en la que el usuario hizo clic en la base de datos en la nube de acuerdo con el valor de "id" pasado por wishwall.js, y asigna el valor de registro obtenido a "item", y luego pasa los datos. El método de enlace se representa y se muestra en detail.wxml.