首页 > 编程语言 >基于uniapp的学生(选课)成绩小程序

基于uniapp的学生(选课)成绩小程序

时间:2023-09-04 17:35:16浏览次数:35  
标签:uniapp return flex 选课 request session 成绩 margin display


博主主页猫头鹰源码

博主简介:Java领域优质创作者、博客专家、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战

主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询

文末联系获取

项目介绍: 

本系统2022年4月创作完成,该系统包含小程序端和管理端,适合选题:小程序、学生成绩、学生选课、成绩管理。系统小程序端采用uniapp+uview实现,小程序接口和管理端采用springboot+mybatis开发,使用mysql数据库,下面是大概的功能。

项目功能:

小程序端:
学生登录注册、查看个人信息、修改个人信息、

选课退课
学生可以查看学期课表

老师登录注册、查看个人信息、修改个人信息、查看学期课表
老师可以对选课学生进行打分

管理端:
用户管理:用户信息的维护
课程管理:添加课程信息(学期,学分,地点,课程名,任课教师)
咨询列表:可查看学生的提问,并给出回复
管理员管理:维护管理员信息

数据库表结构文档: 

基于uniapp的学生(选课)成绩小程序_uni-app

系统包含技术:

管理端:springboot、mybatis、layui
小程序端:uniapp、uview、js、css等
开发工具:idea/hbuilder
数据库:mysql 5.7
JDK版本:jdk1.8

部分截图说明:

下面是登录

基于uniapp的学生(选课)成绩小程序_springboot_02

教师首页

基于uniapp的学生(选课)成绩小程序_小程序_03

教师个人中心

基于uniapp的学生(选课)成绩小程序_小程序_04

教师查看课程详情

基于uniapp的学生(选课)成绩小程序_springboot_05

学生选课

基于uniapp的学生(选课)成绩小程序_springboot_06

学生个人中心

基于uniapp的学生(选课)成绩小程序_javaweb_07

学生选课信息

基于uniapp的学生(选课)成绩小程序_mybatis_08

修改信息

基于uniapp的学生(选课)成绩小程序_小程序_09

 后台-登录

基于uniapp的学生(选课)成绩小程序_uni-app_10

后台-首页

基于uniapp的学生(选课)成绩小程序_springboot_11

 后台-教师管理

基于uniapp的学生(选课)成绩小程序_javaweb_12

 后台-课程管理

基于uniapp的学生(选课)成绩小程序_mybatis_13

部分代码:

拦截器

@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        if(session.getAttribute("ad") != null){
            return true;
        }
        // 不符合条件的给出提示信息,并转发到主页面
        request.setAttribute("msg", "您还没有登录,请先登录!");
        request.getRequestDispatcher("/gologin.jsp").forward(request, response);
        //返回true通过,返回false拦截
        return false;
    }

登录部分

/**
	 * 登录
	 * 将提交数据(username,password)写入Admin对象
	 */
	@RequestMapping(value = "/login")
	public String login(Admin admin, Model model, HttpSession session, HttpServletRequest request) {
		if(admin.getUsername()==null || admin.getUsername().length()<=0 ){
			model.addAttribute("msg", "请输入手机号!");
			return "login";
		}
		if(admin.getPassword()==null || admin.getPassword().length()<1){
			model.addAttribute("msg", "请输入密码!");
			return "login";
		}
		Map mp = new HashMap();
		mp.put("username",admin.getUsername());
		mp.put("password",admin.getPassword());
		List<Admin> ad = adminService.queryFilter(mp);
		if(ad!=null && ad.size()==1){
			session.setAttribute("ad", ad.get(0));
			session.setAttribute("type", "01");
			return "homepage";
		}else{
			model.addAttribute("msg", "请确定账户信息是否正确!");
			return "login";
		}
	}

	/**
	 * 退出登录
	 */
	@RequestMapping(value = "/loginOut")
	public String loginOut(HttpSession session) {
		session.invalidate();
		return "login";
	}


	/**
	 * 查询个人信息
	 */
	@RequestMapping(value = "/info")
	public String info(HttpServletRequest request) {
		return "queryInfo";
	}



	/**
	 * 进入修改
	 */
	@RequestMapping(value = "/updateInfo")
	public String updateInfo(HttpServletRequest request) {
		return "updateInfo";
	}



	/**
	 * 修改信息
	 */
	@RequestMapping( value = "/updateInfoAdmin", method = RequestMethod.POST)
	@ResponseBody
	public String updateInfoAdmin(Admin admin, Model model, HttpServletRequest request, HttpSession session1) {
		HttpSession session = request.getSession();
		if(session.getAttribute("ad") == null){
			session.setAttribute("msg", "对不起,请登录!");
			return "202";
		}
		if(admin.getPassword().length()<1){
			return "204";
		}
		Admin admin1 = (Admin) session.getAttribute("ad");
		if(!admin1.getPassword().equals(admin.getPassword())){
			return "201";
		}
		if(!"".equals(admin.getPasswords())){
			admin.setPassword(admin.getPasswords());
		}
		adminService.updateAdmin(admin);
		return "200";
	}

课程组件

<template>
	<view class="list" v-if="list.length > 0">
		<view @click="goDetail(item.id)" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info">
				<view class="text">
					<view class="title">课程名称:{{item.name}}</view>
					<view class="other">
						<view class="left">
							<view class="time">学期:{{item.term}}</view>
						</view>
						<view class="right">
							<view class="time">任课老师:{{item.tname}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
		</view>
		
	</view>
	
</template>

<script>
export default {
	name: 'courseList',
	props: {
		list: {
			type: Array,
			default: function(e) {
				return [];
			}
		}
	},
	data() {
		return {
		}
	},
	methods:{
		goDetail(id){
			uni.navigateTo({
				url: '/pages/index/detail?id='+id
			})
		}
	}
}
</script>

<style scoped lang="scss">
/*列表*/
.list {
	margin-top: 2rpx;
	.item {
		padding: 40rpx 24rpx 0 24rpx;
		.info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-bottom: 4rpx;
			.text {
				flex-grow: 1;
				flex-shrink: 1;
				display: flex;
				flex-direction: column;
				margin-right: 40rpx;
				.title {
					flex-grow: 1;
					flex-shrink: 1;
					font-size: 34rpx;
					line-height: 1.5;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 72rpx;
					margin-bottom: 8rpx;
				}
				.other {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
					line-height: normal;
					.left {
						display: flex;
						flex-grow: 1;
						flex-shrink: 1;
						.source {
							display: -webkit-box;
							text-overflow: ellipsis;
							word-break: break-all;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							width: 140rpx;
							margin-right: 16rpx;
						}
					}
					.right {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						flex-grow: 0;
						flex-shrink: 0;
						margin-right: 5rpx;
						image {
							flex-grow: 1;
							flex-shrink: 1;
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
						text {
							flex-grow: 1;
							flex-shrink: 1;
							margin-top: -6rpx;
						}
					}
				}
			}
			.photo {
				image {
					height: 170rpx;
					width: 222rpx;
					border-radius: 10rpx;
				}
			}
		}
		.line {
			display: bock;
			width: 100%;
			height: 1rpx;
			margin-top: 22rpx;
			background: #e8e8e8;
		}
		&:last-child {
			.line {
				//display: none;
			}
			//padding-bottom: 30rpx;
		}
	}
}
</style>

以上就是部分功能展示,从整体上来看,本系统功能是十分完整的,界面设计简洁大方,交互友好,数据库设计也很合理,规模适中,代码工整,清晰,适合学习使用。

好了,今天就到这儿吧,小伙伴们点赞、收藏、评论,一键三连走起呀,下期见~~

标签:uniapp,return,flex,选课,request,session,成绩,margin,display
From: https://blog.51cto.com/u_14544277/7353280

相关文章

  • 基于uniapp的计算机考研助手小程序(含管理端)
    博主主页:猫头鹰源码博主简介:Java领域优质创作者、博客专家、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询2022年10月新增功能:用户可以发布帖子,可以查看帖子,能够收藏、评论帖子,可......
  • uniapp检查更新并显示下载进度(2)
    1、App.vue文件<script>importappUpdatefrom'@/util/appUpdate.js'onLaunch:function(){ uni.getSystemInfo({ success:function(e){ //#ifdefAPP-PLUS //检测升级 appUpdate() //#endif}......
  • uniapp切换主题颜色(后台管理系统)
    需求:在现有已经做好的后台管理系统添加一个切换主题颜色的功能分析:该项目用了很多uniapp的组件,css样式没有统一,类名也没有统一使用混合mixin.scss,并使用vuex效果图功能:按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化每一个用户喜欢的主题颜色都不一样,后端......
  • uniapp app端如何使用插件实现获取手机应用自定义上传
    <u-buttonsize="mini"style="background-color:#3ac908;color:#ffffff;font-size:16rpx;width:110rpx;height:50rpx;"@tap="onUpload">上传</u-button>//以下代码写于根目录下第一个view顶部或跟在自定义导航栏后面<l-fileref="lFile&......
  • uniapp小程序隐私协议弹窗组件。自2023年9月15日起,对于涉及处理用户个人信息的小程序
    上代码 隐私组件代码直接复制就能用 <template> <viewclass="zero-privacy":class="[{'zero-bottom':position=='bottom'}]"v-if="showPrivacy"> <viewclass="zero-privacy-container":style="{&#......
  • 全开源风车im源码(前端uniapp可发布H5及app/后端java含视频搭建教程)
    互联网彻底改变了我们的沟通方式,电子邮件是迄今为止采用最快的通信形式。不到二十年前,还没有多少人听说过它。现在,我们中的许多人都用电子邮件而不是写信,甚至打电话给别人,世界各地的人们每天发送数十亿封电子邮件。源码:ms.jstxym.top但有时甚至电子邮件也不够快。您可能不知道您......
  • uniapp项目实践总结(八)自定义加载组件
    有时候一个页面请求接口需要加载很长时间,这时候就需要一个加载页面来告知用户内容正在请求加载中,下面就写一个简单的自定义加载组件。目录准备工作逻辑思路实战演练效果预览准备工作在之前的全局组件目录components下新建一个组件文件夹,命名为q-loading,组件为q-loading......
  • 手把手教你vue3-ts-uniapp-vite创建多端小程序-3 统一ui,uni-ui库
    uni-ui官网地址https://uniapp.dcloud.net.cn/component/uniui/quickstart.html1.安装sass、sass-loadernpminstallsass-Dnpminstallsass-loader-D2.安装uni-uinpminstall@dcloudio/uni-ui3.配置easycom。在pages.json中配置"easycom":{"autoscan&q......
  • 手把手教你vue3-ts-uniapp-vite创建多端小程序-2 设置底部导航
    1.打开项目,打开pages.json,设置底部导航栏。注意pages中的path和tabBar中list中的path要一致{ "pages":[ { "path":"pages/index/index", "style":{ "navigationBarTitleText":"首页" } },{ "pa......
  • uniapp项目实践总结(七)编写一个简单的应用页面
    之前自定义了顶部和底部导航栏,那接下来就写一个简单的二级页面,这个是出了导航页面之外经常用到的。目录结构模板样式方法示例结构一个普通页面的结构应该是如下所示:<!--html--><template><viewclass="list">列表内容</view></template><!--js--><scrip......