2023-7-18

最新推荐文章于 2024-08-11 23:01:56 发布

GUET415

最新推荐文章于 2024-08-11 23:01:56 发布

阅读量52

点赞数

分类专栏：实习日志文章标签： java html jquery

本文链接：https://blog.csdn.net/m0_53286358/article/details/131793373

版权

实习日志专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该文详细描述了如何制作一个登录界面，使用jQuery获取并提交表单数据，通过SpringMVC处理登录请求，验证用户信息。成功登录后，根据用户名查询权限数据，动态生成菜单栏，实现了基于用户权限的界面个性化展示。

摘要由CSDN通过智能技术生成

制作登录界面

<body>
<h2>Login</h2>
<form  id="login">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="Login">
</form>
</body>

效果
在这里插入图片描述

获取登录界面的表单数据

使用jQuery选择器选择表单元素，并使用.submit()方法来绑定表单提交事件。

 $(function (){
            $('#login').submit(function (e){
                // 阻止了表单默认的提交行为
                e.preventDefault();
                //获取数据
                var uername=$('#username').val();
                console.log(uername)
                var password=$('#password').val();
                var data={username:uername,password:password}
                console.log(data)
                })
        })

在这里插入图片描述

发送请求

<script>
        $(function (){
            $('#login').submit(function (e){
                // 阻止了表单默认的提交行为
                e.preventDefault();
                //获取数据
                var uername=$('#username').val();
                var password=$('#password').val();
                var data={username:uername,password:password}
                console.log(data)
                // 发送请求
                $.post("http://localhost:8080/login.do",JSON.stringify(data),function (res){
                    console.log(res.code)
            })
        })
    </script>

UserController中创建login方法

@RequestMapping("/login")
public ResponseData login(User user){
    System.out.println(user);
    return userService.login(user);
}

配置service层

创建接口

 ResponseData login(User user);

实现方法

public class UserServiceImpl implements UserService {
    @Override
    public ResponseData login(User user) {
        SqlSession sqlSession= DBUtil.getSqlSession();
        UserMapper userMapper=sqlSession.getMapper(UserMapper.class);
        UserExample userExample=new UserExample();
        userExample.createCriteria().andUsernameEqualTo(user.getUsername()).andPasswordEqualTo(user.getPassword());
        List<User> userlist=userMapper.selectByExample(userExample);
        if(userlist.size()!=0){
            return ResponseData.ok();
        }
        return ResponseData.fail();
    }
}

测试效果如下：
在这里插入图片描述

页面跳转

                   //页面跳转
                    if(res.code==200){
                        //存入用户名
                        localStorage.setItem("currentUserName",uername)
                        //跳转
                        window.location.href="index02.html"
                    }else {
                        alert("用户名或密码错误！！")
                    }

index02.html中

    <script>
$(function(){
    console.log(localStorage.getItem("currentUserName"))
})
    </script>

测试效果如下：
在这里插入图片描述

根据用户名查数据

   var data={username:localStorage.getItem("currentUserName")}
    //根据用户名查数据
    $.post('http://localhost:8080/getPermissionsByUsername.do',JSON.stringify(data),function (res){
        console.log(res.data);
    })

测试效果如下：
在这里插入图片描述

动态渲染

根据数据动态的生成菜单栏

原来的菜单栏内容只保留

<div id="aside">
    <ul class="menu">
    <\div>
    <\div>

动态生成标签

 console.log("当前用户"+localStorage.getItem("currentUserName"))
    var data={username:localStorage.getItem("currentUserName")}
    //根据用户名查数据
    $.post('http://localhost:8080/getPermissionsByUsername.do',JSON.stringify(data),function (res){
        console.log("查到的数据",res.data);

        //定义两个容器
        var menu=[];
        var submenu=[];

        //将一级菜单和二级菜单分开
        res.data.forEach(e=>{
            if (e.isParent=="true"){
                menu.push(e)
            }else{
                submenu.push(e)
            }
        })
        console.log("1111",menu)
        console.log("22222",submenu)
        //选择所有具有 menu 类名的元素，并将它们存储在 menuUl 变量中，以便后续对这些元素进行操作。
        var menuUl=$(".menu")
        //创建一级菜单
        menu.map(m=>{
            var li=$("<li>")
            var a=$("<a>")
            var i=$("<i>")
            var sub=$(" <ul class='submenu'>")
            /**
             < li >
             < a href = "#" > < i className = "fa fa-home" > </i>首页</a>
             < /li>
             */
            i.attr("class",m.icon)
            a.attr("href","#")
            a.append(i)
            a.append(m.permissionName)
            li.append(a)
            menuUl.append(li)
            //判断是否有二级菜单
            if (m.permissionId!=1){
                var sub=$(" <ul class='submenu'>")
                li.append(sub)
                //创建二级菜单
                /**
                 <li>
                 <a href="#"><i class="fa fa-bus"></i>权限管理</a>
                 <ul class="submenu">
                 <li><a href="#">权限列表</a></li>
                 </ul>
                 </li>
                 */
                submenu.map(s=>{
                    if (m.permissionId==s.parentPermissionId){
                        var li=$("<li>")
                        var a=$("<a>")
                        a.attr("href",s.url)
                        a.attr("target",s.target)
                        a.append(s.permissionName)
                        li.append(a)
                        sub.append(li)
                    }
                })
            }

        })
     })

将事件处理器绑定到已经存在的父元素.menu上，并指定li作为触发事件的子元素

这样，即使li元素实在页面加载完成之后才添加的，点击事件也能正常触发

 $(".menu").on('click','li',function (){
            $(this).find(".submenu").toggle(200)
            $(this).siblings().children(".submenu").hide(200)
        })

测试效果如下：
在这里插入图片描述

GUET415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2023-7-18

元素实在页面加载完成之后才添加的，点击事件也能正常触发。使用jQuery选择器选择表单元素，并使用。将事件处理器绑定到已经存在的父元素。index02.html中。方法来绑定表单提交事件。根据数据动态的生成菜单栏。作为触发事件的子元素。
复制链接

扫一扫

专栏目录