1、登录页面——index.html
应用JQuery Ajax技术将数据传给后端，后端再将数据以JSON的形式返回给前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div class="min">
<div class="tc_login">
<div class="login_register">
<form id="register-form" target="_top" >
<div align="center">
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
<input type="password" name="pass" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">
</div>
<dd>
<div class="user">
<input type="checkbox" name="user" id="user" value="记住用户" class="r_user" />记住用户
<a href="password.html" target="_blank">忘记密码？</a>
</div>
</dd>
<div align="center">
<input type="button" id="register-btn" class="button" title="Sign In" value="登录">
</div>
<dd>
<div align="center"><a href="register.html" target="_blank">立即注册！</a></div>
</dd>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
$('#register-btn').ready().click(function () {
// 阻止表单的默认行为
// e.preventDefault()
// 使用jq获取表单数据
const formData = $('#register-form').serialize()//把上面提交的两个数据序列化了
console.log(formData) //name=12&pass=12
$.ajax({
url:'/user/login',
method:'post',
data:formData,
dataType:"json",
success:function (json){
// alert('haha') 看是否运行到这一行
if(json.code === 200){
alert("您好，欢迎！");
window.location.href = "/user/main";
}
if(json.code === 300){
alert("该账号不存在");
}
else if(json.code === 400){
alert("密码错误！" );
}
}
})
})
</script>
</html>
2.注册页面-html
利用正则验证数据的格式，应用JQuery Ajax技术将数据传给后端，后端再将数据存到数据库，再将注册成功的信息以JSON的形式返回给前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书屋</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/popup.css" />
</head>
</head>
<body>
<div class="register_box">
<div class="tc_login">
<div class="login_register fl">
<form id="form_register" target="_top">
<div align="center">
<span class="error">请务必填写所有选项(填写的用户名已有时提示)</span>
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required"
placeholder="请输入用户名(6-10位字母或数字组成)" autocomplete="off" class="input_yh">
<input type="password" name="pass" id="pass" required="required"
placeholder="请输入密码(6-10位字母或数字组成)" autocomplete="off" class="input_mm">
<input type="password" name="pass_agin" id="pass_agin" required="required"
placeholder="请确认密码" autocomplete="off" class="input_mm">
<input type="email" name="email" id="emial" required="required"
placeholder="请输入邮箱(方便找回密码)" autocomplete="off" class="input_el">
</div>
<div align="center">
<input type="button" id="reg_btn" class="button" title="Sign In" value="注册">
</div>
</form>
</div>
<div class="l_img fl">
<img src="/images/sj.jpg" />
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
<script>
$('#reg_btn').ready().click(function () {
const formData = $('#form_register').serialize()//把上面提交的几个数据序列化了
if(($("#name").val()=='')){
alert("用户名不能为空");
return;
}
else{
var $repatrn =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
if(!$repatrn.test($("#name").val())){ //判断账号格式
alert('账号必须为6-10位数字或字母组成！');
return;
}
}
// console.log($("#name").val());
if($("#pass").val()==''){
alert("密码不能为空");
return;
}
else{
var $repatrn =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
if(!$repatrn.test($("#pass").val())){ //判断账号格式
alert('密码必须为6-10位数字或字母组成！');
return;
}
}
// console.log($("#pass").val());
if($("#pass_agin").val()==''){
alert("确认密码不能为空");
return;
}
else{
if($("#pass_agin").val()!=$("#pass").val()){ //判断账号格式
alert('密码不一致');
return;
}
}
if($("#email").val() ==''){
alert("邮箱为空");
return;
}
else{
// var $reemail =/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
var $reemail =/^\w{6,}$/;
if(!$reemail.test($("#email").val())){ //判断账号格式
alert('请重新输入邮箱');
return;
}
}
console.log(formData) //name=12&pass=12
$.ajax({
url:'/user/regist',
method:'post',
data:formData,
dataType:"json",
success:function (json){
if(json.code === 300){
alert(json.msg);
}
else if(json.code === 200){
alert(json.msg);
window.location.href = "/user/main";
}
}
})
})
</script>
</html>
</html>2、搭建服务器——user.js
// 导入express模块
var express = require('express');
// 导入路由模块
var router = express.Router();
// 导入url模块
var url = require('url');
// 导入mysql模块
var mysql = require('mysql');
// 导入数据库配置信息
var dbconfig = require('../DB/model.js');
// 使用DBConfig.js的配置信息创建一个MySQL连接池,提升性能
var pool = mysql.createPool(dbconfig.mysql);
/* POST users listing. */
/* 登录接口 */
router.post('/login', function(req, res, next) {
// 获取请求字段
console.log('post')
var username = req.body.name;//获取前台请求的参数
var password = req.body.pass;
// 启用连接池查询
pool.getConnection(function (err, connection) {
//先判断该账号是否存在
var $sql = "select * from userb where USERNAME=?";
connection.query($sql, [username], function (err, result) {
var resultJson = result;
console.log(resultJson.length);
if (resultJson.length === 0) {
result = {
code: 300,
msg: '该账号不存在'
};
res.json(result);
connection.release();
} else { //账号存在，可以登录，进行密码判断
var $sql1 = "select PASSWORD from userb where USERNAME=?";
connection.query($sql1, [username], function (err, result) {
var temp = result[0].PASSWORD; //取得数据库查询字段值
console.log(temp);
if (temp == password) {
result = {
code: 200,
msg: '密码正确'
};
req.session.name=req.body
req.session.islogin=true
} else {
result = {
code: 400,
msg: '密码错误'
};
req.session.islogin=false
}
res.json(result); // 以json形式，把操作结果返回给前台页面
connection.release();// 释放连接
console.log('找到了')
});
}
});
});
});
router.post('/regist', function(req, res, next) {
// 获取请求字段
console.log('post')
var username = req.body.name;//获取前台请求的参数
var password = req.body.pass;
var passagin = req.body.pass_agin;
var email=req.body.email;
//console.log(password)
// 启用连接池查询
pool.getConnection(function (err, connection) {
//先判断该账号是否存在
var $sql = "select * from userb where USERNAME=?";
connection.query($sql, [username], function (err, result) {
var resultJson = result;
console.log(resultJson);
console.log(resultJson.length);
var repatrn =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
var reemail =/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (resultJson.length !== 0) {
result = {
code: 300,
msg: '该账号已存在，请重新设置！'
};
res.json(result);
connection.release();
}else{
var $sql1 = "insert into userb (USERNAME,PASSWORD,EMAIL) values (?,?,?)";
connection.query($sql1,[username,password,email],function (err, result) {
var resultJson1 = result;
console.log(resultJson1.affectedRows)
if(resultJson1.affectedRows == 1){
result = {
code: 200,
msg: '注册成功'};}
console.log('成功了')
res.json(result); // 以json形式，把操作结果返回给前台页面
connection.release();// 释放连接
//console.log('成功了')
});
}
});
});
});3、数据库连接——model.js
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: 'zlhgq',
database: 'mysql',
port: 3306
}
};
2252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
