软件:Microsoft VS Code+Navicat for MySql
先看一下运行结果:(在浏览器中输入:localhost:3000)
//::::::::::::::::::::login.ejs::::::::::::::::::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录 - 知乎 - Thousands Find</title>
<link rel="stylesheet" type="text/css" href="/public/style/register-login.css">
<script type="text/javascript" src="/public/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<div class="cent-box">
<div class="cent-box-header">
<h1 class="main-title hide">知乎</h1>
<h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
</div>
<div class="cont-main clearfix">
<div class="index-tab">
<div class="index-slide-nav">
<a href="/login" class="active">登录</a>
<a href="/">注册</a>
<div class="slide-bar"></div>
</div>
</div>
<div class="login form">
<div class="group">
<div class="group-ipt email">
<input type="text" name="email" id="email" autocomplete="off" class="ipt" placeholder="邮箱地址">
</div>
<div class="group-ipt password">
<input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码">
</div>
</div>
</div>
<div class="button">
<button id="btnLogin" class="button-style">登录</button>
</div>
</div>
</div>
<div class="footer">
<p>知乎 - Thousands Find</p>
</div>
</body>
</html>
<script>
$(function() {
$('#btnLogin').click(function() {
var userEmail = $('#email').val();
var userPwd = $('#password').val();
$.post('/userLogin', {
email: userEmail,
pwd: userPwd
}, function(data) {
if (data.flag === 'no') {
alert(data.msg);
} else {
alert(data.msg);
}
})
})
})
</script>
//::::::::::::::::::::::::::::::::::register.ejs::::::::::::::::::::::::::::::::::::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册 - 知乎 - Thousands Find</title>
<link rel="stylesheet" type="text/css" href="/public/style/register-login.css">
<script type="text/javascript" src="/public/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<div class="cent-box register-box">
<div class="cent-box-header">
<h1 class="main-title hide">知乎</h1>
<h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
</div>
<div class="cont-main clearfix">
<div class="index-tab">
<div class="index-slide-nav">
<a href="/login">登录</a>
<a href="#" class="active">注册</a>
<div class="slide-bar slide-bar1"></div>
</div>
</div>
<div class="login form">
<div class="group">
<div class="group-ipt email">
<input type="text" name="userEmail" id="email" class="ipt" placeholder="邮箱地址" autocomplete="off"> <span id="showMsg" style="font-size:14px;color:red;font-weight:bolder"></span>
</div>
<div class="group-ipt user">
<input type="text" name="userName" id="user" class="ipt" placeholder="选择一个用户名" autocomplete="off">
</div>
<div class="group-ipt password">
<input type="password" name="userPwd" id="password" class="ipt" placeholder="设置登录密码" autocomplete="off">
</div>
<div class="group-ipt password1">
<input type="password" name="password1" id="password1" class="ipt" placeholder="重复密码" autocomplete="off">
</div>
</div>
</div>
<div class="button">
<button id="btnRegister" class="button-style">注册</button>
<span style="font-size:14px;color:red;font-weight:300" id="errMsg"></span>
</div>
</div>
</div>
<div class="footer">
<p>知乎 - Thousands Find</p>
</div>
</body>
</html>
<script>
$(function() {
// 可以找到输入邮箱的框,给其添加一个失去焦点的事件,如果该事件发生了,表明我们可以获取用户输入的邮箱信息。
$('#email').blur(function() {
// 获取邮箱.
var email = $('#email').val(); //获取邮箱信息
if (email === '') {
// 将错误信息写到span标签中。
$('#showMsg').text('邮箱不能为空!')
} else {
// 发送到服务器,进行校验.
$.post('/checkEmail', {
userEmail: email
}, function(data) {
$('#showMsg').text(''); // 给span清除值。
$('#showMsg').text(data.msg);
})
}
})
// 找到注册的按钮,添加绑定的单击事件。
$('#btnRegister').click(function() {
var userEmail = $('#email').val();
var userName = $('#user').val();
var userPwd = $('#password').val();
$.post('/register', {
name: userName,
pwd: userPwd,
email: userEmail
}, function(data) {
if (data.flag === 'no') {
$('#errMsg').text(data.msg);
} else {
// 跳转到登录页面,完成登录。
//这个跳转也是get.
window.location.href = '/login';
}
})
})
})
</script>
//导入express模块
const express = require('express');
const app = express();
// 导入mysql模块
const mysql = require('mysql');
// 1.使用 app.set('view engine','模板引擎的名称')
app.set('view engine', 'ejs');
// 2. 设置模板页面默认的存放路径,app.set('views','模板页面的具体存放路径')
app.set('views', 'ejsViews');
//设置静态资源的访问路径,第一个参数,表示请求的url地址,第二个访问的文件夹。
app.use('/public', express.static('public'));
//导入body-parser模块,处理post过来的数据
const bodyParser = require('body-parser')
// 注册解析表单数据的bodyParser.
app.use(bodyParser.urlencoded({ extended: false }))
// 创建mysql的连接对象 输入你的数据库的数据库名称和密码
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123456',
database: 'zhihu'
});
app.get('/', function(req, res) {
res.render('register.ejs');
})
// 判断邮箱
app.post('/checkEmail', function(req, res) {
// 1:接收传递过来的邮箱
var email = req.body.userEmail;
// 2:才开始进行校验邮箱是否存在。
//count(*) 统计数据的个数,统计的是满足条件的数据的个数。
// counta 是别名,该名字随便起,存取了统计的数据
const sql = 'select count(*) as counta from userinfo where email=?';
conn.query(sql, email, function(err, result) {
if (err) {
res.send({ msg: '查询失败' });
} else {
// 判断查询出来的记录的个数,如果大于0,表示传递过来的邮箱是在数据库中有的,那么这时返回的信息为'邮箱被占用'
// 小于等于0,则邮箱可用。
// result是数组;[ { counta: 1 } ]
if (result[0].counta > 0) {
res.send({ msg: '邮箱被占用了' });
} else {
res.send({ msg: '次邮箱可用' });
}
}
})
// 3:把校验的结果返回。
})
app.post('/register', function(req, res) {
// 1:接收数据
var userName = req.body.name;
var userPwd = req.body.pwd;
var userEmail = req.body.email;
// 2:插入数据。insert (在向表中插入数据之前,有没有必要再次查询数据库判断用户输入的邮箱是否有相同的???)非常有必要。
const sqlStr = 'select count(*) as counta from userinfo where email=?';
conn.query(sqlStr, userEmail, function(err, result) {
if (err) return res.send({ msg: '查询错误', flag: 'no' });
// 如果执行了return,下面的代码都不会执行,
if (result[0].counta > 0) return res.send({ msg: '邮箱被占用了', flag: 'no' });
// 如果上面的条件都不成立。
const sql = 'insert into userinfo(name,pwd,email) values(?,?,?)';
conn.query(sql, [userName, userPwd, userEmail], function(e, strResult) {
if (e) {
res.send({ msg: '插入数据错误!!', flag: 'no' });
} else {
res.send({ msg: '注册成功!', flag: 'yes' });
}
})
})
})
app.get('/login', function(req, res) {
res.render('login.ejs');
})
// 完成用户的登录
app.post('/userLogin', function(req, res) {
var userEmail = req.body.email;
var userPwd = req.body.pwd;
// 构建sql语句查询数据库.
const sql = 'select * from userinfo where email=? and pwd=?';
conn.query(sql, [userEmail, userPwd], function(err, result) {
if (err) {
res.send({ msg: '数据查询错误!!', flag: 'no' });
} else {
if (result.length !== 1) {
res.send({ msg: '用户邮箱和密码错误!!', flag: 'no' });
} else {
res.send({ msg: '恭喜登录成功了!!', flag: 'yes' });
}
}
})
})
app.listen(3000, function() {
console.log('server running..........');
})