1.登录的前端页面,通过onclick="login()",绑定登录按钮的点击事件
<div class="login-box"> <!-- /.login-logo --> <div class="login-box-body" style='background-color:#d6dce3;'> <%--<p style="font-size: 15px">登录</p>--%> <h3 style="height: 50px;text-align:center;color: #eee">登录平台</h3> <form action="loginForm.shtml" onsubmit="return false" method="post" id='login1'> <div class="form-group has-feedback"> <input type="text" name="userName" class="form-control" placeholder="请输您工号" maxlength="6" id="username"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" name="passWord" class="form-control" placeholder="6-10位密码,区分大小写,不能使用空格" maxlength="10" id="password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-lg-8"> <label id="message" class="text-danger" style="display: none;"></label> </div> <div class="col-lg-4 text-right"> <button type="button" id="denglu" class="btn btn-primary btn-block btn-flat" onclick="login()">登 录</button> </div> </div> </form> </div> </div>
2.js login()函数 通过ajax将用户名和密码传递给后端Controller层的loginForm接口
function login() { if ($("#username").val() == "") { document.getElementById("message").innerHTML = "用户名不能为空!" document.getElementById("message").style.display = "block"; document.getElementById("username").focus(); return false; } if ($("#password").val() == "") { document.getElementById("message").innerHTML = "密码不能为空!" document.getElementById("message").style.display = "block"; document.getElementById("password").focus(); return false; } document.getElementById("denglu").innerHTML = "登录中..."; /* var url = "loginForm.shtml?username=" + $("#username").val() + "&password=" + $("#password").val(); */ var url = "loginForm.shtml"; $.ajax({ type : "POST", url : url, /* data: $('#login1').serialize(), */ dataType : "json", //data传递的是一个json类型的值,而不是字符串,且必须标明dataType的类型,否则会出现400错误或者其他错误。 data:{"username":$("#username").val(),"password":$("#password").val()}, success : function(result) { if (result.data[0] == "true") { document.getElementById("denglu").innerHTML = "登 录"; location.href = 'base.shtml' return true; } else { layer.alert('用户名或密码错误,请重新登录!', {icon: 5,skin: 'layui-layer-lan',}); document.getElementById("username").focus(); document.getElementById("denglu").innerHTML = "登 录"; return false; } } }); }
3. spring控制层 controller接收前端传来的参数
@Controller 用于标记在一个类上,这个类就是一个SpringMVC Controller 对象。分发处理器将会扫描使用了该注解的类的方法。通俗来说,被Controller标记的类就是一个控制器,这个类中的方法,就是相应的动作。
RequestMapping注解用于处理请求地址映射,可用于类或方法上。用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径。
ResponseBody注解用于将Controller的方法返回的对象,通过适当的HttpMessageConverter转换为指定格式后,写入到Response对象的body数据区。
HttpServletRequest 通过request获得body中的的内容,req.getParameter(参数名)可以获得url或ajxa中传递过来的参数req.getSession().setAttribute("sessionAdminUserName",userName);
将用户名添加到session中去String userInfo = us.check(userName, passWord); 将用户名密码传递到 service层
@Controller
@RequestMapping("/")
public class UserController {
private UserService us;
@ResponseBody @RequestMapping("loginForm") public void login(HttpServletRequest req, HttpServletResponse rsp) throws IOException{ String userName=req.getParameter("username").trim();//trim() 删除字符串前后的空格 String passWord=req.getParameter("password").trim(); String userInfo = us.check(userName, passWord); String[] result = new String[1]; //从返回值中取出用户名存到result中 if (userInfo != "false") { result[0]= "true"; }else { result[0]= "false"; } User user = new User(); user.setUserName(userName); req.getSession().setAttribute("user",user); //增加回显用户名 req.getSession().setAttribute("sessionAdminUserName",userName); rsp.setContentType("application/json"); rsp.setCharacterEncoding("utf-8"); // 首先把字符串转成 JSONArray对象 JSONArray jsonArray = JSONArray.fromObject(result); JSONObject jsobjcet = new JSONObject(); jsobjcet.put("data", jsonArray); try { rsp.getWriter().write(jsobjcet.toString()); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }
4.service层 接口的业务逻辑层
public interface UserService { /**检查用户*/ String check(String userName,String passWord); }
5.service实现层,接口实现层
@Service注解是告诉Spring,当要创建UserServiceImpl 实例时,bean的名字是UserService,这样Action需要使用UserServiceImpl 时,可以由UserService注入Action
@Autowired可以对成员变量、方法和构造函数进行标注,完成自动装配,注:@Autowired是根据类型进行自动装配的(不太懂)
@Override 重写父类方法,当加上这个注解后会自动检测方法名,参数名等是否正确
extends与implements的不同
extends 是继承父类, 只要那个类不是声明为final或定义为abstract的就能继承,继承之后可以使用父类的方法, 也可以重写父类的方法; 注:不支持多重继承
implements 可以实现多个接口,用逗号分隔即可(class A implements B,C,D,E)
@Service public class UserServiceImpl implements UserService{ private static final Log logger = LogFactory.getLog(UserServiceImpl.class); @Autowired private UserMapper um; @Override public String check(String userName, String passWord) { List<Map<String,Object>> lists = um.check(userName, passWord); String userInfo=lists.toString();
if(lists.size() >= 1) { return userInfo; } else { return "false"; } }
}
6.数据层 (Mapper接口层)
@Param注解参数后,可以通过#{} 或 ${} 两种方式传递参数,不使用注解时,必须使用 #{}方式,如果使用 ${} 的方式,会报错
#{} 编译好SQL语句再取值,可以很大程度的防止sql注入
-
${} 是取值以后再去编译SQL语句,不可以防止sql注入,一般用来传递数据库对象,例如表名
public interface UserMapper { List<Map<String,Object>> check(@Param("userName") String userName,@Param("passWord") String passWord);
}
7.数据库的实现层(Mapper.xml)
namespace指向Mapper接口层
查询使用select标签,
id对应Mapper中的方法名,
resultMap,指定查询结果,以上边声明好的result的映射形式返回,
parameterType 参数的类型,简单的可以用具体的类型例如 String、Integer等,复杂的可以用实体类、map等
<?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="cn.java.mapper.UserMapper" > <resultMap id="BaseResultMap" type="cn.java.entity.User" > <result column="userName" property="userName" jdbcType="VARCHAR" /> <result column="passWord" property="passWord" jdbcType="VARCHAR" /> <result column="realName" property="realName" jdbcType="VARCHAR" /> <result column="regDate" property="regDate" jdbcType="DATE" /> <result column="authorization" property="authorization" jdbcType="VARCHAR" /> </resultMap> <sql id="Base_Column_List" > userName, passWord, realName,regDate,authorization </sql> <!-- 登录 --> <select id="check" resultMap="BaseResultMap" parameterType="java.lang.String" > select <include refid="Base_Column_List" /> from sys_user t where userName =#{userName} and passWord=#{passWord} </select>
</mapper>
到此,登录接口已经实现!!