Express+MySQL实现登录注册的demo
MySQL5.7.20
demo准备
安装MySQL，安装完毕之后添加系统环境变量在cmd中启动服务：net start mysql57，如果是安装MySQL8.0则服务名默认时mysql80，测试安装MySQL是否安装成功：mysql -V
安装express前提时已经安装Node,npm是安装Node自身携带的
demo开始
- 首先新建一个文件夹，名称尽量是英文的
- 快速创建项目：
npm init -y - 新建一个
app.js文件， Node服务端的主要书写地，也不是主要 - 首先创建启动服务
const express = require('express');
const app = express()
app.get('/',function(req,res){
res.send('Node服务启动成功') // 返回数据到前端
})
app.listen(3001)
- 在浏览器上输入
localhost:3001效果如下图：
- 新建
views文件夹，存放展示页面，例如：index.html - 建立mysql连接
const mysql = require('msyql')
var connsql = mysql.createConnection({
host:'127.0.0.1',
port:'3306',
user:'root',
password:'root123',
database:'db' // 数据库
})
connsql.connect() // 开启与数据库连接
- 由于访问地址时展示的是假数据，这里我们需要展示具有表单的HTML页面
app.engine('html',require('express-art-template')) // 渲染html引擎
app.get('/',(req,res){
res.render('index.html') // 默认登录页面
})
app.get('/',(req,res){
res.render('register.html') // 注册页面
})
- index.html页面
<body>
<h1>登录页面！</h1>
<div><span>账号：</span><input type="text" name="user"></div>
<div><span>密码：</span><input type="password" name="pwd"></div>
<div>
<input type="submit" value="登录" id="btn">
<a href="/register"><button>注册</button></a>
<span class="spa1"><span class="asd"></span></span>
</div>
</body>
10. 注册页面与登录页面差不多一致
11. 登录
app.use('/login', (req, res)=> {
var login = {
"user": req.body.user, // 获取input中的user值
"pwd": req.body.pwd // 获取input中的pwd值
}
// 定义查询sql语句
var loginsql = "select username,password from db_table where username='" + login.user + "'and password='" + login.pwd + "'"
// 执行查询
connsql.query(loginsql, (err, result)=> {
if (err) {
console.log('err message:', err)
return
}
if (result == '') {
console.log('用户名或密码错误！')
res.json({ code: -1, msg: '用户名或密码错误！' })
} else {
console.log('用户名密码匹配成功！')
res.json({ code: 1, msg: '登录成功' })
}
})
})
- 注册
app.use('/regs', (req, res) => {
var regs = {
"user": req.body.user,
"pwd": req.body.pwd
}
// 插入sql语句
var regssql = "insert into db_table(username,password) values('" + regs.user + "','" + regs.pwd + "')";
// 查询sql语句
var selsql = "select username from db_table where username='" + regs.user + "'"
//将用户名和密码插入到数据表中的函数
function regfun() {
connsql.query(regssql, (err, result)=> {
if (err) {
console.log(err);
return
}
res.json({code:1,msg:"注册成功"})
console.log('注册成功')
})
}
// 先查询用户名是否存在，在决定注册插入用户名和密码
connsql.query(selsql, (err, result)=>{
if (err) {
console.log(err)
return
}
if (result == '') {
regfun() // 执行插入函数
} else {
res.json({code:-1,msg:"注册失败，用户名已存在"})
console.log(regs.user + '用户名已存在')
}
})
})
- 登录的ajax请求
$(function(){
$('#btn').click(function(){
var user=$('input[type=text]')
var pwd=$('input[type=password]')
var logindata={user:user.val(),pwd:pwd.val()}
if(user.val().length==0&&pwd.val().length==0){
$('.spa1').text('用户名和密码不能为空')
}else{
$.ajax({
type:'post',
url:'/login',
dataType:'json',
data:logindata,
success:function(data){
if(data.code>1){
$('.asd').text(data.msg)
}
$('.asd').text(data.msg)
},
error:function(error){
console.log(error)
}
})
}
})
})
</script>
- 注册的ajax请求
<script>
$(function () {
$('#btn').click(function () {
var user = $('input[type=text]')
var pwd1 = $('input[name=pwd1]')
var pwd2 = $('input[name=pwd2]')
var msg=$('.msg')
var datas = { user: user.val(), pwd: pwd1.val() }
if (user.val().length == 0 || pwd1.val().length == 0 || pwd2.val().length == 0) {
msg.text('请输入用户名和密码')
return false
} else if (pwd1.val() !== pwd2.val()) {
msg.text('两次密码输入不一致')
return false
} else {
$.ajax({
type: 'POST',
url: '/regs',
dataType: 'json',
data: datas,
success: function (data) {
if(data.code>0){
$(".asd").text(data.msg)
}
$(".asd").text(data.msg)
},
error: function (error) {
console.log(error)
}
})
}
})
$('button').click(function(){
location.href='/'
})
})
</script>
至此登录注册就做完了，由于是小白，可能其中存在问题，也欢迎交流学习，最后附上完整代码
- app.js
const express = require('express')
const mysql = require('mysql')
const app = express()
var bodyParser = require('body-parser')
var connsql = mysql.createConnection({
host: '127.0.0.1',
port: '3306',
user: 'root',
password: '2232723904',
database: 'db'
})
connsql.connect()
app.engine('html', require('express-art-template'))
app.use('/public/', express.static('./public/'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.get('/', (req, res)=> {
// res.sendFile( __dirname +"/views/"+ "index.html" );
res.render('index.html')
})
app.get('/register', (req, res)=> {
// res.sendFile( __dirname +"/views/"+ "register.html" );
res.render('register.html')
})
app.use('/login', (req, res)=> {
var login = {
"user": req.body.user,
"pwd": req.body.pwd
}
var loginsql = "select username,password from db_table where username='" + login.user + "'and password='" + login.pwd + "'"
connsql.query(loginsql, (err, result)=> {
if (err) {
console.log('err message:', err)
return
}
if (result == '') {
console.log('用户名或密码错误！')
res.json({ code: -1, msg: '用户名或密码错误！' })
} else {
console.log('用户名密码匹配成功！')
res.json({ code: 1, msg: '登录成功' })
}
})
})
app.use('/regs', (req, res) => {
var regs = {
"user": req.body.user,
"pwd": req.body.pwd
}
var regssql = "insert into db_table(username,password) values('" + regs.user + "','" + regs.pwd + "')";
var selsql = "select username from db_table where username='" + regs.user + "'"
function regfun() {
connsql.query(regssql, (err, result)=> {
if (err) {
console.log(err);
return
}
res.json({code:1,msg:"注册成功"})
console.log('注册成功')
})
}
connsql.query(selsql, (err, result)=>{
if (err) {
console.log(err)
return
}
if (result == '') {
regfun()
} else {
res.json({code:-1,msg:"注册失败，用户名已存在"})
console.log(regs.user + '用户名已存在')
}
})
})
app.listen(3000)
// connsql.end()
- index.html
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录页面</title>
<style>
.spa1{color: #ff160e;}
.asd{color: #0bc52a;}
</style>
</head>
<body>
<h1>登录页面</h1>
<div><span>账号：</span><input type="text" name="user"></div>
<div><span>密码：</span><input type="password" name="pwd"></div>
<div><input type="submit" value="登录" id="btn"><a href="/register"><button>注册</button></a><span class="spa1"><span class="asd"></span></span></div>
</body>
</html>
<script>
$(function(){
$('#btn').click(function(){
var user=$('input[type=text]')
var pwd=$('input[type=password]')
var logindata={user:user.val(),pwd:pwd.val()}
if(user.val().length==0&&pwd.val().length==0){
$('.spa1').text('用户名和密码不能为空')
}else{
$.ajax({
type:'post',
url:'/login',
dataType:'json',
data:logindata,
success:function(data){
if(data.code>1){
$('.asd').text(data.msg)
}
$('.asd').text(data.msg)
},
error:function(error){
console.log(error)
}
})
}
})
})
</script>
- register.html
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
<style>
.msg{color: #ff160e;}
.asd{color: #0bc52a;}
</style>
</head>
<body>
<!-- <form action="" method="post"> -->
<h1>注册页面</h1>
<div><span>账号：</span><input type="text" name="user"></div>
<div><span>密码：</span><input type="password" name="pwd1"></div>
<div><span>密码：</span><input type="password" name="pwd2"></div>
<div><input type="submit" value="注册" id="btn"><button>登录</button><span class="msg"></span><span class="asd"></span></div>
<!-- </form> -->
</body>
</html>
<script>
$(function () {
$('#btn').click(function () {
var user = $('input[type=text]')
var pwd1 = $('input[name=pwd1]')
var pwd2 = $('input[name=pwd2]')
var msg=$('.msg')
var datas = { user: user.val(), pwd: pwd1.val() }
if (user.val().length == 0 || pwd1.val().length == 0 || pwd2.val().length == 0) {
msg.text('请输入用户名和密码')
return false
} else if (pwd1.val() !== pwd2.val()) {
msg.text('两次密码输入不一致')
return false
} else {
$.ajax({
type: 'POST',
url: '/regs',
dataType: 'json',
data: datas,
success: function (data) {
if(data.code>0){
$(".asd").text(data.msg)
}
$(".asd").text(data.msg)
},
error: function (error) {
console.log(error)
}
})
}
})
$('button').click(function(){
location.href='/'
})
})
</script>
- ps: 在安装第三方包时后面要加
-S或-D例如：cnpm i express -S,这样做的作用是保存在配置文件package.json中，方便别人下载包时，直接下载，省时省力。 - 注册成功的mysql数据表
- 源码地址：https://github.com/dillonleader/login-demo
Express+MySQL实现登录注册的demo的更多相关文章
- nodejs+express+mongodb实现登录注册
nodejs+express+mongodb实现登录注册 1 简介 登录注册功能使用nodejs+express+mongodb完成,其中对mongodb的操作使用mongoose完成,对mongod ...
- node+express+mysql 实现登陆注册
基于 node.express.mysql 实现的登录注册. 1.`首先在终端中 安装 node .` 2.`通过npm install express -g 命令全局安装 express`. 3.` ...
- IDEA+MySQL实现登录注册的注册验证时出现 Cannot resolve query parameter '2'
问题描述: 在IDEA+MySQL+Tomcat 实现登录注册JSP的注册信息INSERT验证时出现 Cannot resolve query parameter '2' 贴上创建链接的代码: if( ...
- Django学习笔记第六篇--实战练习二--简易实现登录注册功能demo
一.绪论: 简易实现登录功能demo,并没有使用默认身份验证模块,所以做的也很差,关闭了csrf保护,没有认证处理cookie和session,只是简单实现了功能.另外所谓的验证码功能是伪的. 二. ...
- Android+Java Web+MySQL实现登录注册
1 前言&概述 这篇文章是基于此处文章的更新,更新了一些技术栈,更加贴近实际需要,以及修复了若干的错误. 这是一个前端Android+后端Java/Kotlin通过Servelt进行后台数据库 ...
- spring boot 登录注册 demo （四） -- 体验小结
之前没有折腾过Spring,直接上来怼Spring Boot异常痛苦,参考着官网的guide(https://spring.io/guides)写了几个demo: spring boot 跑起来确是方 ...
- 一个关于vue+mysql+express的全栈项目（三）------ 登录注册功能的实现（已经密码安全的设计）
本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express ...
- Nodejs学习总结 -Express 登录注册示例（二）
项目创建后,我们来做个登录注册实例,详细操作步骤如下. 1.新建项目demo ,具体操作步骤参考上一章内容 https://www.cnblogs.com/Anlycp/ 2.添加mysql和sess ...
- spring boot1.1 idea + springboot + mybatis（mybatis-generator） +mysql +html实现简单的登录注册
前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
随机推荐
- python 找出字符串中出现次数最多的字母
# 请大家找出s=”aabbccddxxxxffff”中 出现次数最多的字母 # 第一种方法,字典方式: s="aabbccddxxxxffff" count ={} for i ...
- win10 配置g++环境
一.配置g++编译器的环境 1.将g++编译器的位置添加到环境变量path中,安装了C++ IDE的可以在IDE的安装目录下寻找 例如:C:\MySoftware\dev\Dev-Cpp\MinGW6 ...
- layui treeSelect
官方地址:https://fly.layui.com/extend/treeSelect/ 下面介绍一下这个插件的使用方法 1.html页面 <div class="layui-inp ...
- $CF949D\ Curfew$ 二分/贪心
正解:二分/贪心 解题报告: 传送门$QwQ$ 首先这里是二分还是蛮显然的?考虑二分那个最大值,然后先保证一个老师是合法的再看另一个老师那里是否合法就成$QwQ$. 发现不太会搞这个合不合法的所以咕了 ...
- iOS获取网络数据/路径中的文件名
NSString * urlString = @"http://www.baidu.com/img/baidu_logo_fqj_10.gif"; //方法一:最直接 NSStri ...
- 【Spring Cloud 源码解读】之 【如何配置好OpenFeign的各种超时时间！】
关于Feign的超时详解: 在Spring Cloud微服务架构中,大部分公司都是利用Open Feign进行服务间的调用,而比较简单的业务使用默认配置是不会有多大问题的,但是如果是业务比较复杂,服务 ...
- 小小知识点（十五）——origin pro 2018 安装和消除demo字样
安装 1.安装过成中选择语言为中文或者英文,安装完成后可在注册表中切换语言. 2.安装过程中使用序列号 中文版:DF2W8-9089-7991320英文版:GF3S4-9089-7991320 3.安 ...
- Python 处理Excel内的数据（案例介绍*2）
(一)案例一介绍 现在有一匹电商产品跟当日销量的数据,如下,总共有上万笔的数据,现在需要统计每个品牌当日的销售量,比如美宝莲今天总共卖出了多少的商品,另外需要统计每个品牌下面的每个子品类当日销售量(品 ...
- Ant Design Pro中Transfer穿梭框的实际用法（与后端交互）
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- ipaclient 4.5.4 requires jinja2, which is not installed. rtslib-fb 2.1.63 has requirement pyudev>=0.16.1, but you'll have pyudev 0.15 which is incompatible. ipapython 4.5.4 has requirement dnspython>=