携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情 

前端设计

我们前端页面是在网上下载了一个静态页面的模板!我们需要在此基础上进行js代码的编写,从而实现前后端用户的接口

登入逻辑

核心逻辑:

<script>
    //核心业务逻辑
         ///$(function () {} 当DOM加载完毕后执行
         $(function(){
            //当点击这个按钮后就会执行function函数
            $("#submit").click(function(){
                //获取到用户名和密码
                var username = $("#user").val();
                var password = $("#password").val();
                //判断用户名密码是否为空!
                if(username.trim()==""||password.trim()==""){
                    alert("请输入用户名和密码");
                    return;
                }
                //这里就需要将请求前端数据返回给服务器!
                $.ajax({
                    url:"/user/login",//指定路径
                    type:"post",
                    data:{"username":username,"password":password},
                    dataType:"json", //设置服务器返回json数据
                    success:function(body){//回调函数
                        console.log(body);
                        if(body.status==0){//通过后端发送回来的status判断登入状态!
                            alert("登入成功!");
                            //登入成功后跳转到指定页面
                            window.location.href("list.html");
                        }else{
                            alert("登入失败,账号或密码错误,请重试!");
                            //将输入框清空!
                            $("#message").text("");
                            $("#user").val("");
                            $("#password").val("");
                        }
                    }
                });
            });
         });
</script>

验证结果:

注册逻辑

 <script>
         //核心业务逻辑
         ///$(function () {} 当DOM加载完毕后执行
         $(function(){
            //当点击这个按钮后就会执行function函数
            $("#submit").click(function(){
                //获取到用户名和密码
                var username = $("#user").val();
                var password = $("#password").val();
                //判断用户名密码是否为空!
                if(username.trim()==""||password.trim()==""){
                    alert("请输入用户名和密码");
                    return;
                }
                //这里就需要将请求前端数据返回给服务器!
                $.ajax({
                    url:"/user/login",//指定路径
                    type:"post",
                    data:{"username":username,"password":password},
                    dataType:"json", //设置服务器返回json数据
                    success:function(body){//回调函数
                        console.log(body);
                        if(body.status==0){//通过后端发送回来的status判断登入状态!
                            alert("登入成功!");
                            //登入成功后跳转到指定页面
                            window.location.href = "list.html";
                        }else{
                            alert("登入失败,账号或密码错误,请重试!");
                            //将输入框清空!
                            $("#message").text("");
                            $("#user").val("");
                            $("#password").val("");
                        }
                    }
                });
            });
         });
      </script>

验证结果:

'