前端请求没错，后端拦截没错，就是报404

最新推荐文章于 2024-05-10 16:28:50 发布

半哭语笑

最新推荐文章于 2024-05-10 16:28:50 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html5 vue.js java spring boot

本文链接：https://blog.csdn.net/qq_38295471/article/details/115229177

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用环境

maven + mysql + springboot + springmvc + mybatis + bootstrap3 + vue

前端界面如下（使用 bootstrap3 + vue）：

<html>
<head>
    <title>用户登录</title>
    <meta charset="UTF-8">
    <style>
        .error {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/vue.min.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/axios.min.js"></script>
</head>
<body>
<div class="container" style="width:500px;margin-top:30px">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                用户登录
            </h3>
        </div>
        <div class="panel-body">
            <form class="form-signin">
                <h2 class="form-signin-heading">请登录</h2>
                <label class="sr-only">用户名</label>
                <input type="text" class="form-control" v-model="usercode" placeholder="输入用户名" required autofocus>
                <label class="sr-only">密码</label>
                <input type="password" v-model="password" class="form-control" placeholder="输入密码" required>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="remember-me"> 记住我
                    </label><br>
                    <span class="error">{{message}}</span>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="button" @click="login()">登录</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script>
    let vs = new Vue({
        el: '.container',
        data: {
            usercode: '',
            password: '',
            message: ''
        },
        methods: {
            //用户登录
            login() {
                axios.get("/login?usercode=" + this.usercode + "&password=" + this.password).then(resp => {
                    if (resp.data.success) {
                        location.href = "/users/listmenus.html";
                    } else {
                        alert(resp.data.message);
                    }
                })
            }
        }
    })
</script>

控制层代码如下：

@RestController
public class LoginController {
    @Autowired
    private UserService userService;
    /**
     * 1.用户登录
     * @param usercode
     * @param password
     * @return
     */
    @RequestMapping("login")
    public Result login(@RequestParam("usercode") String usercode, @RequestParam("password") String password,  HttpSession session){
        //1.1)根据 usercode 查询用户并用设置用户关联的菜单及权限列表
        SysUser user = userService.findUserByUserCode(usercode,password);
        //1.2)如果存在此用户就放到session中
        if(user != null){
            session.setAttribute("user",user);
            return new Result(true,"登录成功！");
        }
        return new Result(false,"登录失败！");
    }
}

如果，maven、tomcat、springboot配置都没有问题，的情况下。

因为上面的前端页面的代码有一些格式不正确，导致后端进不去，前端又报404错误。

我的个人的解决方式是：——————重新创建login.html

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .error {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/vue.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/axios.min.js"></script>
</head>
<body>
<div class="container" style="width:500px;margin-top:30px">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                用户登录
            </h3>
        </div>
        <div class="panel-body">
            <form class="form-signin">
                <h2 class="form-signin-heading">请登录</h2>
                <label class="sr-only">用户名</label>
                <input type="text" class="form-control" v-model="usercode" placeholder="输入用户名" required autofocus>
                <label class="sr-only">密码</label>
                <input type="password" v-model="password" class="form-control" placeholder="输入密码" required>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="remember-me"> 记住我
                    </label><br>
                    <span class="error">{{message}}</span>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="button" @click="login()">登录</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    let vs = new Vue({
        el: '.container',
        data: {
            usercode: '',
            password: '',
            message: ''
        },
        methods: {
            login() {        //用户登录
                axios.get("/login?usercode=" + this.usercode + "&password=" + this.password).then(resp => {
                    if (resp.data.success) {
                        location.href = "/users/listmenus.html";
                    } else {
                        alert(resp.data.message);
                    }
                })
            }
        }
    })
</script>

仅限我个人所遇问题解决方案，仅参考，如有不足之处请多指教！

半哭语笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端请求没错，后端拦截没错，就是报404

使用环境maven + mysql + springboot + springmvc + mybatis + bootstrap3 + vue下面展示一些内联代码片。// A code blockvar foo = 'bar';// An highlighted blockvar foo = 'bar';
复制链接

扫一扫

专栏目录