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,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
随机推荐
- lamda表达式和尾置返回类型
基本lambda语法 基本形式如下: [capture](parameters) mutable ->return-type {body} [capture]:叫做捕获说明符,表示一个lambd ...
- 024.讲MFC_窗口指针
窗口指针通过HWND获得CWnd指针 //如何通过窗口句柄获得窗口指针获得应用程序主窗口的指针 //如何获得应用程序主窗口的指针一.建立名为dialogPoint的mfc工程,添加两个button 双 ...
- Linux： 在某个路径及其子目录下查找所有包含“hello abcserver”字符串的文件。
find /etc -name “*” | xargs grep “hello abcserver” 在 / 及其子目录下查找所有包含UNEXPECTED_SCHEMA find / -name * ...
- javeweb_学生信息添加系统
在text.jsp中画出界面,以及设置提交选项的限制 <%@ page language="java" contentType="text/html; charse ...
- flask配置详解
直接修改config对象 flask会有一个可用的配置对象保存着载入的配置值: Flask 对象的 config 属性,这是 Flask 自己放置特定配置值的地方,也是扩展可以存储配置值的地方.但是, ...
- xshell连接不上ubuntu---could not connect to 'ip' (port 22): Connection failed.
可能是没有开启ssh server,接下来就是开启服务就好.命令如下: sudo apt-get install openssh-server 这样就OK啦
- 1049 数列的片段和 (20 分)C语言
给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我们有 (0.1) (0.1, 0.2) (0.1, 0.2, 0.3) ...
- 1023 组个最小数 (20 分)C语言
给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最小的数就 ...
- [转]Linux制作启动盘
假设你想备份一个叫做 /home/joeuser/ 的目录,但是不想包括子目录 /home/joeuser/junk/,因为其中包括的都是不必要的文件.你想创建一个叫做 backup.iso 的映像, ...
- java反射-- Field 用法实践
java 反射是一种常用的技术手段, 通过加载类的字节码的方式来获取相关类的一些信息 比如成员变量, 成员方法等. Field 是什么呢? field 是一个类, 位于java.lang.reflec ...