通過之前兩篇文章的內容，我們已經可以做到訪問我們的首頁並實現頁面之間的跳轉，接下來就是最後一部分，關於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）