SpringMVC实战--构建学生管理系统(06)
首页部分学生管理页面(查询/添加功能)制作(在上篇博客基础上继续)
新建 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(); //获取数据
}
配置文件 StudentService.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>
输出:录入信息---成功将信息导入输入数据库且显示在页面上