初识 Spring(16)---(SpringMVC实战--构建学生管理系统（06））

于 2018-08-14 23:22:39 发布
阅读量441 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： # Spring Java 突破Spring框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jianghao233/article/details/81674896
本文介绍了一个使用SpringMVC框架实现的学生管理系统项目，包括学生信息的查询、展示及添加等功能，并详细展示了如何通过JSP页面与后端交互，实现从前端获取数据到数据库存储的全过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

SpringMVC实战--构建学生管理系统（06）

首页部分学生管理页面（查询/添加功能）制作（在上篇博客基础上继续）

（源代码见仓库：https://gitee.com/jianghao233/course）

新建 studentManger.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin-common.css"/>
		<script src="${pageContext.request.contextPath}/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/static/js/admin-student.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="class-title">
			学生列表
		</div>
		<div id="add-div">
			<input type="button" id="add-button" value="添加" onclick="add()"/>			
		</div>
		<table cellspacing="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>班级</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>150001</td>
				<td>张无忌</td>
				<td>123</td>
				<td>一班</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td>150002</td>
				<td>张三丰</td>
				<td>123</td>
				<td>一班</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td>150003</td>
				<td>郭靖</td>
				<td>123</td>
				<td>二班</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td>150004</td>
				<td>刘备</td>
				<td>123</td>
				<td>三班</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			<tr>
				<td>150005</td>
				<td>孙悟空</td>
				<td>123</td>
				<td>一班</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
		</table>
		<div id="form-div">
			<form action="" method="post">
				
				学号：<input type="text" name="stunum"/><br />
				姓名：<input type="text" name="stuname" /><br />
				密码：<input type="password" name="password" /><br />
				班级：<select name="classid" id="">
						<option value="1">一班</option>
						<option value="2">二班</option>
						<option value="3">三班</option>
						<option value="4">四班</option>
					</select>
				<input type="submit" value="提交"/>
			</form>
		</div>
	</body>
</html>

新建 StudentController.java

package com.neuedu.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
	@RequestMapping("/student")
	public class StudentController {
	
		@RequestMapping({"/","/list"})
		//查询所有学生信息
		public String list() {
		
			return "admin/studentManager";
		}
	}

修改 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin_index.css"/>
	</head>
	<body>
		<div id="header">
			
		</div>
		<div id="left">
			<ul id="nav">
				<li><a href="${pageContext.request.contextPath}/class/list" target="content">班级管理</a></li>
				<li><a href="${pageContext.request.contextPath}/student/" target="content">学生管理</a></li>    //修改代码
				<li><a href="courseManager.html" target="content">课程管理</a></li>
				<li><a href="scoreInManager.html" target="content">成绩录入</a></li>
			</ul>
		</div>
		<div id="right">
			<iframe id="iframe" name="content" src="" width="100%" height="700px"></iframe>
		</div>
	</body>
</html>

输出：点击学生管理页面，进入该页面

但和之前同样的问题，页面是写死的，不能从数据库动态获取数据

数据库信息：

修改代码：

新建接口 TbStudentMapper.java

package com.neuedu.mapper;

import java.util.List;

import com.neuedu.po.TbStudent;
import com.neuedu.vo.StudentVO;

public interface TbStudentMapper {
    int deleteByPrimaryKey(Integer stuid);

    int insert(TbStudent record);

    int insertSelective(TbStudent record);

    TbStudent selectByPrimaryKey(Integer stuid);

    int updateByPrimaryKeySelective(TbStudent record);

    int updateByPrimaryKey(TbStudent record);
    
    List<StudentVO> getList();     //接收数据
}

配置文件 TbStudentMapper.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.neuedu.mapper.TbStudentMapper" >
  <resultMap id="BaseResultMap" type="com.neuedu.po.TbStudent" >
    <id column="stuid" property="stuid" jdbcType="INTEGER" />
    <result column="stunum" property="stunum" jdbcType="CHAR" />
    <result column="stuname" property="stuname" jdbcType="VARCHAR" />
    <result column="password" property="password" jdbcType="VARCHAR" />
    <result column="classid" property="classid" jdbcType="INTEGER" />
    <result column="picurl" property="picurl" jdbcType="VARCHAR" />
  </resultMap>
  <sql id="Base_Column_List" >
    stuid, stunum, stuname, password, classid, picurl
  </sql>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from tb_student
    where stuid = #{stuid,jdbcType=INTEGER}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    delete from tb_student
    where stuid = #{stuid,jdbcType=INTEGER}
  </delete>
  <insert id="insert" parameterType="com.neuedu.po.TbStudent" >
    insert into tb_student (stuid, stunum, stuname, 
      password, classid, picurl
      )
    values (#{stuid,jdbcType=INTEGER}, #{stunum,jdbcType=CHAR}, #{stuname,jdbcType=VARCHAR}, 
      #{password,jdbcType=VARCHAR}, #{classid,jdbcType=INTEGER}, #{picurl,jdbcType=VARCHAR}
      )
  </insert>
  <insert id="insertSelective" parameterType="com.neuedu.po.TbStudent" >
    insert into tb_student
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="stuid != null" >
        stuid,
      </if>
      <if test="stunum != null" >
        stunum,
      </if>
      <if test="stuname != null" >
        stuname,
      </if>
      <if test="password != null" >
        password,
      </if>
      <if test="classid != null" >
        classid,
      </if>
      <if test="picurl != null" >
        picurl,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="stuid != null" >
        #{stuid,jdbcType=INTEGER},
      </if>
      <if test="stunum != null" >
        #{stunum,jdbcType=CHAR},
      </if>
      <if test="stuname != null" >
        #{stuname,jdbcType=VARCHAR},
      </if>
      <if test="password != null" >
        #{password,jdbcType=VARCHAR},
      </if>
      <if test="classid != null" >
        #{classid,jdbcType=INTEGER},
      </if>
      <if test="picurl != null" >
        #{picurl,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.neuedu.po.TbStudent" >
    update tb_student
    <set >
      <if test="stunum != null" >
        stunum = #{stunum,jdbcType=CHAR},
      </if>
      <if test="stuname != null" >
        stuname = #{stuname,jdbcType=VARCHAR},
      </if>
      <if test="password != null" >
        password = #{password,jdbcType=VARCHAR},
      </if>
      <if test="classid != null" >
        classid = #{classid,jdbcType=INTEGER},
      </if>
      <if test="picurl != null" >
        picurl = #{picurl,jdbcType=VARCHAR},
      </if>
    </set>
    where stuid = #{stuid,jdbcType=INTEGER}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.neuedu.po.TbStudent" >
    update tb_student
    set stunum = #{stunum,jdbcType=CHAR},
      stuname = #{stuname,jdbcType=VARCHAR},
      password = #{password,jdbcType=VARCHAR},
      classid = #{classid,jdbcType=INTEGER},
      picurl = #{picurl,jdbcType=VARCHAR}
    where stuid = #{stuid,jdbcType=INTEGER}
  </update>
  
  <select id="getList" resultType="com.neuedu.vo.StudentVO">
  	select s.*,c.classname from tb_student s,tb_class c where s.classid = c.classid
  </select>
</mapper>

新建接口 StudentService.java

package com.neuedu.service;

import java.util.List;

import com.neuedu.po.TbStudent;
import com.neuedu.vo.StudentVO;

public interface StudentService {

	public List<StudentVO> getList();   //获取数据
	
}

配置文件 StudentServiceImpl.java

package com.neuedu.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.neuedu.mapper.TbStudentMapper;
import com.neuedu.po.TbStudent;
import com.neuedu.service.StudentService;
import com.neuedu.vo.StudentVO;

@Service
public class StudentServiceImpl implements StudentService{
	@Autowired
	TbStudentMapper studentMapper;
	
	@Override
	public List<StudentVO> getList() {
		
		return studentMapper.getList();
	}

}

新建文件 StudentVO.java

package com.neuedu.vo;
//专门用来传递数据的包
import com.neuedu.po.TbStudent;

public class StudentVO extends TbStudent{
	private String classname;

	public String getClassname() {
		return classname;
	}

	public void setClassname(String classname) {
		this.classname = classname;
	}
	
}

修改代码：修改 StudentController.java

package com.neuedu.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.neuedu.po.TbStudent;
import com.neuedu.service.StudentService;
import com.neuedu.vo.StudentVO;

@Controller
	@RequestMapping("/student")                 //新增代码     
	public class StudentController {            
		@Autowired
		private StudentService studentService;
		@RequestMapping({"/","/list"})
		//查询所有学生信息
		public String list(Model model) {       //新增代码
			List<StudentVO> list = studentService.getList();
			model.addAttribute("list",list);    //新增代码
			return "admin/studentManager";
		}
	}

修改 studentManger.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin-common.css"/>
		<script src="${pageContext.request.contextPath}/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/static/js/admin-student.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="class-title">
			学生列表
		</div>
		<div id="add-div">
			<input type="button" id="add-button" value="添加" onclick="add()"/>			
		</div>
		<table cellspacing="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>班级</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${list }" var="s">    //修改代码

				<tr>
				<td>${s.stunum }</td>
				<td>${s.stuname }</td>
				<td>${s.password }</td>
				<td>${s.classname }</td>            //修改代码

				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			</c:forEach>
			
			
		</table>
		<div id="form-div">
			<form action="" method="post">
				
				学号：<input type="text" name="stunum"/><br />
				姓名：<input type="text" name="stuname" /><br />
				密码：<input type="password" name="password" /><br />
				班级：<select name="classid" id="">
						<option value="1">一班</option>
						<option value="2">二班</option>
						<option value="3">三班</option>
						<option value="4">四班</option>
					</select>
				<input type="submit" value="提交"/>
			</form>
		</div>
		
		<script type="text/javascript">
		$(function(){
			$('#form-div').hide();
		});
		function add(){                         //新增代码
			$('#form-div').show();
			$("#table").hide();
			$('#add-div').hide();
			$('#class-title').html("学生信息");   //新增代码

		}

		</script>
	</body>
</html>

输出：点击学生管理，进入到学生列表---点击添加按钮--跳转到 添加界面

但添加页面中提交那栏都是写死的，需要与数据库连接，拿到班级的数据

修改代码：修改 StudentController.java

package com.neuedu.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.neuedu.po.TbClass;
import com.neuedu.po.TbStudent;
import com.neuedu.service.ClassService;
import com.neuedu.service.StudentService;
import com.neuedu.vo.StudentVO;

@Controller
	@RequestMapping("/student")
	public class StudentController {
		@Autowired
		private ClassService classService;
		@Autowired
		private StudentService studentService;
		@RequestMapping({"/","/list"})
		//查询所有学生信息
		public String list(Model model) {
			List<StudentVO> list = studentService.getList();
			List<TbClass> classes = classService.getList();   //修改代码
			
			model.addAttribute("list",list);
			model.addAttribute("classes",classes);           //修改代码
			return "admin/studentManager";
		}
	}

修改 studentManger.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin-common.css"/>
		<script src="${pageContext.request.contextPath}/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/static/js/admin-student.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="class-title">
			学生列表
		</div>
		<div id="add-div">
			<input type="button" id="add-button" value="添加" onclick="add()"/>			
		</div>
		<table cellspacing="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>班级</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${list }" var="s">
				<tr>
				<td>${s.stunum }</td>
				<td>${s.stuname }</td>
				<td>${s.password }</td>
				<td>${s.classname }</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			</c:forEach>
			
			
		</table>
		<div id="form-div">
			<form action="" method="post">
				
				学号：<input type="text" name="stunum"/><br />
				姓名：<input type="text" name="stuname" /><br />
				密码：<input type="password" name="password" /><br />
				班级：<select name="classid" id="">
				
						<c:forEach items="${classes }" var="c">     //修改代码
							<option value="${c.classid }">${c.classname }</option>
						</c:forEach>                                 //修改代码
					</select>
				<input type="submit" value="提交"/>
			</form>
		</div>
		
		<script type="text/javascript">
		$(function(){
			$('#form-div').hide();
		});
		function add(){
			$('#form-div').show();
			$("#table").hide();
			$('#add-div').hide();
			$('#class-title').html("学生信息");
		}

		</script>
	</body>
</html>

输出：班级栏与数据库进行绑定，数据与班级中完全一样

但这些输入数据没有和数据库绑定，无法将输入数据保存到数据库中去，

修改代码

修改代码 StudentService.java

package com.neuedu.service;

import java.util.List;

import com.neuedu.po.TbStudent;
import com.neuedu.vo.StudentVO;

public interface StudentService {

	public List<StudentVO> getList();
	public void save(TbStudent tbStudent);    //新增代码
}

修改 StudentServiceImpl.java

package com.neuedu.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.neuedu.mapper.TbStudentMapper;
import com.neuedu.po.TbStudent;
import com.neuedu.service.StudentService;
import com.neuedu.vo.StudentVO;

@Service
public class StudentServiceImpl implements StudentService{
	@Autowired
	TbStudentMapper studentMapper;
	
	@Override
	public List<StudentVO> getList() {
		
		return studentMapper.getList();
	}
  
	@Override                                     //新增代码
	public void save(TbStudent tbStudent) {
		studentMapper.insertSelective(tbStudent);
		
	}                                            //新增代码

}

修改 StudentController.java

package com.neuedu.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.neuedu.po.TbClass;
import com.neuedu.po.TbStudent;
import com.neuedu.service.ClassService;
import com.neuedu.service.StudentService;
import com.neuedu.vo.StudentVO;

@Controller
	@RequestMapping("/student")
	public class StudentController {
		@Autowired
		private ClassService classService;
		@Autowired
		private StudentService studentService;
		@RequestMapping({"/","/list"})
		//查询所有学生信息
		public String list(Model model) {
			List<StudentVO> list = studentService.getList();
			List<TbClass> classes = classService.getList();
			
			model.addAttribute("list",list);
			model.addAttribute("classes",classes);
			return "admin/studentManager";
		}
		@RequestMapping("/save")                    //新增代码
		public String save(TbStudent tbStudent) {
			studentService.save(tbStudent);
			return "redirect:/student/";
		}                                             //新增代码
	}

修改 studentManger.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin-common.css"/>
		<script src="${pageContext.request.contextPath}/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/static/js/admin-student.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="class-title">
			学生列表
		</div>
		<div id="add-div">
			<input type="button" id="add-button" value="添加" onclick="add()"/>			
		</div>
		<table cellspacing="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>班级</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${list }" var="s">
				<tr>
				<td>${s.stunum }</td>
				<td>${s.stuname }</td>
				<td>${s.password }</td>
				<td>${s.classname }</td>
				<td>
					<a href="">编辑</a>
					<a href="">删除</a>
				</td>
			</tr>
			</c:forEach>
			
			
		</table>
		<div id="form-div">
			<form action="${pageContext.request.contextPath}/student/save" method="post">//修改代码
				
				学号：<input type="text" name="stunum"/><br />
				姓名：<input type="text" name="stuname" /><br />
				密码：<input type="password" name="password" /><br />
				班级：<select name="classid" id="">
				
						<c:forEach items="${classes }" var="c">
							<option value="${c.classid }">${c.classname }</option>
						</c:forEach>
					</select>
				<input type="submit" value="提交"/>
			</form>
		</div>
		
		<script type="text/javascript">
		$(function(){
			$('#form-div').hide();
		});
		function add(){
			$('#form-div').show();
			$("#table").hide();
			$('#add-div').hide();
			$('#class-title').html("学生信息");
		}

		</script>
	</body>
</html>

输出：录入信息---成功将信息导入输入数据库且显示在页面上

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值