微信小程序案例——简易前端与云数据库的使用

本文链接：https://blog.csdn.net/weixin_47666981/article/details/122008712

实现内容——英语一成绩分析小师Version1.0.0

首页显示云数据库的储存数据。
记录页储存数据。

文件夹/文件	功能
images	储存用到的图片
pages	包括首页和记录页的配置文件
app.js	全局js文件，初始化云数据库
app.json	全局json文件，设计界面
app.wxss	全局wxss文件，界面样式

首页和储存页的设计

1. 首页——index

index.js代码


//云数据库初始化
const db = wx.cloud.database({});
const cont = db.collection('english');

Page({
   data:{
        ne:[],  //这是一个空的数组，等下获取到云数据库的数据将存放在其中
    },
  /**
   * 生命周期函数--监听页面加载
   */
  
  onLoad: function (options) {
    var _this = this;
    //1、引用数据库   
    const db = wx.cloud.database({
      //这个是环境ID不是环境名称     
      env: 'english-analyse-6gxw8ydv85fe8e88' 
    })
    //2、开始查询数据了  news对应的是集合的名称   
    db.collection('english').get({
      //如果查询成功的话    
      success: res => {
        console.log(res.data)
        //这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值      
        this.setData({
          ne: res.data 
        })
      }
    })
  }, 
     
})

index.wxml代码

<text class="head">历年真题使用情况</text>

<view class='' wx:for="{{ne}}"><!--wx:for是微信数据绑定的一种方式，该数组有多少数据就显示多少个view-->
    <!--index为每个数据对应的下标-->
    <view class="vw">
    <label for="" class="font14" class="cs">试卷</label>
    <label for="" class="font14" class="cs">{{item.finaltime}}</label>
    </view>
     

    <view class="vw">
    <label for="" class="font14" class="cs">错误个数</label>
    <label for="" class="font14" class="cs">{{item.score}}</label>
    </view> 
    
    <view class="vw">
    <label for="" class="font14" class="cs">耗时</label>
    <label for="" class="font14" class="cs">{{item.time}}</label>
    </view>

    <view class='imagesize'>
    <view class="head-bg" >
   </view>
</view>
    <view class='line'></view>
    
</view>

index.wxss代码

/* pages/query/query.wxss */
.imagesize{
  display:flex;
  height: 25px;                   
  justify-content: flex-end;        
  align-items: center             
  
 }
.head-bg{
  width: 86rpx;
  height: 71rpx;
  background-image: url('https://656e-english-analyse-6gxw8ydv85fe8e88-1308843422.tcb.qcloud.la/%E4%B8%8A%E5%B2%B8.jpg?sign=5f47f9fe69a4244cbf3f7d116aa8f01f&t=1639758441.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

.head{
  font-size: 21px;
  margin-left: 78px;
}
.cs{
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line{
width: 100%;
height: 1rpx;
background-color:#ffd995;
margin-top:7px;
margin-bottom:7px;
}
.vw{
  margin-top: 5px;
}
/* 顶部返回的 */
.inaver._30f2b4d {
  box-sizing: border-box;
  padding-top: 44rpx;
  width: 100vw;
  height: 160rpx;
  display: flex;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
}
 
.inaver .left._30f2b4d {
  width: 100rpx;
  height: 100rpx;
  margin: 8rpx;
}
 
.inaver .left image.icon._30f2b4d {
  width: 60rpx;
  height: 60rpx;
  padding: 10rpx;
  margin: 10rpx;
}
 
.inaver .center._30f2b4d {
  height: 100rpx;
  line-height: 100rpx;
  flex: 1;
  margin: 8rpx;
}
 
.inaver .right._30f2b4d {
  width: 240rpx;
  height: 100rpx;
  margin: 8rpx;
}
 
.protect-inaver._30f2b4d {
  box-sizing: border-box;
  width: 100vw;
  height: 160rpx;
}

2. 记录页

storage.js

// pages/databaseGuide/databaseGuide.js
 
const app = getApp()
 
Page({
 
  //添加
  res: function(e) {
    const db = wx.cloud.database()
    db.collection('english').add({
      data: {
        finaltime:e.detail.value.finaltime,
        score: e.detail.value.score,
        time:  e.detail.value.time
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          finaltime:e.detail.value.finaltime,
          score: e.detail.value.score,
          time: e.detail.value.time
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  },
})

storage.wxml

<form bindsubmit='res'>
  <view class="view-contain-ti">
    <text class="text-ti">试卷年份</text>
    <input class="input1" name="finaltime" placeholder=""></input>
  </view>

  <view class="view-contain-ti">
    <text class="text-ti">错误个数</text>
    <input class="input1" name="score" placeholder=""></input>
  </view>

  <view class="view-contain-ti">
    <text class="text-ti">耗时</text>
    <input class="input1" name="time" placeholder=""></input>
  </view>

  <view><button form-type='submit'>提交</button></view>
</form>

storage.wxss

.view-contain-ti {
  display: flex;
  height: 40px;
  margin: 20px;
  border: 3rpx solid #faca82;
  border-radius: 10rpx;
}

.text-ti {
  position: absolute;
  font-size: 12px;
  background: white;
  margin: -10px 0 0 10px;
  padding: 0 5px;
  color: rgb(144, 147, 167);
}

.input1 {
  margin:  auto 10px;
}