摘要:簡述我是一個(gè)前端的小白,學(xué)長推薦這個(gè)社區(qū)給我已經(jīng)有一段時(shí)間了。后臺(tái)的返回值訪問失敗注冊(cè)的這里我使用的的框架,不懂框架的可以先去了解一下。后臺(tái)返回的參數(shù)訪問失敗登錄的這里也跟上面的注冊(cè)差不多,只是邏輯稍稍有點(diǎn)不同,請(qǐng)看注釋。
簡述
我是一個(gè)前端的小白,學(xué)長推薦這個(gè)社區(qū)給我已經(jīng)有一段時(shí)間了。但是始終覺得自己的水平太低,一直沒在這上
面寫點(diǎn)什么。最近開始學(xué)習(xí)nodejs,就做了一個(gè)demo來分享給大家.第一次寫,不足的地方還望海涵。
注冊(cè)的html基本的表單html代碼就不詳細(xì)說了,這個(gè)不是重點(diǎn),直接上代碼:
注冊(cè)的js注冊(cè)
這里的js主要使用的是jquery,不懂jquery的可以先去了解。jquery使用ajax是特別方便的,這里以get的方式傳遞給后臺(tái)username,nickname,password三個(gè)參數(shù)。url里面寫上與后臺(tái)協(xié)商的地址,然后再是成功與失敗的回調(diào)函數(shù),常用ajax的小伙伴是不是覺得很常規(guī)。是的,這樣寫無論后臺(tái)語言是什么就都沒關(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后臺(tái)的返回值 alert(data); }, error: function(){ alert("訪問失敗"); } }); });注冊(cè)的node
這里我使用的nodejs的express框架,不懂express框架的可以先去了解一下。這個(gè)框架上手很容易的,很適合我們這樣的新手。如果你想直接使用這里的代碼,肯定是會(huì)報(bào)錯(cuò)的,需要你拿npm安裝express和mysql。當(dāng)然至于mysql你需要在本地安裝mysql,不會(huì)一點(diǎn)mysql的先去了解一下mysql。其實(shí)你也可以用nodejs把數(shù)據(jù)寫到文件里面,就可以不用mysql了。其他的見代碼注解。
var express=require("express"); // 導(dǎo)入express var events = require("events"); var emitter = new events.EventEmitter(); // 創(chuàng)建監(jiān)聽器對(duì)象(你也可以直接返回值,不用這個(gè)) var app=express(); var path=require("path"); var mysql=require("mysql"); // 導(dǎo)入mysql var dirname=__dirname; // 指向當(dāng)前js的路徑 app.use(express.static(path.join(__dirname, "project"))); // 這里你能夠直接訪問你的靜態(tài)文件,比如你的index.html /*----注冊(cè)---*/ app.get("/regist",function(req,res){ // 獲取get的請(qǐng)求的路徑,拿到前臺(tái)傳來的參數(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("注冊(cè)成功"); // 向前臺(tái)返回?cái)?shù)據(jù) }); emitter.on("false",function(){ return res.end("用戶名已存在"); // 向前臺(tái)返回?cái)?shù)據(jù) }); var sql="insert into user(username,password,nickname) values(?,?,?)"; // 向user這個(gè)表里寫入數(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ù)庫錯(cuò)誤信息 emitter.emit("false"); // 返回失敗 } emitter.emit("ok"); // 返回成功 }); connection.end(); // 關(guān)閉數(shù)據(jù)庫 }); app.listen(8081); // 設(shè)置請(qǐng)求的端口號(hào),你可以在本地訪問localhost://8081(隨便寫一個(gè)沒被占用的端口就好)登錄html
同樣是簡單的表單內(nèi)容,直接上代碼了:
登錄的js登陸
這里使用的同樣是一個(gè)ajax請(qǐng)求,基本跟注冊(cè)的請(qǐng)求差不多,傳用戶名跟密碼到后臺(tái),就不多說了。
$("#userLogin").click(function(){ $.ajax({ url: "/login", type: "GET", data: { username: $("#email-one").val(), password: $("#password-one").val() }, success: function(data){ // alert后臺(tái)返回的參數(shù) alert(data); }, error: function(){ alert("訪問失敗"); } }); });登錄的node
這里也跟上面的注冊(cè)nodejs差不多,只是邏輯稍稍有點(diǎn)不同,請(qǐng)看注釋。這里登錄也寫在同一個(gè)js文件里面,就不一一地去導(dǎo)入某些文件了,處著app這個(gè)對(duì)象直接用,這里就不用監(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ù)庫錯(cuò)誤 console.log(err); } if(result.length==0){ res.end("用戶名密碼不正確"); // 數(shù)據(jù)庫里面沒找到配對(duì)的內(nèi)容返回參數(shù) }else{ res.end("登陸成功"); //返回登錄成功 } }) connection.end(); // 關(guān)閉數(shù)據(jù)庫 })
這是小白第一次發(fā)文章,希望與跟我一樣的小白共享。本文有什么不足之處希望各大神斧正。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/83410.html
摘要:項(xiàng)目初始化此時(shí)已經(jīng)創(chuàng)建好了文件了。接下來向添加數(shù)據(jù)庫操作語句,建表增刪改查。。。前端頁面開發(fā)項(xiàng)目基本結(jié)構(gòu)搭建好后,就可以進(jìn)行前端頁面的編寫了。 前言 在學(xué)習(xí)了koa2和express并寫了一些demo后,打算自己寫一個(gè)項(xiàng)目練練手,由于是在校生,沒什么好的項(xiàng)目做,即以開發(fā)一個(gè)前端論壇為目標(biāo),功能需求參照一下一些社區(qū)擬定,主要有: 登錄注冊(cè) 個(gè)人信息維護(hù)、頭像等基本信息 發(fā)表文章,富文本...
摘要:項(xiàng)目初始化此時(shí)已經(jīng)創(chuàng)建好了文件了。接下來向添加數(shù)據(jù)庫操作語句,建表增刪改查。。。前端頁面開發(fā)項(xiàng)目基本結(jié)構(gòu)搭建好后,就可以進(jìn)行前端頁面的編寫了。 前言 在學(xué)習(xí)了koa2和express并寫了一些demo后,打算自己寫一個(gè)項(xiàng)目練練手,由于是在校生,沒什么好的項(xiàng)目做,即以開發(fā)一個(gè)前端論壇為目標(biāo),功能需求參照一下一些社區(qū)擬定,主要有: 登錄注冊(cè) 個(gè)人信息維護(hù)、頭像等基本信息 發(fā)表文章,富文本...
摘要:搭建簡易博客預(yù)覽地址寫在前面本篇教程一方面是為了自己在學(xué)習(xí)的過程加深記憶,也是總結(jié)的過程。 Koa2-blog 2018-1-5 更新教程(新增上傳頭像、新增分頁、樣式改版、發(fā)布文章和評(píng)論支持markdown語法)現(xiàn)在GitHub的代碼結(jié)構(gòu)有變現(xiàn)在GitHub的代碼結(jié)構(gòu)有變,接口名也有變動(dòng)。 Node+Koa2+Mysql 搭建簡易博客 預(yù)覽地址 http://blog.wclimb....
閱讀 1288·2021-11-15 11:37
閱讀 2285·2021-09-30 09:55
閱讀 4614·2021-09-22 15:51
閱讀 3791·2021-09-22 15:46
閱讀 2796·2019-08-30 15:52
閱讀 469·2019-08-29 16:20
閱讀 2923·2019-08-29 15:12
閱讀 1192·2019-08-26 18:27