通过之前两篇文章的内容，我们已经可以做到访问我们的首页并实现页面之间的跳转，接下来就是最后一部分，关于jsp页面传数据到后端，以及后端将数据库里面的数据传输给前端。
一、前端JSP页面代码
首页登录页面，注意表单里面输入框的name属性，后端依靠这个属性来获取jsp页面的对应数据
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
</head>
<body style="text-align: center">
<img src="" height="600" width="100%" />
<form action="http://localhost:8080/sybonlinetestsystem_war_exploded/login/verify.action" method="post">
<div style="margin: 0 auto">
<label>用户名：</label>
<input type="text" name="number" />
<label>密 码：</label>
<input type="password" name="password" />
<input type="submit" value="登 录" style="display: inline-block; width: 100px" />
</div>
</form>
</body>
</html>
登录成功跳转图，注意 欢迎后面‘王老师’三个字，说明JSP页面获取到了后端传输的数据并显示到了页面上
<%--
Created by IntelliJ IDEA.
User: SoraHoro
Date: 2019/3/12 0012
Time: 20:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>SYB创业培训管理系统</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/syb_manage.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/syb_manage.css">
</head>
<body>
<div id="syb_manage_top">
<img src="" width="100%" height="100">
</div>
<div style="height: 30px;background-color: #0a73a7">
<span style="color: white">欢迎【${admin.name}】登录SYB考试管理系统</span>
<input type="button" value="退出" style="display: inline-block;width: 40px;height: 30px">
</div>
<div id="clearFloat">
<hr>
</div>
<div id="content">
<div id="leftNav">
<div id="mainMenu">
<span>主菜单</span>
</div>
<form action="" method="get">
<div id="menuNav">
<ul>
<li><a href="" target="iframe_a">成绩管理</a></li>
<li><a href="" target="iframe_a">学生管理</a></li>
<li><a href="" target="iframe_a">考试管理</a></li>
</ul>
</div>
</form>
</div>
<div id="forInterval">
</div>
<div id="rightNav">
<div id="ownFrame">
<span>SYB后台管理</span>
</div>
<iframe src="" name="iframe_a" style="width: 80%;height: 750px"></iframe>
</div>
</div>
</body>
</html>
二、后端代码
1.Controller层的代码
package com.alice.controller;
import com.alice.entity.AdminInfoEntity;
import com.alice.entity.UserAccountEntity;
import com.alice.service.IAdminInfoService;
import com.alice.service.IUserLoginService;
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 org.springframework.web.bind.annotation.RequestMethod;
import javax.servlet.http.HttpServletRequest;
/**
* 用户登录接口
*/
@Controller
@RequestMapping("/login")
public class UserLoginController {
@Autowired
private IUserLoginService userLoginService;
@Autowired
private IAdminInfoService adminInfoService;
@RequestMapping(value="/verify",method= RequestMethod.POST)
public String verify(HttpServletRequest request, Model model) {
String number = request.getParameter("number");
String password = request.getParameter("password");
UserAccountEntity userInfo = userLoginService.verifyLoginUser(number, password);
AdminInfoEntity admin = null;
if (userInfo != null && userInfo.getNumber() != null && !userInfo.getNumber().isEmpty())
{
admin = adminInfoService.getAdminInfoById(number);
}
else
{
return "admin_not_found";
}
model.addAttribute("admin", admin);
return "syb_manage";
}
}
2.Service层代码(这里就只展示service实现类的代码了，接口就不展示了)
package com.alice.service.impl;
import com.alice.entity.UserAccountEntity;
import com.alice.mapper.IUserAccountMapper;
import com.alice.service.IUserLoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class IUserLoginServiceImpl implements IUserLoginService {
@Autowired
private IUserAccountMapper userAccountMapper;
@Override
public UserAccountEntity verifyLoginUser(String number, String password) {
return userAccountMapper.verifyUserLogin(number, password);
}
}
//-------------------------------------------------------------------------------
//下面是另外一个service的代码
package com.alice.service.impl;
import com.alice.entity.AdminInfoEntity;
import com.alice.mapper.IAdminInfoMapper;
import com.alice.service.IAdminInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class IAdminInfoServiceImpl implements IAdminInfoService {
@Autowired
private IAdminInfoMapper adminInfoMapper;
@Override
public AdminInfoEntity getAdminInfoById(String adminNumber) {
return adminInfoMapper.getAdminInfoById(adminNumber);
}
}
3.Mapper层的代码
package com.alice.mapper;
import com.alice.entity.UserAccountEntity;
import com.alice.model.KeyValueVO;
import org.apache.ibatis.annotations.Param;
import java.util.List;
/**
* 用户账号mapper
*/
public interface IUserAccountMapper {
void addUser(UserAccountEntity user);
void deleteUser(List<String> numbers);
void updateUser(List<KeyValueVO> fieldAndValues);
UserAccountEntity verifyUserLogin(@Param("number") String number, @Param("password") String password);
}
//--------------------------------------------------------------------------------
//该mapper对应的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.alice.mapper.IUserAccountMapper">
<select id="verifyUserLogin" resultType="com.alice.entity.UserAccountEntity">
select * from user_account_info where number = #{param1} and password = #{param2};
</select>
</mapper>
//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
//下面是另外一个mapper接口的代码
package com.alice.mapper;
import com.alice.entity.AdminInfoEntity;
public interface IAdminInfoMapper {
AdminInfoEntity getAdminInfoById(String adminNumber);
}
//--------------------------------------------------------------------------------
//该mapper对应的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.alice.mapper.IAdminInfoMapper">
<select id="getAdminInfoById" resultType="com.alice.entity.AdminInfoEntity">
select * from admin_info where adminNumber = #{param1};
</select>
</mapper>
jsp传输数据给后端，是通过html控件的name属性绑定的，request通过参数名获取对应参数的值；而后端传输数据给jsp页面，可以用response获取，也可以通过el表达式，笔者用的就是后者。
最后贴上笔者登录成功的图：
基本上基于SSM框架的Web项目就是这些内容，后面其实相当于重复工作了，就是各种业务逻辑，这里就不写了，如果想看该项目的所有代码，可以去github上clone一份（欢迎欢迎，地址：https://github.com/persuation/sybonlinetestsystem.git）