首页 > 其他分享 >springboot+vue2+element学生信息管理系统

springboot+vue2+element学生信息管理系统

时间：2023-10-29 12:22:39浏览次数：35  
标签：name gender element result vue2 hobbies import id springboot

效果：

 

 .vue

<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size: 40px;   background-color: rgb(238, 241, 246)">学生管理</el-header>
            <el-container>
                <el-aside width="230px" style=" border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>信息管理</template>

                            <el-menu-item index="1-1">学生管理</el-menu-item>
                            <el-menu-item index="1-2">老师无法管理</el-menu-item>

                        </el-submenu>

                    </el-menu>
                </el-aside>

                <!------- 主展示区 -------------------------------------------------------------------------->
                <el-main>
                    <el-main>
                        <!-- 查询表单 ------------------------------------------------------------------->


                        <el-form :inline="true" :model="searchform" class="demo-form-inline">
                            <!-- 表单项 -->
                            <el-form-item label="姓名">
                                <el-input v-model="searchform.name" placeholder="姓名"></el-input>
                            </el-form-item>

                            <el-form-item label="性别">
                                <el-select v-model="searchform.gender" placeholder="性别">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 新增学生 -------------------------------------------------------------------------------->
                        <el-button type="text" @click=" dialogFormVisible = true">新增学生</el-button>

                        <el-dialog title="添加学生" :visible.sync="dialogFormVisible">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                class="demo-ruleForm">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="学号" prop="studentId">
                                    <el-input v-model="ruleForm.studentId"></el-input>
                                </el-form-item>



                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="ruleForm.gender">
                                        <el-radio label="男"></el-radio>
                                        <el-radio label="女"></el-radio>
                                    </el-radio-group>
                                </el-form-item>


                                <el-form-item label="爱好" prop="hobbies">
                                    <el-checkbox-group v-model="ruleForm.hobbies">
                                        <el-checkbox label="足球" name="type"></el-checkbox>
                                        <el-checkbox label="篮球" name="type"></el-checkbox>
                                        <el-checkbox label="英雄联盟" name="type"></el-checkbox>
                                        <el-checkbox label="gta" name="type"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>

                                <el-form-item label="专业" prop="major">
                                    <el-select v-model="ruleForm.major" placeholder="请选择专业">
                                        <el-option label="软件工程" value="软件工程"></el-option>
                                        <el-option label="信息工程" value="信息工程"></el-option>
                                        <el-option label="人工智能" value="人工智能"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="电话号码" prop="phoneNumber">
                                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                                </el-form-item>
                                <el-form-item label="身份证号" prop="idCardNumber">
                                    <el-input v-model="ruleForm.idCardNumber"></el-input>
                                </el-form-item>


                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>

                        <!-- 表格 ------------------------------------------------------>
                        <el-table :data="tableData" border>
                            <el-table-column prop="name" label="姓名" width="80">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" width="80">
                            </el-table-column>
                            <el-table-column prop="major" label="专业" width="100">
                            </el-table-column>
                            <el-table-column prop="studentId" label="学号" width="100">
                            </el-table-column>
                            <el-table-column prop="hobbies" label="爱好" width="140">
                            </el-table-column>
                            <el-table-column prop="phoneNumber" label="电话" width="110">
                            </el-table-column>
                            <el-table-column prop="idCardNumber" label="身份证号" width="180">
                            </el-table-column>

                            <el-table-column label="操作" width="150">
  <!--------------------------------------- 修改员工 -------------------------------------------------------------------------------------------------------->
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini"
                                        @click="update(scope.row), dialogTableVisible = true">修改</el-button>

                                    <el-dialog title="修改学生信息" :visible.sync="dialogTableVisible">
                                        <el-form :model="tabhuixian" :rules="rules" ref="tabhuixian" label-width="100px"
                                class="demo-ruleForm">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="tabhuixian.name"></el-input>
                                </el-form-item>
                                <el-form-item label="学号" prop="studentId">
                                    <el-input v-model="tabhuixian.studentId"></el-input>
                                </el-form-item>



                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="tabhuixian.gender">
                                        <el-radio label="男"></el-radio>
                                        <el-radio label="女"></el-radio>
                                    </el-radio-group>
                                </el-form-item>


                                <el-form-item label="爱好" prop="hobbies">
                                    <el-checkbox-group v-model="tabhuixian.hobbies">
                                        <el-checkbox label="足球" name="type"></el-checkbox>
                                        <el-checkbox label="篮球" name="type"></el-checkbox>
                                        <el-checkbox label="英雄联盟" name="type"></el-checkbox>
                                        <el-checkbox label="gta" name="type"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>

                                <el-form-item label="专业" prop="major">
                                    <el-select v-model="tabhuixian.major" placeholder="请选择专业">
                                        <el-option label="软件工程" value="软件工程"></el-option>
                                        <el-option label="信息工程" value="信息工程"></el-option>
                                        <el-option label="人工智能" value="人工智能"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="电话号码" prop="phoneNumber">
                                    <el-input v-model="tabhuixian.phoneNumber"></el-input>
                                </el-form-item>
                                <el-form-item label="身份证号" prop="idCardNumber">
                                    <el-input v-model="tabhuixian.idCardNumber"></el-input>
                                </el-form-item>


                                <el-form-item>
                                    <el-button type="primary" @click="submitForm222('tabhuixian')">立即修改</el-button>
                                    <el-button @click="resetForm222('tabhuixian')">重置</el-button>
                                </el-form-item>
                            </el-form>
                                    </el-dialog>
                                   <!-- 空格 -->
                                    &nbsp; 

                                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                                </template>





                            </el-table-column>


                        </el-table>
                    </el-main>
                </el-main>
                <!-- 主展示区 ------------------------------------------------------------------------------->

            </el-container>
        </el-container>

    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tabhuixian: {
                id: '',
                name: '',
                gender: '',
                major: '',
                studentId: '',
                hobbies: [],
                phoneNumber: '',
                idCardNumber: '',
            },
            tableData: [],
            searchform: {
                name: "",
                gender: ""

            },
            dialogFormVisible: false,
            dialogTableVisible: false,
            ruleForm: {
                name: '',
                gender: '',
                major: '',
                studentId: '',
                hobbies: [],
                phoneNumber: '',
                idCardNumber: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

                studentId: [
                    { required: true, message: '请输入学号', trigger: 'blur' },
                    { min: 8, max: 8, message: '长度8个字符', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value && !value.startsWith('2023')) {
                                callback('学号必须以2023开头');
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],

                major: [
                    { required: true, message: '请选择专业', trigger: 'change' }
                ],

                hobbies: [
                    { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
            }





        }
    },
    methods: {

        update: function (row) {

            axios.get("/getid", {
                params: {
                    id: row.id
                }
            }).then((result) => {
                this.tabhuixian = JSON.parse(JSON.stringify(result.data))

                this.tabhuixian.hobbies = this.tabhuixian.hobbies.split(",");
            });
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //获取表单数据
                    const formData = this.$refs[formName].model;
                    //把hobbits数组改成自负床方便后端接收
                    formData.hobbies = formData.hobbies.join(",");
                    // alert(JSON.stringify(formData))
                    axios.post("/add", formData, {
                        headers: {
                            "Content-Type": "application/json"  // 设置请求 Content-Type 为 application/json
                        }
                    }).then((result) => {
                        console.log(result);
                    });
                }
                //重置表单
                this.$refs[formName].resetFields();
                //重新加载页面
                location.reload();
            });
        },
        submitForm222(tabhuixian) {
            this.$refs[tabhuixian].validate((valid) => {
                if (valid) {
                    //获取表单数据
                    const formData222 = this.$refs[tabhuixian].model;
                    //把hobbits数组改成自负床方便后端接收
                    formData222.hobbies = formData222.hobbies.join(",");
                    // alert(JSON.stringify(formData))
                    axios.post("/update", formData222, {
                        headers: {
                            "Content-Type": "application/json"  // 设置请求 Content-Type 为 application/json
                        }
                    }).then((result) => {
                        console.log(result);
                    });
                }
                //重置表单
                this.$refs[tabhuixian].resetFields();
                //重新加载页面
                location.reload();
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        resetForm222(tabhuixian) {
            this.$refs[tabhuixian].resetFields();
        },


        onSubmit: function () {
            axios.get("/sub", {
                params: {
                    name: this.searchform.name,
                    gender: this.searchform.gender
                }
            }).then((result) => {
                this.tableData = result.data;
            });
        },
        del: function (row) {
            axios.get("/del", {
                params: {
                    id: row.id
                }
            }).then((result) => {
                console.log(result.msg);
            });

            this.tableData = this.tableData.filter(item => item.id !== row.id)
        }
    },
    mounted() {
        axios.get("/select").then((result) => {
            console.log(JSON.stringify(result.data));
            this.tableData = result.data
        });
    }
}

</script>

<style></style>

controller层

package com.wzy.controller;

import com.wzy.StudentService;
import com.wzy.pojo.Result;
import com.wzy.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/select")
    public List<Student> getAllStudents() {
        return studentService.getAllStudents();
    }

    @PostMapping("/add")
    public Result addStudent(@RequestBody Student student) {
         studentService.addStudent(student);
         return Result.success();
    }
    @GetMapping("/del")
    public Result del(Integer id){
        studentService.del(id);
        return Result.success();
    }
    //条件查询
    @GetMapping("/sub")
    public List<Student> sub(String name,String gender){
        return studentService.sub(name,gender);
    }

    @GetMapping("/getid")
    public Student getbyid(Integer id){
        return studentService.getbyid(id);
    }

    @PostMapping("/update")
    public Result update( @RequestBody Student student){

        studentService.update(student);
        return Result.success();

    }
}

mapper层（service层省略)

package com.wzy.mapper;

import com.wzy.pojo.Student;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface StudentMapper {
    @Delete("delete from student where id =#{id}")
    void del(Integer id);

    @Select("select *from student")
    List<Student> getAllStudents();
@Insert("insert into student(id, name, gender, major, studentId, hobbies, phoneNumber, idCardNumber) values (#{id},#{name},#{gender},#{major},#{studentId},#{hobbies},#{phoneNumber},#{idCardNumber})")
    void addStudent(Student student);

    List<Student> sub(String name, String gender);
    @Select("select *from student where id =#{id}")
    Student getbyid(Integer id);

    void update(Student student);

    // Other mapper methods for update, delete and search
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzy.mapper.StudentMapper">
<select id="sub" resultType="com.wzy.pojo.Student">
    select *
    from student
    <where>
        <if test="name!=''">
            name like concat('%',#{name},'%')
        </if>
       <if test="gender!=''">
           and gender = #{gender}
       </if>
    </where>


</select>

    <update id="update">
        update student
        <set>
            <if test="name!=null and name!='' ">
                name=#{name},
            </if>
        <if test="gender!=null and gender!='' ">
            gender=#{gender},
        </if>
        <if test="major!=null and major!='' ">
            major=#{major},
        </if>
        <if test="studentId!=null and studentId!='' ">
            studentId=#{studentId},
        </if>
        <if test="hobbies!=null and hobbies!='' ">
            hobbies=#{hobbies},
        </if>
        <if test="phoneNumber!=null and phoneNumber!='' ">
            phoneNumber=#{phoneNumber},
        </if>
        <if test="idCardNumber!=null and idCardNumber!='' ">
            idCardNumber=#{idCardNumber},
        </if>
        </set>
        where id=#{id}
    </update>
</mapper>

 

标签：name,gender,element,result,vue2,hobbies,import,id,springboot
From： https://www.cnblogs.com/zeyangshuaige/p/17795730.html

相关文章

  • springboot 断点上传、续传、秒传实现
    前言springboot断点上传、续传、秒传实现。保存方式提供本地上传（单机）和minio上传（可集群）本文主要是后端实现方案，数据库持久化采用jpa一、实现思路前端生成文件md5，根据md5检查文件块上传进度或秒传需要上传分片的文件上传分片文件分片合并后上传服务器二、数据库表对象说明：Abs......
  • SpringBoot使用Redis分布式缓存
    Redis是一个key-value存储系统。和Memcached类似，它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)、zset(sortedset有序集合)和hash（哈希类型）。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基......
  • springboot项目实现断点续传功能
    这篇文章主要介绍了springboot项目实现断点续传,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 java代码packagecom.ruoyi.web.upload.controller;importcom.ruoyi.web.upload.dto.FileChunkDTO;importcom.ruoyi.......
  • web前端（Vue2.x）接收H264实时视频码流(二进制)进行播放
    1、安装 [email protected]、.vue文件中使用<template><div><videoid="dom_id"muted="muted"controlsclass="video_box"></video><divv-if="!has_data"v-loading="!......
  • 一些研发工程师在Springboot注意点
    一些研发工程师在Springboot注意点1.正确设计代码目录结构虽然您有很大的自由度，但有一些基本规则值得遵循来设计您的源代码结构。避免使用默认包。确保所有内容（包括入口点）都在命名良好的包中，这样您就可以避免与组装和组件扫描相关的意外情况；将Application.java（应用程序的入口类）......
  • SpringBoot 自定义注解实现过程
    1、新建SpringBoot-Test 其中pom.xml文件如下:<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schem......
  • vue2和vue3的区别
    vue2和vue3都是前端JavaScript框架，基本概念和功能大部分都相同,它们的区别主要在语法、原理、生态以及打包四个方面.语法：Vue.js2使用基于Object.defineProperty的双向绑定来追踪变化，而Vue.js3采用Proxy来实现响应式变化追踪，这提高了性能并允许更广泛的响应式追踪。在Vue.js3......
  • Pset_OpeningElementCommon
    Pset_OpeningElementCommonOpeningElementCommon：IfcOpeningElement所有实例定义的公共属性。  NameTypeDescriptionReferenceP_SINGLEVALUE / IfcIdentifierReferenzIDWirdverwendet,wennkeineallgemeinanerkanntesKlassifizierungssystemangewandt......
  • 详解SpringBoot @Conditional相关条件注解
    Springboot条件注解是@ContionalXXX相关的注解，表示当特定条件有效时，被修饰的配置类或配置方法才会生效。条件注解可以用来修饰@Configuration类或@Bean方法等。主要有以下行为：当SpringBoot检测到类加载路径包含某个框架时，会自动配置该框架的基础Bean.只有当开发者没配置某......
  • [vue学习]vue使用element时，报错解决。
    解决vue使用element时报错ERRORin./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf是因为字体文件没法引入的原因，只需要修改下webpackconfig的file-loader {test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader:'file-loader'}......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99