Record “college attendance System” small procedures (2)

Note “university attendance system” small procedures (1) note “university attendance system” small procedures (2) note “university attendance system” small procedures (3)

Before talking about the user registration and home page weather function, the following talk about the curriculum page implementation.

Curriculum schedule page

• Here is a reference to the author’s case above the book, as well as the idea of reference to Uncle Ji Le’s curriculum.
• Cloud development is also used to store data and modify data in combination with cloud functions to make class schedules. We will talk about why cloud functions are used later.

Let’s take a look at the finished renderings

• 1. Build the overall structure first

• The header and the left side have the same style, you can write the data to the data, and then render it through the for loop, which is directly shown here (😊😊).

<! - week - > < the view class = "top" > < the view class = "top - the text" > < text > section \ day < / text > < view > < the view class = "top - the text" > < text > a < / text > </view> <view class="top-text"> </text> </view> <view class="top-text"> </text> </view> <view class="top-text"> </text> </view> <view </view> <view class="top-text"> </text> </view> <view class="top-text"> < text > 6 < / text > < view > < the view class = "top - the text" > < text >, < / text > < view > < / view > <! <view class="cont"> <view class="cont"> <view class="left"> 1 </view> </view> <view class="left"> 2 </view> <view  class="left"> 3 </view> <view class="left"> 4 </view> <view class="left"> 5 </view> <view class="left"> 6 </view> <view  class="left"> 7 </view> <view class="left"> 8 </view> </view> <view class="cont-right"> </view> </view> <view Class = "bottom" > - < text > read thousands of books View < / text > - < / view >Copy the code

page { width: 100%; height: 100%; position: relative; } .top { padding: 16rpx 0; border-top: 1px solid #e9e9e9; border-bottom: 1px dashed #d3d3d3; display: flex; justify-content: flex-start; }. Top-text {width: 12.5%; text-align: center; font-size: 32rpx; font-weight: 600; align-items: center; } .top .top-text { border-left: 1px dashed #d3d3d3; } .top .top-text:nth-child(1) { font-size: 24rpx; border-left: none; line-height: 46rpx; } .cont { display: flex; justify-content: start; } .cont-left { display: inline-block; } .left { width: 90rpx; height: 120rpx; justify-content: center; display: flex; align-items: center; border-bottom: 1px dashed #d3d3d3; box-sizing: border-box; color: #666; font-size: 28rpx; font-weight: 600; } .cont-right { width: calc(100% - 90rpx); } .bottom { width: 100%; text-align: center; position: absolute; bottom: 20rpx; font-size: 24rpx; color: #ddd; display: inline-block; } .bottom text { margin-left: 20rpx; margin-right: 20rpx; color: #9b9b9b; }Copy the code

• In cloud development, the maximum number of data to be obtained at a time is 20, so I divided the class schedule data into two parts (morning and afternoon). Of course, you can directly use the cloud function to increase the maximum number of data to be obtained, which will be introduced later. Here, I will not explain too much.

Single data structure

{/ / "_id" : "296065 c95da529b2055b57301b5afa75," cloud development import data can be directly generated _id, here don't have to write your own "data_name" : "Senior Java development technology (JavaEE)", "address" : / / course name "@ the way the relevant floor 301", "weekNum" : / / site "10 to 15 weeks", / / weeks "pitchNum" : "3-4", / / for "the teacher" : "Miss zhao", / / teacher "_openid" : "oQnNa5NJfKqSZntKFLGZWnZuXNbo" / / modifier openid, judging is originally want to do, use the function of cloud behind, found dispensable}Copy the code

• The following data is obtained from the cloud development database. If you are not familiar with the operation, you can check the official document. 1. Open the cloud development console. 2. Create two collections corresponding to the am/PM class schedule. 3. Import the data we have prepared (there are 14 courses in the morning and afternoon in a week respectively, so we need to pay attention to the data import. If we want to have no information in the current course, we also need to import empty field data to occupy a space). 4. Enable permission management. 5.
• The last two steps must not be forgotten!

data: { colorArr: [" RGB (229188,76, 0.8) ", "RGB (104172246, 0.8)", "RGB (183135242, 0.8)", "RGB (149226, 13, 0.8)", "# ff7070", "#e54d42", "#0081ff", "#7DC67D", "#E17572", "#C35CFF", "#33BCBA", "#FF8533", "#6E6E6E", "#ebd4ef", "#428BCA", "#39b54a", "#FF674F", "#e03997", "#00CED1", "#9F79EE", "#FFC125", "#32CD32", "#00BFFF", "#8799a3","#FF69B4" ], // store random colorArr: [], randomColorArr2: [], I: 25, random: ", random2: ",}, onLoad: Function (options) {this. Data. RandomColorArr = [] / / reset colors array is empty this. 1. RandomColorArr2 = [] / / reset colors array of const db = 2 is empty wx.cloud.database({ env: Get ().then((res) => {this.kechengbiao = res.data for (let) j = 0; j <= 13; If (this.kechengbiao[j].data_name == '&& this.kechengbiao[J].address == '') {this.random  = 'none' this.data.randomColorArr.push(this.random) } else { this.random = this.data.colorArr[Math.floor(Math.random() * this. Data. I)] / / this. Random color data. RandomColorArr. Push (enclosing the random)}} this. SetData ({loding: true, kechengbiao: this.kechengbiao, randomColorArr: This.data.randomcolorarr})}) // Obtain the class schedule afternoon db.collection(' data set in your table name ').get().then((res) => {this.kechengbiao2 = res.data for (let j = 0; j <= 13; If (this. Kechengbiao2 [j]. Data_name == '&& this. Kechengbiao2 [j]. this.random2 = 'none' this.data.randomColorArr2.push(this.random2) } else { this.random2 = This. Data. ColorArr [Math. Floor (math.h random (). * this data. I)] / / this. Random color data. RandomColorArr2. Push (enclosing random2)}} this.setData({ kechengbiao2: this.kechengbiao2, randomColorArr2: this.data.randomColorArr2 }) }) },Copy the code

<view class=" appoint-date "> <view> <view class=" appoint-date "> bindtap="select_date" wx:for="{{kechengbiao}}" wx:key="{{index}}" data-key='{{index}}' style="background-color:{{randomColorArr[index]}}"> <view class="flex-item" > <text class='data_name'>{{item.data_name}}</text> <text class='address'>{{item.address}}</text> </view> </view> </view> <view Class =' appoint-date '> // afternoon <view class=" appoint-date-div "bindtap="select_date2" wx:for="{{kechengbiao2}}" wx:key="{{index}}" data-key='{{index}}' style="background-color:{{randomColorArr2[index]}}"> <view class="flex-item"> <text class='data_name'>{{item.data_name}}</text> <text class='address'>{{item.address}}</text> </view> </view> </view> </view>Copy the code

.appointent-date {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.appointent-date-div {
    height: 236rpx;
    border-radius: 10rpx;
    margin-bottom: 6rpx;
    color: white;
}
.flex-item {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 76rpx;
    height: 212rpx;
    font-size: 24rpx;
    padding: 6rpx;
    border: 1rpx solid transparent;
    text-align: left;
    border-radius: 10rpx;
    cursor: pointer;
    overflow: hidden;
}
.data_name {
    display: inline-block;
}
.address {
    display: inline-block;
}
Copy the code

• We need to add data-='{{index}}’ to the for loop, as shown above 👆 I added data-key='{{index}}’, where key can be customizable, the purpose is to click on the course to get the corresponding subscript in the loop. This way I can search the database for the current click and render it.

check

// Click on course content to bring up the details box select_date: Function (e) {this. Id = e.c. with our fabrication: urrentTarget. Dataset. The key / / get the current click on the course of the subscript const db = wx. Cloud. The database ({env: '* * * *}) the collection (' * * *'). The get (). Then (res = > {the console. The log (res) data [] this. Id) / / obtain when click schedule data})},Copy the code

• After obtaining the data, we can render it on the page according to our own needs. Here, I combine the TAB component of Vant. The upper left corner is return, and the upper right corner is delete course information.
• The deletion here is not really to delete the data from our database, but to assign the value of the data to “”, that is, the null value, so as to achieve the deletion function, which is combined with the cloud function to achieve, because the operation authority in the cloud development can not meet our requirements for data operation.

delete

First we create a new cloud function in the cloud function and modify the index.js file

• There is a problem with using cloud functions, rather than using cloud development to process data directly, because cloud development can only modify the data submitted to the database itself, not others. Normally, there must be more than one administrator, so data operations cannot be limited to one person.

// const cloud = require('wx-server-sdk') cloud.init({env: '***',// your development environment traceUser: true }) const db = cloud.database(); exports.main = async (event, Context) => {// Cloud function entry function try {return await db.collection('***').doc(event.id).update({// need to modify database data: {data_name: event.data_name, address: event.address, weekNum: event.weekNum, pitchNum: event.pitchNum, teacher: event.teacher }, }) } catch (e) { console.error(e) } return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }Copy the code

Then write the corresponding code in the JS file

Wx.cloud. callFunction({name: '***',// your cloud function name data: {id: Data_name: "", address: "", weekend: "", pitchNum: "", teacher: ""}, success: Res => {// close current click course details}})},Copy the code

Change, increase

• In fact, the implementation of the change and increase should become relatively simple, here also need to use the cloud function, the truth is consistent with the above mentioned.
• When obtaining the currently clicked data, the data will be stored in data first. When it needs to be modified, the data can be assigned to the value of the input, and the corresponding data in the database can be modified through the cloud function. The same goes for increment. Let’s take this as an example.

wxml

<! <view class="edit" hidden="{{editShow}}"> <van-nav-bar title=" edit course "right-text=" complete" left-arrow Bind :click-left="editLeft" /> <view class="label className"> <text> <input </text Value ="{{nowclass. data_name}}" bindinput="bindKeyInput1"></input> </view> <view class="label"> <text> Classroom </text> <input Value ="{{nowclass.address}}" bindinput="bindKeyInput2"></input> </view> <view class="label"> <text> </text> <input Value ="{{nowclass.weeknum}}" bindinput="bindKeyInput3"></ INPUT ></ view> <view class="label"> <text> Section number </text> <input Value ="{{nowclass.pitchnum}}" bindinput="bindKeyInput4"></input> </view> <view class="label"> <text> teacher </text> <input value="{{ nowClass.teacher }}" bindinput="bindKeyInput5"></input> </view> </view>Copy the code

Create a cloud function to modify the class schedule data

// const cloud = require('wx-server-sdk') cloud.init({env: '***',// your development environment traceUser: true }) const db = cloud.database(); exports.main = async (event, Context) => {// Cloud function entry function try {return await db.collection('***').doc(event.id).update({// data: {data_name: event.data_name, address: event.address, weekNum: event.weekNum, pitchNum: event.pitchNum, teacher: event.teacher }, }) } catch (e) { console.error(e) } return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }Copy the code

js

// 1. Get the value of the input box. BindKeyInput1 (e) {this.editClassName = e.daile.value}, BindKeyInput2 (e) {this.editAddress = e.dail.value}, BindKeyInput3 (e) {this.editWeekNum = e.dail.value}, BindKeyInput4 (e) {this.editpitchNum = e.dail.value}, BindKeyInput5 (e) {// teacher this.editTeacher = e.daile.value}, editRight() {// 2. CallFunction ({name: '***',// Modify the cloud function name of the calendar data data: {id: this._id, data_name: this.editClassName, address: this.editAddress, weekNum: this.editWeekNum, pitchNum: this.editPitchNum, teacher: this.editTeacher }, success: res => { }, fail: console.error }) },Copy the code

Here the function of the curriculum is finished, if there is any place you don’t know, welcome to leave a message, or write a bad place, please point out and discuss, we will continue to share the content behind. You can also scan the code in advance to view the small program, welcome to point out the shortcomings, thank you 🌞😃😃😃