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,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
随机推荐
- 僵进程与SIGCHLD信号
参考: https://www.cnblogs.com/webor2006/p/4014586.html wait()和waitpid()的参数解析:https://blog.csdn.net/csd ...
- IAP升级
一.IAP原理 1.在正常情况下,程序运行路流程: 和STM32类似,STM8内部闪存(FLASH)地址起始于 0x8000(STM32是0x08000000),一般情况下,程序文件就从此地 址开始写 ...
- Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe
背景 最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML 对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑. 对 ...
- 王雅超的学习笔记-大数据hadoop集群部署（十）
Spark集群安装部署
- ansible批量部署mysql
1.1 将mysql软件包同步到客户端服务器,做安装前期准备 Ps:mysql安装包线拖到ansible服务端的/ansible/roles/mysql/files目录下 vim /ansible/r ...
- iptables 添加80端口规则
iptables -t filter -A INPUT -p tcp -s 10.0.0.0/24 -j DROP 在filter表的input链做规则丢弃10.0.0.0网段的ip包iptables ...
- 1035 插入与归并 (25 分)C语言
根据维基百科的定义: 插入排序是迭代算法,逐一获得输入数据,逐步产生有序的输出序列.每步迭代中,算法从输入序列中取出一元素,将之插入有序序列中正确的位置.如此迭代直到全部元素有序. 归并排序进行如下迭 ...
- 最全面的css布局
1.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...
- P2722 总分 Score Inflation （完全背包模板）
题目传送门:P2722 总分 Score Inflation 题目描述 我们可以从几个种类中选取竞赛的题目,这里的一个"种类"是指一个竞赛题目的集合,解决集合中的题目需要相同多的时 ...
- VMware下Hadoop 2.4.1完全分布式集群平台安装与设置
1 VM下Ubuntu安装和配置 1.1 安装Ubuntu系统 这个就不说了,不知道的可以去看看其他的博文. 1.2 集群配置 搭建一个由3台机器组成的集群: IP user/passw ...