百度t7 教程 node 初步4 使用者註冊
阿新 • • 發佈：2018-12-09
1, Node 靜態頁面的寫法
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload= function(){ let oBtn = document.getElementById('btn') let oUserName = document.getElementById('username') let oPsw= document.getElementById('psw') oBtn.onclick = function(){ let oUserText= oUserName.value; let oPswText= oPsw.value //傳送 ajax 請求！ $.ajax({ url:'http://localhost:3000/reg', data:{ 'username':oUserText, 'password':oPswText }, success: function(data){ alert('請求成功' + data) }, error:function(data){ alert("請求失敗： "+data) } }) } } </script> </head> <body> <h1>歡迎來到主頁！！</h1> username:<input id="username" type = 'text'/> </br> password:<input type="text" id="psw"></input> </br> <input type="button" id="btn" value="提交"> </body> </html>
2, index.js 寫法
let http = require('http') let fs = require('fs') let url = require('url') let mysql=require('mysql') // 在這裡就可以寫註冊的邏輯了！ var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'action' }); connection.connect(); // 建立個 伺服器 let server = http.createServer(function(req,res){ // 1, 拆解url // es6 解構賦值 let {pathname,query} = url.parse(req.url,true); let {username,password}= query; console.log(pathname,username,password) if(pathname=='/login'){ res.write('login') res.end() }else if(pathname=='/reg'){ console.log(username) console.log(password) // 1,校驗 ， var pattern = /\w{6,18}/i; if(!pattern.test(username)){ res.write('使用者名稱不符合必須是字母數字下劃線， 並且是6-18位') res.end(); }else if(!pattern.test(password)){ res.write('密碼不符合規範並且是6-18位') res.end(); }else { // 去資料庫裡查詢使用者名稱是否存在，若存在也 返回資訊 let sql = `select id from account where username='${username}';` connection.query(sql,function(err,data){ if(err){ res.writeHeader(404) res.write('資料庫出錯') res.end(); }else{ if(data.length>0){ // 使用者名稱已經存在： res.write('username is exist!!') res.end(); }else { // 講 使用者插入到資料庫中 let sql2 = `insert into account(username,password,islogin) values('${username}','${password}',1);` console.log(sql2) connection.query(sql2,function(err,data){ if(err){ res.writeHeader(404) res.write('資料庫出錯') res.end(); }else{ res.write('註冊成功 ') res.end(); } }) } } }) } }else if(pathname=='/index.html'){ //讀取檔案的操作： fs.readFile('./public/index.html',function(err,data){ if(err){ //若 讀取 檔案失敗， res.writeHeader(404) res.write('檔案不存在') res.end(); }else{ res.write(data.toString()) res.end(); } }) }else if(pathname=='/jquery.js'){ fs.readFile('./public/jquery.js',function(err,data){ if(err){ //若 讀取 檔案失敗， res.writeHeader(404) res.write('檔案不存在') res.end(); }else{ res.write(data.toString()) res.end(); } }) } }); // 監聽3000 埠 server.listen(3000,function(){ console.log('connet success') })
需要 注意 的 是，只要是靜態頁面 ，就 會走node 的邏輯， 比如那個jquery 引入，它也會走 node 路徑，所以都要處理
所以在node 要處理靜態 資源 ，它不 會自動引入，它 還是 需要找node ,可見 Node是個底層的 伺服器
關於 使用者的註冊邏輯，邏輯比較簡單，但是寫起來稍微繁瑣些，實際 上難度 不大，就 是 很繁瑣
crud 就是很繁瑣！！其實蠻無趣的！
好吧，這篇就寫麼多， 下一篇，再把註冊寫完，就基本 完成 了 ！
不完成 ，就 沒辦法往下學習，因為
後面的 才是最有價值的 !!