记《高校考勤系统》小程序（2）
这是其余几篇的地址：
记《高校考勤系统》小程序（1）
记《高校考勤系统》小程序（2）
记《高校考勤系统》小程序（3）
html
前面讲了用户注册和首页天气功能，下面讲讲课程表页的实现.
五.课程表页
先来看看完成后的效果图
- 1.先搭建总体结构
- 头部和左侧由于样式是同样的，能够将数据写入data中，再经过for循环渲染出来，这里就直接展现了.（偷个懒😊😊）
<!-- 星期 -->
<view class="top">
<view class="top-text">
<text>节\日</text>
</view>
<view class="top-text">
<text>一</text>
</view>
<view class="top-text">
<text>二</text>
</view>
<view class="top-text">
<text>三</text>
</view>
<view class="top-text">
<text>四</text>
</view>
<view class="top-text">
<text>五</text>
</view>
<view class="top-text">
<text>六</text>
</view>
<view class="top-text">
<text>日</text>
</view>
</view>
<!-- 课程 -->
<view class="cont">
<view class="cont-left">
<view class="left"> 1 </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>读万卷书 行万里路</text>————
</view>
复制代码
点击查看wxss代码
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;
}
复制代码
- 这里须要考虑到云开发中单次获取数据上限是20条，因此我将课程表数据分为两部分（上午和下午），固然你能够直接使用云函数来提升获取数据的上限，在后面会有介绍，这里就先不作过多的解释了，上代码.
单个数据结构数据库
{
//"_id": "296065c95da529b2055b57301b5afa75", 云开发导入数据会直接生成_id,这里不用本身编写
"data_name": "Java高级开发技术(JavaEE)", //课程名
"address": "@康庄行知楼301", //地点
"weekNum": "10-15周", //周数
"pitchNum": "3-4", //节数
"teacher": "赵老师", //任课老师
"_openid": "oQnNa5NJfKqSZntKFLGZWnZuXNbo" //修改者的openid,原本是想作判断，后面使用了云函数，发现无关紧要
}
复制代码
- 下面是从云开发数据库中获取咱们编写好的课程表数据,若是对操做不熟悉能够查看 官方文档 .
1.打开云开发控制台.
2.建立两个集合对应上午下午课程表.
3.导入咱们已经编写好的数据 (一个星期早上和下午的课程分别为14节，因此导入数据时须要注意，若是想要当前课程没有信息，也是须要导入空的字段数据来占一格).
4.打开权限管理.
5.选中第一个.- 其中最后两个步骤必定不能忘记！
点击查看js代码
data: {
colorArr: ["rgb(229,188,76, 0.8)", "rgb(104,172,246, 0.8)", "rgb(183,135,242, 0.8)", "rgb(149,226,48, 0.8)", "#ff7070",
"#e54d42", "#0081ff", "#7DC67D", "#E17572", "#C35CFF", "#33BCBA", "#FF8533", "#6E6E6E", "#ebd4ef",
"#428BCA", "#39b54a", "#FF674F", "#e03997", "#00CED1", "#9F79EE", "#FFC125", "#32CD32", "#00BFFF", "#8799a3","#FF69B4"
],
// 存储随机颜色
randomColorArr: [],
randomColorArr2: [],
i: 25,
random: '',
random2: '',
},
onLoad: function(options) {
this.data.randomColorArr = [] // 重置颜色数组1为空
this.data.randomColorArr2 = [] // 重置颜色数组2为空
const db = wx.cloud.database({
env: '*****' //你的云开发环境名
})
//获取课程表上午数据
db.collection('数据集合中你的表名').get().then((res) => {
this.kechengbiao = res.data
for (let j = 0; j <= 13; j++) { //for循环判断课名和地名为空则不加颜色
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.data.randomColorArr.push(this.random)
}
}
this.setData({
loding: true,
kechengbiao: this.kechengbiao,
randomColorArr: this.data.randomColorArr
})
})
//获取课程表下午
db.collection('数据集合中你的表名').get().then((res) => {
this.kechengbiao2 = res.data
for (let j = 0; j <= 13; j++) { //for循环判断课名和地名为空则不加颜色
if (this.kechengbiao2[j].data_name == '' && this.kechengbiao2[j].address == '') {
this.random2 = 'none'
this.data.randomColorArr2.push(this.random2)
} else {
this.random2 = this.data.colorArr[Math.floor(Math.random() * this.data.i)] //随机颜色
this.data.randomColorArr2.push(this.random2)
}
}
this.setData({
kechengbiao2: this.kechengbiao2,
randomColorArr2: this.data.randomColorArr2
})
})
},
复制代码
<view class="cont-right">
<view>
<view class='appointent-date'> //上午
<view class="appointent-date-div" 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='appointent-date'> //下午
<view class="appointent-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>
复制代码
点击查看wxss代码
.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;
}
复制代码
- 首先来作最简单的 查 吧，咱们须要在for循环中加入 data-='{{index}}' ，如上代码所示👆我加了data-key='{{index}}'，其中key能够自定义，目的是为了在点击课程时，能够获取相循环中对应的下标，这样我就能够在数据库中搜索到当前点击的数据并渲染出来.
查
//点击课程内容弹出详细框
select_date: function(e) {
this.id = e.currentTarget.dataset.key //获取当前点击课程的下标
const db = wx.cloud.database({
env: '****'
})
db.collection('***').get().then(res => {
console.log(res.data[this.id]) //获取点击时课程表数据
})
},
复制代码
- 获取到数据后咱们能够根据本身的需求渲染在页面上，这里我结合了vant的tab组件，左上角为返回，右上角为删除课程表信息，下面就讲 删 除课程信息.
- 这里的删除不是说真的将数据从咱们的数据库中删除，而是将数据赋值为“”也就是空值，这样就作到了删除的功能，在此结合 云函数 来实现，由于云开发中的操做权限没法知足咱们对数据操做的要求.
删
首先咱们在云函数中建立一个新的 云函数 ，修改index.js文件小程序
- 这里会有一个问题也就是为何咱们要使用云函数，而不直接用云开发对数据进行处理，是由于云开发中的操做权限只能对本身提交到数据库中的数据进行修改，若是是别人那么就没法修改.正常状况下，管理员确定不止一位，因此对数据操做不能只限定一我的.
//修改课程表
const cloud = require('wx-server-sdk')
cloud.init({
env: '***',//你的开发环境
traceUser: true
})
const db = cloud.database();
exports.main = async (event, context) => { // 云函数入口函数
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,
}
}
复制代码
而后在js文件中编写对应的代码数组
tapDialogButton(e) { //从课表删除课程
wx.cloud.callFunction({
name: '***',// 你的云函数名称
data: {
id: this._id, //将数据进行空值赋值
data_name: "",
address: "",
weekNum: "",
pitchNum: "",
teacher: ""
},
success: res => {
// 关闭当前点击课程详情
}
})
},
复制代码
改，增
- 作完了删其实对改和增的实现应该也变得相对简单，这里也是须要用到云函数，道理和上面讲的一致.
- 在获取当前点击的数据时先将此条数据存储在 data 中，须要修改时，能够将数据赋值给 input 的 value ,在经过云函数来修改数据库中对应的数据.增也是一样的道理.这里就拿改成例.
wxml数据结构
<!-- 编辑页 -->
<view class="edit" hidden="{{ editShow }}">
<van-nav-bar title="编辑课程" right-text="完成" left-arrow bind:click-left="editLeft" bind:click-right="editRight" />
<view class="label className">
<text>课名</text>
<input value="{{ nowClass.data_name }}" bindinput="bindKeyInput1"></input>
</view>
<view class="label">
<text>教室</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>节数</text>
<input value="{{ nowClass.pitchNum }}" bindinput="bindKeyInput4"></input>
</view>
<view class="label">
<text>老师</text>
<input value="{{ nowClass.teacher }}" bindinput="bindKeyInput5"></input>
</view>
</view>
复制代码
新建修改课程表数据的云函数app
//修改课程表
const cloud = require('wx-server-sdk')
cloud.init({
env: '***',//你的开发环境
traceUser: true
})
const db = cloud.database();
exports.main = async (event, context) => { // 云函数入口函数
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,
}
}
复制代码
jsdom
// 1.首先获取输入框的值，存在data中
bindKeyInput1(e) { //课名
this.editClassName = e.detail.value
},
bindKeyInput2(e) { //教室
this.editAddress = e.detail.value
},
bindKeyInput3(e) { //周数
this.editWeekNum = e.detail.value
},
bindKeyInput4(e) { //节数
this.editPitchNum = e.detail.value
},
bindKeyInput5(e) { //老师
this.editTeacher = e.detail.value
},
editRight() { // 2.编辑完成，点击提交按钮时将输入框的值赋值给对应的字段名
wx.cloud.callFunction({
name: '***',// 修改课程表数据的云函数名称
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
})
},
复制代码
到这里课程表功能就作完了，若是有什么不懂得地方欢迎留言，或者写的很差的地方，请你们指出一块儿探讨，以后会继续分享后面的内容。你们也能够提早扫码查看小程序，欢迎指出不足，谢谢 🌞😃😃😃
相关文章
- 1. 记《高校考勤系统》小程序（1）
- 2. 记《高校考勤系统》小程序（3）
- 3. 考勤系统+（小项目）
- 4. 考勤签到小程序
- 5. 高校宿舍考勤管理系统演示地址
- 6. 高校学生考勤系统需求分析
- 7. 微信小程序签到考勤系统
- 8. 学生考勤系统
- 9. 考勤管理系统
- 10. 基于jsp(java)高校学生考勤管理系统设计与实现
- 更多相关文章...
- • 操作系统（OS）平台 统计 - 浏览器信息
- • 系统定义的TypeHandler - MyBatis教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 记《高校考勤系统》小程序（1）
- 2. 记《高校考勤系统》小程序（3）
- 3. 考勤系统+（小项目）
- 4. 考勤签到小程序
- 5. 高校宿舍考勤管理系统演示地址
- 6. 高校学生考勤系统需求分析
- 7. 微信小程序签到考勤系统
- 8. 学生考勤系统
- 9. 考勤管理系统
- 10. 基于jsp(java)高校学生考勤管理系统设计与实现