Express+MySQL實現登錄注冊的demo

本文轉載自查看原文 2020-02-04 11:17 665

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數據表
源碼地址：https://github.com/dillonleader/login-demo

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 express+mysql實現簡單的登錄注冊功能 express+mysql實現簡單的增刪改查利用Express+MySQL進行簡單的增刪改查 node+mysql+express實現登錄/注冊/修改密碼/刪除用戶接口 node連接數據庫（express+mysql） React Ant Design+Node.js Express+Mysql實現后端分頁（帶富文本編輯器） Express+MySQL實現圖片上傳到服務器並把路徑保存到數據庫中 express+vue+mongodb+session 實現注冊登錄 nodejs+express+mongodb簡單實現注冊登錄一個關於vue+mysql+express的全棧項目（三）------ 登錄注冊功能的實現（已經密碼安全的設計）

Express+MySQL實現登錄注冊的demo

demo准備

demo開始

至此登錄注冊就做完了，由於是小白，可能其中存在問題，也歡迎交流學習，最后附上完整代碼

免責聲明！