Vue项目:学生管理系统

这篇具有很好参考价值的文章主要介绍了Vue项目:学生管理系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


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

查询学生

步骤1:设置导航

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

 步骤2:添加路由

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤3:创建页面

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

  • 步骤:

    • 步骤1:准备2个变量(pageInfo、studentVo)

    • 步骤2:编写查询condition函数,接收参数num

    • 步骤3:页面加载成功时,查询第一页

    • 步骤4:遍历结果

<template>
    <div>
        班级: <select v-model = "studentVo.cid">
            <option value="" disabled>--请选择--</option>
            <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
        </select>
        姓名:<input type="text" v-model = "studentVo.studentName">
        年龄:<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
        <input type="button" value = "查询" @click = "conditionStudent()">
        <table border="1">
            <tr>
                <td>ID</td>
                <td>班级</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>生日</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for = "(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes == null ? student.cname : student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? '男' : '女'}}</td>
                <td>
                    <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link>
                    <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
                </td>
            </tr>
        </table>

        <!-- 分页 start -->
        当前第 {{pageInfo.pageNum}}页,共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
        每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>条

        <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
        <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
        <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
        <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
        <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
        跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
        <!-- 分页 end -->
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            classesList:[],
            studentVo: {
                cid:''
            },
            pageInfo:{
                pageNum:1,
                pageSize:2
            }
        }
    },
    methods:{
        async selectClasses(){
            let { data: baseResult } = await axios.get("http://localhost:8888/classes");  
            this.classesList = baseResult.data
        },

        async conditionStudent(num){
            if(num){
                this.pageInfo.pageNum = num
            }
            var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;
            let {data: baseResult} = await axios.post(url,this.studentVo);
            this.pageInfo = baseResult.data
        },
    },
    mounted(){
        //查询所有班级
        this.selectClasses();
        //查询所有学生
        this.conditionStudent();
    }
}
</script>

<style>

</style>

添加学生

步骤1:设置导航

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤2:添加路由

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤3:创建页面

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤:

  • 创建数据 班级数组 和 学生对象
  • 班级数据跟select绑定 table绑定学生对象
  • 发送post请求添加学生
<template>
  <div>
    <table border="1">
      <tr>
        <td>ID</td>
        <td>
          <input type="text" v-model = "student.sid">
        </td>
      </tr>
      <tr>
        <td>班级</td>
        <td>
          <select v-model = "student.cid">
            <option value="">--请选择--</option>
            <option :value="classes.cid" v-for = "(classes,index) in classesList" :key="index">{{classes.cname}}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>姓名</td>
        <td>
          <input type="text" v-model = "student.sname">
        </td>
      </tr>
      <tr>
        <td>年龄</td>
        <td> 
          <input type="text" v-model = "student.age">
        </td>
      </tr>
      <tr>
        <td>生日</td>
        <td>
          <input type="date" v-model = "student.birthday">
        </td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" v-model = "student.gender" value = "1"> 男
          <input type="radio" v-model = "student.gender" value = "0"> 女
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="button" value = "添加学生" @click = "addStudent()">
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      classesList:[],
      student:{}
    }
  },
  methods:{
      async selectClasses(){
        let {data:baseResult} = await axios.get(`http://localhost:8888/classes`);
        this.classesList = baseResult.data
      },
      async addStudent(){
        var url = "http://localhost:8888/student";
        let { data: baseResult } = await axios.post(url,this.student);
        if(baseResult.code == 20000){
            this.$router.push('/studentList')
        }else{
          alert(baseResult.message)
        }
      }
  },
  mounted(){
    //查询所有班级
    this.classesList = this.selectClasses();
  }
}
</script>

<style>

</style>

修改学生

步骤1:设置导航

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤2:添加路由

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java  

步骤3:创建页面

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤:

  • 先获得路由传参传过来的参数 存储到data数据区域 cid
  • 根据cid查询到学生 存储到student table对student进行数据双向关联
  • 修改学生信息 发送ajax请求
<template>
    <div>
        <table border = "1">
            <tr>
                <td>编号</td>
                <td>
                    {{ classes.cid }}
                </td>
            </tr>
            <tr>
                <td>班级名称</td>
                <td>
                    <input type="text" v-model = "classes.cname">
                </td>
            </tr>
            <tr>
                <td>班级描述</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10" v-model = "classes.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" value = "修改" @click = "editClasses()">
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            classes:{},
            cid:'',
        };
    },
    methods:{
        async selectClassesById(){
            let url = `http://localhost:8888/classes/${this.cid}`;
            let { data: baseResult } = await axios.get(url);
            this.classes = baseResult.data
        },

        async editClasses(){
            var url = `http://localhost:8888/classes`;
            let { data: baseResult } = await axios.put(url,this.classes);
            if(baseResult.code == 20000){
                this.$router.push("/classesList");
            }else{
                alert(baseResult.message);
            }
        }
    },
    mounted(){
        //获得cid
        this.cid = this.$route.params.cid;
        //根据id查询班级信息
        this.selectClassesById();
    }
}
</script>

<style>

</style>

删除学生

步骤1:设置导航

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤2:添加方法

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

步骤:

  • 根据cid发送ajax删除学生
<template>
    <div>
        班级: <select v-model = "studentVo.cid">
            <option value="" disabled>--请选择--</option>
            <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
        </select>
        姓名:<input type="text" v-model = "studentVo.studentName">
        年龄:<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
        <input type="button" value = "查询" @click = "conditionStudent()">
        <table border="1">
            <tr>
                <td>ID</td>
                <td>班级</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>生日</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for = "(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes == null ? student.cname : student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? '男' : '女'}}</td>
                <td>
                    <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link>
                    <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
                </td>
            </tr>
        </table>

        <!-- 分页 start -->
        当前第 {{pageInfo.pageNum}}页,共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
        每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>条

        <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
        <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
        <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
        <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
        <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
        跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
        <!-- 分页 end -->
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            classesList:[],
            studentVo: {
                cid:''
            },
            pageInfo:{
                pageNum:1,
                pageSize:2
            }
        }
    },
    methods:{
        async selectClasses(){
            let { data: baseResult } = await axios.get("http://localhost:8888/classes");  
            this.classesList = baseResult.data
        },

        async conditionStudent(num){
            if(num){
                this.pageInfo.pageNum = num
            }
            var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;
            let {data: baseResult} = await axios.post(url,this.studentVo);
            this.pageInfo = baseResult.data
        },

        async deleteStudent(sid){
            if(!confirm("您确定要删除么?")){
                return
            }

            let {data : baseResult} = await axios.delete(`http://localhost:8888/student/${sid}`)
            if(baseResult.code == 20000){
                this.conditionStudent(1);
            }else {
                    alert(baseResult.message)
            }
        }
    },
    mounted(){
        //查询所有班级
        this.selectClasses();
        //查询所有学生
        this.conditionStudent();
    }
}
</script>

<style>

</style>

后端

链接:https://pan.baidu.com/s/1032Wkr58iZfPJ7baJSsqiw 

密码:2002        

后端部分代码:

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;

/**
 * @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());
        }
    }
}

源码获取

vue学生信息管理系统,vue.js,前端,前端框架,elementui,java

 vue学生信息管理系统,vue.js,前端,前端框架,elementui,java文章来源地址https://www.toymoban.com/news/detail-787274.html

到了这里,关于Vue项目:学生管理系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue实战项目】通用管理系统:信息列表,信息的编辑和删除

    本文为博主的vue实战小项目系列中的第七篇,很适合后端或者才入门的小伙伴看,一个前端项目从0到1的保姆级教学。前面的内容: 【vue实战项目】通用管理系统:登录页-CSDN博客 【vue实战项目】通用管理系统:封装token操作和网络请求-CSDN博客 【vue实战项目】通用管理系统

    2024年02月03日
    浏览(48)
  • html+css+js 学生信息管理系统

    需求:Web前端开发技术完成管理系统后台管理功能,主要包括用户登录、系统主界面(要求直接跳转到用户管理界面,可选做一个系统后台管理主界面,用户管理作为主界面下的某个子功能,)并实现一个具体功能增、删、改的界面设计。 1. 用户登录 输入账号、密码。如果账号

    2023年04月11日
    浏览(41)
  • 前端三大件html,css,js原生实现学生信息管理系统(课程设计)

      目录结构如该图所示,只要将文件命名成图上三种。代码即可正常运行。分别有三个文件,一个是app.js,放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。 运行效果图:   代码:  app.js login页面 studentList.

    2024年02月04日
    浏览(65)
  • Python项目开发案例————学生信息管理系统(附源码)

              本文使用Python语言开发了一个学生信息管理系统,该系统可以帮助教师快速录入学生的信息,并且对学生的信息进行基本的增、删、改、查操作;还可以实时地将学生的信息保存到磁盘文件中。         为了顺应互联网时代用户的获取数据需求,学生信息管理系统

    2024年02月11日
    浏览(51)
  • 基于ssm+vue.js+uniapp小程序的快递信息管理系统附带文章和源代码部署视频讲解等

    🌞 博主介绍 :✌CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战,以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简

    2024年04月12日
    浏览(55)
  • 用Vue写教务系统学生管理

    2024年02月05日
    浏览(36)
  • python+vue 大学生社团管理系统

    本系统分为学生,管理员,社团负责人三个角色,学生可以注册登陆系统,查看社团,申请入团,查看参加社团活动,查看社团新闻,社团负责人对社团信息,入团审核,社团新闻,社团活动和资费进行管理;管理员对学生信息,社团信息,负责人信息,新闻信息,活动信息

    2023年04月23日
    浏览(66)
  • springboot+vue大学生足球队管理系统 java

      (1) 系统管理: 用户分为超级管理员、球队管理员、球队球员、游客,以区分不同用户的操作权限,用户的登录退出。 (2) 前台页面: 1.网站首页:展示系统简介,部分赛事信息,部分院系球队信息,部分球员信息,部分球队公告。 2.赛事信息:展示院系之间球队的赛事安排

    2024年02月08日
    浏览(41)
  • 基于SpringBoot+Vue的学生宿舍管理系统(Java毕业设计)

    【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我

    2024年02月03日
    浏览(61)
  • 基于springboot+Vue的大学生高校学科竞赛报名管理系统

    ( 4)学生: 个人中心:此页面,用户可查看其个人信息,可进行修改个人信息操作; 个人竞赛报名模块:查看已创建的学科竞赛,并可报名。 团队竞赛报名模块:查看已创建的学科竞赛,并可报名。 报名记录模块:查看报名记录,也可查看审核状态。 通知模块:可查看竞

    2023年04月22日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包