Ajax登录注册-----数据请求 交互
2024-04-29 05:17:08
环境搭建： 用nodeJs express 搭建服务器， 用MySQL创建数据库 表格 、SQLyogEnt管理数据库
使用主要技术： bootstrap 、 JS、 jQuery、Ajax、node、 express、 MySQL
登录界面：
项目文件结构：
登录注册模块在 首页的 导航栏 右上角：
html 部分：
<div class="header-right login">
<a ><span class="glyphicon glyphicon-user" aria-hidden="true" id="touXiang"></span></a>
<div id="loginBox" >
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label >用户名/手机号</label>
<input type="text" class="username" id="username"><span id="msg"></span>
</fieldset>
<fieldset>
<label for="userpaasword">密码</label>
<input type="password" name="userpaasword" id="userpaasword">
</fieldset>
<div id="shiBai"></div>
<p type="submit" id="login" οnclick="checkLogin()">登 录</p>
<label for="rmbUser"><input type="checkbox" id="rmbUser"><span>记住密码</span></label>
</fieldset>
<p>新用户? <a class="sign" href="account.html">注册</a> <span>快速登录：
<a href="#"><i class="fa fa-qq" aria-hidden="true"></i>
<i class="fa fa-weixin" aria-hidden="true">
</i><i class="fa fa-weibo" aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i></a></span></p>
</form>
</div>
</div>
css 部分：
/*--Login --*/
/* Login Form */#loginForm { width: 300px; background: #fff; border: 1px solid #d6d6d6;}#loginForm fieldset { margin:0 0 15px 0; display:block; border:0; padding:0;}fieldset#body { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; padding:15px 15px; margin:0;}#loginForm #checkbox { width:auto; margin:3px 6px 0 0; float:left; padding:0; border:0; *margin:-3px 9px 0 0; /* IE7 Fix */}#body label { color:#87807c; margin:10px 0 0 0; display:block; text-align: left; font-size:12px;}#loginForm #body fieldset label{ margin:0 0 6px 0;}#body label { color: #87807c; font-size: .2em; /*outline:1px solid darkorange;*/}#username{ position: relative;}#msg{ position: absolute; width: 140px; height: 20px; top:45px; left:150px; /*outline:1px solid gold;*/}#login{ position:relative;}#shiBai{ width: 140px; height: 30px; color:#F07818; /*outline: 1px solid #4a1aff;*/ position: absolute; left:60px; bottom:160px;}.copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden;}/* Default Input */#loginForm input { width:100%; border:1px solid #DADADA; color: #222; background:#FFF; padding:6px; font-size: 0.4em; -webkit-apperance:none; /*outline:1px solid red;*/}#loginForm input:focus{ box-shadow: inset 0 1px 1px rgba(105, 105, 105, 0.07), 0 0 3px #e87619;}/* Sign In Button */#loginForm #login { background: #F07818; color: #fff; font-size: 1em; padding: 5px 20px; border: 1px solid #F07818; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; font-family: 'Roboto-Regular'; /*outline:1px solid #41b1ff;*/}#loginForm #login:hover { background: #fff; color: #F07818;}/* Forgot your password */#loginForm p { font-size: 0.9em; margin-bottom: 1.2em; color: #999; /*outline:1px solid #7816ff;*/}.header-right #loginForm a.sign { display: inline-block !important; color: #F07818; margin-right: 10px; border-right: 1px solid; padding-right: 10px; /*outline:1px solid #d92dff;*/}.header-right #loginForm a.sign:hover { color: #5D4B33;}#loginForm span a { color: #999; display: inherit;}#loginForm span a:hover{ text-decoration:underline; color:#F07818;}input:focus { outline:none;}.header-right.login:hover #loginBox { display:block;}
#msg{color: white;
}
.nonee{display: none;
}
#loginContainer { position:relative;}#loginContainer a span{ display:block;}/* Login Button */#loginButton { display:inline-block; position:relative; z-index:30; cursor:pointer;}/* Login Box */#loginBox { position: absolute; top: 98%; right:14.5%; /*display:none; /!* ����ٻָ�*!/*/ z-index: 99;}#loginForm:after { content: ''; position: absolute; right: 9%; top: -9px; border-left: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid #FFFFFF;
当点击 最终的登录按钮，触发 前台向 服务器发起ajax请求 将用户输入的用户名 和密码 传递到服务器，服务器链接后台数据库，比对数据，如果查询到有这一组数据，说明是正确的，返回 data结果给前台 的ajax 回调函数，然后操作dom 渲染页面（跳转到主页面）
如果前台ajax 回掉函数 里面的 收到的后台返回来的data数据是 自己在路由层设定好的错误信息提示，那么就 操作dom: 弹出一个遮罩层 上面内容提示用户登录失败
另一个ajax请求 是检查登录状态、判断用户是否是第二次登录，二次登录的时候 让浏览器暂时保存用户的名字，提示 欢迎 某某某：
<script>
// 点击登录，检查登录成功与否
function checkLogin(){$.ajax({type:"post",url:"login.do",data:{uname:$("#username").val(),upwd:$("#userpaasword").val()
},success:function(data){console.log(data);if(data=="登录失败,请重新登录"){$("#shiBai").html(data);}else{$("#mssg").html(data);$("#shiBai").html("");$("#loginBox").addClass("nonee") //登录成功后 隐藏登陆框
}}})
}// 检查登录状态，第二个ajax请求 发送session到后台
$(function(){ // 第二次打开页面 发起新的ajax请求 检查登录状态
$.ajax({type:"post",url:"checklogin.do",success:function(data){// console.log(data);
if(data.length>0){$("#loginBox").hide()
$("#mssg").html(data); //显示登录状态 欢迎某某
$("#touXiang").mouseover(function(){ //移入头像 隐藏登陆框
$("#loginBox").hide()
})
$("#touXiang").click(function(){ //点击头像 跳转到个人中心页面
window.location.href = '/index.html?u=pagePersenal';})
}}})
})
//重新获取焦点时，"登录失败" 提示消息不显示
$("#userpaasword").focus(function(){$("#shiBai").html("");})
//登录时，手机号码 空值判断、正则判断
$("#username").focus(function(){ //获取焦点时，msg不显示
$("#msg").html("");$("#shiBai").html("");console.log("AAA")
});$("#username").blur(function(){ //失去焦点时，发送ajax请求，数据库对比数据，
var reg2=/^1[3|4|5|7|8][0-9]\d{8}$/;if(this.value ==""){console.log("进来了")
$("#msg").html("*请输入登录手机号");$("#msg").css("color","red");}else{if(!reg2.test(this.value)){ //如果当前用户输入的值 非真（不符合手机号规则）
$("#msg").html("*手机号格式错误，请重新输入")
$("#msg").css("color","red");}}});
</script>
以下是：主程序app.js 搭建服务器，并拦截 前台发起的ajax请求, 然后路由express模块 分发到相应的路由功能模块： uerModule.js登录模块、 msgModule.js注册模块
/**
* Created by hasee on 2017/4/21.
*/
const myexpress =require("express"); //加载express的资源
/*使用路由文件*/
const userM =require("./routes/userModule.js");
const msgM = require("./routes/msgModule.js");
const app = myexpress(); //执行express的全局函数，返回一个express的服务器对象
const ejs = require("ejs"); //ejs 模板引擎
/*session cookie*/
//npm install express-session --save-dev
//npm install cookie-parser --save-dev
const session = require("express-session");
const cookieParser = require("cookie-parser");app.configure(function(){/*1.调用cookieParser()*/
app.use(cookieParser());/*2.Session配置*/
app.use(session({secret:"1234", //秘钥 随机得到的密码存进去
name:"cookieName128", //cookie名称
cookie:{maxAge:30000}, // 失效过期时间 单位毫秒，30s
rolling:true, //从第一次访问该网页时，第一次开始会话开始算 更新session-cookie失效时间
resave:true // 刷新后重新保存一下
}));app.set("views",__dirname+"/public/views"); //配置视图模板在哪个位置
app.set("view engine","ejs");//__dirname :全局变量，代表的是项目根路径
app.use(myexpress.logger("dev")); //日志
app.use(myexpress.bodyParser()); //把提交的数据，封装到request中的body里
app.use(myexpress.methodOverride()); //非get请求转换为post请求 如：put , head , delete
app.use(app.router);//先执行用户设置的，在访问静态页面，这一个配置写在静态资源配置的前面
app.use(myexpress.static(__dirname+"/public")); //设置静态资源路径
//app.use(myexpress.favicon(__dirname+"/public/test.jpg")); //小图标
app.use(myexpress.errorHandler()); //设置错误模块
});app.set("port",8883);
app.listen(app.get("port"),function(){console.log("服务器已经启动"+app.get("port"));
});app.post("/login.do",userM.login); //拦截前台发来的ajax请求 指向路由模块的login函数
app.post("/checklogin.do",function(req,resp){ // 检查登录状态
let myuser = req.session.myuser;console.log(myuser)
resp.send(myuser)
});
//app.get("/login",function(req,resp){
// /* resp.rander() 把要 渲染的html和渲染后的数据一起返回给前台*/
// //var uname="张三";
// //resp.render("login",{username:uname});
// resp.render("login.ejs",{})
//})
//
app.post("/sendMsg.do",msgM.sendMsg); //拦截 发送短信请求
app.post("/yanZheng.do",msgM.yanZheng);// 拦截 验证短信请求
app.post("/checkPhone.do",msgM.checkPhone); // 拦截 手机号可以注册否
登录路由功能模块：uerModule.js
/**
* Created by hasee on 2017/4/21.
*/
"use strict";const db = require("./configdb.js"); // 引入 封装后的专门链接数据库的模块
let userModule = {// 点击登录 提交用户名 和密码到后台，后台连接数据库 验证账号 和密码
login: function (req, resp) {console.log("进入了路由层");let username = req.body.uname; //接收前台传来的值 并打印出来看看
let password = req.body.upwd;console.log(username);console.log(password);// 连上数据库 比对数据，查找 数据库有没有用户输入的数据
db.connection("select * from g_login where n_username=? and n_userpsw=?", [username, password],function (err, data) { //把查到的数据放进 data 里面
//console.log(err);
//console.log(data);
//if( req.session.myuser){如果有session,那么直接跳转到主页
}else{ 如果没有session,那么跳转到登录页面}
console.log("查询mysql完毕调用的回调函数");if (data.length > 0 && data != undefined){ // 当数据库里面有 数据的时候,则
req.session.myuser= data[0].n_username; // 先把data对象里面的第一条的用户名 存到session里面
resp.send(req.session.myuser)
} else {resp.send("登录失败,请重新登录");}})
}
}
/*把module.exports指向于userModule这个对象*/
module.exports=userModule;
注册页面的效果：
手机号码正则判断、手机发送验证码 、失效时间倒计时 和 动态获取设置的密码强度判断：
注册页面结构 html : account.html:
<!--account-->
<div class="account">
<div class="container">
<div class="register">
<form>
<div class="register-top-grid registerMain">
<h3>手机号码快速注册</h3>
<div class="input">
<span class="headText">手机号<label>*</label></span>
<input type="text" id="regPhone" placeholder="请输入有效的手机号码" ><span id="err_msgPhone"></span>
</div>
<div class="input">
<span class="headText">请输入校验码<label>*</label></span>
<input type="text" class="yanZM" id="yanZM">
<!--<span id="sendYzm" >免费获取验证码</span>-->
<input type="button" class="btn c-333 text-c js-code" value="获取验证码" id="sendYzm">
</div>
<div class="input">
<span class="headText">密码<label>*</label></span>
<input name="password" type="text" class="inPsw" id="regPsw" onKeyUp="CheckQiang(this.value)" placeholder="请输入6~16位字符:（大小写字母+数字）组合" >
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="pwd_Weak" class="pwd pwd_c"> </td>
<td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
<td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
</tr>
</table>
<span id="err_msgPsw"></span>
</div>
<div class="clearfix"> </div>
</div>
</form>
<div class="clearfix"> </div>
<div class="register-but">
<form>
<input type="button" id="btnRegister" value="注 册" οnclick="checkCode()">
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
注册页面 的样式css：
<style>
#regPhone{position: relative;}#err_msgPhone{position: absolute; left:750px;top:278px;display: inline-block;width: 250px;height: 35px;text-align: center;line-height: 30px;color: #fd811a;/*border: 1px solid #807741;*/
}.input:nth-child(3){/*outline: 1px solid green;*/
margin-top: 6%;margin-bottom: 8%;}.headText{font-size:24px;/*font-size: 0.4em;*/
font-weight: 800;}#regPhone:focus,.yanZM:focus,#regPsw:focus{box-shadow: inset 0 1px 1px rgba(105, 105, 105, 0.07), 0 0 4px #fd811a;}#sendYzm{background-color: #fd811a;color: white;border-radius: 0px;}#regPsw{position: relative;/*width: 44%;*/
}#err_msgPsw{position: absolute; left:740px;top:522px;display: inline-block;width: 270px;height: 35px;text-align: center;line-height: 30px;color: #fd811a; font-size: 15px;/*border: 1px solid #801c24;*/
}#msgYanZM{position:absolute; left:740px;top:374px;display: inline-block;width: 270px;height: 35px;text-align: center;line-height: 30px;color: #fd811a; font-size: 15px;border: 1px solid #4e6b80;}/*设置密码强度检测*/
.pwd{width:40px;height:20px;line-height:14px;padding-top:2px;}.pwd_f{color:#BBBBBB;}.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}.pwd_c_r{border-right:1px solid #D0D0D0;}.pwd_Weak_c_r{border-right:1px solid #BB2B2B;}.pwd_Medium_c_r{border-right:1px solid #E9AE10;}.pwd_Strong_c_r{border-right:1px solid #267A12;}/*注册成功后的弹框 */
#Tankuang,#Tankuang2{position: fixed;top:0;left:0;z-index: 333;width: 100%;height: 100%;background-color: rgba(0,0,0,.7);display: none;}.tanMain,.tanMain2{background-color: #f0e5ff;width: 300px;height: 200px;margin: 20% auto;text-align: center;border-radius: 5px;}.tanMain h3,.tanMain2 h3{padding-top: 24%;}.tanMain button,.tanMain2 button{border: none;border-radius: 5px;margin-top: 10%;width: 150px;height: 30px;background-color: #ff9832;}
</style>
注册页面 的Js :
<script src="js/jquery-1.11.3.js"></script>
<script>
// 注册时，手机号 按正则格式输入 , 且检查已存在否
$("#regPhone").focus(function(){$("#err_msgPhone").html("")
})
$("#regPhone").blur(function(){var reg1=/^1[3|4|5|7|8][0-9]\d{8}$/;if(!reg1.test(this.value)){ //如果当前用户输入的值 非真（不符合手机号规则）
$("#err_msgPhone").html("*请输入正确的手机号")
}else if(reg1.test(this.value)){// 发起请求 提交到后台去 比对用户名存在与否....
checkPhone();function checkPhone(){$.ajax({type:"post",url:"/checkPhone.do",data:{userPhone:$("#regPhone").val()},success:function(data){$("#err_msgPhone").html(data)
}})
}}})
//发送验证码 发起ajax请求,后台拦截这个请求
$("#sendYzm").click(
function(){var phone=$("#regPhone").val();console.log(phone);$.ajax({url:"sendMsg.do",type:"post",data:{phone:phone},success:function(data){console.log(data);}})
})
//点击 发送验证码 的同时-----倒计时开始
var countdown=60;$("#sendYzm").click(function settime(e){if(countdown == 0){e.target.removeAttribute("disabled");e.target.value="获取校验码";countdown =60;return;}else{e.target.setAttribute("disabled",true);e.target.value="重新发送（"+countdown+"s)";countdown--;}setTimeout(function(){settime(e);},1000);})
// 密码强度判断
function CheckQiang(pwd){var Mcolor,Wcolor,Scolor,Color_Html;var m=0;var Modes=0;for(var i=0; i<pwd.length; i++){var charType=0; // 字符类型 ASCII类型
var t=pwd.charCodeAt(i); //返回字符串pwd第i个字符的 Unicode 编码
if(t>=48 && t <=57){charType=1;}else if(t>=65 && t <=90){charType=2;}else if(t>=97 && t <=122){charType=4;}else{charType=4;}Modes |= charType;}for(var i=0;i<4;i++){if(Modes & 1){m++;}Modes>>>=1;}if(pwd.length<=4){m=1;}if(pwd.length<=0){m=0;}switch(m){case 1 : // 如果输入的密码位数少于5位，那么就判定为弱
Wcolor="pwd pwd_Weak_c"; //如果输入的密码只由数字、小写字母、大写字母或其它特殊符号当中的一种类型组成，则判定为弱
Mcolor="pwd pwd_c";Scolor="pwd pwd_c pwd_c_r";Color_Html="弱";document.getElementById("err_msgPsw").style.display="block";document.getElementById("err_msgPsw").innerHTML = "*您的密码强度太弱了，建议重设";break;case 2 : //如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种类型组成，则判定为中
Wcolor="pwd pwd_Medium_c";Mcolor="pwd pwd_Medium_c";Scolor="pwd pwd_c pwd_c_r";Color_Html="中";document.getElementById("err_msgPsw").style.display="block";document.getElementById("err_msgPsw").innerHTML = "*您的密码强度一般，可以重设";break;case 3 : //如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种类型以上组成，则判定为强
Wcolor="pwd pwd_Strong_c";Mcolor="pwd pwd_Strong_c";Scolor="pwd pwd_Strong_c pwd_Strong_c_r";Color_Html="强";document.getElementById("err_msgPsw").innerHTML = "您的密码很强 很不错！";break;default :Wcolor="pwd pwd_c";Mcolor="pwd pwd_c pwd_f";Scolor="pwd pwd_c pwd_c_r";Color_Html="无";document.getElementById("err_msgPsw").style.display="none";break;}document.getElementById('pwd_Weak').className=Wcolor;document.getElementById('pwd_Medium').className=Mcolor;document.getElementById('pwd_Strong').className=Scolor;document.getElementById('pwd_Medium').innerHTML=Color_Html;}//点 注册，先检查 验证码正确否？ ----> 正确再发起ajax,
// 将电话和密码一起提交后台,数据库添加数据
function checkCode(){var yanZM = $("#yanZM").val(); //获取输入的验证码的 值
if(yanZM == null || yanZM == ''){$("#msgYanZM").html("验证码不能为空！");}else{$.ajax({type: "post", // 用POST方式传输
url: "yanZheng.do", // 目标地址
data:{phone:$("#regPhone").val(),yanZm:$(".yanZM").val(),psw:$("#regPsw").val()
},success: function (data){console.log("验证码验证ok之后返回给前台的data:"+data);if(data == "yes"){$("#Tankuang").show(); //注册成功后 前台的变化
}else if(data == "no"){$("#Tankuang2").show();//注册失败后 前台的弹框
}}});}};//注册成功失败后的弹出框
$("#ok").click(function(){$("#Tankuang").remove();});$("#no").click(function(){$("#Tankuang2").remove();})
</script>
注册 路由功能模块msgModule.js： 其中有向手机发送验证码 用户收到云端发来的验证码，并且输入正确的手机验证码之后，才会连同 用户名（手机号）+设置的密码 一同提交到后台，加进后台数据库
/**
* Created by hasee on 2017/4/21.
*/
"use strict";
// app id VzqpaQR1XG0IJ87wuYGgy8r9-gzGzoHsz
// App Key Nfzq4VQlpz5ig0H4bz6BPK5I
// 用老杨的短信平台测试密码
// appId:"6WFhctzJ8lUqXPtySoY8gvMB-gzGzoHsz",
// appKey: "1ytqz7vdgjp68yUEswX4LEbD"
const db = require("./configdb.js"); // 引入 封装后的专门链接数据库的模块
const AV = require("leanengine");
AV.init({ // 申请的免费短信云服务 https://leancloud.cn
appId:"VzqpaQR1XG0IJ87wuYGgy8r9-gzGzoHsz",appKey: "Nfzq4VQlpz5ig0H4bz6BPK5I"
});
let msgModule= {sendMsg: function (req, resp) {let phone = req.body.phone;console.log(phone)
/*调用requestSmsCode 发送短信接口*/
AV.Cloud.requestSmsCode({ // 详见API https://leancloud.cn/docs/sms_guide-js.html
mobilePhoneNumber: phone,name: '厨师定制',op: '账号注册',ttl: 10 //验证码过期时间，单位是分钟
}).then(function (data) { //发送成功后执行的回调函数
console.log();resp.send("验证码已发送")
}, function (err) { //发送失败后执行的回调函数
console.log(err);resp.send("验证码发送失败" + err)
});},// 调用验证 验证码的接口 verifySmsCode(验证码,手机号)
yanZheng: function (req, resp) {let phone = req.body.phone;let yanZm = req.body.yanZm;let psw = req.body.psw;console.log(phone);console.log(psw);AV.Cloud.verifySmsCode(yanZm,phone).then(function(data){ //验证码输入正确后执行的回调函数
//console.log(data);
// 验证码成功之后 再把账号密码 添加写进数据库
//console.log("验证码正确之后打印data"+data);
db.connection("INSERT INTO g_login VALUES (NULL,?,?)", [phone,psw],function(err,data){//console.log(err);
console.log(444444);resp.send("yes");})
}, function(err){ //验证失败后的回调操作
console.log(err);resp.send("no");});},// 检查 手机号是否已被注册
checkPhone: function (req, resp) {let phone = req.body.userPhone;console.log(phone);db.connection("select n_username from g_login where n_username=? ", [phone],function (err, data) {console.log(data);if (data.length > 0 && data != undefined) {resp.send("*该用户已存在");}else{resp.send("该账号可以注册");}})
}
}
module.exports=msgModule; // 公开这个路由对象，里面的方法才可以被调用
专门用于 服务器路由层 连接数据库的模块：configdb.js （已封装，直接传递参数，即可连接数据库）
/**
* Created by hasee on 2017/4/21.
*/
"use strict";
const mysql = require("mysql");
exports.connection=function(sql,arr,fn){console.log("进入mysql");let myConnection = mysql.createConnection({host:"localhost",user:"root",password:"root",port:"3306", //默认不写就是3306
database:"logindb"
});myConnection.connect();myConnection.query(sql,arr,fn);myConnection.end();
}
Ajax登录注册-----数据请求 交互相关推荐
- uniapp ajax数据库查询,uniapp小程序登录、数据请求方式
index页面 手动授权按钮 exportdefault{ data() {return{ imgInfo:"",//头像 nickName:""//昵称 } ...
- Servlet-用户登录注册案例
文章目录 前言 1.环境准备 1.1.项目搭建 1.2.界面编写 1.3.数据库搭建 1.4.实体类创建 1.5.导入依赖并编写配置文件 2.登录实现 2.1.需求分析 2.2.代码实现 2.3.结果 ...
- 基于android校园订餐APP，简单实现登录注册功能（SharedPreferences）
基于android校园订餐APP,简单实现登录注册功能(SharedPreferences) 欢迎浏览本篇文章 界面效果图 页面设计代码 源代码 欢迎浏览本篇文章 大家好! 这是小编首次在博客上写的文 ...
- 产品需求文档、需求结构图、数据字典、全局说明、用例描述、需求描述、逻辑流程、原型设计、页面交互、登录注册、词汇表、数据统计、用户表设计、接口需求、功能清单、业务流程图、Axure原型、prd、文档实例
产品需求文档.需求结构图.数据字典.全局说明.用例描述.逻辑流程.原型设计.页面交互.登录注册.词汇表.数据统计.用户表设计.接口需求.功能清单.业务流程图.Axure原型.prd.产品需求文档实例 ...
- Flask项目实战——6—(前台用户模型、前台登录注册、图形验证码、手机短信验证码、添加表单验证短信验证码请求)
1.前台用户模型 前台用户模型定义 创建前台模型文件 apps/front/models.py # -*- encoding: utf-8 -*- """ @File : ...
- python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...
python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 fro ...
- SpringBoot实现登录注册（ajax）
SpringBoot框架实现登录注册ajax 日期 1.项目分析,首先规划开发流程 2.创建数据表 3.先把application.properties配置写全 4.首先第一步,进行持久层开发 5.持 ...
- SpringBoot+SpringSecurity处理Ajax登录请求
最近在项目中遇到了这样一个问题:前后端分离,前端用Vue来做,所有的数据请求都使用vue-resource,没有使用表单,因此数据交互都是使用JSON,后台使用Spring Boot,权限验证使用了S ...
- Ajax 前端后端数据交互
Ajax 前端/后端数据交互 一 概述 同步: 一请求一响应,全局刷新 异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
最新文章
- 区块链笔记-Hash算法
- Apache Shiro Architecture--官方文档
- CSS3的绝对定位与相对定位
- 关于谷歌地图坐标与百度地图坐标的事
- XCTF-Reverse：open-source
- 一文带你梳理Clang编译步骤及命令
- pytorch_basics
- 执行存储过程SQL Server阻止了对组件xp_cmdshell过程的解决方案
- 四大障碍将阻止或减缓广电发展宽带业务
- 函数 strcmp_【函数分享】每日PHP函数分享(2020630)
- 抽奖活动软件 html,webAPP最常用的活动促销案例：大转盘H5抽奖特效
- springboot办公OA考勤请假系统java
- 创客使用Fusion 360 - 草绘
- 二元二次方程例题_2元1次方程100道题 七年级数学下册二元二次方程组100道计算题及答案！......
- 【Adobe Creative Cloud】
- .net framework MVC ，API， 支持OAS3
- android小电脑,废旧笔记本电脑纯手工改装“安卓小电脑”，太赞了！
- 2023电工杯数学建模思路 - 复盘：校园消费行为分析
- 数组（一维数组与二维数组）
- 自己动手，编写神经网络程序，解决Mnist问题，并网络化部署-6CBIR模拟问题
热门文章
- 【D3D11游戏编程】学习笔记十八：模板缓冲区的使用、镜子的实现
- 前端开发面试知识点大纲
- 服务机器人“大战”进入下半场，竞争焦点变了
- The class file xxx contains a signature 'xxx;' ill-formed at position 6 问题的解决
- 智慧交管大屏可视化决策系统
- 2021.09.27-10.3 AI行业周刊（第65期）：坚持的力量
- jupyter notebook内核挂了
- 在pycharm中%matplotlib inline报错！！！
- SAP中类型(Type)和类别(Category)详解及其区别
- c语言中字符串输入格式错误的是什么,C语言中scanf函数格式化错误输入问题