express+mysql实现简单的登录功能
登录页面图:
node.js文件代码:
const express=require("express");
const app=express();
const path=require("path")
const cors=require("cors")
const bodyParser=require("body-parser")
const db=require("./util/configDb.js")
app.listen(3000,()=>{
console.log("app start........")
})
app.use(bodyParser.urlencoded({
extended:true
}))
app.use(bodyParser.json())
app.use(cors())
app.use("/static",express.static(path.join(__dirname,"./views")))
app.post("/login",(req,res)=>{
console.log("服务端",req.body)
const {name,pwd}=req.body;
let sql=`select * from user where name=${name} and pwd=${pwd}`
console.log("sql",sql)
let sqlObj=[]
console.log("sqlObj",sqlObj)
let callBack=function(err,data){
console.log("data:",data.length)
if(err){
console.log("失败")
return
}
if(data.length!=1){
console.log("密码或用户名出错")
res.send({
msg:"用户名或密码出错",
code:400
})
return
}
res.send({
msg:"成功登录",
code:200
})
}
db.dbConn(sql,sqlObj,callBack)
})
configDb.js文件代码
const mysql=require("mysql")
module.exports={
config:{
host:"localhost",
user:"root",
password:"",
database:"infodb"
},
dbConn:function(sql,sqlObj,callBack){
let pool=mysql.createPool(this.config)
pool.getConnection((err,conn)=>{
if(err){
console.log(err)
return;
}
conn.query(sql,sqlObj,callBack)
conn.release();
})
}
}
index.html文件代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.area-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.login-group{
/* width: 100%; */
height: 40px;
background-color: white;
padding: 10px 30px;
}
.login-group input{
height: 24px;
outline: none;
border-radius: 20px;
padding-left: 10px;
}
.login-btn{
margin-top: 20px;
}
.login-btn button{
width: 200px;
height: 30px;
line-height: 30px;
border-radius: 20px;
outline: none;
}
</style>
</head>
<body>
<div class="area-box">
<div class="login-group">
<label>用户:</label>
<input type="text" name="" id="phone" placeholder="请输入手机号" />
</div>
<div class="login-group">
<label>密码:</label>
<input type="password" name="" id="pwd" placeholder="请输入密码" />
</div>
<div class="login-btn">
<button type="button" id="login">登录</button>
</div>
</div>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let phone=$("#phone")
let pwd=$("#pwd")
$("#login").click(function(){
if(phone.val().length==0||pwd.val().length==0){
alert("用户或密码不能为空")
return;
}
var getPhone=phone.val()
var getPwd=pwd.val()
var data={
"name":getPhone,
"pwd":getPwd
}
$.ajax({
type:"POST",
url:"http://localhost:3000/login",
data:data,
success:res=>{
console.log(res)
if(res.code==200){
alert(res.msg)
}else{
alert(res.msg)
}
},
error:err=>{
console.log(err)
}
})
})
</script>
</body>
</html>
下面是注册代码：
node.js代码；
app.post("/register",(req,res)=>{
const name=req.body.name;
console.log(name)
const pwd=req.body.pwd;
console.log(pwd)
let sql="select * from user where nickname=?"
let sqlArr=[name]
let callBack=(err,data1)=>{
if(err){
console.log(err)
return;
}
console.log("wishing数据",data1)
if (data1.length>=1){//测试查找的数据的长度，如果大于0就代表数据库中存在这个用户
res.send({
code:400,
msg:"该用户已存在",
affectedRows:data1.affectedRows
})
return;
}else{
let sql ="insert into user set nickname=?,password=?,state=1";
let sqlArr=[name,pwd]
let callBack=(err,data)=>{
if(err){
console.log(err)
return;
}
res.send({
code:200,
msg:"注册成功",
affectedRows:data.affectedRows
})
// console.log(data)
return;
}
db.dbConn(sql,sqlArr,callBack)
}
}
db.dbConn(sql,sqlArr,callBack)
})
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.area-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.login-group{
/* width: 100%; */
height: 40px;
background-color: white;
padding: 10px 30px;
}
.login-group input{
height: 24px;
outline: none;
border-radius: 20px;
padding-left: 10px;
}
.login-btn{
margin-top: 20px;
}
.login-btn button{
width: 200px;
height: 30px;
line-height: 30px;
border-radius: 20px;
outline: none;
} </style>
</head>
<body>
<div class="area-box"> <div class="login-group">
<label>用户:</label>
<input type="text" name="" id="username" placeholder="请输入用户名" />
</div>
<div class="login-group">
<label>密码:</label>
<input type="password" name="" id="pwd" placeholder="请输入密码" />
</div>
<div class="login-btn">
<button type="button" id="login">注册</button>
</div>
</div>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let username=$("#username")
let pwd=$("#pwd")
$("#login").click(function(){
console.log("开始")
if(username.val().length==0||pwd.val().length==0){
alert("用户或密码不能为空")
return;
}
var getPhone=username.val()
var getPwd=pwd.val()
var data={
name:getPhone,
pwd:getPwd
}
console.log(data)
$.ajax({
type:"POST",
url:"http://localhost:3000/register",
data:data,
success:res=>{
console.log(res)
if(res.code==200){
alert(res.msg)
document.location.href="index.html"
}else{
alert(res.msg)
}
},
error:err=>{
console.log(err)
}
})
})
</script>
</body>
</html>
另一个注册代码:
app.post("/register",(req,res)=>{
const name=req.body.name;
const pwd=req.body.pwd;
console.log(name,pwd)
// 首先要根据传递过来的数据查询数据库中是否已经存在该用户了
function regfun(){
var insert="insert into user (name,pwd) values (?,?)"
let insertArr=[name,pwd]
let insertCallBack=((err,data)=>{
if(err){
console.log(err)
return;
}
if(data..affectedRows==1){
req.session.info={
name:name,
pwd:pwd
}
res.send({
code:200,
msg:"注册成功"
})
}else{
res.send({
code:400,
msg:"注册失败"
})
}
})
db.dbConn(insert,insertArr,insertCallBack)
}
let sql1="select * from user where name=?";
let sqlArr=[name]
let callBack=((err,data)=>{
if(err){
console.log(err)
return;
}
if(data.length==1){
res.send({
code:201,
msg:"该用户已经存在"
})
}else{
regfun()
}
})
db.dbConn(sql1,sqlArr,callBack)
})
express+mysql实现简单的登录功能的更多相关文章
- 使用 NodeJS+Express+MySQL 实现简单的增删改查
关于node.js暂时记录如下,以后有时间一定学习 文章来自简书,作者:sprint,2016-07 使用 Node.js + Express+MySQL 实现简单的增删改查 https://www. ...
- spring Boot 简单的登录功能，利用了jdbcTemplate.class完成sql语句的执行，无需service层、dao层和.xml文件
1.搭建SpringBoot项目首先我们先在IDEA上创建一个SpringBoot的Web项目(1)file ——> new ——> project——> Spring Initia ...
- Node+Express+MySql实现简单增删改查和登录
var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser ...
- JSP+MySQL最简单的登录和注册的实现 --Java Web温习
一.开发环境 开发工具:eclipse 2018-09 操作系统:win10 二.实现 1.目录结构: 2.数据库(创建tmp数据库,新建user表,user表结构如下) 3.功能简介 功能比较简单, ...
- 利用Express+MySQL进行简单的增删改查
前言: 随着JavaScript语言的快速发展,其功能越来越强大,能做的事情也越来越多. 目前,web前端工程师能够利用NodeJS搭建服务,也成为了越来越多互联网公司对前端开发的硬性要求. 本文主要 ...
- Nodejs&express+mongodb完成简单用户登录(即Nodejs入门)
刚了解nodejs,发现nodejs配置起来不复杂,但也有很多需要注意的地方,今天就记录一下,以后也可拿出来看看. 要完成这个简单的示例,从零开始,走三步就行了. 一.搭建开发环境 二.创建项目(ex ...
- 应用node+express+mysql 实现简单的增删改查
记录下来备忘 1.准备好webstrom编辑器,编辑器调整字体大小等在file->settings->editor下设置 注册码 来源网上: 2017.2.27更新 选择“license ...
- JavaSwing+Mysql实现简单的登录界面+用户是否存在验证
原生Java+mysql登录验证 client login.java 功能:实现登录页面,与服务端传来的数据验证 package LoginRegister; import java.awt.Cont ...
- servlet实现简单的登录功能
1.登录页面 Login.html <%@page contentType="text/html" pageEncoding="UTF-8"%> & ...
随机推荐
- JAVA大数--POJ 1715 大菲波数
Problem Description Fibonacci数列,定义如下: f(1)=f(2)=1 f(n)=f(n-1)+f(n-2) n>=3. 计算第n项Fibonacci数值. Inp ...
- Makefile中的CFLAGS，LDFLAGS，LIBS
CFLAGS:C编译器选项,而CXXFLAGS表示C++编译器的选项 1. CFLAGS参数 选项 说明 -c 用于把源码编译成.o对象文件,不进行链接过程 -o 用于连接生成可执行文件,在其后可以指 ...
- 一只简单的网络爬虫（基于linux C/C++）————浅谈并发（IO复用）模型
Linux常用的并发模型 Linux 下设计并发网络程序,有典型的 Apache 模型( Process Per Connection ,简称 PPC ), TPC ( Thread Per Conn ...
- SSM框架完整开发流程
----------------第一阶段-------------- 1.数据库建模 2.生成sql语句 3.在mysq客户端使用命令方式执行sql脚本,生成数据库 4.允许远程访问mysql GRA ...
- docker学习笔记一篇就通系列（持续更新）
docker三要素 仓库 镜像 容器 仓库 仓库用来存放docker的镜像,类似于github存放代码医养 镜像 镜像是一个模板,封装了应用程序和配置依赖的可交付的运行环境,这个打包好的运行环境就是镜 ...
- Java并发编程实战 03互斥锁 解决原子性问题
文章系列 Java并发编程实战 01并发编程的Bug源头 Java并发编程实战 02Java如何解决可见性和有序性问题 摘要 在上一篇文章02Java如何解决可见性和有序性问题当中,我们解决了可见性和 ...
- Jmeter系列（10）- 阶梯加压线程组Stepping Thread Group详解
如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 Stepping Thread ...
- Redis 到底是单线程还是多线程？我要吊打面试官！
最近在Java技术栈公众号发布的一篇文章,其中有一道题: Redis是多线程还是单线程?(回答单线程的请回吧,为什么请回,请往下看) 好些粉丝在后台问我:为什么请回,Redis不是单线程吗? 大家注意 ...
- RabbitMQ的轮询模式和公平分发
一.常用的消息模式 我们在工作的使用中,经常会遇到多个消费者监听同一个队列的情况,模型如下图所示: 当有多个消费者时,我们的消息会被哪个消费者消费呢,我们又该如何均衡消费者消费信息的多少呢: 主要有两 ...
- Coursera课程笔记----计算导论与C语言基础----Week 10
C程序中的数组(Week 10) 一维数组 数组的定义 类型 数组名[常量表达式] int sheep[10] 定义数组时,[]内必须为常量表达式 可以用const int 可以在main函数前,#d ...