在模拟前端与后台进行数据交互之前需先进行环境配置:
1. 使用tomcat之前需先安装java环境jdk,jdk下载推荐:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html;jdk安装及测试是否安装成功:http://jingyan.baidu.com/article/3c343ff70bc6ea0d377963df.html。
2. tomcat下载安装及配置推荐:http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html。我这里选择XAMPP(XAMPP是一个把Apache网页服务器与PHP、Perl及MySQL集合在一起的安装包,允许用户可以在自己的电脑上轻易的建立网页服务器)自带的tomcat,直接点击start启动tomcat服务器。localhost:8080验证服务器是否启动成功。
3. 把项目放到tomcat下的webApps文件夹下。项目中建立json文件,存放数据。如实现判断注册页面内的信息与预先存入数据的json文件内信息相比较,判断该信息之前是否存入过,存在过则需重新输入其他信息进行注册,如果没有存在过是否可以把刚注册的信息保存到json文件中呢?如登陆页面,输入登陆信息后,首先判断该账户信息是否存在于预先存储的json文件中,不存在提示需先注册,若账户信息存在,则判断对应密码是否正确,正确则提示登陆成功,否则提示密码错误?(这里不打开服务器也可以实现)
部分代码:
//注册验证
if (booluser && boolpwd && boolpwd1 && booltel && boolemail) { $.ajax({ type: "get", url: "js/data.json", async: true, data: { user: $('.register input')[0].value, psd: $('.register input')[1].value, phone: $('.register input')[3].value, email: $('.register input')[4].value }, success: function (data) { if(checkAccount(data)){ alert("已存在,请重新输入"); }else{ alert("注册成功"); $(".register").hide();
/* Util.StorageSetter('loginName', $('.register input')[0].value); Util.StorageSetter('loginPsd', $('.register input')[1].value); Util.StorageSetter('loginPhone', $('.register input')[3].value); Util.StorageSetter('loginEmail', $('.register input')[4].value);*/ } $('.register input')[0].value = $('.register input')[0].defaultValue; $('.register input')[1].value = $('.register input')[1].defaultValue; $('.register input')[2].value = $('.register input')[2].defaultValue; $('.register input')[3].value = $('.register input')[3].defaultValue; $('.register input')[4].value = $('.register input')[4].defaultValue; } }) }
//登录验证 if (booluser && boolpwd ) { $.ajax({ type: "get", url: "js/data.json", async: true, data: { user: $('.register input')[0].value, psd: $('.register input')[1].value, }, success: function (data) { //console.log(data); if(!checkLoginAccount(data)){ alert("账号不存在,请先注册!"); $(".register").show(); $(".login").hide(); }else if(checkAP(data)){ alert("登录成功!") $(".login").hide(); }else{
alert("密码错误,请重新输入!")
$('.login input')[1].value = "请重新输入";
}
} }) }
//注册时检验账户是否存在
function checkAccount(data){
var objJson = eval(data);
//var objJson = JSON.parse(data);
for(var i = 0;i < objJson.length;i++){
if($('.register input')[0].value == objJson[i].account ||$('.register input')[3].value ==objJson[i].phone ||$('.register input')[4].value ==objJson[i].email){
return true;
}
}
}
//登录时检验账户是否存在 function checkLoginAccount(data){ var objJson = eval(data); //var objJson = JSON.parse(data); for(var i = 0;i < objJson.length;i++){ if($('.login input')[0].value == objJson[i].account){ //alert("已存在,请重新输入") return true; } } }
//登录时检验账户密码是否正确 function checkAP(data){ var objJson = eval(data); //var objJson = JSON.parse(data); for(var i = 0;i < objJson.length;i++){ if($('.login input')[0].value == objJson[i].account && $('.login input')[1].value ==objJson[i].psd){ return true; } } }
。。。未完待续