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