AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

学生管理系统Element UI版（一）

2022-09-22 189
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 学生管理系统Element UI版

搭建环境

  • 创建vue项目：vue create day16_element_student
  • 安装第三方组件：axios、element

npm install axios

vue add elment

SQL

tb_class:

CREATETABLE`tb_class` (
`c_id`varchar(32) NOTNULLCOMMENT'班级ID',
`c_name`varchar(50) DEFAULTNULLCOMMENT'班级名称',
`desc`varchar(200) DEFAULTNULLCOMMENT'班级描述',
PRIMARYKEY (`c_id`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_class`(`c_id`,`c_name`,`desc`) values ('c001','Java12班','花儿222'),('c002','Java34班','艺术223'),('c003','虚拟的班级','111'),('c004','222','22');

tb_student:

CREATETABLE`tb_student` (
`s_id`varchar(32) NOTNULLCOMMENT'学生ID',
`sname`varchar(50) DEFAULTNULLCOMMENT'姓名',
`age`int(11) DEFAULTNULLCOMMENT'年龄',
`birthday`datetimeDEFAULTNULLCOMMENT'生日',
`gender`char(1) DEFAULTNULLCOMMENT'性别',
`c_id`varchar(32) DEFAULTNULL,
PRIMARYKEY (`s_id`),
KEY`c_id` (`c_id`),
CONSTRAINT`tb_student_ibfk_1`FOREIGNKEY (`c_id`) REFERENCES`tb_class` (`c_id`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values ('s001','赵三',19,'2001-01-17 00:00:00','1','c001'),('s002','刘悦11',60,'1998-10-08 00:00:00','0','c002'),('s003','孙五',18,'2002-03-15 00:00:00','1','c001'),('s004','李三',19,'2001-04-14 00:00:00','0','c002'),('s005','梁桐',35,'2001-02-02 00:00:00','1','c002'),('s006','刘悦22',60,'2022-02-07 00:00:00','0','c002'),('s21','小红',20,'2022-03-20 00:00:00','0','c002');

tb_user:

DROPTABLEIFEXISTS`tb_user`;
CREATETABLE`tb_user` (
`u_id`varchar(32) NOTNULLCOMMENT'用户编号',
`user_name`varchar(50) DEFAULTNULLCOMMENT'用户名',
`password`varchar(32) DEFAULTNULLCOMMENT'密码',
`gender`bit(1) DEFAULTNULLCOMMENT'性别,1表示男，0表示女',
PRIMARYKEY (`u_id`),
UNIQUEKEY`user_name` (`user_name`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_user`(`u_id`,`user_name`,`password`,`gender`) values ('1','jack','1234',''),('10','jack5','1234',''),('2','rose','1234','\0'),('3','张三','1234',''),('4','tom','1234',''),('5','jack2','1234',''),('6','jack1','1234',''),('7','jack3','1234',''),('8','jack4','1234',''),('cd0d2523b5024589af142787de8a7b2a','jack6','1234','');

后端

链接：https://pan.baidu.com/s/1FAb2WUSUwpRuwIB9Spy3oQ 

提取码：1234

关键代码

ClassesController：

packagecom.czxy.controller;
importcom.czxy.domain.Classes;
importcom.czxy.service.ClassesService;
importcom.czxy.vo.BaseResult;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
importjava.util.List;
/*** @Author 刘嘉俊* @Date 2022/2/21*/@RestController@RequestMapping("/classes")
@CrossOriginpublicclassClassesController {
@ResourceprivateClassesServiceclassesService;
@GetMappingpublicBaseResult<List<Classes>>list(){
List<Classes>list=classesService.selectAll();
returnBaseResult.ok("查询成功",list);
    }
@PostMappingpublicBaseResultadd(@RequestBodyClassesclasses){
booleanresult=classesService.add(classes);
if(result){
returnBaseResult.ok("添加成功");
        }
returnBaseResult.error("添加失败");
    }
@GetMapping("/{cid}")
publicBaseResult<Classes>selectById(@PathVariable("cid") Stringcid){
Classesclasses=classesService.selectById(cid);
returnBaseResult.ok("查询详情成功",classes);
    }
@PutMappingpublicBaseResultupdate(@RequestBodyClassesclasses){
try {
booleanresult=classesService.update(classes);
if(result){
returnBaseResult.ok("查询成功");
            }
returnBaseResult.error("更新失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@DeleteMapping("/{classesId}")
publicBaseResultdelete(@PathVariable("classesId") StringclassesId){
booleanresult=classesService.deleteById(classesId);
if(result){
returnBaseResult.ok("删除成功");
        }
returnBaseResult.error("删除失败");
    }
}

StudentController：

packagecom.czxy.controller;
importcom.czxy.domain.Student;
importcom.czxy.service.StudentService;
importcom.czxy.vo.BaseResult;
importcom.czxy.vo.StudentVo;
importcom.github.pagehelper.PageInfo;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
importjava.util.List;
/*** @Author 刘嘉俊* @Date 2022/2/21*/@RestController@RequestMapping("/student")
@CrossOriginpublicclassStudentController {
@ResourceprivateStudentServicestudentService;
@PostMapping("/condition/{pageSize}/{pageNum}")
publicBaseResultcondition(
@PathVariable("pageSize") IntegerpageSize,
@PathVariable("pageNum") IntegerpageNum,
@RequestBodyStudentVostudentVo) {
// 查询PageInfo<Student>pageInfo=studentService.condition(pageSize,pageNum,studentVo);
// 返回结果returnBaseResult.ok("查询成功", pageInfo);
    }
@GetMapping("/{sid}")
publicBaseResultselectById(@PathVariable("sid") Stringsid){
Studentstudent=studentService.selectById(sid);
returnBaseResult.ok("查询成功",student);
    }
@PutMappingpublicBaseResultupdate(@RequestBodyStudentstudent){
System.out.println(student);
try {
booleanresult=studentService.update(student);
if(result){
returnBaseResult.ok("更新成功");
            }else{
returnBaseResult.error("更新失败");
            }
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@DeleteMapping("/{sid}")
publicBaseResultdelete(@PathVariable("sid")Stringsid){
System.out.println("sid"+sid);
try {
booleanresult=studentService.delete(sid);
if(result){
returnBaseResult.ok("删除成功");
            }
returnBaseResult.error("删除失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMappingpublicBaseResultaddStudent(@RequestBodyStudentstudent){
try {
booleanresult=studentService.addStudent(student);
if(result){
returnBaseResult.ok("添加成功");
            }
returnBaseResult.error("添加失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMapping("/save")
publicBaseResultsave(@RequestBodyStudentstudent){
try {
booleanresult=studentService.saveOrUpdate(student);
if(result){
returnBaseResult.ok("编辑 | 添加 成功");
            }else{
returnBaseResult.error("编辑 | 添加 失败");
            }
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMapping("/batchDelete")
publicBaseResultdeleteIds(@RequestBodyList<String>ids){
try {
studentService.deleteIds(ids);
returnBaseResult.ok("删除成功");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
}

UserController:

packagecom.czxy.controller;
importcom.czxy.domain.User;
importcom.czxy.service.UserService;
importcom.czxy.vo.BaseResult;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
/*** @Author 刘嘉俊* @Date 2022/3/16*/@RestController@RequestMapping("/user")
@CrossOriginpublicclassUserController {
@ResourceprivateUserServiceuserService;
@PostMapping("/login")
publicBaseResultlogin(@RequestBodyUseruser){
UserloginUser=userService.login(user);
if(loginUser!=null){
returnBaseResult.ok("登录成功",loginUser);
        }else{
returnBaseResult.error("用户名或密码不匹配");
        }
    }
@PostMapping("/check")
publicBaseResultcheck(@RequestBodyUseruser){
UserfindUser=userService.findByUsername(user.getUsername());
if(findUser==null){
returnBaseResult.ok("用户名可用");
        }else{
returnBaseResult.error("用户名已存在");
        }
    }
}

查询所有前端

显示页面

创建页面

image.png

配置路由

constroutes= [
  {
path: '/studentList',
name: '学生列表',
component: () =>import('../views/StudentList.vue')
  }
]

访问路径

http://localhost:8080/studentList

ajax操作

<template><div>    {{studentPage}}
</div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      }
    }
  },
methods: {
asynccondition() {
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    }
  },
mounted() {
// 查询this.condition()
  },
}
</script><style></style>

整合element ui

<template><div><!--表单start--><el-form :inline="true" :model="studentVo"size="mini"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"clearable><el-optionlabel="Java12班"value="c001"></el-option><el-optionlabel="Java56班"value="c003"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.sname"placeholder="请输入姓名"clearable></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"clearable></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"clearable></el-input></el-col></el-form-item><el-form-item><el-buttontype="primary"@click="condition(1)">查询</el-button></el-form-item></el-form><!--表单end--><!--表格start--><el-table      :data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><templateslot-scope="scope">          {{scope.row.gender==1?"男" : "女"}}
</template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><!--表格end--><!--分页条start--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"      :current-page="studentPage.pageNum"      :page-sizes="[1, 2, 3, 5, 10]"      :page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper"      :total="studentPage.total"></el-pagination><!--分页条end--></div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      }
    }
  },
methods: {
asynccondition(num) {
if(num) {
this.studentPage.pageNum=num      }
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    },
handleSelectionChange(val) {
console.info('批量删除')
    },
handleSizeChange(val) {
console.log(`每页${val} 条`);
this.studentPage.pageSize=valthis.studentPage.pageNum=1// 重新开始this.condition()
    },
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.studentPage.pageNum=val// 重新开始this.condition()
    }
  },
mounted() {
// 查询this.condition()
  },
}
</script><style></style>

导航(嵌套路由)

  • 步骤1：创建页面
  • 创建登录页面（模板页面）
  • 编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）创建页面：ClassesList.vue
  • 步骤2：配置路由
  • 步骤3：编写布局容器和导航

image.png

步骤1：创建页面

  • 创建登录页面（模板页面）
  • 编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
  • 创建页面：ClassesList.vue

image.png

constroutes= [
  {
path: '/',
redirect: '/home'//重定向  },
  {
path: '/login',
name: '登录',
component: () =>import('../views/Login.vue')
  },
  {
path: '/home',
name: '首页',
component: () =>import('../views/Home.vue'),
children: [
      {
path: '/studentList',
name: '学生列表',
component: () =>import('../views/StudentList.vue')
      },
      {
path: '/classesList',
name: '班级列表',
component: () =>import('../views/ClassesList.vue')
      }
    ]
  },
]

步骤3：编写布局容器和导航

  • 修改main.js，配置css加载顺序（配置重置样式）

image.png

  • 修改App.vue，配置样式，上下自动填充

 image.png

编写Home页面，完成导航和二级路由显示

<template>
  <el-container>
    <el-header class="home-header">
      <!-- 导航start -->
      <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="/classes">
          <template slot="title">班级管理</template>
          <el-menu-item index="/classesList">班级列表</el-menu-item>
        </el-submenu>
        <el-submenu index="/student">
          <template slot="title">学生管理</template>
          <el-menu-item index="/studentList">学生列表</el-menu-item>
        </el-submenu>
      </el-menu>
      <!-- 导航end -->
    </el-header>
    <el-main>
      <!-- 二级路由 -->
      <router-view></router-view>
    </el-main>
    <el-footer>学生管理系统Element UI 版</el-footer>
  </el-container>
</template>
<script>
export default {
}
</script>
<style>
  .el-container {
    height: 100%;
  }
  .home-header {
    padding: 0;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>

文章标签：
GPU云服务器
JavaScript
前端开发
容器
SQL
关键词：
系统UI
element UI
UI element
UI学生管理系统
学生管理系统element UI
相关实践学习
部署Stable Diffusion玩转AI绘画（GPU云服务器）
本实验通过在ECS上从零开始部署Stable Diffusion来进行AI绘画创作，开启AIGC盲盒。
陶然同学
目录
相关文章
SoraLuna
|
10天前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统，通过输入条件筛选车次信息，并展示动态筛选结果，学习事件处理、状态管理和界面展示的综合开发技巧。
SoraLuna
44 13
多客潇潇
|
20天前
|
人工智能 搜索推荐 算法
婚恋交友系统UI/UX设计优化 婚恋交友系统用户界面友好性提升 婚恋交友系统用户行为分析与优化 婚恋交友系统用户反馈收集与处理
针对婚恋交友系统的UI/UX设计优化，本文提出多项策略：简化用户界面、提升交互体验、个性化推荐算法；增强用户界面友好性，包括适应性、无障碍及情感化设计；通过数据收集与分析优化用户行为路径；建立多渠道反馈机制，分类处理并及时告知结果。这些措施旨在提高用户体验和满意度，促进平台健康发展。[点击查看完整演示和免费源码](https://gitee.com/duoke-official-open-source/hunlianjiaoyou)
多客潇潇
62 4
疯狂的猿
|
1月前
|
前端开发 数据安全/隐私保护
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程 前端uniapp+H5 后端FastAdmin框架 可打包成APP多端运行 亲测可用
疯狂的猿
57 13
chnjames
|
3月前
|
API UED 容器
深入探索 Element UI：自定义滚动条与弹出层管理的技巧
在这篇博客中，我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置，以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件，利用 vue-popper 创建自定义弹出层，最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
chnjames
371 1
深入探索 Element UI：自定义滚动条与弹出层管理的技巧
邹荣乐
|
3月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
邹荣乐
242 0
Svan.
|
3月前
|
机器学习/深度学习 数据可视化 计算机视觉
基于opencv的车牌识别系统（UI界面采用tkinter设计）
基于opencv的车牌识别系统（UI界面采用tkinter设计）
Svan.
73 0
土木林森
|
5月前
|
开发者 图形学 前端开发
绝招放送：彻底解锁Unity UI系统奥秘，五大步骤教你如何缔造令人惊叹的沉浸式游戏体验，从Canvas到动画，一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步，UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面，包括Canvas、UI元素及Event System的使用，并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程，助力开发者打造沉浸式的游戏体验。
土木林森
142 0
土木林森
|
5月前
|
开发者 C# Android开发
明白吗？Xamarin与Native的终极对决：究竟哪种开发方式更适合您的项目需求，让我们一探究竟！
【8月更文挑战第31天】随着移动应用开发的普及，开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发，代码复用率高，可大幅降低开发成本；但因基于抽象层，可能影响性能。原生开发则充分利用平台特性，提供最佳用户体验，但需维护多套代码库，增加工作量。开发者应根据项目需求、团队技能和预算综合考量，选择最适合的开发方式。
土木林森
139 0
土木林森
|
5月前
|
JavaScript 前端开发 开发者
决战前端之巅！Element UI与Vuetify谁才是Vue.js组件界的霸主？一场关于颜值与实力的较量！
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造，提供多种高质量UI组件，设计简洁大方。Vuetify基于Material Design规范，支持Vue.js 2.0及3.0版本，具备前瞻性。两者均涵盖表单、导航、数据展示等组件，Element UI配置选项丰富，而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
土木林森
407 0
土木林森
|
5月前
|
JavaScript 开发者 UED
Vue.js组件库大对决：Element UI与Vuetify，开发者的罗密欧与朱丽叶！
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库，前者简洁高效，后者遵循Material Design，国际化程度高。两者均提供丰富的组件支持，但Vuetify组件更多样，设计更灵活；Element UI在性能和中文支持上更优。文档方面，Element UI更直观易懂，而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格，以达到最佳开发效果。
土木林森
285 0