SSM搭建实用后台管理 第七课 登录验证的ajax请求出错

求助问答
1

有个问题请教一下大家：SSM搭建管理系统的课程第7课，登录页面的登录表单，提交的时候，ajax函数直接跳error，会是什么原因导致的？看了好久不知道问题在哪儿，麻烦懂的朋友指点一下，谢谢啦！

image
image.png915×894 60.8 KB

image
image.png785×579 17.6 KB

这是Controller类

image
image.png1199×553 34.6 KB

2

看后端控制台的异常
还有这种问题，尽量别截图。贴代码比较好。

3

好的好的。

4

代码如下：

package controller;

import common.Result;
import common.ResultGenerator;
import entity.AdminUser;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import services.AdminUserService;

/**

  • @Author haydn

  • @create 2019/9/9 2:18
    */
    @RequestMapping("/users")
    @RestController
    public class AdminUserController {

    @Autowired
    private AdminUserService adminUserService;

    @RequestMapping(value="/login",method = RequestMethod.POST)
    public Result login(@RequestBody AdminUser user){
    System.out.println(user);
    Result result = ResultGenerator.genFailResult(“登录失败”);
    if(StringUtils.isEmpty(user.getUsername()) || StringUtils.isEmpty(user.getUsername())){
    result.setMessage(“请填写登录信息”);
    }
    AdminUser loginUser = adminUserService.updateTokenAndLogin(user.getUsername(),user.getPassword());
    if(loginUser != null){
    result = ResultGenerator.genSuccessResult(loginUser);
    }
    return result;
    }

}

下面是js代码
/**

  • 判空函数–针对用户名，和，密码
  • @param obj
  • @returns {boolean}
    */
    function isNull(obj) {
    if (obj == null || obj == undefined || obj.trim() == “”) {
    return true;
    }
    return false;
    }

/**

  • 参数长度验证
  • @param obj
  • @param length
  • @returns {boolean}
    */
    function validLength(obj, length) {
    if (obj.trim().length < length) {
    return true;
    }
    return false;
    }

/**

  • 用户名称验证，4-16位（字母数字，下划线，减号）
  • @param username
  • @returns {boolean}
    */
    function validUserName(username) {
    var pattern = /^[a-zA-Z0-9_-]{4,16}$/;
    //alert(pattern.test(username.trim()));
    if (pattern.test(username.trim())) {
    return (true);
    } else {
    return (false);
    }
    }

/**

  • 密码验证，6-20位，字母数字的组合
  • @param password
  • @returns {boolean}
    */
    function validPassword(password) {
    var pattern = /^[a-zA-Z0-9]{6,20}$/;
    if (pattern.test(password.trim())) {
    return true;
    } else {
    return false;
    }
    }

function login() {
alert(“进入login函数了!” + $(’#username’).val() + $(’#password’).val());
var username = $(’#username’).val();
var password = $(’#password’).val();//#对应的是id选择器

if (isNull(username)) {
    showErrorInfo("请输入用户名！");
    return;
}
if (!validUserName(username)) {
    showErrorInfo("请输入正确的用户名！")
    return;
}
if (isNull(password)) {
    showErrorInfo("请输入密码！");
    return;
}
if (!validPassword(password)) {
    showErrorInfo("请输入正确的密码！");
    return;
}
var data = {"username": username, "password": password};//这是一个json格式的对象
alert(data.username + "----brfore ajax");
$.ajax({//这里是jQuery的ajax对象方法
    type: "POST",
    dataType: "json",
    url: "/users/login",//这个什么意思不明白？？？ -- 通过这个地址映射到Controller方法
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(data),
    success: function (result) {
        alert(data.username + "----in ajax success");
        if (result.resultCode == 200) {
            $('.alert-danger').css("display", "none");
            setCookie("token", result.data.userToken);
            alert("登录成功");
            window.location.href = "/";
        }
        ;
        if (result.resultCode == 500) {
            showErrorInfo("登录失败！请重新确认账号密码！");
            return;
        }
    },
    error: function () {
        alert(data.username + "----in ajax error");
        alert("error");
        $('.alert-danger').css("display", "none");
        showErrorInfo("接口异常，请联系管理员");
        return;
    }
});

}

/**

  • 写入cookie
  • @param name
  • @param value
    */
    function setCookie(name, value) {
    var days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = name + “=” + escape(value) + “;expires=” + exp.toGMTSting() + “;path=/”;
    }

/**

  • 读取cookie
  • @param name
  • @returns {string|null}
    /
    function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]    )(;|$)");
    if (arr = document.cookie.match(reg)) {
    return unescape(arr[2]);
    } else {
    return null;
    }
    }

/**

  • 删除cookie
  • @param name
    */
    function delCookie(name) {
    var exp = new Date();
    exp = exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    document.cookie = name + “=” + cval + “;expires=” + exp.toGMTString();
    }

/**

  • 检查cookie
    */
    function checkCookie() {
    if (getCookie(“token”) == null) {
    $(’#tip’).html(“正在跳转至登录页面…”);
    alert(“未登录！”);
    window.location.href = “login.html”;
    } else {
    $(’#tip’).html(“Hello SSM!
    看到此页面证明你登陆成功，且cookie中已经有合法的用户令牌了！”);
    }
    }

/**

  • 这里使用类选择器，在满足条件时，改变css样式，显示隐藏块，并输出提示信息。
  • @param info
    */
    function showErrorInfo(info) {
    $(’.alert-danger’).css(“display”, “block”);
    $(’.alert-danger’).html(info);
    }
5

后端控制台没有输出任何提示信息

6

是不是数据库没连接上。

7

数据库可以连接。在同一个项目里还有另一个控制器，连接了同一个数据库的另外一张表，可以请求到数据并且传给前端浏览器

8

是web.xml的配置文件里路径弄错了,配置成了/*.do，应该是 / 就好了。
然后mapper文件里面的username字段中间错写一个横杠。
没有单元测试，这种问题就好难看出来。
谢谢你啦！

1 Like