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

软件：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

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

完成知乎项目的登录和注册功能（二）
在(一)的基础之上完成知乎的文章的发布和查看 /展示文章的详细信息:在传id的时候传递失败,如果是post请求,传递数据,必须安装body-parser包, npm i body-parser //导 ...
复习Java第二个项目仿QQ聊天系统 03（两种通信类、登录以及注册功能完善） Java面试题并发编程相关知识生活【记录一个咸鱼大学生三个月的奋进生活】025
记录一个咸鱼大学生三个月的奋进生活025 复习Java(仿QQ聊天系统03两种通信类.登录以及注册功能完善) TcpSocket类(与服务器进行通信) Server类(服务器类) TcpMessage ...
Java Web 案例一登录、注册功能实现
实现用户登录和注册功能.项目分为 Web 层.业务逻辑层.数据访问层. 将用户信息封装在 UserBean 对象中.用户信息有:username(String).password(String).ni ...
用户的登录及注册功能
今天来写一个简易版的用户登录和注册功能先写一个DBUtil工具类 public class DBUtil {//加载数据库驱动static {try {Class.forName("com ...
用python写注册登录界面web_用Python实现web端用户登录和注册功能
这篇文章主要介绍了用Python实现web端用户登录和注册功能的教程,需要的朋友可以参考下用户管理是绝大部分Web网站都需要解决的问题.用户管理涉及到用户注册和登录. 用户注册相对简单,我们可以先通 ...
【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP
目录第一部分.前言 1.目标效果 2.准备知识第二部分.详细步骤 1.新建Empty工程 2.添加资源文件 3.搭建注册界面 4.搭建登录界面 5.编写注册界面和登录界面的代码 6.设置APP初 ...
python123注册登录_用Python实现web端用户登录和注册功能的教程
用户管理是绝大部分Web网站都需要解决的问题.用户管理涉及到用户注册和登录. 用户注册相对简单,我们可以先通过API把用户注册这个功能实现了: _RE_MD5 = re.compile(r'^[0-9 ...
前端获取验证码、手机号登录、注册功能
07.前端获取验证码.手机号登录.注册功能 Register.vue <template><div class="register"><div cla ...
【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能
目录 1.前端登录页面手机号验证码登录页面: 2.前端获取验证码的函数: 3.后端获取验证码代码 4.前端登录的函数: 5.后端登录的实现 6.注册功能前后端的实现 1.前端登录页面手机号验证码登录页 ...
EasyUI项目（登录、注册及权限树形展示）
EasyUI与web.jar,许多工具类,需要请前往主页参考自取. 一,登录与注册 login.jsp(登录界面) <%@ page contentType="text/html;ch ...

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

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

最新文章

热门文章