亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

node+ajax+mysql實現(xiàn)登錄注冊

劉德剛 / 1301人閱讀

摘要:簡述我是一個前端的小白,學長推薦這個社區(qū)給我已經(jīng)有一段時間了。后臺的返回值訪問失敗注冊的這里我使用的的框架,不懂框架的可以先去了解一下。后臺返回的參數(shù)訪問失敗登錄的這里也跟上面的注冊差不多,只是邏輯稍稍有點不同,請看注釋。

簡述
我是一個前端的小白,學長推薦這個社區(qū)給我已經(jīng)有一段時間了。但是始終覺得自己的水平太低,一直沒在這上

面寫點什么。最近開始學習nodejs,就做了一個demo來分享給大家.第一次寫,不足的地方還望海涵。

注冊的html
基本的表單html代碼就不詳細說了,這個不是重點,直接上代碼:
 

注冊

注冊的js
這里的js主要使用的是jquery,不懂jquery的可以先去了解。jquery使用ajax是特別方便的,這里以get的方式傳遞給后臺username,nickname,password三個參數(shù)。url里面寫上與后臺協(xié)商的地址,然后再是成功與失敗的回調(diào)函數(shù),常用ajax的小伙伴是不是覺得很常規(guī)。是的,這樣寫無論后臺語言是什么就都沒關(guān)系了。
    $("#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把數(shù)據(jù)寫到文件里面,就可以不用mysql了。其他的見代碼注解。
var express=require("express");    //    導入express
var events = require("events");
var emitter = new events.EventEmitter();    //    創(chuàng)建監(jiān)聽器對象(你也可以直接返回值,不用這個)
var app=express();
var path=require("path");
var mysql=require("mysql");    //    導入mysql
var dirname=__dirname;    //    指向當前js的路徑
app.use(express.static(path.join(__dirname, "project")));    //    這里你能夠直接訪問你的靜態(tài)文件,比如你的index.html
    
/*----注冊---*/

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

    var sql="insert into user(username,password,nickname) values(?,?,?)";    //    向user這個表里寫入數(shù)據(jù)
    var sqlValue=[req.query.username,req.query.password,req.query.nickname];
    connection.query(sql,sqlValue,function(err){    //    執(zhí)行sql語句
        if(err){
            console.log(err.message);    //    輸出數(shù)據(jù)庫錯誤信息
            emitter.emit("false");    //    返回失敗
        }
        emitter.emit("ok");    //    返回成功
    });
    connection.end();    //    關(guān)閉數(shù)據(jù)庫
  });
app.listen(8081);    //    設置請求的端口號,你可以在本地訪問localhost://8081(隨便寫一個沒被占用的端口就好)
登錄html
同樣是簡單的表單內(nèi)容,直接上代碼了:
登錄的js
這里使用的同樣是一個ajax請求,基本跟注冊的請求差不多,傳用戶名跟密碼到后臺,就不多說了。
    $("#userLogin").click(function(){
        $.ajax({
          url: "/login",
          type: "GET",
          data: {
              username: $("#email-one").val(),
              password: $("#password-one").val()
          },
          success: function(data){    //    alert后臺返回的參數(shù)
              alert(data);
          },
          error: function(){
            alert("訪問失敗");
          }
      });
    });
登錄的node
這里也跟上面的注冊nodejs差不多,只是邏輯稍稍有點不同,請看注釋。這里登錄也寫在同一個js文件里面,就不一一地去導入某些文件了,處著app這個對象直接用,這里就不用監(jiān)聽器。
app.get("/login",function(req,res){    //    獲取登錄傳過來的值
    //    創(chuàng)建數(shù)據(jù)庫連接
    var connection=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"您的密碼",
        database:"node"
    });
    //    連接數(shù)據(jù)庫
    connection.connect();
    var sql="select * from user where username=""+req.query.username+"" and password=""+req.query.password+""";    //    在數(shù)據(jù)庫里面查詢用戶名跟密碼
    connection.query(sql,function(err,result){    //    執(zhí)行sql語句,并返回結(jié)果
        if(err){
            res.end("登錄失敗");    //    數(shù)據(jù)庫錯誤
            console.log(err);
        }
        if(result.length==0){    
            res.end("用戶名密碼不正確");    //    數(shù)據(jù)庫里面沒找到配對的內(nèi)容返回參數(shù)
        }else{
            res.end("登陸成功");    //返回登錄成功
        }
    })
    connection.end();    //    關(guān)閉數(shù)據(jù)庫
})
這是小白第一次發(fā)文章,希望與跟我一樣的小白共享。本文有什么不足之處希望各大神斧正。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/83410.html

相關(guān)文章

  • node項目實戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個前端論壇

    摘要:項目初始化此時已經(jīng)創(chuàng)建好了文件了。接下來向添加數(shù)據(jù)庫操作語句,建表增刪改查。。。前端頁面開發(fā)項目基本結(jié)構(gòu)搭建好后,就可以進行前端頁面的編寫了。 前言 在學習了koa2和express并寫了一些demo后,打算自己寫一個項目練練手,由于是在校生,沒什么好的項目做,即以開發(fā)一個前端論壇為目標,功能需求參照一下一些社區(qū)擬定,主要有: 登錄注冊 個人信息維護、頭像等基本信息 發(fā)表文章,富文本...

    beanlam 評論0 收藏0
  • node項目實戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個前端論壇

    摘要:項目初始化此時已經(jīng)創(chuàng)建好了文件了。接下來向添加數(shù)據(jù)庫操作語句,建表增刪改查。。。前端頁面開發(fā)項目基本結(jié)構(gòu)搭建好后,就可以進行前端頁面的編寫了。 前言 在學習了koa2和express并寫了一些demo后,打算自己寫一個項目練練手,由于是在校生,沒什么好的項目做,即以開發(fā)一個前端論壇為目標,功能需求參照一下一些社區(qū)擬定,主要有: 登錄注冊 個人信息維護、頭像等基本信息 發(fā)表文章,富文本...

    RobinQu 評論0 收藏0
  • Node+Koa2+Mysql 搭建簡易博客

    摘要:搭建簡易博客預覽地址寫在前面本篇教程一方面是為了自己在學習的過程加深記憶,也是總結(jié)的過程。 Koa2-blog 2018-1-5 更新教程(新增上傳頭像、新增分頁、樣式改版、發(fā)布文章和評論支持markdown語法)現(xiàn)在GitHub的代碼結(jié)構(gòu)有變現(xiàn)在GitHub的代碼結(jié)構(gòu)有變,接口名也有變動。 Node+Koa2+Mysql 搭建簡易博客 預覽地址 http://blog.wclimb....

    darkbug 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<