前言：本篇前后端交互實(shí)現(xiàn)代碼 。詳細(xì)項(xiàng)目搭建見上篇
先貼一張登錄界面和包結(jié)構(gòu)：
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-503036.html
一、代碼：
1.Mapper
public interface UserMapper {
/**
* 根據(jù)用戶名和密碼查詢用戶對(duì)象
* @param username
* @param password
* @return
*/
@Select("select * from tb_user where username = #{username} and password = #{password}")
User select(@Param("username") String username,@Param("password") String password);
/**
* 根據(jù)用戶名查詢用戶對(duì)象
* @param username
* @return
*/
@Select("select * from tb_user where username = #{username}")
User selectByUsername(String username);
/**
* 添加用戶
* @param user
*/
@Insert("insert into tb_user values(null,#{username},#{password})")
void add(User user);}
2.pojo
public class User {
private Integer id;
private String username;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
3.util
public class SqlSessionFactoryUtils {
private static SqlSessionFactory sqlSessionFactory;
static {
//靜態(tài)代碼塊會(huì)隨著類的加載而自動(dòng)執(zhí)行，且只執(zhí)行一次
try {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}4.web
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收用戶名和密碼
String username = request.getParameter("username");
String password = request.getParameter("password");
//2. 調(diào)用MyBatis完成查詢
//2.1 獲取SqlSessionFactory對(duì)象
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2.2 獲取SqlSession對(duì)象
SqlSession sqlSession = sqlSessionFactory.openSession();
//2.3 獲取Mapper
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//2.4 調(diào)用方法
User user = userMapper.select(username, password);
//2.5 釋放資源
sqlSession.close();
//獲取字符輸出流，并設(shè)置content type
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
//3. 判斷user釋放為null
if(user != null){
// 登陸成功
writer.write("登陸成功");
}else {
// 登陸失敗
writer.write("登陸失敗");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
5.Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv">
<form action="loginServlet" method="post" id="form">
<h1 id="loginMsg">登錄</h1>
<p>Username:<input id="username" name="username" type="text"></p>
<p>Password:<input id="password" name="password" type="password"></p>
<div id="subDiv">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
<!-- <a href="register.html">沒有賬號(hào)？點(diǎn)擊注冊(cè)</a>-->
</div>
</form>
</div>
</body>
</html>6.CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(../imgs/img.png) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
#username{
width: 200px;
}
#password{
width: 202px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
#subDiv {
text-align: center;
margin-top: 30px;
}
#loginMsg{
text-align: center;color: aliceblue;
}二、總結(jié)
我的企業(yè)版過(guò)期了，不能演示跳轉(zhuǎn)頁(yè)面了。但測(cè)過(guò)沒問(wèn)題。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-503036.html
到了這里，關(guān)于一個(gè)簡(jiǎn)單的前后端交互——登錄注冊(cè)頁(yè)面（升級(jí)版）idea代碼篇（2：Maven：Javaweb項(xiàng)目）使用MyBatis：Mapper，servlet+Tomcat的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
