前端:注册页面
注册功能:输入用户名、密码等信息,通过后端将数据插入数据库,实现成功注册。
1.首先,新建注册页面(reg.html)
2.其次,对注册页面进行设计
页面头部内容(在<head>标签中添加内容)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UU铺子</title>
<link rel="stylesheet" href="/css/reg.css">
</head>
<title>标签—自定义网站标题
<link href="/css/reg.css>—调用css文件夹中的reg.css文件,对页面的格式进行定义
页面文档内容(在<body>标签中添加内容)
<body>
<div class="big-box">
<div class="small-box">
<div class="box-1">
</div>
<!--左边的图片部分-->
<div class="box-2">
<!--右边的表单部分-->
<div class="box-text1">
<h3>注册账号</h3>
</div>
<div class="box-text2">
<div class="box-text">
<div class="button">
<form id="form_reg" target="_top">
<div align="center">
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required"
placeholder="用户名" class="input_yh">
<input type="password" name="pass" id="pass" required="required"
placeholder="密码" class="input_mm">
<input type="password" name="pass_again" id="pass_again" required="required"
placeholder="再次输入密码" class="input_mm">
<!-- <input type="email" name="email" id="emial" required="required"
placeholder="邮箱地址" class="input_el"> -->
</div>
<button><input type="button" id="reg_btn" class="button" title="Sign In" value="注册" style="outline: 0px;font-size: 18px;width: 250px; height: 35px;border-radius: 30px;border: none;background-color: rgba(41, 113, 139, 0.61);-webkit-text-fill-color: white;"></button>
</form>
</div>
<div class="box-button">
<label for="1">
<input type="checkbox" id="1" class="ma">
<span class="one"></span>
记住密码
</label>
<label for="2">
<input type="checkbox" id="2" class="ma">
<span class="two"></span>
自动登录
</label>
</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>
<input>中,type="xxx"对按钮进行类型的定义。
如:button—定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
checkbox—定义复选框
password—定义密码字段。该字段中的字符被掩码
text—定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符
PS:在注册页面实现点击注册按钮后能够成功注册,并跳转回主页的功能
(在注册按钮中绑定script程序,使用户点击按钮时可以启动该程序)
<input type="button" > 定义可点击的按钮,但没有任何行为
button 类型常用于在用户点击按钮时启动 JavaScript 程序
3.最后,在登录页面内用JQuery实现前后端的数据交互、传输。
<script>
$('#reg_btn').ready().click(function () {//点击注册按钮触发方法
const formData = $('#form_reg').serialize();//实现获取数据串化
console.log("formData")
//验证用户名:
if(($("#name").val())==null){
alert("用户名不能为空!");
return;
}else{
var $reg = /^\w{2,}$/; //使用正则
if(!$reg.test($("#name").val())){
alert("用户名至少两位!");
return;
}
}
//验证密码:
if($("#pass").val()==null){
alert("密码不能为空!");
return;
}else{
var $reg = /^\w{2,}$/;
if(!$reg.test($("#pass").val())){
alert("密码至少两位!");
return;
}
}
//确认密码:
if($("#pass_again").val()==null){
console.log("heihei");
alert("请再次输入密码!");
return;
}
//验证两次密码一致性:
if($("#pass").val()!=$("#pass_again").val()){
console.log("haha");
alert("两次密码不一致,请重新输入!");
return;
}
console.log(formData) //在控制台中打印获取的表单数据
$.ajax({
type:'get',
url:'/user/registersend',
data:formData,
dataType:"JSON",
success:function(json){
if(json.code === 200){
alert("注册成功!即将跳转到主页");
window.location.href="/user/main";
}else if(json.code === 400){
alert("注册失败!"+json.msg);
}
}
})
})
</script>
后端:注册页面
1.首先,在与前端串联的js文件中添加代码,能够将前端输入的数据成功插入数据库中。
router.get('/registersend', function(req, res, next) {
//获取请求字段
console.log(req.query); //控制台打印一下看看成功接收到没
var username = req.query.name; //获取前台请求参数
var password = req.query.pass;
var email = req.query.email;
//启用连接池查询
pool.getConnection(function (err, connection) {
//先判断该账号是否存在
//定义一个查询sql语句
var $sql1 = "select * from cus where USERNAME=?";
//根据前端给的username补齐数据,返回result-查询到的结果
connection.query($sql1, [username], function (err, result) {
//我们重点关注数据长度 大于零说明查到东西了
var resultJson = result;
console.log(resultJson.length);
//与登录逻辑不同,注册逻辑是有数据则报错
if (resultJson.length !== 0) {
result = {
code: 400,
msg: '该账号已存在'
};
res.json(result);
connection.release();
} else { //账号不存在,可以注册,用insert插入数据
console.log(username)
var $sql1 = "insert into cus (USERNAME,PASSWORD,EMAIL) VALUES(?,?,?)"; //删除了values中的'' 如果加了'',则输入的就为?字符 故应该删除''
connection.query($sql1, [username,password,email], function (err, result) {
var temp = result.affectedRows; //取得数据库更让新结果
console.log(temp);
if (temp == 1) {
result = {
code: 200,
msg: '注册成功'
};
} else {
result = {
code: 400,
msg: '注册失败'
};
}
res.json(result); // 以json形式,把操作结果返回给前台页面
connection.release();// 释放连接
console.log('找到了')
});
}
});
});
})
2.其次,在js文件中加入下面的代码,实现登录成功后页面的跳转。
router.get('/main', function(req, res, next) {
res.render('main', { title: 'Express' });
});
3.最后,所插入的数据能够在数据库列表中显示。