定制软件开发Vue项目：学生管理系统

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

查询学生

步骤1：设置导航

 步骤2：添加路由

步骤3：创建页面

  • 步骤：

    • 步骤1：准备2个变量（、studentVo）

    • 步骤2：编写查询condition函数，接收参数num

    • 步骤3：定制软件开发页面加载成功时，查询第一页

    • 步骤4：遍历结果

  1. <template>
  2.     <div>
  3.         班级： <select v-model = "studentVo.cid">
  4.             <option value="" disabled>--请选择--</option>
  5.             <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
  6.         </select>
  7.         姓名：<input type="text" v-model = "studentVo.studentName">
  8.         年龄：<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
  9.         <input type="button" value = "查询" @click = "conditionStudent()">
  10.         <table border="1">
  11.             <tr>
  12.                 <td>ID</td>
  13.                 <td>班级</td>
  14.                 <td>姓名</td>
  15.                 <td>年龄</td>
  16.                 <td>生日</td>
  17.                 <td>性别</td>
  18.                 <td>操作</td>
  19.             </tr>
  20.             <tr v-for = "(student,index) in pageInfo.list" :key="index">
  21.                 <td>{{student.sid}}</td>
  22.                 <td>{{student.classes == null ? student.cname : student.classes.cname}}</td>
  23.                 <td>{{student.sname}}</td>
  24.                 <td>{{student.age}}</td>
  25.                 <td>{{student.birthday}}</td>
  26.                 <td>{{student.gender == 1 ? '男' : '女'}}</td>
  27.                 <td>
  28.                     <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link>
  29.                     <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
  30.                 </td>
  31.             </tr>
  32.         </table>
  33.  
  34.         <!-- 分页 start -->
  35.         当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
  36.         每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
  37.             <option value="1">1</option>
  38.             <option value="2">2</option>
  39.             <option value="3">3</option>
  40.             <option value="5">5</option>
  41.             <option value="10">10</option>
  42.         </select>条
  43.  
  44.         <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
  45.         <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
  46.         <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
  47.         <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
  48.         <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
  49.         跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
  50.         <!-- 分页 end -->
  51.     </div>
  52. </template>
  53.  
  54. <script>
  55. import axios from 'axios'
  56.  
  57. export default {
  58.     data() {
  59.         return {
  60.             classesList:[],
  61.             studentVo: {
  62.                 cid:''
  63.             },
  64.             pageInfo:{
  65.                 pageNum:1,
  66.                 pageSize:2
  67.             }
  68.         }
  69.     },
  70.     methods:{
  71.         async selectClasses(){
  72.             let { data: baseResult } = await axios.get("http://localhost:8888/classes");  
  73.             this.classesList = baseResult.data
  74.         },
  75.  
  76.         async conditionStudent(num){
  77.             if(num){
  78.                 this.pageInfo.pageNum = num
  79.             }
  80.             var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;
  81.             let {data: baseResult} = await axios.post(url,this.studentVo);
  82.             this.pageInfo = baseResult.data
  83.         },
  84.     },
  85.     mounted(){
  86.         //查询所有班级
  87.         this.selectClasses();
  88.         //查询所有学生
  89.         this.conditionStudent();
  90.     }
  91. }
  92. </script>
  93.  
  94. <style>
  95.  
  96. </style>

添加学生

步骤1：设置导航

步骤2：添加路由

步骤3：创建页面

步骤：

  • 创建数据 班级数组 和 学生对象
  • 班级数据跟select绑定 table绑定学生对象
  • 发送post请求添加学生
  1. <template>
  2.   <div>
  3.     <table border="1">
  4.       <tr>
  5.         <td>ID</td>
  6.         <td>
  7.           <input type="text" v-model = "student.sid">
  8.         </td>
  9.       </tr>
  10.       <tr>
  11.         <td>班级</td>
  12.         <td>
  13.           <select v-model = "student.cid">
  14.             <option value="">--请选择--</option>
  15.             <option :value="classes.cid" v-for = "(classes,index) in classesList" :key="index">{{classes.cname}}</option>
  16.           </select>
  17.         </td>
  18.       </tr>
  19.       <tr>
  20.         <td>姓名</td>
  21.         <td>
  22.           <input type="text" v-model = "student.sname">
  23.         </td>
  24.       </tr>
  25.       <tr>
  26.         <td>年龄</td>
  27.         <td> 
  28.           <input type="text" v-model = "student.age">
  29.         </td>
  30.       </tr>
  31.       <tr>
  32.         <td>生日</td>
  33.         <td>
  34.           <input type="date" v-model = "student.birthday">
  35.         </td>
  36.       </tr>
  37.       <tr>
  38.         <td>性别</td>
  39.         <td>
  40.           <input type="radio" v-model = "student.gender" value = "1"> 男
  41.           <input type="radio" v-model = "student.gender" value = "0"> 女
  42.         </td>
  43.       </tr>
  44.       <tr>
  45.         <td colspan="2">
  46.           <input type="button" value = "添加学生" @click = "addStudent()">
  47.         </td>
  48.       </tr>
  49.     </table>
  50.   </div>
  51. </template>
  52.  
  53. <script>
  54. import axios from 'axios'
  55.  
  56. export default {
  57.   data() {
  58.     return {
  59.       classesList:[],
  60.       student:{}
  61.     }
  62.   },
  63.   methods:{
  64.       async selectClasses(){
  65.         let {data:baseResult} = await axios.get(`http://localhost:8888/classes`);
  66.         this.classesList = baseResult.data
  67.       },
  68.       async addStudent(){
  69.         var url = "http://localhost:8888/student";
  70.         let { data: baseResult } = await axios.post(url,this.student);
  71.         if(baseResult.code == 20000){
  72.             this.$router.push('/studentList')
  73.         }else{
  74.           alert(baseResult.message)
  75.         }
  76.       }
  77.   },
  78.   mounted(){
  79.     //查询所有班级
  80.     this.classesList = this.selectClasses();
  81.   }
  82. }
  83. </script>
  84.  
  85. <style>
  86.  
  87. </style>

修改学生

步骤1：设置导航

步骤2：添加路由

  

步骤3：创建页面

步骤：

  • 先获得路由传参传过来的参数 存储到data数据区域 cid
  • 根据cid查询到学生 存储到student table对student进行数据双向关联
  • 修改学生信息 发送ajax请求
  1. <template>
  2.     <div>
  3.         <table border = "1">
  4.             <tr>
  5.                 <td>编号</td>
  6.                 <td>
  7.                     {{ classes.cid }}
  8.                 </td>
  9.             </tr>
  10.             <tr>
  11.                 <td>班级名称</td>
  12.                 <td>
  13.                     <input type="text" v-model = "classes.cname">
  14.                 </td>
  15.             </tr>
  16.             <tr>
  17.                 <td>班级描述</td>
  18.                 <td>
  19.                     <textarea name="" id="" cols="30" rows="10" v-model = "classes.desc"></textarea>
  20.                 </td>
  21.             </tr>
  22.             <tr>
  23.                 <td colspan="2">
  24.                     <input type="text" value = "修改" @click = "editClasses()">
  25.                 </td>
  26.             </tr>
  27.         </table>
  28.     </div>
  29. </template>
  30.  
  31. <script>
  32. import axios from 'axios';
  33. export default {
  34.     data() {
  35.         return {
  36.             classes:{},
  37.             cid:'',
  38.         };
  39.     },
  40.     methods:{
  41.         async selectClassesById(){
  42.             let url = `http://localhost:8888/classes/${this.cid}`;
  43.             let { data: baseResult } = await axios.get(url);
  44.             this.classes = baseResult.data
  45.         },
  46.  
  47.         async editClasses(){
  48.             var url = `http://localhost:8888/classes`;
  49.             let { data: baseResult } = await axios.put(url,this.classes);
  50.             if(baseResult.code == 20000){
  51.                 this.$router.push("/classesList");
  52.             }else{
  53.                 alert(baseResult.message);
  54.             }
  55.         }
  56.     },
  57.     mounted(){
  58.         //获得cid
  59.         this.cid = this.$route.params.cid;
  60.         //根据id查询班级信息
  61.         this.selectClassesById();
  62.     }
  63. }
  64. </script>
  65.  
  66. <style>
  67.  
  68. </style>

删除学生

步骤1：设置导航

步骤2：添加方法

步骤：

  • 根据cid发送ajax删除学生
  1. <template>
  2.     <div>
  3.         班级： <select v-model = "studentVo.cid">
  4.             <option value="" disabled>--请选择--</option>
  5.             <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
  6.         </select>
  7.         姓名：<input type="text" v-model = "studentVo.studentName">
  8.         年龄：<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
  9.         <input type="button" value = "查询" @click = "conditionStudent()">
  10.         <table border="1">
  11.             <tr>
  12.                 <td>ID</td>
  13.                 <td>班级</td>
  14.                 <td>姓名</td>
  15.                 <td>年龄</td>
  16.                 <td>生日</td>
  17.                 <td>性别</td>
  18.                 <td>操作</td>
  19.             </tr>
  20.             <tr v-for = "(student,index) in pageInfo.list" :key="index">
  21.                 <td>{{student.sid}}</td>
  22.                 <td>{{student.classes == null ? student.cname : student.classes.cname}}</td>
  23.                 <td>{{student.sname}}</td>
  24.                 <td>{{student.age}}</td>
  25.                 <td>{{student.birthday}}</td>
  26.                 <td>{{student.gender == 1 ? '男' : '女'}}</td>
  27.                 <td>
  28.                     <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link>
  29.                     <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
  30.                 </td>
  31.             </tr>
  32.         </table>
  33.  
  34.         <!-- 分页 start -->
  35.         当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
  36.         每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
  37.             <option value="1">1</option>
  38.             <option value="2">2</option>
  39.             <option value="3">3</option>
  40.             <option value="5">5</option>
  41.             <option value="10">10</option>
  42.         </select>条
  43.  
  44.         <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
  45.         <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
  46.         <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
  47.         <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
  48.         <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
  49.         跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
  50.         <!-- 分页 end -->
  51.     </div>
  52. </template>
  53.  
  54. <script>
  55. import axios from 'axios'
  56.  
  57. export default {
  58.     data() {
  59.         return {
  60.             classesList:[],
  61.             studentVo: {
  62.                 cid:''
  63.             },
  64.             pageInfo:{
  65.                 pageNum:1,
  66.                 pageSize:2
  67.             }
  68.         }
  69.     },
  70.     methods:{
  71.         async selectClasses(){
  72.             let { data: baseResult } = await axios.get("http://localhost:8888/classes");  
  73.             this.classesList = baseResult.data
  74.         },
  75.  
  76.         async conditionStudent(num){
  77.             if(num){
  78.                 this.pageInfo.pageNum = num
  79.             }
  80.             var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;
  81.             let {data: baseResult} = await axios.post(url,this.studentVo);
  82.             this.pageInfo = baseResult.data
  83.         },
  84.  
  85.         async deleteStudent(sid){
  86.             if(!confirm("您确定要删除么？")){
  87.                 return
  88.             }
  89.  
  90.             let {data : baseResult} = await axios.delete(`http://localhost:8888/student/${sid}`)
  91.             if(baseResult.code == 20000){
  92.                 this.conditionStudent(1);
  93.             }else {
  94.                     alert(baseResult.message)
  95.             }
  96.         }
  97.     },
  98.     mounted(){
  99.         //查询所有班级
  100.         this.selectClasses();
  101.         //查询所有学生
  102.         this.conditionStudent();
  103.     }
  104. }
  105. </script>
  106.  
  107. <style>
  108.  
  109. </style>

后端

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

密码：2002        

后端部分代码：

  1. package com.czxy.controller;
  2.  
  3. import com.czxy.domain.Student;
  4. import com.czxy.service.StudentService;
  5. import com.czxy.vo.BaseResult;
  6. import com.czxy.vo.StudentVo;
  7. import com.github.pagehelper.PageInfo;
  8. import org.springframework.web.bind.annotation.*;
  9.  
  10. import javax.annotation.Resource;
  11.  
  12. /**
  13.  * @Author 刘嘉俊
  14.  * @Date 2022/2/21
  15.  */
  16. @RestController
  17. @RequestMapping("/student")
  18. @CrossOrigin
  19. public class StudentController {
  20.  
  21.     @Resource
  22.     private StudentService studentService;
  23.  
  24.     @PostMapping("/condition/{pageSize}/{pageNum}")
  25.     public BaseResult condition(
  26.             @PathVariable("pageSize") Integer pageSize,
  27.             @PathVariable("pageNum") Integer pageNum,
  28.             @RequestBody StudentVo studentVo) {
  29.  
  30.         // 查询
  31.         PageInfo<Student> pageInfo = studentService.condition(pageSize,pageNum,studentVo);
  32.  
  33.         // 返回结果
  34.         return BaseResult.ok("查询成功", pageInfo);
  35.     }
  36.  
  37.     @GetMapping("/{sid}")
  38.     public BaseResult selectById(@PathVariable("sid") String sid){
  39.         Student student = studentService.selectById(sid);
  40.  
  41.         return BaseResult.ok("查询成功",student);
  42.     }
  43.  
  44.     @PutMapping
  45.     public BaseResult update(@RequestBody Student student){
  46.         System.out.println(student);
  47.         try {
  48.             boolean result = studentService.update(student);
  49.             if(result){
  50.                 return BaseResult.ok("更新成功");
  51.             }else{
  52.                 return BaseResult.error("更新失败");
  53.             }
  54.         } catch (Exception e) {
  55.             e.printStackTrace();
  56.             return BaseResult.error(e.getMessage());
  57.         }
  58.     }
  59.  
  60.     @DeleteMapping("/{sid}")
  61.     public BaseResult delete(@PathVariable("sid")String sid){
  62.         System.out.println("sid" + sid);
  63.         try {
  64.             boolean result = studentService.delete(sid);
  65.             if(result){
  66.                 return BaseResult.ok("删除成功");
  67.             }
  68.             return BaseResult.error("删除失败");
  69.         } catch (Exception e) {
  70.             e.printStackTrace();
  71.             return BaseResult.error(e.getMessage());
  72.         }
  73.     }
  74.  
  75.     @PostMapping
  76.     public BaseResult addStudent(@RequestBody Student student){
  77.         try {
  78.             boolean result = studentService.addStudent(student);
  79.             if(result){
  80.                 return BaseResult.ok("添加成功");
  81.             }
  82.             return BaseResult.error("添加失败");
  83.         } catch (Exception e) {
  84.             e.printStackTrace();
  85.             return BaseResult.error(e.getMessage());
  86.         }
  87.     }
  88. }

源码获取

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发