node+ajax+mysql實現登陸註冊

簡述

我是一個前端的小白，學長推薦這個社區給我已經有一段時間了。可是始終以爲本身的水平過低，一直沒在這上

面寫點什麼。最近開始學習nodejs，就作了一個demo來分享給你們.第一次寫，不足的地方還望海涵。

註冊的html

基本的表單html代碼就不詳細說了，這個不是重點，直接上代碼：

<div class="regist">
     <h2>註冊</h2>
     <div class="inputbox">
         <input type="text" name="fullname" placeholder="  暱稱" id="nikename">
         <input type="text" name="email" placeholder="  郵箱" id="email-two">
         <input type="password" name="password" placeholder="  密碼" id="password-two">
     </div>
     <button id="register">註冊</button>
 </div>

註冊的js

這裏的js主要使用的是jquery，不懂jquery的能夠先去了解。jquery使用ajax是特別方便的，這裏以get的方式傳遞給後臺username，nickname，password三個參數。url裏面寫上與後臺協商的地址，而後再是成功與失敗的回調函數，經常使用ajax的小夥伴是否是以爲很常規。是的，這樣寫不管後臺語言是什麼就都不要緊了。

$("#register").click(function() {
        $.ajax({
            url: "/regist",
            type: "GET",
            data: {
                username: $("#email-two").val(),
                nickname: $("#nikename").val(),
                password: $("#password-two").val()
            },
            success: function(data){    //    alert後臺的返回值
                alert(data);
            },
            error: function(){
                alert('訪問失敗');
            }
        });
    });

註冊的node

這裏我使用的nodejs的express框架，不懂express框架的能夠先去了解一下。這個框架上手很容易的，很適合咱們這樣的新手。若是你想直接使用這裏的代碼，確定是會報錯的，須要你拿npm安裝express和mysql。固然至於mysql你須要在本地安裝mysql，不會一點mysql的先去了解一下mysql。其實你也能夠用nodejs把數據寫到文件裏面，就能夠不用mysql了。其餘的見代碼註解。

var express=require("express");    //    導入express
var events = require('events');
var emitter = new events.EventEmitter();    //    建立監聽器對象（你也能夠直接返回值，不用這個）
var app=express();
var path=require("path");
var mysql=require("mysql");    //    導入mysql
var dirname=__dirname;    //    指向當前js的路徑
app.use(express.static(path.join(__dirname, 'project')));    //    這裏你可以直接訪問你的靜態文件，好比你的index.html
    
/*----註冊---*/

  app.get("/regist",function(req,res){    //    獲取get的請求的路徑，拿到前臺傳來的參數
    //    建立數據庫鏈接
    var connection=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"您的密碼",
        database:"node"
    });
    //    鏈接數據庫
    connection.connect();
    //    監聽數據庫寫入返回的參數
    emitter.on("ok",function(){
        return res.end("註冊成功");    //    向前臺返回數據
    });
    emitter.on("false",function(){
        return res.end("用戶名已存在");    //    向前臺返回數據
    });

    var sql="insert into user(username,password,nickname) values(?,?,?)";    //    向user這個表裏寫入數據
    var sqlValue=[req.query.username,req.query.password,req.query.nickname];
    connection.query(sql,sqlValue,function(err){    //    執行sql語句
        if(err){
            console.log(err.message);    //    輸出數據庫錯誤信息
            emitter.emit("false");    //    返回失敗
        }
        emitter.emit("ok");    //    返回成功
    });
    connection.end();    //    關閉數據庫
  })；
app.listen(8081);    //    設置請求的端口號，你能夠在本地訪問localhost://8081(隨便寫一個沒被佔用的端口就好)

登陸html

一樣是簡單的表單內容，直接上代碼了：

<div class="login">
   <h2>登錄</h2>
   <div class="inputbox">
     <input type="text" name="email" placeholder="  郵箱" id="email-one">
     <input type="password" name="password" placeholder="  密碼" id="password-one">
     <input type="text" name="authCode" placeholder="  驗證碼" id="authcode-one">
   </div>
   <button id="userLogin">登錄</button>
</div>

登陸的js

這裏使用的一樣是一個ajax請求,基本跟註冊的請求差很少，傳用戶名跟密碼到後臺，就很少說了。

$("#userLogin").click(function(){
        $.ajax({
          url: "/login",
          type: "GET",
          data: {
              username: $("#email-one").val(),
              password: $("#password-one").val()
          },
          success: function(data){    //    alert後臺返回的參數
              alert(data);
          },
          error: function(){
            alert('訪問失敗');
          }
      });
    });

登陸的node

這裏也跟上面的註冊nodejs差很少，只是邏輯稍稍有點不一樣，請看註釋。這裏登陸也寫在同一個js文件裏面，就不一一地去導入某些文件了，處着app這個對象直接用，這裏就不用監聽器。

app.get("/login",function(req,res){    //    獲取登陸傳過來的值
    //    建立數據庫鏈接
    var connection=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"您的密碼",
        database:"node"
    });
    //    鏈接數據庫
    connection.connect();
    var sql="select * from user where username='"+req.query.username+"' and password='"+req.query.password+"'";    //    在數據庫裏面查詢用戶名跟密碼
    connection.query(sql,function(err,result){    //    執行sql語句，並返回結果
        if(err){
            res.end("登陸失敗");    //    數據庫錯誤
            console.log(err);
        }
        if(result.length==0){    
            res.end("用戶名密碼不正確");    //    數據庫裏面沒找到配對的內容返回參數
        }else{
            res.end("登錄成功");    //返回登陸成功
        }
    })
    connection.end();    //    關閉數據庫
})

這是小白第一次發文章，但願與跟我同樣的小白共享。本文有什麼不足之處但願各大神斧正。