后端数据表结构
- 学生表 ：
ID 、 学生名字 、 家长名字 、 购买课时 、 购买金额 、 date
- 老师表 ：
ID 、 老师名字 、 老师手机号(唯一的) 、 学生ID 、 date
- 余额表 ：
ID 、 剩余课时 、 剩余金额 、 学生ID、 date
- 消耗明细表 ：
ID 、 学生名字 、 家长名字 、 单次消耗课时 、 单次消耗金额 、 当前剩余课时 、 当前剩余金额 、 上课老师
后台管理逻辑思维：
- 超级管理员登录后台，首先输入学生信息（
学生名字 家长名字 购买课时 购买金额) 。点击提交，跳转到学生列表页。ps：列表页请求 三个表聚合查询后的json数据 ，默认 剩余课时、剩余金额 是没有填写的，默认显示未填写（判断条件 v-if=”xxx.length == 0“），默认 上课老师 页是没有指派的，默认显示未指派（判断条件 v-if=”xxx.length == 0“）
- 点击学生列表后面的指派老师，提示先完善余额表。
2-1 点击 剩余金额，弹出弹窗（`该弹窗为子组件，学生ID由父组件传入`）
完善一下余额表（`请求余额表的添加接口`）点击确定收回弹窗。
- 如果余额表已完善则不提示弹窗直接跳转到指派老师页面，学生列表页会带过来学生ID，根据学生ID指派老师完善老师表。点击确定跳转到学生列表页。ps：这个时候，第 1 步中提到的默认显示未填写和未指派的地方，正常显示其内容。
- 再次点击指派老师，可实现不同老师教一个学生。也可以在学生列表页，点击老师取消指派。teacher数组长度就会减1，后台设置最少指派一位老师，只剩一个老师的时候不可取消。（
这时候就实现了动态控制前端老师看到学生信息的权限)
数据结构为 :
image.png
接口写法：
router.get("/teacher/over", (req, res) => {
Order.aggregate([{
$lookup: {
from: "overs",
localField: "_id",
foreignField: "order_id",
as: "over"
}
},
{
$lookup: {
from: "teachers",
localField: "_id",
foreignField: "order_id",
as: "teacher"
}
},
{
$project: {
"_id": 1,
"bodyName": 1,
"parentName": 1,
"buyTime": 1,
"buyPrice": 1,
"date": 1,
"over": {
"_id": 1,
"overTime": 1,
"overPrice": 1,
"date": 1,
"order_id":1
},
"teacher":{
"_id":1,
"teacher":1,
"phone":1,
"date": 1,
"order_id":1
}
}
}
], (err, allmsg) => {
res.json(allmsg)
})
})
前端（老师端）逻辑思维：
- 老师根据自己唯一手机号登录，后端返回老师唯一手机号（
指派老师的时候后台预设了老师的手机号）。
- 前端根据后端返回的手机号作为参数请求接口，接口格式为：[
http://localhost:5000/api/teachers/${phone}]
- 后端返回数据格式为：（
三个表聚合查询并用到 $match）
image.png
接口写法：
//前端用于区分孩子信息的接口
router.post("/teachers/:phone", (req, res) => {
Teacher.aggregate([{
$lookup: {
from: "orders",
localField: "order_id",
foreignField: "_id",
as: "order"
}
},
{
$lookup: {
from: "overs",
localField: "order_id",
foreignField: "order_id",
as: "over"
}
},
{
$match:{
phone: req.params.phone
}
},
{
$project: {
"_id": 1,
"teacher": 1,
"order_id": 1,
"phone": 1,
"date": 1,
"over": {
"_id": 1,
"overTime": 1,
"overPrice": 1,
"date": 1,
},
"order":{
"_id":1,
"bodyName":1,
"parentName":1,
"buyTime":1,
"buyPrice":1,
"date": 1,
}
}
}
], (err, allmsg) => {
res.json(allmsg)
})
});
- 这样就可以实现不同老师看到自己上课的学生，其他学生信息看不到。
- 把学生信息渲染到页面，点击学生进入学生详情页面，前端设置两个input选择框，每次上完课老师选择消耗课时和消耗金额，自动计算出当前剩余课时和当前剩余金额。然后把 当前剩余课时、当前剩余金额 当作参数传入到后端，去更新余额表。（
与此同时，后台学生列表页 就实现了动态的余额信息）
- 把拿到的消耗课时、消耗金额、当前剩余课时、当前剩余金额、学生姓名、家长姓名 当作参数传入到后端，插入到数据库，消耗明细表就可以多一条数据。（
这时候后台就可以渲染出来消耗明细，加一个导出功能就可以实现表格导出 ）
网友评论