上班签到小项目(nodejs,express,ajax)

express配合客户端ajax实现上班签到小项目(数据库部分暂时省略,使用虚拟数据)

简单需求分析:
    1.用户(id,name,password)
    2.用户必须登录才能签到
    3.用户从哪里来,注册(暂时存到数组)
    4.签到(谁,时间,地点,合法)--比较经纬度在100范围内

登录界面逻辑:先获取账号和密码,然后把这两个数据携带上请求接口,存到cookie里面,成功就跳转主页

<script>
        $(function(){
            
            $('#btnLogin').on('click',function(){
                
                var loginName = $.trim($('#account').val());
                var password = $.trim($('#password').val());
                if(!loginName|| !password){
                    alert("账号和密码不能为空!");
                    return;
                }
                // 从接口中获取数据
                // 参数1:接口地址,参数2:向服务器传递的数据,参数3:服务器响应成功时的回调函数
                $.post('/api/login',{loginName,password},function(data){
                    if(data.code!=200){
                        alert(data.message);
                        return;
                    }                  // prop是从属性对象中取值                              
                    var remember = $('#remember').prop('checked');
                    if(remember){
                        $.cookie("remember",true,{ path: '/' });
                    }
                    // 创建一个仅对 path 路径页面有效的 cookie ,cookie 的有效期为 1 天
                    $.cookie("loginName",loginName,{expires: 1, path: '/'});
                    //第二种写法-----------------------------
                    /* var rememberFlag = $.cookie('remember');
                    if (rememberFlag) {
                        $('#remember').prop("checked", true);
                        $('#account').val($.cookie('loginName'));
                    }  */
                    location.href =" /index.html"
                })
            })
        })
    </script>

项目架构:nodejs + express + git + jquary + html + css
项目描述:
该项目是一个express配合客户端ajax实现上班签到小项目,项目需要满足以下需求:
(1)用户必须注册,登录才能签到,用户信息暂时存到数组
(2)用户签到的地点给出确定的范围,不在范围内即为签到失败。
技术要点:
(1)项目通过node 创建package.json ,下载express模块包创建路由router/index.js导入模 块,在public文件夹里面创建html, css, javascript文件搭建好整体框架
(2)运行要先进入登录页,就要在主页用location.href跳转过去,注册时候输入的数据存到 cookie,在后台从接口获取数据,验证通过即可登录
(3)在后台把经纬度封装成一个数组,可以存储一两个用户名信息。

操作:
服务器端 输入node index
客户端:http://localhost:8000/login.html
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

源码:https://github.com/yanfengting/qiandao#qiandao

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值