用Mybatis实现学生成绩管理系统的学生查询、添加、删除、修改操作
后端代码
配置mybatis.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><!--配置文件-->
<!--mybatis核心配置文件-->
<!--导入属性文件-->
<properties resource="config.properties"></properties>
<!--全局设置-->
<settings>
<!--日志组件配置-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
<!--从数据库命名 user_gender 自动映射到Java userGende-->
<setting name="mapUnderscoreToCamelCase" value="true"/>
<!--开启mybatis二级缓存功能-->
<setting name="cacheEnabled" value="true"/>
</settings>
<!--配置类型别名-->
<typeAliases>
<typeAlias type="studentmybatisPro.model.User" alias="User"></typeAlias>
<typeAlias type="studentmybatisPro.model.Grade" alias="Grade"></typeAlias>
<typeAlias type="studentmybatisPro.model.Student" alias="Student"></typeAlias>
</typeAliases>
<!--配置与数据库的连接信息-->
<environments default="development">
<environment id="development">
<!--配置数据事物管理方式-->
<transactionManager type="JDBC"/>
<!--数据源配置 type="POOLED" 使用数据库连接池功能-->
<dataSource type="POOLED">
<!--数据库连接-->
<property name="driver" value="${driverClassName}"/>
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
</dataSource>
</environment>
</environments>
<!--sql映射-->
<mappers>
<mapper resource="mapper/LoginMapper.xml"></mapper>
<mapper resource="mapper/StudentMapper.xml"></mapper>
</mappers>
</configuration>
配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--登录配置-->
<servlet>
<servlet-name>loginServlet</servlet-name>
<servlet-class>studentmybatisPro.servlet.loginServlet_back</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/loginServlet</url-pattern><!--定义url-->
</servlet-mapping>
<!-- 配置学生管理servlet-->
<servlet>
<servlet-name>StudentServlet</servlet-name>
<servlet-class>studentmybatisPro.servlet.StudentServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>StudentServlet</servlet-name>
<url-pattern>/back/StudentServlet</url-pattern>
</servlet-mapping>
<!--退出-->
<servlet>
<servlet-name>logOutServlet</servlet-name>
<servlet-class>studentmybatisPro.servlet.logOutServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>logOutServlet</servlet-name>
<url-pattern>/back/logOutServlet</url-pattern><!--定义url-->
</servlet-mapping>
<!--配置过滤器-->
<filter>
<filter-name>encoding</filter-name>
<filter-class>studentmybatisPro.filter.EncodingFilter</filter-class>
<!--为过滤器配置参数-->
<init-param>
<param-name>charset</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<!--配置哪些请求可以进入到此过滤器-->
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>/*</url-pattern><!--表示所有请求都进入到过滤器-->
</filter-mapping>
<!--跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>studentmybatisPro.filter.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--后端验证用户是否登录-->
<filter>
<filter-name>isLogin</filter-name>
<filter-class>studentmybatisPro.filter.IsLoginFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>isLogin</filter-name>
<url-pattern>/back/*</url-pattern>
</filter-mapping>
</web-app>
util
把重复使用的mybatis代码封装起来，创建util包，建立mybatisUtil
package studentmybatisPro.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class mybatisUtil {
/*加载类时，静态代码块只执行一次*/
static SqlSessionFactory sqlSessionFactory;
//在mybatisUtil第一次加载时，初始化好SqlSessionFactory
static
{
String resource = "mybatis.xml";
//读取mybatis配置文件
InputStream inputStream = null;
try {
inputStream = Resources.getResourceAsStream(resource);
} catch (IOException e) {
e.printStackTrace();
}
/*
构造出一个SqlSessionFactory对象,用来创建SqlSession对象，
在一个项目中由于SqlSessionFactory创建开销较大，一个项目中只创建一个，
*/
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
}
public static SqlSession getSqlSession()
{
return sqlSessionFactory.openSession();
}
}
model
Grade
package studentmybatisPro.model;
import java.io.Serializable;
public class Grade implements Serializable{
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Student
package studentmybatisPro.model;
import java.io.Serializable;
import java.util.Date;
public class Student implements Serializable {
private Integer id;//null 如果是基本类型就是0
private Integer no;
private String name;
private String gender;
private Grade grade ;//类与类的关联关系 has-a关系
private String phone;
private String address;
private Date regTime;
private User user;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getNo() {
return no;
}
public void setNo(Integer no) {
this.no = no;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Grade getGrade() {
return grade;
}
public void setGrade(Grade grade) {
this.grade = grade;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public Date getRegTime() {
return regTime;
}
public void setRegTime(Date regTime) {
this.regTime = regTime;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
@Override
public String toString() {
return "Student{" +
"id=" + id +
", no=" + no +
", name='" + name + '\'' +
", gender='" + gender + '\'' +
", grade=" + grade +
", phone='" + phone + '\'' +
", address='" + address + '\'' +
", regTime='" + regTime + '\'' +
", user=" + user +
'}';
}
}
User
package studentmybatisPro.model;
import java.io.Serializable;
public class User implements Serializable {
private int id;
private String account;
private String password;
private String gender;
public int getId() {
return id;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", account='" + account + '\'' +
", password='" + password + '\'' +
", gender='" + gender + '\'' +
'}';
}
public void setId(int id) {
this.id = id;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
filter
CorsFilter
package studentmybatisPro.filter;
//跨域过滤器
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*注解标签的方式配置*/
@WebFilter
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
System.out.println("跨域过滤器");
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}
EncodingFilter
package studentmybatisPro.filter;
import javax.servlet.*;
import java.io.IOException;
/*
* 编码过滤器
* */
public class EncodingFilter implements Filter {
//过滤器生命周期开始于服务器的启动
//过滤器需要执行的功能
String charset;
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("编码过滤器初始化");
//FilterConfig 是 Servlet API 提供的一个用于获取 Filter 程序在 web.xml 文件中的配置信息的接口
//getInitParameter(String name)，该方法用来获得过滤器的初始化参数值。
charset = filterConfig.getInitParameter("charset");
}
/*
过滤器需要执行的功能
* */
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
System.out.println("编码过滤器");
servletRequest.setCharacterEncoding(charset);
servletResponse.setContentType("text/html;charset=utf-8");
// filterChain(过滤链)让请求离开过滤器，继续向下执行
filterChain.doFilter(servletRequest,servletResponse);
}
}
IsLoginFilter
package studentmybatisPro.filter;
/*
*后端过滤器验证用户是否失效
* */
import studentmybatisPro.model.User;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class IsLoginFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
System.out.println("islogin");
//把夫类型转换成子类型
HttpServletRequest request = (HttpServletRequest)servletRequest;//servletRequest是HttpServletRequest的父类，要向下转型
//获得session
HttpSession session = request.getSession();
//获得session中的用户信息
User user = (User)session.getAttribute("user");//session.getAttribute()是Object类型，要转换
if(user!=null)
{
filterChain.doFilter(servletRequest,servletResponse);
}else
{
servletResponse.getWriter().println(5);//后端判定登录失效，向前端响应状态码5
}
}
}
前端发送请求，servlet接收和返回请求，servlet将数据发送到service，service连接数据库发送数据到Dao，Dao调用方法，Mapper中编写sql语句。
servlet
loginServlet_back
package studentmybatisPro.servlet;
import com.google.gson.Gson;
import studentmybatisPro.model.User;
import studentmybatisPro.service.LoginService;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class loginServlet_back extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account = req.getParameter("account");
String password = req.getParameter("password");
System.out.println(account+":"+password);
LoginService loginService = new LoginService();
try
{
User user = loginService.login(account,password);
if(user== null)
{
//resp.getWriter().println("账号或密码错误");//响应体（数据）
resp.getWriter().println(0);
}else{
/*
* 登录成功后，需要在后端将用户信息保存在session中
* */
HttpSession session = req.getSession();
System.out.println("dopost:"+session.getId());
session.setAttribute("user",user);//将用户信息存储到session中
Gson gson = new Gson();
String json = gson.toJson(user);
resp.getWriter().println(json);//直接打印对象,默认调用对象toString()
}
}catch (Exception e)
{
e.printStackTrace();
resp.getWriter().println(1);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
HttpSession session = req.getSession();//之后的请求，可以根据请求中的session找到对应session对象
System.out.println("doGet:"+session.getId());
User user = (User)session.getAttribute("user");//null
if(user == null)
{
resp.getWriter().println(3);
}
System.out.println(session.isNew());
}
}
logOutServlet
package studentmybatisPro.servlet;
import studentmybatisPro.Dao.LoginDao;
import studentmybatisPro.model.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
public class logOutServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//删除session中的用户信息
req.getSession().removeAttribute("user");
//req.getSession().invalidate();销毁当前session对象
}
}
StudentServlet
package studentmybatisPro.servlet;
import com.google.gson.Gson;
import studentmybatisPro.model.Grade;
import studentmybatisPro.model.Student;
import studentmybatisPro.model.User;
import studentmybatisPro.service.StudentService;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class StudentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp){
String mark = req.getParameter("mark");
if(mark.equals("list"))
{
findStudentList(req,resp);
}
if(mark.equals("gradeList")){
findGradeList(req,resp);
}
}
/*
* 学生列表数据查询接口
* */
private void findStudentList(HttpServletRequest req, HttpServletResponse resp) {
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try{
out = resp.getWriter();
String no = req.getParameter("no");
String name = req.getParameter("name");
String gender = req.getParameter("gender");
StudentService studentService = new StudentService();
List<Student> list = studentService.findStudents(no,name,gender);
out.print(new Gson().toJson(list));//[{name:aa,age:22},{},{}]
}catch(Exception e){
e.printStackTrace();
out.print(500);
}
}
private void findGradeList(HttpServletRequest req, HttpServletResponse resp) {
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try{
out = resp.getWriter();
String id = req.getParameter("id");
StudentService studentService = new StudentService();
List<Grade> list = studentService.findGrades();
if(id == null)
{
out.print(new Gson().toJson(list));//[{name:aa,age:22},{},{}]
}
}catch(Exception e){
e.printStackTrace();
out.print(500);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String mark = req.getParameter("mark");
if("save".equals(mark))
{
saveStudent(req,resp);
}
}
/*保存学生信息*/
private void saveStudent(HttpServletRequest req, HttpServletResponse resp) {
PrintWriter out = null;
try {
out = resp.getWriter();
//接收请求的数据
String id = req.getParameter("id");
String no = req.getParameter("no");
String name = req.getParameter("name");
String gender = req.getParameter("gender");
String gradeid = req.getParameter("gradeid");
String phone = req.getParameter("phone");
String address = req.getParameter("address");
//获得当前登录的操作人
HttpSession session = req.getSession();
User user = (User)session.getAttribute("user");
StudentService studentService = new StudentService();
if(id == null)
{
studentService.saveStudent(no,name,gender,gradeid,phone,address,user);
}
out.print(200);
} catch (Exception e) {
e.printStackTrace();
out.print(500);
}
}
}
service
LoginService
package studentmybatisPro.service;
import org.apache.ibatis.session.SqlSession;
import studentmybatisPro.Dao.LoginDao;
import studentmybatisPro.model.User;
import studentmybatisPro.util.mybatisUtil;
public class LoginService {
public User login(String account, String password)
{
User user = new User();
user.setAccount(account);
user.setPassword(password);
SqlSession sqlSession = mybatisUtil.getSqlSession();
LoginDao logindao = sqlSession.getMapper(LoginDao.class);
User u = logindao.login(user);//null
sqlSession.close();
return u;
}
}
StudentService
package studentmybatisPro.service;
import org.apache.ibatis.session.SqlSession;
import studentmybatisPro.Dao.StudentDao;
import studentmybatisPro.model.Grade;
import studentmybatisPro.model.Student;
import studentmybatisPro.model.User;
import studentmybatisPro.util.mybatisUtil;
import java.util.List;
public class StudentService {
public List<Student> findStudents(String no, String name, String gender)
{
SqlSession sqlSession = mybatisUtil.getSqlSession();
StudentDao studentDao = sqlSession.getMapper(StudentDao.class);
Student student = new Student();
if(no!=null&&"".equals(no) )
{
student.setNo(Integer.parseInt(no));
}
student.setName(name);
student.setGender(gender);
List<Student> list = studentDao.findStudents(student);
sqlSession.close();
return list;
}
public List<Grade> findGrades()
{
SqlSession sqlSession = mybatisUtil.getSqlSession();
StudentDao studentDao = sqlSession.getMapper(StudentDao.class);
List<Grade> list = studentDao.findGrades();
sqlSession.close();
return list;
}
public void saveStudent(String no, String name, String gender, String gradeid, String phone, String address, User user) {
SqlSession sqlSession = mybatisUtil.getSqlSession();
StudentDao studentDao = sqlSession.getMapper(StudentDao.class);
//封装数据
Student student = new Student();
student.setNo(Integer.parseInt(no));
student.setName(name);
student.setGender(gender);
student.setPhone(phone);
student.setAddress(address);
Grade grade = new Grade();
grade.setId(Integer.parseInt(gradeid));
student.setGrade(grade);
student.setUser(user);
studentDao.saveStudent(student);
sqlSession.commit();
sqlSession.close();
}
}
Dao
LoginDao
package studentmybatisPro.Dao;
import studentmybatisPro.model.User;
public interface LoginDao {
User login(User user);
}
StudentDao
package studentmybatisPro.Dao;
import studentmybatisPro.model.Grade;
import studentmybatisPro.model.Student;
import java.util.List;
public interface StudentDao {
void saveStudent(Student student);
List<Student> findStudents(Student student);
List<Grade> findGrades();
}
Mapper
LoginMapper.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">
<!--sql映射文件 namespace唯一标识 namespace名字必须与接口的类路径一致-->
<mapper namespace="studentmybatisPro.Dao.LoginDao">
<select id="login" parameterType="User" resultType="User">
select id,account from user where account=#{account} and password=#{password}
</select>
</mapper>
StudentMapper.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">
<!--sql映射文件 namespace唯一标识 namespace名字必须与接口的类路径一致-->
<mapper namespace="studentmybatisPro.Dao.StudentDao">
<cache></cache>
<resultMap id="studentMap" type="Student">
<id column="id" property="id"></id>
<result column="no" property="no"></result>
<result column="sname" property="name"></result>
<result column="gender" property="gender"></result>
<result column="phone" property="phone"></result>
<result column="address" property="address"></result>
<result column="reg_time" property="regTime"></result>
<association property="grade" javaType="Grade">
<result column="gname" property="name"></result>
</association>
<association property="user" javaType="User">
<result column="account" property="account"></result>
</association>
</resultMap>
<select id="findStudents" parameterType="Student" resultMap="studentMap" useCache="true">
select
s.id,
s.no,
s.name sname,
s.gender,
g.name gname,
s.phone,
s.address,
s.reg_time,
u.account
from student s left join grade g on s.gradeid=g.id
left join user u on s.userid = u.id
<where>
<if test="no!=null">
s.no = #{no}
</if>
<if test="name!=null & name!=''">
s.name = #{name}
</if>
<if test="gender!=null & gender!=''">
s.gender = #{gender}
</if>
</where>
</select>
<select id="findGrades" resultType="Grade" useCache="true">
select * from grade
</select>
<insert id="saveStudent" parameterType="Student" >
insert into student(no,name,gender,gradeid,phone,address,reg_time,userid)
value(#{no},#{name},#{gender},#{grade.id},#{phone},#{address},now(),#{user.id})
</insert>
</mapper>
dao和mapper是对应的，mapper中的namespace标签就是dao里一个Java Class。
前端
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/login.css" rel="stylesheet" />
<!--导入 axios js 包 -->
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function login()
{
var account = document.getElementById("accountid").value;
var password = document.getElementById("passwordid").value;
axios.post(serverPath +"/loginServlet",
"account="+account+"&password="+password)
.then(function(resp){
if(resp.data == 0)
{
console.log(resp.data); // 测试data是否传进来
document.getElementById("accountMsgid").innerHTML = "账号或密码错误";
}else if(resp.data == 1)
{
document.getElementById("accountMsgid").innerHTML = "系统忙";
}else{
//console.log(resp);
sessionStorage.setItem("id",resp.data.id);
sessionStorage.setItem("account",resp.data.account);
/*
响应中关注数据
resp.data 响应回来的数据 默认下已经转为js对象了*/
location.replace("main.html");
}
})
}
</script>
</head>
<body>
<div class="login_box">
<div class="login_l_img"><img src="img/login-img.png" /></div>
<div class="login">
<div class="login_logo"><a href="#"><img src="img/login_logo.png" /></a></div>
<div class="login_name">
<p>后台管理系统</p>
</div>
<form method="post">
<input type="text" placeholder="账号" id="accountid">
<span id="accountMsgid"></span><br/>
<input type="password" placeholder="密码" id="passwordid" />
<input value="登录" style="width:100%;" type="button" onclick="login()">
</form>
</div>
<div class="copyright">喵喵有限公司 版权所有©2016-2018 技术支持电话：000-00000000</div>
</div>
</body>
</html>
main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>信息管理系统界面</title>
<link href="css/back.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
<script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function showUserInfo(){
var id = sessionStorage.getItem("id");
var account = sessionStorage.getItem("account");
if(account == null)
{
location.replace("login.html");
return;
}
document.getElementById("accountid").innerHTML =account;
}
/* 退出 */
function logOut(){
axios.post(serverPath +"/back/logOutServlet").then(function(resp){
location.replace("login.html");
});
}
</script>
</head>
<body onload="showUserInfo()">
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr style="background:url(img/backimg/topbg.gif) repeat-x;">
<td colspan="2">
<div class="topleft">
<img src="img/backimg/logo.png" title="系统首页" />
</div>
<div class="topright">
<ul>
<li><a href="javaScript:void(0)" onclick="logOut()">退出</a></li>
</ul>
<div class="user">
<span id="accountid"></span>
</div>
</div>
</td>
</tr>
<tr>
<td width="187" valign="top" height="100%" style="background:#f0f9fd;">
<div class="lefttop"><span></span>操作菜单</div>
<dl class="leftmenu">
<dd>
<div class="title">
<span><img src="img/backimg/leftico01.png" /></span>
<a href="">管理信息</a>
</div>
<ul class="menuson">
<li><cite></cite>
<a href="student/list.html" target="rightFrame">学生管理</a>
</li>
</ul>
</dd>
</dl>
</td>
<td>
<iframe name="rightFrame" src="" width="100%" height="600"></iframe>
</td>
</tr>
</table>
</body>
</html>
student
list.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/back.css" rel="stylesheet" type="text/css" />
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
/* 加载学生管理页面，自动向后端发送加载数据 */
function loadStudentList()
{
axios.get(serverPath+"/back/StudentServlet?mark=list").then(function(resp){
if(resp.data == 5)
{
alert("登录过期，请重新登录");
window.parent.location.replace("../login.html");
}else if(resp.data == 500)
{
alert("查询失败");
}else{
//动态生产表格
console.log(resp.data.length);
var s = "";
for (var i = 0; i < resp.data.length; i++) {
s +="<tr>"
s +="<td>"+(i+1)+"</td>"
s +="<td>"+resp.data[i].no+"</td>"
s +="<td>"+resp.data[i].name+"</td>"
s +="<td>"+resp.data[i].gender+"</td>"
s +="<td>"+resp.data[i].grade.name+"</td>"
s +="<td>"+resp.data[i].phone+"</td>"
s +="<td>"+resp.data[i].address+"</td>"
s +="<td>"+new Date(resp.data[i].regTime).toLocaleString()+"</td>"
s +="<td>"+resp.data[i].user.account+"</td>"
s +="<td> <a href='update.html?id="+resp.data[i].id+"'>修改</a> "
s += "<a href='javaScript:void(0)' οnclick='deleteStudent("+resp.data[i].id+")'>删除</a> </td>"
s +="</tr>"
}
//获得表格，为表格添加数据
//+的原因：没有+就会覆盖表头
document.getElementById("tableid").innerHTML += s;
}
});
}
//删除学生信息的方法
function deleteStudent(id)
{
var res = confirm("您确定要删除吗？");//确认对话框
if(res)
{
axios.get(serverPath+"/back/StudentServlet?mark=delete&id="+id)
.then(function(resp)
{
if(resp.data == 5)
{
alert("登录过期，请重新登录");
window.parent.location.replace("../login.html");
}else if(resp.data == 500)
{
alert("删除失败");
}else{
location.reload();
}
})
}
}
</script>
</head>
<body onload="loadStudentList()">
<div class="rightinfo">
<!-- 顶部按钮 -->
<div class="tools">
<ul class="toolbar">
<a href="add.html" >
<li class="click">
<span><img src="../img/backimg/t01.png" /></span>
添加
</li>
</a>
</ul>
</div>
<!--数据列表 -->
<table class="tablelist" id="tableid">
<tr>
<th>编号<i class="sort"><img src="../img/backimg/px.gif" /></i></th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年级</th>
<th>电话</th>
<th>地址</th>
<th>操作时间</th>
<th>操作人</th>
<th>操作</th>
</tr>
<!-- <tr>
<td>20130908</td>
<td>王金平幕僚：马英九声明字字见血 人活着没意思</td>
<td>admin</td>
<td>江苏南京</td>
<td>2013-09-09 15:05</td>
<td>已审核</td>
<td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink"> 删除</a></td>
</tr> -->
</table>
</div>
</body>
</html>
add.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/back.css" rel="stylesheet" type="text/css" />
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function loadGrade(){
axios.get(serverPath+"/back/StudentServlet?mark=gradeList").then(function(resp){
if(resp.data == 5)
{
alert("登录过期，请重新登录");
window.parent.location.replace("../login.html");
}else if(resp.data == 500)
{
alert("查询失败");
}else{
//动态生产下拉框选项
var s ="";
for (var i = 0; i < resp.data.length; i++) {
s += "<option value='"+resp.data[i].id+"'>"+resp.data[i].name+"</option>"
}
document.getElementById("gradeid").innerHTML += s;
}
});
}
function checkNo(no)
{
//把no向后端发送，在数据库中查询是否存在，返回0不存在，返回1已存在
}
function save()
{
//获取表单值
var no = document.getElementById("noid").value;
var name = document.getElementById("nameid").value;
var genders = document.getElementsByName("gender");
var gender = "";
for (var i = 0; i < genders.length; i++) {
if(genders[i].checked==true){
gender = genders[i].value;
}
}
var gradeid = document.getElementById("gradeid").value;
var phone = document.getElementById("phoneid").value;
var address = document.getElementById("addressid").value;
axios.post(serverPath+"/back/StudentServlet",
"mark=save&no="+no+"&name="+name+"&gender="+gender+"&gradeid="+gradeid+"&phone="+phone+"&address="+address
).then(function(resp){
if(resp.data == 5)
{
alert("登录过期，请重新登录");
window.parent.location.replace("../login.html");
}else if(resp.data == 500)
{
alert("保存失败");
}else{
alert("保存成功");
location.replace("list.html");
}
});
}
</script>
</head>
<body onload="loadGrade()">
<form>
<div class="formbody">
<div class="formtitle"><span>基本信息</span></div>
<ul class="forminfo">
<li>
<label>学号</label>
<input id="noid" type="text" class="dfinput" onblur="checkNo(this.value)"/>
</li>
<li>
<label>姓名</label>
<input id="nameid" type="text" class="dfinput" />
</li>
<li>
<label>性别</label>
<input name="gender" type="radio" value="男" checked="checked" />男
<input name="gender" type="radio" value="女" />女
</li>
<li>
<label>年级</label>
<select class="dfinput" id="gradeid">
</select>
</li>
<li>
<label>电话</label>
<input type="text" class="dfinput"id="phoneid" />
</li>
<li>
<label>地址</label>
<input type="text" class="dfinput" id="addressid"/>
</li>
<li>
<input type="button" class="btn" value="确认保存" onclick="save()"/>
</li>
</ul>
</div>
</form>
</body>
</html>
- 在本次练习的过程中，编写添加学生的时候在StudentServic中少写 student.setGrade(grade);导致后面运行前端报错 s +=""+resp.data[i].grade.name+""，之后在数据库手动添加了缺少的grade之后就可正常运行。
版权声明：本文为weixin_43645809原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。