Express+MySQL实现登录注册的demo

最新推荐文章于 2024-04-24 09:56:29 发布

冰消叶散

最新推荐文章于 2024-04-24 09:56:29 发布

阅读量440

点赞数 2

文章标签： mysql nodejs

本文链接：https://blog.csdn.net/qq_42106991/article/details/104137013

版权

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') // 注册页面![在这里插入图片描述](https://img-blog.csdnimg.cn/20200201193933500.png)
})

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>

<!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数据表

冰消叶散

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Express+MySQL实现登录注册的demo

MySQL5.7.20demo准备安装MySQL，安装完毕之后添加系统环境变量在cmd中启动服务：net start mysql57，如果是安装MySQL8.0则服务名默认时mysql80，测试安装MySQL是否安装成功：mysql -V安装express前提时已经安装Node,npm是安装Node自身携带的demo开始首先新建一个文件夹，名称尽量是英文的快速创建项目：npm i...
复制链接

扫一扫