spring mvc mybatis +ajax 登录实例

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 = "登 &nbsp;&nbsp;&nbsp;录";
                                 location.href = 'base.shtml'
                                 return true;
                            } else {
                                layer.alert('用户名或密码错误,请重新登录!', {icon: 5,skin: 'layui-layer-lan',});
                                document.getElementById("username").focus();
                                document.getElementById("denglu").innerHTML = "登 &nbsp;&nbsp;&nbsp;录";
                                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>

到此,登录接口已经实现!!

猜你喜欢

转载自www.cnblogs.com/alasijia/p/9335808.html