博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 小程序>微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1500+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址 介绍 翰文编程-CSDN博客
文末下方有源码获取地址
系统实现预览
第四章 系统设计
4.1功能结构
为了更好的去理清本系统整体思路，对该系统以结构图的形式表达出来，设计实现该小程序>微信小程序的学生选课系统的功能结构图如下所示：
图4-1 系统总体结构图
4.2 数据库设计
4.2.1 数据库E/R图
ER图是由实体及其关系构成的图，通过E/R图可以清楚地描述系统涉及到的实体之间的相互关系。在系统中对一些主要的几个关键实体如下图：
(1) 课程信息E/R图如下所示：
图4-2课程信息E/R图
(2) 选课信息管理E/R图如下所示：
图4-3选课信息管理E/R图
4.2.2 数据库表
数据库表的设计，如下表：
表4-1：教师
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| jiaoshigonghao | varchar | 200 | 教师工号 | ||
| mima | varchar | 200 | 密码 | ||
| jiaoshixingming | varchar | 200 | 教师姓名 | ||
| xingbie | varchar | 200 | 性别 | ||
| zhicheng | varchar | 200 | 职称 | ||
| dianhua | varchar | 200 | 电话 | ||
| zhaopian | varchar | 200 | 照片 | ||
| banji | varchar | 200 | 班级 |
表4-2：配置文件
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| name | varchar | 100 | 配置参数名称 | ||
| value | varchar | 100 | 配置参数值 |
表4-3：学生
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| xuehao | varchar | 200 | 学号 | ||
| xingming | varchar | 200 | 姓名 | ||
| mima | varchar | 200 | 密码 | ||
| xingbie | varchar | 200 | 性别 | ||
| nianling | int | 年龄 | |||
| shouji | varchar | 200 | 手机 | ||
| youxiang | varchar | 200 | 邮箱 | ||
| xueyuan | varchar | 200 | 学院 | ||
| zhuanye | varchar | 200 | 专业 | ||
| touxiang | varchar | 200 | 头像 |
表4-4：选课信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| kechengbianhao | varchar | 200 | 课程编号 | ||
| kechengmingcheng | varchar | 200 | 课程名称 | ||
| fengmian | varchar | 200 | 封面 | ||
| kechengleixing | varchar | 200 | 课程类型 | ||
| xueshi | varchar | 200 | 学时 | ||
| xuefen | varchar | 200 | 学分 | ||
| kaikeshijian | varchar | 200 | 开课时间 | ||
| jieshuriqi | varchar | 200 | 结束日期 | ||
| kaohefangshi | varchar | 200 | 考核方式 | ||
| renshu | int | 人数 | |||
| jiaoshigonghao | varchar | 200 | 教师工号 | ||
| jiaoshixingming | varchar | 200 | 教师姓名 | ||
| xuehao | varchar | 200 | 学号 | ||
| xingming | varchar | 200 | 姓名 | ||
| shouji | varchar | 200 | 手机 | ||
| shenqingshijian | datetime | 申请时间 | |||
| zhuangtai | varchar | 200 | 状态 | ||
| userid | bigint | 用户id |
表4-5：用户表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| username | varchar | 100 | 用户名 | ||
| password | varchar | 100 | 密码 | ||
| role | varchar | 100 | 角色 | 管理员 | |
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP |
表4-6：token表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| userid | bigint | 用户id | |||
| username | varchar | 100 | 用户名 | ||
| tablename | varchar | 100 | 表名 | ||
| role | varchar | 100 | 角色 | ||
| token | varchar | 200 | 密码 | ||
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
| expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP |
表4-7：收藏表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| userid | bigint | 用户id | |||
| refid | bigint | 收藏id | |||
| tablename | varchar | 200 | 表名 | ||
| name | varchar | 200 | 收藏名称 | ||
| picture | varchar | 200 | 收藏图片 | ||
| type | varchar | 200 | 类型(1:收藏,21:赞,22:踩) | 1 | |
| inteltype | varchar | 200 | 推荐类型 |
表4-8：取消选课
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| kechengbianhao | varchar | 200 | 课程编号 | ||
| kechengmingcheng | varchar | 200 | 课程名称 | ||
| fengmian | varchar | 200 | 封面 | ||
| kechengleixing | varchar | 200 | 课程类型 | ||
| xueshi | varchar | 200 | 学时 | ||
| xuefen | varchar | 200 | 学分 | ||
| kaikeshijian | varchar | 200 | 开课时间 | ||
| jieshuriqi | varchar | 200 | 结束日期 | ||
| kaohefangshi | varchar | 200 | 考核方式 | ||
| renshu | int | 人数 | |||
| jiaoshigonghao | varchar | 200 | 教师工号 | ||
| jiaoshixingming | varchar | 200 | 教师姓名 | ||
| xuehao | varchar | 200 | 学号 | ||
| xingming | varchar | 200 | 姓名 | ||
| shouji | varchar | 200 | 手机 | ||
| quxiaoyuanyin | varchar | 200 | 取消原因 | ||
| quxiaoshijian | datetime | 取消时间 | |||
| sfsh | varchar | 200 | 是否审核 | 否 | |
| shhf | longtext | 4294967295 | 审核回复 | ||
| userid | bigint | 用户id |
表4-9：选课介绍
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| title | varchar | 200 | 标题 | ||
| introduction | longtext | 4294967295 | 简介 | ||
| picture | varchar | 200 | 图片 | ||
| content | longtext | 4294967295 | 内容 |
表4-10：课程信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| kechengbianhao | varchar | 200 | 课程编号 | ||
| kechengmingcheng | varchar | 200 | 课程名称 | ||
| fengmian | varchar | 200 | 封面 | ||
| kechengleixing | varchar | 200 | 课程类型 | ||
| xueshi | varchar | 200 | 学时 | ||
| xuefen | varchar | 200 | 学分 | ||
| kaikeshijian | date | 开课时间 | |||
| jieshuriqi | date | 结束日期 | |||
| kechengneirong | longtext | 4294967295 | 课程内容 | ||
| kaohefangshi | varchar | 200 | 考核方式 | ||
| renshu | int | 人数 | |||
| jiaoshigonghao | varchar | 200 | 教师工号 | ||
| jiaoshixingming | varchar | 200 | 教师姓名 | ||
| thumbsupnum | int | 赞 | 0 | ||
| crazilynum | int | 踩 | 0 | ||
| clicknum | int | 点击次数 | 0 |
表4-11：课程类型
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| kechengleixing | varchar | 200 | 课程类型 |
第五章 系统功能实现
5.1小程序端
登录，用户通过输入账号和密码，选择角色并点击登录进行系统登录操作，如图5-1所示。
图5-1登录界面图
学生注册，在注册页面通过填写学号、姓名、密码、确认密码、性别、年龄、手机、邮箱、学院、专业等信息进行注册操作；如图5-2所示。
图5-2学生注册界面图
学生登陆小程序端，可以对首页、课程信息、我的等功能进行详细操作，如图5-3所示。
图5-3小程序端首页界面图
主要代码
<template>
<view class="uni-padding-wrap">
<view class="header">
<view class="headerb">
<swiper :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"20rpx 2%","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255,255,255,1)","borderRadius":"20rpx","borderWidth":"0","width":"96%","borderStyle":"solid","height":"300rpx"}' class="swiper" :indicator-dots='".swiper-pagination"==null?false:true' :autoplay='autoplaySwiper' :circular='true' indicator-active-color='rgba(173, 219, 140, 1)' indicator-color='rgba(0, 0, 0, .3)' :duration='1000' :interval='intervalSwiper' :vertical='"horizontal"=="horizontal"?false:true'>
<swiper-item :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255,255,255,1)","borderRadius":"20rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"300rpx"}' v-for="(swiper,index) in swiperList" :key="index" @tap="onSwiperTap(swiper)">
<image :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255,255,255,1)","borderRadius":"20rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"300rpx"}' mode="aspectFill" :src="baseUrl+swiper.img"></image>
<view v-if="false" :style='{"padding":"0 8rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255,255,255,1)","color":"#333","textAlign":"center","isshow":false,"borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"60rpx","fontSize":"28rpx","borderStyle":"solid"}'>{{ swiper.title }}</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- menu -->
<view v-if="true" class="menu" style="display: flex;flex-wrap: wrap;" :style='{"padding":"20rpx 8rpx 0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<block v-for="item in menuList" v-bind:key="item.roleName">
<block v-if="role==item.roleName" v-bind:key="index" v-for=" (menu,index) in item.frontMenu">
<block v-bind:key="sort" v-for=" (child,sort) in menu.child">
<block v-bind:key="sort2" v-for=" (button,sort2) in child.buttons">
<view :style='{"padding":"12rpx 0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 2% 20rpx 2%","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255, 238, 228, 1)","borderRadius":"40rpx 4rpx 40rpx 4rpx","borderWidth":"0","width":"21%","borderStyle":"solid","height":"140rpx"}' class="menu-list" v-if="button=='查看' && child.tableName!='yifahuodingdan' && child.tableName!='yituikuandingdan' &&child.tableName!='yiquxiaodingdan' && child.tableName!='weizhifudingdan' && child.tableName!='yizhifudingdan' && child.tableName!='yiwanchengdingdan' " @tap="onPageTap2('../'+child.tableName+'/list')">
<!-- <image style="display: block;" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0px auto","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"40rpx 4rpx 40rpx 4rpx","color":"#333","borderWidth":"0","width":"80rpx","fontSize":"64rpx","borderStyle":"solid","height":"80rpx"}' mode="aspectFill" src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg"></image> -->
<view class="iconarr" :class="child.appFrontIcon" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0px auto","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"40rpx 4rpx 40rpx 4rpx","color":"#333","borderWidth":"0","width":"80rpx","fontSize":"64rpx","borderStyle":"solid","height":"80rpx"}'></view>
<view :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"12rpx auto 0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"28rpx","fontSize":"28rpx","borderStyle":"solid"}'>{{child.menu.split("列表")[0]}}</view>
</view>
</block>
</block>
</block>
</block>
</view>
<!-- menu -->
<!-- 商品推荐 -->
<!-- 商品推荐 -->
<!-- 新闻资讯 -->
<view class="listBox news">
<view v-if="true && 1 == 1" class="idea newsIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 0px","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
<view class="title" :style='{"padding":"0 60rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"-60rpx 0 0px","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0, 186, 189, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<view :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"rgba(0, 0, 0, 0)","color":"#FFF","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"50%","fontSize":"32rpx","lineHeight":"60rpx","borderStyle":"solid"}'>选课介绍</view>
<text :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","textAlign":"right","borderRadius":"0","borderWidth":"0","width":"40%","lineHeight":"60rpx","fontSize":"32rpx","borderStyle":"solid"}' @tap="onPageTap('news')">查看更多</text>
</view>
<view v-if="true && 1 == 2" class="idea newsIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 0px","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
<!-- 样式3 -->
<view v-if="3 == 3" class="list-box style3" :style='{"padding":"20rpx 24rpx","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"0 3% 40rpx","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","width":"94%","borderStyle":"solid","height":"auto"}'>
<view @tap="onNewsDetailTap(item.id)" v-for="(item,index) in news" :key="index" class="list-item" :style='{"padding":"0 40rpx 0 0","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"0 0 30rpx","borderColor":"rgba(0,0,0,0)","backgroundColor":"#fff","borderRadius":"80rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<image v-if="item.picture" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(162, 162, 162, 1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"50%","borderWidth":"4rpx","width":"160rpx","borderStyle":"solid","height":"160rpx"}' class="list-item-image" mode="aspectFill" :src="baseUrl+item.picture"></image>
<view class="list-item-body" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"","borderColor":"rgba(0,0,0,0)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0","width":"calc(100% - 200rpx)","borderStyle":"solid","height":"auto"}'>
<view :style='{"padding":"0 20rpx","boxShadow":" 0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"10rpx","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"#333","textAlign":"left","borderRadius":"20rpx","borderWidth":"0","width":"100%","lineHeight":"auto","fontSize":"28rpx","borderStyle":"solid"}' class="list-item-title">{{item.title}}</view>
<view :style='{"padding":"0 20rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(164, 164, 164, 1)","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"auto","fontSize":"24rpx","borderStyle":"solid"}' class="list-item-pirce">发布时间：{{item.addtime}}</view>
</view>
</view>
</view>
<!-- 样式4 -->
<!-- 样式5 -->
<!-- 样式6 -->
<!-- 样式7 -->
<!-- 样式8 -->
<!-- 样式9 -->
<view v-if="true && 1 == 3" class="idea newsIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 0px","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
</view>
<!-- 新闻资讯 -->
<!-- 商品列表 -->
<view class="listBox list">
<view v-if="true && 1 == 1" class="idea listIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 20rpx","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,.0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
<view class="title" :style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"-100rpx 0 20rpx 0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0, 186, 189, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<view :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 ","borderColor":"red","backgroundColor":"rgba(0, 0, 0, 0)","color":"#FFF","textAlign":"right","borderRadius":"0","borderWidth":"0","width":"50%","fontSize":"32rpx","lineHeight":"80rpx","borderStyle":"solid"}'>课程信息</view>
<text :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","textAlign":"right","borderRadius":"0","borderWidth":"0","width":"40%","lineHeight":"80rpx","fontSize":"32rpx","borderStyle":"solid"}' @tap="onPageTap('kechengxinxi')">查看更多</text>
</view>
<view v-if="true && 1 == 2" class="idea listIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 20rpx","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,.0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
<!-- 样式2 -->
<view v-if="2 == 2" class="list-box style2" :style='{"padding":"20rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<view @tap="onDetailTap('kechengxinxi',product.id)" v-for="(product,index) in homekechengxinxilist" :key="index" class="list-item" :style='{"padding":"8rpx","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"0 0 20rpx","borderColor":"rgba(0,0,0,0)","backgroundColor":"#fff","borderRadius":"20rpx","borderWidth":"0","width":"32%","borderStyle":"solid","height":"auto"}'>
<view :style='{"padding":"0 20rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"#333","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"48rpx","fontSize":"28rpx","borderStyle":"solid"}' class="list-item-title hide1">{{product.kechengmingcheng}}</view>
<image :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"20rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"200rpx"}' class="list-item-image" mode="aspectFill" :src="product.fengmian?baseUrl+product.fengmian.split(',')[0]:''"></image>
</view>
</view>
<view v-if="true && 1 == 3" class="idea listIdea" :style='{"padding":"0 20rpx","boxShadow":"0 0 12rpx rgba(0,0,0,0)","margin":"40rpx 0 20rpx","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","background":"rgba(0,0,0,.0)","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="box box1"></view>
<view class="box box2"></view>
<view class="box box3"></view>
<view class="box box4"></view>
</view>
</view>
<!-- 商品列表 -->
</view>
</template>
<script>
import menu from '@/utils/menu'
import '@/assets/css/global-restaurant.css'
import uniIcons from "@/components/uni-ui/lib/uni-icons/uni-icons.vue"
export default {
components: {
uniIcons
},
data() {
return {
rows: 2,
column: 4,
iconArr: [
'cuIcon-same',
'cuIcon-deliver',
'cuIcon-evaluate',
'cuIcon-shop',
'cuIcon-ticket',
'cuIcon-cascades',
'cuIcon-discover',
'cuIcon-question',
'cuIcon-pic',
'cuIcon-filter',
'cuIcon-footprint',
'cuIcon-pulldown',
'cuIcon-pullup',
'cuIcon-moreandroid',
'cuIcon-refund',
'cuIcon-qrcode',
'cuIcon-remind',
'cuIcon-profile',
'cuIcon-home',
'cuIcon-message',
'cuIcon-link',
'cuIcon-lock',
'cuIcon-unlock',
'cuIcon-vip',
'cuIcon-weibo',
'cuIcon-activity',
'cuIcon-friendadd',
'cuIcon-friendfamous',
'cuIcon-friend',
'cuIcon-goods',
'cuIcon-selection'
],
role : '',
menuList: [],
swiperMenuList:[],
user: {},
tableName:'',
autoplaySwiper: {"delay":5000,"disableOnInteraction":false} ? true : false,
intervalSwiper: {"delay":5000,"disableOnInteraction":false} ? 5000 : 5000,
//轮播
swiperList: [],
homekechengxinxilist: [],
news: [],
}
},
computed: {
baseUrl() {
return this.$base.url;
}
},
async onLoad(){
this.role = uni.getStorageSync("role");
let table = uni.getStorageSync("nowTable");
let res = await this.$api.session(table);
this.user = res.data;
this.tableName = table;
let menus = menu.list();
this.menuList = menus;
this.menuList.forEach((item,key) => {
if(this.role==item.roleName) {
item.frontMenu.forEach((item2,key2) => {
if(item2.child[0].buttons.indexOf("查看")>-1) {
this.swiperMenuList.push(item2);
}
})
}
})
},
async onShow() {
// 轮播图
let swiperList = []
let res = await this.$api.page('config', {
page: 1,
limit: 5
});
for (let item of res.data.list) {
if (item.name.indexOf('picture') >= 0 && item.value && item.value!="" && item.value!=null ) {
swiperList.push({
img: item.value,
title: item.name
});
}
}
if (swiperList) {
this.swiperList = swiperList;
}
// 选课介绍
res = await this.$api.list('news', {
page: 1,
limit: 6
});
this.news = res.data.list
res = await this.$api.list('kechengxinxi', {
page: 1,
limit: 6
});
this.homekechengxinxilist = res.data.list
},
methods: {
//轮播图跳转
onSwiperTap(e) {
},
// 新闻详情
onNewsDetailTap(id) {
this.$utils.jump(`../news-detail/news-detail?id=${id}`)
},
// 推荐列表点击详情
onDetailTap(tableName, id) {
this.$utils.jump(`../${tableName}/detail?id=${id}`)
},
onPageTap(tableName){
uni.navigateTo({
url: `../${tableName}/list`,
fail: function(){
uni.switchTab({
url: `../${tableName}/list`
});
}
});
// this.$utils.jump(`../${tableName}/list`)
},
onPageTap2(url) {
uni.setStorageSync("useridTag",0);
uni.navigateTo({
url: url,
fail: function() {
uni.switchTab({
url: url
});
}
});
}
}
}
</script>
<style>
page {
background: #F8F8F8;
}
.uni-padding-wrap:after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
background-attachment: fixed;
background-size: cover;
background-position: center;
}
view {
// font-family: '\5FAE\8F6F\96C5\9ED1';
font-size: 30upx;
}
.header {
background: #EEEEEE;
padding: 0 0 300upx 0;
margin-bottom: 20upx;
position: relative;
}
.ssbox {
background: rgba(255, 255, 255, 0.35);
width: 530upx;
border-radius: 60rpx;
padding: 10upx 15upx;
box-sizing: border-box;
}
.ss_input {
border: none;
width: 450upx;
font-size: 30upx;
color: #fff;
background: none;
height: 45upx;
line-break: 45upx;
}
.headerb {
position: absolute;
left: 0;
width: 100%;
box-sizing: border-box;
}
.headerb image {
width: 100%;
position: relative;
z-index: 10;
}
.headerb .swiper {
height: 300upx;
}
.swiper /deep/ .uni-swiper-dot {
width: 16rpx;
height: 16rpx;
broder-radius: 50%;
}
.notice {
position: relative;
z-index: 5;
padding: 0 50upx;
}
.noticem {
background: #fff;
padding: 55upx 30upx 15upx;
border-radius: 10upx;
margin-top: -45upx;
}
.noticer {
width: 480upx;
height: 50upx;
}
.noticer .swiper-item {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 50upx;
line-height: 50upx;
font-size: 24upx;
}
.list {
padding: 20upx 20upx 20upx;
}
.listm {
background: #fff;
border-radius: 15upx;
box-shadow: 0 0 2upx rgba(0, 0, 0, 0.1);
margin-bottom: 20upx;
padding: 30upx;
}
.listmpic {
border-radius: 10upx;
width: 166upx;
margin-right: 20upx;
}
.listmr {
// width: 460upx;
display: inline-block;
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
}
/* #ifdef MP-WEIXIN */
.noticer .swiper-item {
margin-top: 5upx;
}
/* #endif */
/* #ifdef MP-BAIDU */
.noticer .swiper-item {
margin-top: 3upx;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.noticer .swiper-item {
margin-top: 2upx;
}
/* #endif */
/* #ifdef MP-QQ */
.noticer .swiper-item {
margin-top: 4upx;
}
/* #endif */
/* #ifdef MP-TOUTIAO */
.noticer .swiper-item {
margin-top: 4upx;
}
/* #endif */
.uni-product-list {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
margin-top: 0;
padding: 0 14upx;
box-sizing: border-box;
}
.uni-product-list.active {
padding: 0 12upx;
}
.uni-product {
padding: 10upx;
margin: 10upx;
width: 341upx;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #FFFFFF;
}
.uni-product-list.active .uni-product {
width: 222upx;
}
.image-view {
height: 321upx;
width: 321upx;
// margin: 12upx 0;
display: flex;
align-items: center;
overflow: hidden;
}
.uni-product-list.active .image-view {
height: 202upx;
width: 202upx;
overflow: hidden;
}
.uni-product-image {
height: 100%;
width: 100%;
margin: 0 auto;
display: block;
}
.uni-product-title {
width: 100%;
word-break: break-all;
display: -webkit-box;
overflow: hidden;
line-height: 1.5;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.uni-product-price {
width: 100%;
margin-top: 10upx;
font-size: 28upx;
line-height: 1.5;
position: relative;
}
.uni-product-price-original {
color: #e80080;
}
.uni-product-price-favour {
color: #888888;
text-decoration: line-through;
margin-left: 10upx;
}
.uni-product-tip {
position: absolute;
right: 10upx;
background-color: #ff3333;
color: #ffffff;
padding: 0 10upx;
border-radius: 5upx;
}
.header-title {
display: flex;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 0 40upx;
}
.listBox>.title {
display: flex;
flex-wrap: wrap;
}
.listBox .list-box .box{
position: relative;
}
.listBox .list-box .box .title{
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.listBox .style1 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.listBox .style2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.listBox .style3 .list-item {
display: flex;
}
.listBox .style4 .list-item {
display: flex;
flex-wrap: wrap;
}
.listBox .style6 .list-item {
display: flex;
flex-wrap: wrap;
}
.listBox .style6 .list-item .list-item-body {
display: flex;
flex-wrap: wrap;
}
.listBox .style7 .list-item {
display: flex;
flex-wrap: wrap;
}
.listBox .style8 .list-item {
display: flex;
flex-wrap: wrap;
}
.listBox .style9 .list-item {
display: flex;
flex-wrap: wrap;
}
.listBox .idea {
display: flex;
flex-wrap: wrap;
}
.listBox .idea .box {
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.listBox .recommendIdea .box1 {
margin: 0;
padding: 0;
width: 100%;
height: 140rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0, 0, 0, 0);
background-image: url(http://codegen.caihongy.cn/20220212/cca1d742974b4383a130dea59a7f371f.png);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .recommendIdea .box2 {
margin: 0;
padding: 0;
width: 0;
height: 160rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .recommendIdea .box3 {
margin: 0;
padding: 0;
width: 0;
height: 160rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .recommendIdea .box4 {
margin: 0;
padding: 0;
width: 0;
height: 160rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .listIdea .box4 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .listIdea .box1 {
margin: 0;
padding: 0;
width: 100%;
height: 80rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0, 0, 0, 0);
background-image: url(http://codegen.caihongy.cn/20220212/552476da8a3746e7b78acfe44060bcbb.png);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .listIdea .box2 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .listIdea .box3 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .newsIdea .box1 {
margin: 0;
padding: 0;
width: 100%;
height: 66rpx;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0, 0, 0, 0);
background-image: url(http://codegen.caihongy.cn/20220212/c262b25cf4b74e7d980c0df388f8ed88.png);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .newsIdea .box2 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .newsIdea .box3 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.listBox .newsIdea .box4 {
margin: 0;
padding: 0;
width: 0;
height: 0;
font-size: 28rpx;
color: #FFF;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 12rpx rgba(0,0,0,0);
}
.iconarr {
text-align: center;
line-height: 80rpx;
}
.news-box6 .dian::before {
content: "";
display: block;
width: 8upx;
height: 8upx;
background-color: red;
position: absolute;
top: -4upx;
left: 50%;
transform: translateX(-50%);
border-radius: 100%;
z-index: 1;
}
.hide1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.hide2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.hide4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
课程信息，在课程信息页面可以查看课程编号、课程名称、封面、课程类型、学时、学分、开课时间、结束日期、考核方式、人数、教师工号、教师姓名等信息，根据需要进行选课信息操作，如图5-4所示。
图5-4课程信息界面图
学生，在我的页面可以对选课信息、取消选课、我的收藏管理等详细信息进行操作，如图5-5所示。
图5-5学生界面图
用户信息，在用户信息页面通过填写学号、姓名、密码、性别、年龄、手机、邮箱、学院、专业、头像等信息进行保存操作，如图5-6所示。
图5-6用户信息界面图
5.2管理员功能模块
管理员登录，管理员通过输入账号、密码，选择角色并点击登录进行系统登录操作，如图5-7所示。
图5-7管理员登录界面图
管理员登陆系统后，可以对首页、个人中心、学生管理、教师管理、课程类型管理、课程信息管理、选课信息管理、取消选课管理、管理员管理、系统管理等功能进行相应操作，如图5-8所示。
图5-8管理员功能界面图
学生管理，在学生管理页面可以对索引、学号、姓名、性别、年龄、手机、邮箱、学院、专业、头像等内容进行详情、修改或删除等操作，如图5-9所示。
图5-9学生管理界面图
后端主要代码
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Service;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.UserDao;
import com.entity.UserEntity;
import com.service.UserService;
import com.utils.PageUtils;
import com.utils.Query;
/**
* 系统用户
*/
@Service("userService")
public class UserServiceImpl extends ServiceImpl<UserDao, UserEntity> implements UserService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<UserEntity> page = this.selectPage(
new Query<UserEntity>(params).getPage(),
new EntityWrapper<UserEntity>()
);
return new PageUtils(page);
}
@Override
public List<UserEntity> selectListView(Wrapper<UserEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public PageUtils queryPage(Map<String, Object> params,
Wrapper<UserEntity> wrapper) {
Page<UserEntity> page =new Query<UserEntity>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
}
教师管理，在教师管理页面可以对索引、教师工号、教师姓名、性别、职称、电话、照片、班级等内容进行详情、修改或删除等操作，如图5-10所示。
图5-10教师管理界面图
源码文档下载地址
ssmvue和uniapp开发的小程序>微信小程序的学生选课系统源码论文ppt资源-CSDN文库
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
