摘要:簡述我是一個前端的小白,學長推薦這個社區給我已經有一段時間了。后臺的返回值訪問失敗注冊的這里我使用的的框架,不懂框架的可以先去了解一下。后臺返回的參數訪問失敗登錄的這里也跟上面的注冊差不多,只是邏輯稍稍有點不同,請看注釋。
簡述
</>復制代碼
我是一個前端的小白,學長推薦這個社區給我已經有一段時間了。但是始終覺得自己的水平太低,一直沒在這上
面寫點什么。最近開始學習nodejs,就做了一個demo來分享給大家.第一次寫,不足的地方還望海涵。
注冊的html</>復制代碼
基本的表單html代碼就不詳細說了,這個不是重點,直接上代碼:
注冊的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
</>復制代碼
同樣是簡單的表單內容,直接上代碼了:
登錄的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(); // 關閉數據庫
})
</>復制代碼
這是小白第一次發文章,希望與跟我一樣的小白共享。本文有什么不足之處希望各大神斧正。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83410.html
摘要:項目初始化此時已經創建好了文件了。接下來向添加數據庫操作語句,建表增刪改查。。。前端頁面開發項目基本結構搭建好后,就可以進行前端頁面的編寫了。 前言 在學習了koa2和express并寫了一些demo后,打算自己寫一個項目練練手,由于是在校生,沒什么好的項目做,即以開發一個前端論壇為目標,功能需求參照一下一些社區擬定,主要有: 登錄注冊 個人信息維護、頭像等基本信息 發表文章,富文本...
摘要:項目初始化此時已經創建好了文件了。接下來向添加數據庫操作語句,建表增刪改查。。。前端頁面開發項目基本結構搭建好后,就可以進行前端頁面的編寫了。 前言 在學習了koa2和express并寫了一些demo后,打算自己寫一個項目練練手,由于是在校生,沒什么好的項目做,即以開發一個前端論壇為目標,功能需求參照一下一些社區擬定,主要有: 登錄注冊 個人信息維護、頭像等基本信息 發表文章,富文本...
摘要:搭建簡易博客預覽地址寫在前面本篇教程一方面是為了自己在學習的過程加深記憶,也是總結的過程。 Koa2-blog 2018-1-5 更新教程(新增上傳頭像、新增分頁、樣式改版、發布文章和評論支持markdown語法)現在GitHub的代碼結構有變現在GitHub的代碼結構有變,接口名也有變動。 Node+Koa2+Mysql 搭建簡易博客 預覽地址 http://blog.wclimb....
閱讀 1241·2021-11-15 11:37
閱讀 2254·2021-09-30 09:55
閱讀 4518·2021-09-22 15:51
閱讀 3751·2021-09-22 15:46
閱讀 2772·2019-08-30 15:52
閱讀 429·2019-08-29 16:20
閱讀 2895·2019-08-29 15:12
閱讀 1137·2019-08-26 18:27
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要