学生管理系统Element UI版(上)

简介: 搭建环境创建vue项目:vue create day16_element_student安装第三方组件:axios、element

搭建环境

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

npm install axios

vue add elment

SQL

tb_class:

CREATE TABLE `tb_class` (
  `c_id` varchar(32) NOT NULL COMMENT '班级ID',
  `c_name` varchar(50) DEFAULT NULL COMMENT '班级名称',
  `desc` varchar(200) DEFAULT NULL COMMENT '班级描述',
  PRIMARY KEY (`c_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert  into `tb_class`(`c_id`,`c_name`,`desc`) values ('c001','Java12班','花儿222'),('c002','Java34班','艺术223'),('c003','虚拟的班级','111'),('c004','222','22');

tb_student:

CREATE TABLE `tb_student` (
  `s_id` varchar(32) NOT NULL COMMENT '学生ID',
  `sname` varchar(50) DEFAULT NULL COMMENT '姓名',
  `age` int(11) DEFAULT NULL COMMENT '年龄',
  `birthday` datetime DEFAULT NULL COMMENT '生日',
  `gender` char(1) DEFAULT NULL COMMENT '性别',
  `c_id` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`s_id`),
  KEY `c_id` (`c_id`),
  CONSTRAINT `tb_student_ibfk_1` FOREIGN KEY (`c_id`) REFERENCES `tb_class` (`c_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert  into `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:

DROP TABLE IF EXISTS `tb_user`;
CREATE TABLE `tb_user` (
  `u_id` varchar(32) NOT NULL COMMENT '用户编号',
  `user_name` varchar(50) DEFAULT NULL COMMENT '用户名',
  `password` varchar(32) DEFAULT NULL COMMENT '密码',
  `gender` bit(1) DEFAULT NULL COMMENT '性别,1表示男,0表示女',
  PRIMARY KEY (`u_id`),
  UNIQUE KEY `user_name` (`user_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert  into `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:

package com.czxy.controller;
import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
 * @Author 刘嘉俊
 * @Date 2022/2/21
 */
@RestController
@RequestMapping("/classes")
@CrossOrigin
public class ClassesController {
    @Resource
    private ClassesService classesService;
    @GetMapping
    public BaseResult<List<Classes>> list(){
        List<Classes> list = classesService.selectAll();
        return BaseResult.ok("查询成功",list);
    }
    @PostMapping
    public BaseResult add(@RequestBody Classes classes){
        boolean result = classesService.add(classes);
        if(result){
            return BaseResult.ok("添加成功");
        }
        return BaseResult.error("添加失败");
    }
    @GetMapping("/{cid}")
    public BaseResult<Classes> selectById(@PathVariable("cid") String cid){
        Classes classes = classesService.selectById(cid);
        return BaseResult.ok("查询详情成功",classes);
    }
    @PutMapping
    public BaseResult update(@RequestBody Classes classes){
        try {
            boolean result = classesService.update(classes);
            if(result){
                return BaseResult.ok("查询成功");
            }
            return BaseResult.error("更新失败");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @DeleteMapping("/{classesId}")
    public BaseResult delete(@PathVariable("classesId") String classesId){
        boolean result = classesService.deleteById(classesId);
        if(result){
            return BaseResult.ok("删除成功");
        }
        return BaseResult.error("删除失败");
    }
}

StudentController:

package com.czxy.controller;
import com.czxy.domain.Student;
import com.czxy.service.StudentService;
import com.czxy.vo.BaseResult;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
 * @Author 刘嘉俊
 * @Date 2022/2/21
 */
@RestController
@RequestMapping("/student")
@CrossOrigin
public class StudentController {
    @Resource
    private StudentService studentService;
    @PostMapping("/condition/{pageSize}/{pageNum}")
    public BaseResult condition(
            @PathVariable("pageSize") Integer pageSize,
            @PathVariable("pageNum") Integer pageNum,
            @RequestBody StudentVo studentVo) {
        // 查询
        PageInfo<Student> pageInfo = studentService.condition(pageSize,pageNum,studentVo);
        // 返回结果
        return BaseResult.ok("查询成功", pageInfo);
    }
    @GetMapping("/{sid}")
    public BaseResult selectById(@PathVariable("sid") String sid){
        Student student = studentService.selectById(sid);
        return BaseResult.ok("查询成功",student);
    }
    @PutMapping
    public BaseResult update(@RequestBody Student student){
        System.out.println(student);
        try {
            boolean result = studentService.update(student);
            if(result){
                return BaseResult.ok("更新成功");
            }else{
                return BaseResult.error("更新失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @DeleteMapping("/{sid}")
    public BaseResult delete(@PathVariable("sid")String sid){
        System.out.println("sid" + sid);
        try {
            boolean result = studentService.delete(sid);
            if(result){
                return BaseResult.ok("删除成功");
            }
            return BaseResult.error("删除失败");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @PostMapping
    public BaseResult addStudent(@RequestBody Student student){
        try {
            boolean result = studentService.addStudent(student);
            if(result){
                return BaseResult.ok("添加成功");
            }
            return BaseResult.error("添加失败");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @PostMapping("/save")
    public BaseResult save(@RequestBody Student student){
        try {
            boolean result = studentService.saveOrUpdate(student);
            if(result){
                return BaseResult.ok("编辑 | 添加 成功");
            }else{
                return BaseResult.error("编辑 | 添加 失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @PostMapping("/batchDelete")
    public BaseResult deleteIds(@RequestBody List<String> ids){
        try {
            studentService.deleteIds(ids);
            return BaseResult.ok("删除成功");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
}

UserController:

package com.czxy.controller;
import com.czxy.domain.User;
import com.czxy.service.UserService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
/**
 * @Author 刘嘉俊
 * @Date 2022/3/16
 */
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @Resource
    private UserService userService;
    @PostMapping("/login")
    public BaseResult login(@RequestBody User user){
        User loginUser = userService.login(user);
        if(loginUser != null){
            return BaseResult.ok("登录成功",loginUser);
        }else{
            return BaseResult.error("用户名或密码不匹配");
        }
    }
    @PostMapping("/check")
    public BaseResult check(@RequestBody User user){
        User findUser = userService.findByUsername(user.getUsername());
        if(findUser == null){
            return BaseResult.ok("用户名可用");
        }else{
            return BaseResult.error("用户名已存在");
        }
    }
}

查询所有前端

显示页面

创建页面

 

配置路由

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

访问路径

http://localhost:8080/studentList

ajax操作

<template>
  <div>
    {{studentPage}}
  </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  methods: {
    async condition() {
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.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-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
          <el-option label="Java12班" value="c001"></el-option>
          <el-option label="Java56班" value="c003"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="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-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cid"
        label="班级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? "男" : "女"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="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>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  methods: {
    async condition(num) {
      if(num) {
        this.studentPage.pageNum = num
      }
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.post(url, this.studentVo)
      // 保存结果
      this.studentPage = baseResult.data
    },
    handleSelectionChange(val) {
      console.info('批量删除')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.studentPage.pageSize = val
      this.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:编写布局容器和导航

步骤1:创建页面

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

步骤2:配置路由

const routes = [
  {
    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加载顺序(配置重置样式)

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

编写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>


相关文章
|
7天前
|
前端开发 数据安全/隐私保护
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程 前端uniapp+H5 后端FastAdmin框架 可打包成APP多端运行 亲测可用
32 13
|
2月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
236 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
142 0
|
2月前
|
机器学习/深度学习 数据可视化 计算机视觉
基于opencv的车牌识别系统(UI界面采用tkinter设计)
基于opencv的车牌识别系统(UI界面采用tkinter设计)
43 0
|
4月前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
360 1
基于Element UI或Element Plus实现具有倒计时的Message消息提示
|
4月前
|
搜索推荐 数据库
最新UI六零导航系统源码 | 多模版全开源
使用PHP+MySql,增加后台管理 多模板选择,支持在后台切换模板 增加常用搜索引擎,如:知乎、哔哩哔哩、在线翻译等(支持自定义) 支持用户提交收录申请,地址:http://域名/apply 部分模板优化和增加部分功能,如返回顶部、获取输入框焦点、时间日期显示等
76 1
|
4月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
111 0
|
4月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
121 0
|
4月前
|
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则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
324 0
|
4月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
205 0