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,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
随机推荐
- Hibernate映射文件详解(News***.hbm.xml)一
Hibernate是一个彻底的ORM(Object Relational Mapping,对象关系映射)开源框架. 我们先看一下官方文档所给出的,Hibernate 体系结构的高层视图: 其中PO=P ...
- 011.MFC_Slider
滑块CSliderCtrl 常用函数SetLineSize() GetLineSize() SetPageSize() GetPageSize()SetRangeMax() GetRangeMax() ...
- 最近邻分类器，K近邻分类器，线性分类器
转自:https://blog.csdn.net/oldmao_2001/article/details/90665515 最近邻分类器: 通俗来讲,计算测试样本与所有样本的距离,将测试样本归为距离最 ...
- acwing 102 -利用二分枚举区间平均值
我真的是服了,看了一晚上发现居然,,,,, 上图吧,话说有人评论没... 对于结果来说,不一定要枚举有序数列,感觉这是一种猜结果的方法,只不过特别精确,令人发指 #include<cstdio& ...
- 【一起学源码-微服务】Ribbon 源码三：Ribbon与Eureka整合原理分析
前言 前情回顾 上一篇讲了Ribbon的初始化过程,从LoadBalancerAutoConfiguration 到RibbonAutoConfiguration 再到RibbonClientConf ...
- ThinkPHP5——接入腾讯云短信API
接入腾讯云短信API相当简单,最重要的是第一次使用腾讯云短信的话有100条免费短信可以测试,对于开发人员是足够了,下面我就教大家接入腾讯云短信. 第一步:准备工作 首先要在腾讯云短信申请短信签名与短信 ...
- js绑定下拉框数据源
··· buildRule:function (ruleId) { var ruleList = internal.ruleList; if(ruleList){ var programme_sel= ...
- openjudge 7622 求排列的逆序数（归并）
7622:求排列的逆序数 总时间限制: 1000ms 内存限制: 65536kB 描述 在Internet上的搜索引擎经常需要对信息进行比较,比如可以通过某个人对一些事物的排名来估计他(或她) ...
- 快速掌握—HTML快速实现自定义Input开关
HTML <input id="customSwitch" type="checkbox" /> <label for="custo ...
- Java扫描指定文件路径下的文件并且递归扫描其子目录下的所有文件
本文主要实现了扫描指定文件路径下的文件,递归扫描其子目录下的所有文件信息,示例文件为: 要求将后缀为.dat的文件夹信息也写入到数据库中,然后将.chk文件解析,将文件中对应的内容读出来写入到数据库, ...