学生管理系统Element UI版

💂 个人主页: 陶然同学 🤟 版权: 本文由【陶然同学】原创、在CSDN首发、…


  • 💂 个人主页: 陶然同学
  • 🤟 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 💅 想寻找共同成长的小伙伴,请点击【Java全栈开发社区

搭建环境

  • 创建vue项目:vue create day16_element_student

  • 安装第三方组件:axios、element

npm install axios

vue add elment

SQL

tb_class:

tb_student:

tb_user:

后端

链接:https://pan.baidu.com/s/1FAb2WUSUwpRuwIB9Spy3oQ
提取码:1234

关键代码

ClassesController:

StudentController:

UserController:

查询所有前端

显示页面

创建页面

配置路由

访问路径

http://localhost:8080/studentList

ajax操作

整合element ui

导航(嵌套路由)

  • 步骤1:创建页面

    • 创建登录页面(模板页面)

    • 编写首页Home(上中下布局),编写导航(首页、班级管理/班级列表、学生管理/学生列表)

    • 创建页面:ClassesList.vue

  • 步骤2:配置路由

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

步骤1:创建页面

  • 创建登录页面(模板页面)

  • 编写首页Home(上中下布局),编写导航(首页、班级管理/班级列表、学生管理/学生列表)

  • 创建页面:ClassesList.vue

步骤2:配置路由

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

  • 修改main.js,配置css加载顺序(配置重置样式)

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

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

编辑学生(弹出框)

分析

  • 页面布局:

    • 添加一个“添加”按钮,点击可以显示弹出层

    • 拷贝添加的弹出框Dialog,且要求表单(班级列表、id、名称、年龄、生日、性别)

  • 提供student变量,用于表单数据的绑定

  • ajax操作

    • 查询班级列表

    • 添加按钮绑定事件,进行ajax提交(成功:刷新列表关闭弹出框,失败:错误提示,但不关闭弹出框)

页面布局

页面布局:

添加一个“添加”按钮,点击可以显示弹出层

拷贝添加的弹出框Dialog,且要求表单(班级列表、id、名称、年龄、生日、性别)

提供student变量,用于表单数据的绑定

添加:ajax操作

查询班级列表

添加按钮绑定事件,进行ajax提交(成功:刷新列表关闭弹出框,失败:错误提示,但不关闭弹出框)

修改:ajax操作

点击修改按钮,通过id查询详情,显示弹出框,并自动填充表单。

写在最后 我们的学生管理系统Element UI版就结束了 欢迎大家添加博主交流 练习过程中遇到问题也可以提供支持 如果需要学习资料 博主也可以推荐

最后 如果觉得文章对您有帮助 请给博主点赞、收藏、关注 博主会不断推出更多优质文章

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/2417.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部