完成知乎项目的登录和注册功能（一）

最新推荐文章于 2021-04-07 22:48:27 发布

月月猴

最新推荐文章于 2021-04-07 22:48:27 发布

阅读量527

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_43380248/article/details/89681997

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

软件：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..........');
})

https://download.csdn.net/download/qq_43380248/11152073

月月猴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
完成知乎项目的登录和注册功能（一）

软件：Microsoft VS Code+Navicat for MySql先看一下运行结果：（在浏览器中输入：localhost：3000）//::::::::::::::::::::login.ejs::::::::::::::::::<!DOCTYPE html><html lang="en"><head> <meta ...
复制链接

扫一扫

专栏目录