独立开发一个javaweb项目2：实现登陆开发
首先导入前端模板：
然后修改一下输入框这里，需要添加一个from表单，并且在两个input框中加入id 和name，然后复选框默认一个value为1，也就是选中了，登陆按钮也添加一个事件：
<form action="user" method="post" id="loginForm">
<p class="p user_icon">
<input type="text" placeholder="账号" autocomplete="off" class="login_txtbx" id="userName" name="userName">
</p>
<p class="p pwd_icon">
<input type="text" placeholder="密码" autocomplete="off" class="login_txtbx" id="userPwd" name="userPwd">
</p>
<label>
<input id="remember-me" type="checkbox" value="1" name="rem"> <p style="color: white; display: inline;">记住我</p>
<span id="msg" style="color: red;font-size: 12px"></span><br /><br />
</label>
<div class="signup">
<a class="gv" href="#" onclick="checkLogin()">登 录</a>
<a class="gv" href="#">清 空</a>
</div>
</form>然后我们需要写对应的checkLogin:
function checkLogin() {
// 1. 获取用户名称与密码
var userName = $("#userName").val(); // 用户名
var userPwd = $("#userPwd").val(); // 密码
// 2. 判断用户名或密码是否为空
if (isEmpty(userName)) {
// 如果为空，则提示用户
$("#msg").html("用户名称不能为空！");
return;
}
if (isEmpty(userPwd)) {
// 如果为空，则提示用户
$("#msg").html("用户密码不能为空！");
return;
}
// 3. 如果不为空，提交表单
$("#loginForm").submit();
}上面用到了已经封装好的一个isEmpty方法在util.js下面：
/** * 判断字符串是否为空 * 为空，返回true * 不为空，返回false * @param str * @returns {Boolean} */
function isEmpty(str) {
if (str == null || str.trim() == "") {
return true;
}
return false;
}
运行结果：
添加一个隐藏域：
<form action="user" method="post" id="loginForm">
<%-- actionName表示用户行为通过这个参数可以在我们的UserServlet中判断用户当前想要操作的功能--%>
<input type="hidden" name="actionName" value="login"/>分割线：后端实现：
1：思路：（整体）
用户模块
通过用户行为来区分 actionName
用户登录 actionName="login"
进入个人中心 actionName="userCenter"
加载头像 actionName="userHead"
验证昵称的唯一性 actionName="checkNick"
修改用户信息 actionName="updateUser"
用户退出 actionName="logout"
在UserServlet的service方法中
1.获取用户行为
String actionName = request.getParameter("actionName");
2. 判断用户行为，调用对应的方法
if ("login".equals(actionName)) {
// 用户登录
} else if ("userCenter".equals(actionName)) {
// 进入个人中心
}1：前端
一、用户登录
==================前端实现==================
1. 添加表单，设置表单属性
action="user" method="post" id="loginForm"
2. 设置表单元素的那么属性值，修改id属性值（首字母改小写）
设置文本框和密码框的那么属性值
设置复选框的那么属性值和value属性值（如果复选框未选中，在获取不到value属性值）
设置隐藏域，传递用户行为 （name="actionName" value="login"）
3. 在 config.js 文件中，添加按钮的点击事件绑定的函数 checkLogin()
表单校验
1. 获取表单元素的值（姓名、密码）
2. 判断元素的值是否为空（引入util.js文件）
如果为空，设置提示信息 （通过设置span标签），并return
3. 如果不为空，则提交表单2：后端
==================后端实现==================
整体思路：
1. 获取参数 （姓名、密码）
2. 参数的非空校验 （ResultInfo的封装类，用来封装响应结果 状态码、提示信息、返回的对象）
如果为空
设置ResultInfo对象的状态码和提示信息
将ResultInfo对象设置request作用域中
请求转发跳转到登录页面
return
3. 如果不为空，通过用户名查询用户对象
4. 判断用户对象是否为空
如果为空
设置ResultInfo对象的状态码和提示信息
将ResultInfo对象设置request作用域中
请求转发跳转到登录页面
return
5. 如果用户对象不为空，将数据库中查询到的用户对象的密码与前台传递的密码作比较 （将密码加密后再比较）
如果密码不正确
设置ResultInfo对象的状态码和提示信息
将ResultInfo对象设置request作用域中
请求转发跳转到登录页面
return
6. 如果密码正确
将用户信息存到session作用域中
判断用户是否选择记住密码（rem的值是1）
如果是，将用户姓名与密码存到cookie中，设置失效时间，并响应给客户端
如果否，清空原有的cookie对象
重定向跳转到index页面浅谈分层思想：
分层思想：
Web层：（控制层：接收参数、响应数据）
1. 获取参数 （姓名、密码）
2. 调用Service层的方法，返回ResultInfo对象
3. 判断是否登录成功
如果失败
将resultInfo对象设置到request作用域中
请求转发跳转到登录页面
如果成功
将用户信息设置到session作用域中
判断用户是否选择记住密码（rem的值是1）
如果是，将用户姓名与密码存到cookie中，设置失效时间，并响应给客户端
如果否，清空原有的cookie对象
重定向跳转到index页面
Service层：（业务逻辑层：参数判断、业务逻辑处理）
1. 判断参数是否为空
如果为空
设置ResultInfo对象的状态码和提示信息
返回resultInfo对象
2. 如果不为空，通过用户名查询用户对象
3. 判断用户对象是否为空
如果为空
设置ResultInfo对象的状态码和提示信息
返回resultInfo对象
4. 如果用户对象不为空，将数据库中查询到的用户对象的密码与前台传递的密码作比较 （将密码加密后再比较）
如果密码不正确
设置ResultInfo对象的状态码和提示信息
返回resultInfo对象
5. 如果密码正确
设置ResultInfo对象的状态码和提示信息
6. 返回resultInfo对象
Dao层：（数据访问层：数据库中的增删改查操作）
通过用户名查询用户对象， 返回用户对象
1. 获取数据库连接
2. 定义sql语句
3. 预编译
4. 设置参数
5. 执行查询，返回结果集
6. 判断并分析结果集
7. 关闭资源代码实现：
1：首先定义用户实体类：PO层：使用lombok插件生成get set
package com.ftzlovedsj.po;
import lombok.Getter;
import lombok.Setter;
/** * @author ${范涛之} * @Description * @create 2021-11-21 21:53 */
@Getter
@Setter
public class User {
private Integer userId; // 用户ID
private String uname; // 用户名称
private String upwd; // 用户密码
private String nick; // 用户昵称
private String head; // 用户头像
private String mood; // 用户签名
}2:创建基本的类：UserService，UserServlet，ResultInfo，UserDao
因为UserService层会调用UserDao层所以先实现：
private UserDao userDao = new UserDao();
新建VO层写存储状态的ResultInfo：在里面定义好所需的一些数据，比如状态码，提示信息，返回的对象（这里用泛型）
package com.ftzlovedsj.vo;
/** * @author ${范涛之} * @Description * @create 2021-11-21 21:59 */
import lombok.Getter;
import lombok.Setter;
/** * 封装返回结果的类 * 状态码 * 成功=1，失败=0 * 提示信息 * 返回的对象（字符串、JavaBean、集合、Map等） */
@Getter
@Setter
public class ResultInfo<T> {
private Integer code; //状态码
private String msg; // 提示信息
private T result; // 返回的对象（字符串、JavaBean、集合、Map等）
}
写UserServlet层，继承了HttpServlet方法并重写：
package com.ftzlovedsj.web;
import com.ftzlovedsj.service.UserServuce;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/** * @author ${范涛之} * @Description * @create 2021-11-21 21:57 */
@WebServlet("/user")
public class UserServlet extends HttpServlet {
private UserServuce userServuce = new UserServuce();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.service(req, resp);
}
}
接下来开始编写DAO层：
我们前面已经写好了DAO思路，这里直接按照思路进行即可：
Dao层：（数据访问层：数据库中的增删改查操作）
通过用户名查询用户对象， 返回用户对象
1. 获取数据库连接
2. 定义sql语句
3. 预编译
4. 设置参数
5. 执行查询，返回结果集
6. 判断并分析结果集
7. 关闭资源首先写一个返回User对象的方法：
public User queryUserByName(String userName){
}然后初始化空值，按照上面的顺序依次写代码：
package com.ftzlovedsj.dao;
import com.ftzlovedsj.po.User;
import com.ftzlovedsj.util.DBUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
/** * @author ${范涛之} * @Description * @create 2021-11-21 21:56 */
/** 通过用户名查询用户对象， 返回用户对象 1. 获取数据库连接 2. 定义sql语句 3. 预编译 4. 设置参数 5. 执行查询，返回结果集 6. 判断并分析结果集 7. 关闭资源 * @return */
public class UserDao {
public User queryUserByName(String userName){
User user = null;
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
try {
// 1. 获取数据库连接
connection = DBUtil.getConnetion();
// 2. 定义sql语句
String sql = "select * from tb_user where uname = ?";
// 3. 预编译
preparedStatement = connection.prepareStatement(sql);
// 4. 设置参数
preparedStatement.setString(1,userName); //这里前面的1是指给第一个问号赋值，也就是前面sql语句中的问好
// 5. 执行查询，返回结果集
resultSet = preparedStatement.executeQuery();
// 6. 判断并分析结果集
if (resultSet.next()){
user = new User();
user.setUserId(resultSet.getInt("userId"));
user.setUname(userName); //这可以直接拿上面这个setUname，因为你就是用它查到的，在这个大方法中传入的
user.setHead(resultSet.getString("head"));
user.setMood(resultSet.getString("mood"));
user.setNick(resultSet.getString("nick"));
user.setUpwd(resultSet.getString("upwd"));
}
}catch (Exception e){
e.printStackTrace();
}finally {
// 7. 关闭资源
DBUtil.close(resultSet,preparedStatement,connection);
}
/** * 1. 获取数据库连接 */
return user;
}
}
这里就写好了一个查询，然后我们测试一下，新建测试类：
package com.ftzlovedsj;
import com.ftzlovedsj.dao.UserDao;
import com.ftzlovedsj.po.User;
import org.junit.Test;
/** * @author ${范涛之} * @Description * @create 2021-11-21 22:33 */
public class TestUser {
@Test
public void testQueryUserByName(){
UserDao userDao = new UserDao();
User user =userDao.queryUserByName("admin");
System.out.println(user.getUpwd());
}
}运行结果：
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/justleavel/article/details/121345390
内容来源于网络，如有侵权，请联系作者删除！
相关文章
热门标签
更多最新文章
更多- 浏览(1168) 发布于 2023-01-15
- 浏览(471) 发布于 2023-01-08
- 浏览(796) 发布于 2023-01-08
- 浏览(805) 发布于 2023-01-08
- 浏览(470) 发布于 2023-01-01
目录
- 首先导入前端模板：
- 然后修改一下输入框这里，需要添加一个from表单，并且在两个input框中加入id 和name，然后复选框默认一个value为1，也就是选中了，登陆按钮也添加一个事件：
- 然后我们需要写对应的checkLogin:
- 上面用到了已经封装好的一个isEmpty方法在util.js下面：
- 运行结果：
- 添加一个隐藏域：
- 分割线：后端实现：