今日目的，实现用户登录功能
目录
思路整理
我们还是以 前端页面→Service层→Controllor层→前端页面 的思路来整理。
要想实现登录，先要有一个登录框，登录框包括用户名，密码和验证码。输入之后，要进行验证。验证之后，如果正确，则跳转到成功页面，如果错误，则留在当前页面。
那么前端页面要编写一个登录框，和点击登录事件。Service层要编写登录和验证。Controllor层要实现验证和登录跳转。最后前端页面要跳转到成功页面或留在当前页面
代码编写
前端JSP页面
页面里肯定要有个表单，用于提交数据。为了美观，网上有很多登录的模板，大家可以自行下载并修改。
最主要的是要有一个post表单，把输入框里的用户名和密码以及验证码提交到后端进行验证。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!-- 引入文件 -->
<link rel="stylesheet" href="plugin/login/css/style.css" />
<script src="plugin/login/js/jquery.js"></script>
<script src="plugin/login/js/verificationNumbers.js"></script>
<script src="plugin/login/js/Particleground.js"></script>
<!-- 页面样式布局 -->
<style>
body {
height: 100%;
background: #00031b;
overflow: hidden;
}
/*背景颜色*/
canvas {
z-index: -1;
position: absolute;
}
</style>
<!-- 背景特效js -->
<script>
$(document).ready(function() {
//粒子背景特效
$('body').particleground({
dotColor : '#a9aed4', //背景点的颜色
lineColor : '#a9aed4' //背景线的颜色
});
//验证码
//createCode();
});
</script>
</head>
<body>
<!-- 提交表单 -->
<form method="post" action="${pageContext.request.contextPath}/userlogin.do">
<dl class="admin_login">
<dt>
<strong>站点后台管理系统</strong> <em>Management System</em>
</dt>
<!-- 用户名 -->
<dd class="user_icon">
<input name="username" placeholder="账号" type="text"
class="login_txtbx" required="" />
</dd>
<!-- 密码 -->
<dd class="pwd_icon">
<input name="userpwd" placeholder="密码" type="password"
class="login_txtbx" />
</dd>
<!-- 验证码 -->
<dd>
<img id="imgObj" alt=""
src="${pageContext.request.contextPath}/kaptcha.do"
class="login_yzmbx">
</dd>
<!-- 验证码输入框 -->
<dd class="val_icon">
<input name="code" placeholder="验证码" required="" type="text"
class="login_txtbx">
</dd>
<!-- 登录按钮 -->
<dd>
<input value="登陆" class="submit_btn" type="submit" />
</dd>
<!-- 注册按钮 -->
<dd>
<input type="button" value="注册" class="submit_btn"
onclick="window.open('success.jsp','_blank')" />
</dd>
</dl>
</form>
<!-- 验证码点击更换 -->
<script type="text/javascript">
$(function() {//jquery加载事件 text()、attr()、val()、html()
$("#imgObj")
.click(
function() {
$(this)
.attr("src",
"${pageContext.request.contextPath}/kaptcha.do");
})
})
</script>
</body>
</html>当点击登录时，form表单调用了controllor里的一个userlogin.do方法。
后端代码
Service层
UserService
package com.demo.service;
import java.util.List;
import com.demo.pojo.User;
import com.demo.pojo.UserExample;
public interface UserService {
//通过主键查询
User selectByPrimaryKey(Integer userid);
//通过条件查询
List<User> selectByExample(UserExample example);
//用户登录
public User login(String username,String userpwd);
}
UserServiceImpl
package com.demo.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.demo.mapper.UserMapper;
import com.demo.pojo.User;
import com.demo.pojo.UserExample;
import com.demo.pojo.UserExample.Criteria;
import com.demo.service.UserService;
@Service
public class UserServiceImpl implements UserService {
//注解方式，自动装配
@Autowired
UserMapper userMapper;
@Override
public User selectByPrimaryKey(Integer userid) {
return userMapper.selectByPrimaryKey(userid);
}
//通过条件查询
@Override
public List<User> selectByExample(UserExample example) {
return userMapper.selectByExample(example);
}
//用户登录验证
@Override
public User login(String username, String userpwd) {
UserExample example =new UserExample();
Criteria criteria=example.createCriteria();
criteria.andUsernameEqualTo(username);
criteria.andUserpwdEqualTo(userpwd);
List<User> list = userMapper.selectByExample(example);
return list.size() > 0 ? list.get(0) : null;
}
}
UserServiceImpl里要实现的代码比较多，好在自动生成的代码里提供了UserExample。在UserExample里可以找到验证的方法。
验证完后把值传入list里，如果list里有值，即验证正确，那么返回该用户，如果list里为空即验证失败，返回null。
Controllor层
package com.demo.controllor;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.demo.pojo.User;
import com.demo.pojo.UserExample;
import com.demo.service.UserService;
import com.google.code.kaptcha.Constants;
@Controller
public class UserControllor {
@Resource(name = "userServiceImpl") // 通过注解，自动装配，注意首字母小写
UserService userService;
/**
* 通过主键查询用户信息
*
* @param userid
* @return
*/
@RequestMapping(value = "queryuserbypk") // 请求地址，和user.jsp里的url一致
@ResponseBody // 由于需要返回json数据，因此需要responsebody
public User querybypk(Integer userid) {
System.out.println("开始查询");
try {
System.out.println("查询成功");
User user = userService.selectByPrimaryKey(userid);
return user;
} catch (Exception e) {
// TODO: handle exception
return null;
}
}
/**
* 通过条件查询
* @return
*/
@RequestMapping(value = "queryuserbyem")
@ResponseBody
public List<User> querybyem() {
UserExample example = new UserExample();
List<User> list = userService.selectByExample(example);
return list;
}
/**
* 用户登录
* @param username
* @param userpwd
* @param code
* @param req
* @return
*/
@RequestMapping(value = "userlogin")
public ModelAndView userlogin(String username,String userpwd,String code,HttpServletRequest req) {
//创建视图对象
ModelAndView mv = new ModelAndView();
//获取Session对象
HttpSession session = req.getSession();
//获取随机生成的验证码
String randomCode = session.getAttribute(Constants.KAPTCHA_SESSION_KEY).toString();
//判断验证码输入是否正确
if(code.equalsIgnoreCase(randomCode)){
//判断用户名和密码输入是否正确
User user = userService.login(username, userpwd);
if(user != null){
//用户名和密码输入正确
mv.setViewName("user");//跳转到主页面
}else{//用户名和密码输入错误
mv.setViewName("login");// login.jsp
}
}else{//验证码输入有误
mv.setViewName("login");// login.jsp
}
return mv;
}
}
Controllor层因为是和mode and view直接接触的，无论验证成功与否，都应该返回一个视图。如果成功，则跳转到成功页面，如果失败，则留在当前页面。
mv.setViewName("login") 这句这样写，是因为在springmvc-servlet里已经配置过了前缀和后缀
<!-- 视图解析器 prefix：前缀 suffix：后缀-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="order" value="2" />
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="" />
<property name="suffix" value=".jsp" />
</bean>所以这里只需要写个login就行，它会自动装配成 login.jsp 并访问该页面。
到此，用户登录已经实现。
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
