SrpingBoot+Vue实现学生信息管理

学生选课系统
- 一、采用技术
- 二、功能实现
- - 1.响应到前端的结果集
  - 2.解决前后端跨域问题
  - 3.登录
  - 4.学生查询
  - 5.增加学生
  - 6.编辑学生信息
  - 7.删除学生

学生选课系统

学生信息管理系统采用前后端分离方式实现，通过前后端交互数据实现学生信息的增删查改。

一、采用技术

后端：springboot+mybatis-plus
前端：vue+element-ui

二、功能实现

1.响应到前端的结果集

package com.student.course.bean.response;import lombok.Data;@Data
public class Result<T> {private Integer code = CodeEnum.SUCCESS.getCode();private String msg = CodeEnum.SUCCESS.getMsg();private boolean success = Boolean.TRUE;private T data;private long total;public Result(){}/*** 返回成功类的方法*/public static <T> Result<T> buildEmptySuccess(){return new Result<>();}public static <T> Result<T> buildEmptySuccess(T t){Result<T> result = buildEmptySuccess();result.setData(t);return result;}public static <T> Result<T> buildEmptySuccess(T t, long total){Result<T> result = buildEmptySuccess(t);result.setTotal(total);return result;}/***失败类方法*/public static <T> Result<T> buildFailure(String msg){Result<T> result = new Result<>();result.setCode(null);result.setMsg(msg);result.setSuccess(false);return result;}public static <T> Result<T> buildFailure(Integer code,String msg){Result<T> result = new Result<>();result.setCode(code);result.setMsg(msg);result.setSuccess(false);return result;}public static <T> Result<T> buildFailure(CodeEnum codeEnum){Result<T> result = new Result<>();result.setCode(codeEnum.getCode());result.setMsg(codeEnum.getMsg());result.setSuccess(false);return result;}public boolean isSuccess(){return success;}}

2.解决前后端跨域问题

后端：设置允许跨域的配置文件

package com.student.course.config;import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;public class WebMvcConfig implements WebMvcConfigurer {/*** 配置允许跨域* @param registry*/@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:9090").allowedHeaders("*").allowCredentials(true).allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE").maxAge(3600);}
}

前端：使用axios技术解决跨域

import axios from 'axios'
import { BASE_URL } from '@/config/constants'
import qs from 'qs'
import { MessageBox } from 'element-ui'axios.defaults.baseURL = BASE_URL
axios.defaults.timeout = 1000 * 60 * 3
axios.defaults.headers["content-Type"] = "application/json"/*** 给axios实例添加请求、响应拦截器* @param getInstancee*/function addInterceptors (axiosInstance) {//请求拦截器axiosInstance.interceptors.request.use( config => {return config}, error => {console.log("请求发送失败",error)MessageBox.alert("请求发送失败","错误提示")});//响应拦截器axiosInstance.interceptors.response.use( resultWrapper => {let result = resultWrapper.dataif (result.success){return result;}else{MessageBox.alert(result.msg,"错误提示")}}, error => {console.log("请求发送失败",error)MessageBox.alert("服务器响应失败","错误提示")return Promise.reject("服务器响应失败")});}
/*** 用来发送get请求的axios的实例*/let getInstancee = axios.create()addInterceptors(getInstancee);/*** 用来发送post请求的axios的实例*/let postInstance = axios.create({method: "post",headers: {"Content-Type": "application/x-www-form-urlencoded"},transformRequest: [function (data,headers){console.log("data:",data)qs.stringify(data)}]
})
addInterceptors(postInstance);let jsonpostInstance = axios.create({method: "post",
})
addInterceptors(jsonpostInstance);export function doGet (config) {return getInstancee(config);
}export function doPost (config) {return postInstance(config);
}export function dojsonPost (config) {return jsonpostInstance(config);
}

3.登录

验证用户名、密码成功后，生成token，并发送给前端

servie层：

@Overridepublic Result<JwtManagerVO> login(LoginRequest loginRequest) {LambdaQueryWrapper<Manager> qw = new LambdaQueryWrapper<>();qw.eq(Manager::getUser_name,loginRequest.getUser_name()).eq(Manager::getPwd,loginRequest.getPwd());Manager manager = managerMapper.selectOne(qw);if(manager==null){return Result.buildFailure("用户名或密码不正确");}JwtManagerVO jwtManager = generateToken(manager);return Result.buildEmptySuccess(jwtManager);}

实现如下：

后端获取数据如下：

4.学生查询

采用分页插件查询

Page工具类：

package com.student.course.util;import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.student.course.bean.response.Result;import java.util.List;public class PageUtil {public static void startPage(Integer pageNow, Integer pageSize){PageHelper.startPage(pageNow,pageSize);}public static <T> Result<List<T>> wrapPageData(List<T> queryList){PageInfo<T> pageInfo = new PageInfo<>(queryList);return Result.buildEmptySuccess(queryList,pageInfo.getTotal());}
}

service层：

 @Overridepublic Result<List<StudentVO>> searchStudent(CommonSearchReq searchReq) {PageUtil.startPage(searchReq.getPageNow(),searchReq.getPageSize());List<StudentVO> students = studentMapper.queryList(searchReq);return PageUtil.wrapPageData(students);}

查询如下：

5.增加学生

@Override@Transactional(rollbackFor = Exception.class)public void add(StudentAddReq addReq) {LambdaQueryWrapper<Student> qw = new LambdaQueryWrapper<>();qw.eq(Student::getNo,addReq.getNo());Integer count = studentMapper.selectCount(qw);if(count > 0){return;}Student student = new Student();BeanUtils.copyProperties(addReq,student);studentMapper.insert(student);}

实现如下：

6.编辑学生信息

service层：

 @Override@Transactional(rollbackFor = Exception.class)public void updateById(StudentUpdateReq studentUpdateReq) {Student student = new Student();BeanUtils.copyProperties(studentUpdateReq,student);studentMapper.updateById(student);}

实现如下：

7.删除学生

 @Override@Transactional(rollbackFor = Exception.class)public void deleteById(Long id) {studentMapper.deleteById(id);}

实现如下：

SrpingBoot+Vue实现学生信息管理相关推荐

html写学生信息管理,vue实现简单学生信息管理案例
学生信息管理 #app{ margin: 10px; } 学号: 姓名: 搜索姓名关键字: 学号姓名添加时间操作 {{item.stuNo}}{{item.name}}{{item.cTime | d ...
springboot学生信息管理的设计与实现毕业设计源码191219
摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻挡的时尚潮流,人类发展的历史正进入一个新时代. ...
springboot+学生信息管理毕业设计-附源码191219
学生信息管理的设计与实现摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻挡的时尚潮流,人类发 ...
java和vue的学生健康管理系统疫情打卡系统
需求:关注学生健康数据以及疫情打卡系统分两个角色:学生和管理员演示视频 https://www.bilibili.com/video/BV1iD4y1h74F/?share_source=copy ...
vue+elementui学生宿舍管理系统(报修,来访登记,水电费)java ssm项目介绍
宿舍,是大学生在高校校园里一个重要的学习.生活.交往的空间环境,大学生大约有2/3的时间是在宿舍环境里渡过的.作为计算机应用的一部分,使用计算机对宿舍信息进行管理,具有着手工管理所无法比拟的优点.例如 ...
实践hibernate的应用——struts2+hibernate的简单学生信息管理
struts2+hibernate的简单学生信息管理,没有用很好的界面,目的主要是为了实践一下hibernate框架的学习,深入了解hibernate框架. 下面是项目的目录: 配置文件hiberna ...
c语言学生信息管理系统框架,vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下界面代码 vue--学生信息管理系统 .title{margin:20px;font-weight: bold;f ...
学生管理系统服务器端设计,学生信息管理系统设计与实现
摘要: 学生信息管理是整个学校管理工作中的关键环境之一,采用计算机信息技术和网络技术来管理学生信息是大势所趋.一个高质量的学生管理信息系统能够为学校管理者提供及时,正确的学生信息,提高管理水平. 针对 ...
c语言程序设计报告链表,c语言程序设计报告链表实现学生信息管理.docx
C语言课程设计报告链表实现学生信息管理一．课程设计目标 C语言课程设计的目的是通过课程设计的综合训练,培养学生实际分析问题.编程和动手能力,最终目标是通过这种形式,帮助学生系统掌握该门课程的主要内 ...

SrpingBoot+Vue实现学生信息管理

SrpingBoot+Vue实现学生信息管理

学生选课系统

一、采用技术

二、功能实现

1.响应到前端的结果集

2.解决前后端跨域问题

3.登录

4.学生查询

5.增加学生

6.编辑学生信息

7.删除学生

SrpingBoot+Vue实现学生信息管理相关推荐

最新文章

热门文章