首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue项目之学生管理系统实例详解_vue.js

作者：黄霖hy | 来源：互联网 | 2023-08-28 12:24
这篇文章主要为大家详细介绍了Vue项目之学生管理系统实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，

查询学生

步骤1：设置导航

 步骤2：添加路由

步骤3：创建页面

步骤：


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

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

  • 步骤3：页面加载成功时，查询第一页

  • 步骤4：遍历结果



添加学生

步骤1：设置导航

步骤2：添加路由

步骤3：创建页面

步骤：


  • 创建数据 班级数组 和 学生对象

  • 班级数据跟select绑定 table绑定学生对象

  • 发送post请求添加学生



修改学生

步骤1：设置导航

步骤2：添加路由

  步骤3：创建页面

步骤：


  • 先获得路由传参传过来的参数 存储到data数据区域 cid

  • 根据cid查询到学生 存储到student table对student进行数据双向关联

  • 修改学生信息 发送ajax请求



删除学生

步骤1：设置导航

步骤2：添加方法

步骤：

  • 根据cid发送ajax删除学生


后端

链接：https://pan.baidu.com/s/1GlS7hxzuwttHAp8bh1fbKQ

密码：hvac     

后端部分代码：

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

总结

查询学生

步骤1：设置导航

 步骤2：添加路由

步骤3：创建页面

步骤：


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

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

  • 步骤3：页面加载成功时，查询第一页

  • 步骤4：遍历结果



添加学生

步骤1：设置导航

步骤2：添加路由

步骤3：创建页面

步骤：


  • 创建数据 班级数组 和 学生对象

  • 班级数据跟select绑定 table绑定学生对象

  • 发送post请求添加学生



修改学生

步骤1：设置导航

步骤2：添加路由

  步骤3：创建页面

步骤：


  • 先获得路由传参传过来的参数 存储到data数据区域 cid

  • 根据cid查询到学生 存储到student table对student进行数据双向关联

  • 修改学生信息 发送ajax请求



删除学生

步骤1：设置导航

步骤2：添加方法

步骤：

  • 根据cid发送ajax删除学生


后端

链接：https://pan.baidu.com/s/1GlS7hxzuwttHAp8bh1fbKQ

密码：hvac     

后端部分代码：

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

总结


推荐阅读
  • list

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • string

    基于Net Core 3.0与Web API的前后端分离开发：Vue.js在前端的应用

    基于Net Core 3.0与Web API的前后端分离开发：Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发，并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作，开发环境为Windows 10和Visual Studio 2019，MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装，为开发者提供了一套完整的开发指南。 ... [详细]
  • controller

    深入解析几种常用的Java后端开发框架组合及其应用场景

    本文详细探讨了几种常用的Java后端开发框架组合及其具体应用场景。通过对比分析Spring Boot、MyBatis、Hibernate等框架的特点和优势，结合实际项目需求，为开发者提供了选择合适框架组合的参考依据。同时，文章还介绍了这些框架在微服务架构中的应用，帮助读者更好地理解和运用这些技术。 ... [详细]
  • object

    在List和Set集合中存储Object类型的数据元素

    在List和Set集合中存储Object类型的数据元素 ... [详细]
  • object

    优化后的标题：深入探讨网关安全：将微服务升级为OAuth2资源服务器的最佳实践

    优化后的标题：深入探讨网关安全：将微服务升级为OAuth2资源服务器的最佳实践
    本文深入探讨了如何将微服务升级为OAuth2资源服务器，以订单服务为例，详细介绍了在POM文件中添加 `spring-cloud-starter-oauth2` 依赖，并配置Spring Security以实现对微服务的保护。通过这一过程，不仅增强了系统的安全性，还提高了资源访问的可控性和灵活性。文章还讨论了最佳实践，包括如何配置OAuth2客户端和资源服务器，以及如何处理常见的安全问题和错误。 ... [详细]
  • string

    基于CXF框架的Web服务开发详细示例

    在Java Web服务开发中，Apache CXF 和 Axis2 是两个广泛使用的框架。CXF 由于其与 Spring 框架的无缝集成能力，以及更简便的部署方式，成为了许多开发者的首选。本文将详细介绍如何使用 CXF 框架进行 Web 服务的开发，包括环境搭建、服务发布和客户端调用等关键步骤，为开发者提供一个全面的实践指南。 ... [详细]
  • const

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧 ... [详细]
  • const

    Spring框架中枚举参数的正确使用方法与技巧

    Spring框架中枚举参数的正确使用方法与技巧
    本文详细阐述了在Spring Boot框架中正确使用枚举参数的方法与技巧，旨在帮助开发者更高效地掌握和应用枚举类型的数据传递，适合对Spring Boot感兴趣的读者深入学习。 ... [详细]
  • list

    Bootstrap 学习指南：全面掌握前端框架的核心知识点与实战技巧

    ### 优化后的摘要本学习指南旨在帮助读者全面掌握 Bootstrap 前端框架的核心知识点与实战技巧。内容涵盖基础入门、核心功能和高级应用。第一章通过一个简单的“Hello World”示例，介绍 Bootstrap 的基本用法和快速上手方法。第二章深入探讨 Bootstrap 与 JSP 集成的细节，揭示两者结合的优势和应用场景。第三章则进一步讲解 Bootstrap 的高级特性，如响应式设计和组件定制，为开发者提供全方位的技术支持。 ... [详细]
  • list

    Web开发框架概览：Java与JavaScript技术及框架综述

    Web开发框架概览：Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ... [详细]
  • string

    客户端与服务器之间的交互过程解析

    本文详细解析了客户端与服务器之间的交互过程，重点介绍了Socket通信机制。IP地址由32位的4个8位二进制数组成，分为网络地址和主机地址两部分。通过使用 `ipconfig /all` 命令，用户可以查看详细的IP配置信息。此外，文章还介绍了如何使用 `ping` 命令测试网络连通性，例如 `ping 127.0.0.1` 可以检测本机网络是否正常。这些技术细节对于理解网络通信的基本原理具有重要意义。 ... [详细]
  • list

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解
    在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]
  • import

    如何在Nginx服务器上轻松配置CertBot以实现SSL证书自动化管理

    为了确保iOS应用能够安全地访问网站数据，本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程，可以确保应用始终使用HTTPS协议，从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法，帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • filter

    ElasticStack 日志监控：Logstash 编码插件详解与生产环境应用实例分析

    在ElasticStack日志监控系统中，Logstash编码插件自5.0版本起进行了重大改进。插件被独立拆分为gem包，每个插件可以单独进行更新和维护，无需依赖Logstash的整体升级。这不仅提高了系统的灵活性和可维护性，还简化了插件的管理和部署过程。本文将详细介绍这些编码插件的功能、配置方法，并通过实际生产环境中的应用案例，展示其在日志处理和监控中的高效性和可靠性。 ... [详细]
  • string

    使用 ListView 浏览安卓系统中的回收站文件

    使用 ListView 浏览安卓系统中的回收站文件 ... [详细]
author-avatar
黄霖hy
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有