目录
- 前端页面展示
- 主页面
- 我的课程
- 个人中心
- 评论功能
- 签到功能
- 课程绑定
- 超级管理员页面
- 前端文件结构
- 文件结构
- app.json
- 前端架构和开发工具
- 前端项目地址
- 后端
- 后端架构
- 后端项目地址
- 注意事项
前端页面展示
主页面
登录页面:
账号是:用户名或者手机号
密码是:(初始密码)123456
主页主要用于展示,没有可以实际使用的按钮可以点击,后期可以添加一些活动等放置在这里。
这是我的课程页面,该页面主要展示自己的课程情况,可以点击查看,来获取课程详情
我的课程
这是课程详细页面,在这里会显示课程的详细情况。点击签到详情可以查看签到的信息。
如上图所示,点击返回可以回到原页面
个人中心
这是管理员页面,会拥有小程序所有页面的访问权限,普通管理员没有“用户管理”功能,普通用户只有注销和意见反馈功能。
用户添加页面,该页面主要用于,增加新用户。默认权限是1,用户注册页面不能注册管理员。
日志信息的展示,用于普通管理员对数据的查看和分析。
评论功能
这是用户反馈中心,该页面用户可以提交自己的问题,包括但不限于小程序的问题。
评论成功后,会显示如示内容,并且退回上一页面。
防止用户过度评论,这里设置了冷却时间,一分钟内只能提交一次。
签到功能
这是手动签到页面,在此页面通过输入,学生信息可以得到学生的全部课程信息,进而进行签到.
点击课程对应的签到按钮可以进行签到,签到成功后会出现如示页面提示。
签到完成后,该课程会进行签到冷却,颜色变成白色,冷却时间为半小时。下方黄色字体则会显示今天全部学生的签到情况。
课程绑定
此页面是课程绑定页面,就是用于给学生添加课程的页面,该页面需要输入学生的用户名来进行添加。
如果该学生已经有了图形化这门课,我们继续给他添加该课程,可以发现该学生的剩余课时数会增加。
如果对某个学生进行退课操作,学生剩余课时小于计划课程的课时,则会直接清零。
超级管理员页面
用户管理页面,是整个小程序的管理中枢。包括了对小程序的数据分析,小程序的一些功能,数据的控制。这里是小程序管理部分。主要是小程序的内部状态的展示。
用户管理部分,在这里可以实现对用户的权限的管理。点击左侧不同的模块,右侧会出现对应的学生名单,比如点击python,就会出现报名python课程的学生
信息的管理,时间长了,小程序会积累很多的这类记录信息,在这里可以有选择的进行清空,保持服务器的存储在健康范围内。
前端文件结构
文件结构
app.json
```javascript
{
"pages": [
"pages/login/login",
"pages/index/index",
"pages/home/home",
"pages/classlist/classlist"
],
"window": {
"navigationBarTitleText": "卡卡狮编程",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFE4C4"
},
"subPackages": [
{
"root": "MyclassROOT/",
"pages": [
"pages/myclass/myclass"
]
},
{
"root": "adminROOT/",
"pages": [
"pages/adduser/adduser",
"pages/handsignin/handsignin",
"pages/log/log",
"pages/pchange/pchange",
"pages/uandc/uandc",
"pages/plun/plun"
]
}
],
"tabBar": {
"selectedColor": "#FF6A6A",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/zhuyein.png",
"selectedIconPath": "static/zhuyeout.png"
},
{
"pagePath": "pages/classlist/classlist",
"text": "我的课程",
"iconPath": "static/bookout.png",
"selectedIconPath": "static/bookin.png"
},
{
"pagePath": "pages/home/home",
"text": "个人中心",
"iconPath": "static/mein.png",
"selectedIconPath": "static/meout.png"
}
]
},
"networkTimeout": {
"request": 100000,
"downloadFile": 100000
},
"lazyCodeLoading": "requiredComponents"
}
前端架构和开发工具
前端采用微信官方提供的开发工具点击传送
前端项目地址
项目很简单,直接开源了,这是前端的地址
点击传送
后端
后端架构
因为本程序规模较小,所以使用Django + nginx +uwsgi ,开发工具是 vim(小黑窗开发,没用集成开发环境)。
后端项目地址
后端项目地址
点击传送
注意事项
1.微信小程序需要备案
2.服务器需要备案(自然需要域名)
3.最好使用分包(做项目前先大概做个软工那一套吧)