用ajax+jquery+json+css3+html5實現登入、註冊、以及主頁面的增刪改查
阿新 • • 發佈：2019-01-11
主要思路
-
在登入介面，輸入使用者名稱和密碼，失焦的時候，判斷輸入的使用者名稱和密碼是否符合相應的正則表示式的要求。如果符合，就傳送ajax請求到服務端，服務端接受到請求，就把從頁面中傳來的資料和json檔案裡面的資料進行對比，如果有相同的資料，就返回1，通過後臺傳回的資料1，就在前端頁面上，就在前端頁面中實現允許跳轉主頁面的操作。如果沒有相同的，就返回2，通過後臺傳回的資料2，就在前端頁面上，彈出 該使用者不存在，請去註冊的提示框。如果你在彈框中點選確定，就會跳轉註冊頁面
-
在註冊介面，輸入使用者名稱和密碼，失焦的時候，判斷輸入的使用者名稱和密碼是否符合相應的正則表示式的要求。如果符合，就傳送ajax請求到服務端，服務端接受到請求，就把從頁面中傳來的資料和json檔案裡面的資料進行對比，如果有相同的資料，就返回1，通過後臺傳回的資料1，就在前端頁面上，就在前端頁面中提示該使用者已註冊，請修改資料後，再次註冊的提示。如果沒有相同的，就把資料寫進json檔案。就返回2，通過後臺傳回的資料2，就在前端頁面上，彈出 註冊成功，請問要去登入介面嗎？的提示框。如果你在彈框中點選確定，就會跳轉登入介面
-
在主頁面的時候，實現了資料的增刪改查和刪除全部的功能。
部分程式碼如下
<script> //文件載入時，傳送ajax請求，進行資料的顯示。 $(function() { $.ajax({ type: "GET", url: "/addAllData", dataType: "json", success: function(data) { addData(data); }, error: function(xhr) { console.log(xhr.status); } }) //增加 $(".add").click(function() { $.ajax({ type: "POST", url: "/addData", data: { username: $(".li1").val(), pwd: $(".li2").val(), ymd: $(".li3").val(), workstyle: $(".li4").val(), age: $(".li5").val() }, success: function(data) { var data = JSON.parse(data); addData(data); }, error: function(xhr) { console.log(xhr.status); } }); }); //刪除全部 $(".shanchu").click(function() { $.ajax({ type: "GET", url: "/delAllData", dataType: "json", success: function(data) { addData(data); }, error: function(xhr) { console.log(xhr.status); } }); }); //按使用者名稱查詢 $(".search1").click(function() { $.ajax({ type: "GET", url: "/searchNameData", data: { username: $(".userId").val(), }, success: function(data) { search(data); }, error: function(xhr) { console.log(xhr.status); } }); }); $(".search2").click(function() { $.ajax({ type: "GET", url: "/searchYmdData", data: { ymd: $(".ymd").val(), }, success: function(data) { search(data); }, error: function(xhr) { console.log(xhr.status); } }); }); $(".search3").click(function() { $.ajax({ type: "GET", url: "/searchWorkData", data: { workstyle: $(".workstyle").val(), }, success: function(data) { search(data); }, error: function(xhr) { console.log(xhr.status); } }); }); //具體的增加函式 function addData(data) { var str = ""; for(var i = 0; i < data.length; i++) { str += "<ul class='ul1' index='"+i+"'><li class='data'>" + data[i].username + "</li><li class='data'>" + data[i].pwd + "</li><li class='data'>" + data[i].ymd + "</li><li class='data'>" + data[i].workstyle + "</li><li class='data'>" + data[i].age + "</li><li class='data'><input type='button' class='edit' value='刪除'><input type='button' class='revise' value='修改'></li></ul>"; } $("span").html(str); //刪除某行 $(".edit").click(function() { var index1 = $(this).parent().parent().attr("index"); var m = $(this).parent().parent(); $.ajax({ type: "POST", url: "/delData", data: { index: index1 }, success: function(data) { m.remove(); }, error: function(xhr) { console.log(xhr.status); } }); }); //修改某一行 $(".revise").click(function() { var index1 = $(this).parent().parent().attr("index"); var obj = $(this).parent().parent(); $.ajax({ type: "POST", url: "/resData", data: { index: index1, username: $(".li1").val(), pwd: $(".li2").val(), ymd: $(".li3").val(), workstyle: $(".li4").val(), age: $(".li5").val() }, success: function(data) { obj.find("li").eq(0).html($(".li1").val()); obj.find("li").eq(1).html($(".li2").val()); obj.find("li").eq(2).html($(".li3").val()); obj.find("li").eq(3).html($(".li4").val()); obj.find("li").eq(4).html($(".li5").val()) }, error: function(xhr) { console.log(xhr.status); } }); }); }; //查詢使用者名稱的具體函式 function search(data) { var str1 = ""; var data =JSON.parse(data); for(var i=0;i<data.length;i++){ str1 += "<ul class='ul1'><li class='data'>" + data[i].username + "</li><li class='data'>" + data[i].pwd + "</li><li class='data'>" + data[i].ymd + "</li><li class='data'>" + data[i].workstyle + "</li><li class='data'>" + data[i].age + "</li><li class='data'><input type='button' class='edit' value='刪除'><input type='button' class='revise' value='修改'></li></ul>"; } $("span").html(str1); } }); </script>
const fs = require("fs"); const http = require("http"); const url = require("url"); const querystring = require("querystring"); const server = http.createServer(); server.on("request", (req, res) => { var urlObj = url.parse(req.url, true); var pathname = urlObj.pathname; if((pathname == "/index.html" || pathname == "/") && req.method == "GET") { fs.readFile("./index.html", "utf8", (err, data) => { if(err) { throw err; } res.end(data) }) } else if(pathname == "/css/style.css" && req.method == "GET") { fs.readFile("./css/style.css", "utf8", (err, data) => { if(err) { throw err; } res.end(data) }) } else if(pathname == "/js/01.js" && req.method == "GET") { fs.readFile("./js/01.js", "utf8", (err, data) => { if(err) { throw err; } res.end(data) }) } else if(pathname == "/main.html" && req.method == "GET") { fs.readFile("./main.html", "utf8", (err, data) => { if(err) { throw err; } res.end(data); }) } else if(pathname == "/css/main.css" && req.method == "GET") { fs.readFile("./css/main.css", "utf8", (err, data) => { if(err) { throw err; } res.end(data); }) } else if(pathname == "/js/jquery-1.11.3.min.js" && req.method == "GET") { fs.readFile("./js/jquery-1.11.3.min.js", "utf8", (err, data) => { if(err) { throw err; } res.end(data) }) } else if(pathname == "/js/main.js" && req.method == "GET") { fs.readFile("./js/main.js", "utf8", (err, data) => { if(err) { throw err; } res.end(data); }) } else if(pathname == "/img/BG2.png" && req.method == "GET") { fs.readFile("./img/BG2.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/img/BG1.png" && req.method == "GET") { fs.readFile("./img/BG1.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/img/BG3.png" && req.method == "GET") { fs.readFile("./img/BG3.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/img/BG4.png" && req.method == "GET") { fs.readFile("./img/BG4.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/img/BG5.png" && req.method == "GET") { fs.readFile("./img/BG5.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/img/BG6.png" && req.method == "GET") { fs.readFile("./img/BG6.png", (err, data) => { if(err) { throw err; } res.setHeader('Content-type', 'image/png') res.end(data); }) } else if(pathname == "/register.html" && req.method == "GET") { fs.readFile("./register.html", "utf8", (err, data) => { if(err) { throw err; } res.end(data); }) } else if(pathname == "/Login" && req.method == "POST") { var data = ""; req.on("data", (chunk) => { data += chunk; }) req.on("end", () => { var obj = querystring.parse(data); console.log(obj) if(obj.username) { //判斷前臺傳來的資料物件中使用者名稱是否存在，也就是使用者名稱輸入款有輸入 fs.readFile("data1.json", "utf-8", (err, data) => { if(!err) { //讀取檔案成功 if(!data) { //如果是空檔案，也就是檔案當中沒有資料 res.end("1") //返回給前臺一個1,代表不能登入 } else { //如果檔案中有資料 var arr = JSON.parse(data); //把檔案裡的資料轉換為物件的形式 //遍歷整個儲存資料的陣列 console.log(arr) for(var i = 0; i < arr.length; i++) { //把遍歷的每個陣列放在物件中，跟前臺進行對比 //obj1是資料庫中的資料物件 //obj是前臺傳來的資料物件 var obj1 = arr[i]; if(obj1.username == obj.username) { console.log("使用者名稱已進入") if(obj1.password == obj.password) { res.end("2") //返回給前臺一個2,代表登入成功 } else { res.end("3") //返回給前臺一個3,代表登入密碼 錯誤 } } } for(var r = 0; r < arr.length; r++) { var obj2 = arr[r]; if(obj2.username != obj.username) { res.end("1") //返回給前臺一個1,代表不能登入 } } } } else { console.log("讀取檔案失敗！") } }) } else { res.end("1") } }) } else if(pathname == "/Register" && req.method == "POST") { var data = ""; req.on("data", (chunk) => { data += chunk; }) req.on("end", () => { var obj = querystring.parse(data); console.log(obj) if(obj.username) { fs.readFile("data1.json", "utf-8", (err, data) => { if(!err) { if(!data) { //沒有資料直接註冊 //obj1是資料庫中的資料物件 //obj是前臺傳來的資料物件 //建立一個數組和一個物件來儲存前臺傳來的賬號和密碼，格式是[{}] var arr = []; var obj1 = {}; obj1.username = obj.username; obj1.password = obj.password; arr.push(obj); fs.writeFileSync("data1.json", JSON.stringify(arr), "utf-8"); res.end("1") //代表註冊成功 } else { //有資料判斷是否註冊 var obj1 = JSON.parse(data); for(var i = 0; i < obj1.length; i++) { if(obj1[i].username == obj.username) { console.log("使用者名稱已存在") res.end("2"); //代表使用者名稱已經註冊過，跳轉到登入頁面 } else { //建立新的物件，把新註冊的使用者名稱和密碼存放進去 var arr = JSON.parse(data); var obj1 = {}; obj1.username = obj.username; obj1.password = obj.password; arr.push(obj); fs.writeFileSync("data1.json", JSON.stringify(arr), "utf-8"); res.end("1") //代表註冊成功 } } } } else { console.log("讀取檔案失敗！") } }) } }) } //載入時候的頁面 if(req.method == 'GET' && pathname == "/addAllData") { fs.readFile('data.json', 'utf-8', function(err, data) { if(err) { throw err; } res.end(data); }) } //增加的頁面 if(req.method == 'POST' && pathname == "/addData") { var data = ""; req.on("data", function(chunk) { data += chunk; }); req.on("end", () => { var user = querystring.parse(data); fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var obj = {}; var arr = JSON.parse(data); // console.log(arr); // for(var i = 0; i < arr.length; i++) { // if(arr[i].username == user.username) { // res.end("1"); //表示使用者名稱已經被佔用 // } else { obj.username = user.username; obj.pwd = user.pwd; obj.ymd = user.ymd; obj.workstyle = user.workstyle; obj.age = user.age; arr.push(obj); fs.writeFileSync("data.json", JSON.stringify(arr), "utf-8"); //再次更新資料庫的檔案 fs.readFile("data.json", "utf-8", function(err, data) { res.end(data); }) // } // } // if(arr[i].name==user.username){ // res.end(1); // }else{ // } } }) }); } //刪除全部的頁面 if(req.method == 'GET' && pathname == "/delAllData") { fs.readFile('data.json', 'utf-8', function(err, data) { if(err) { throw err; } var arr = JSON.parse(data); arr = []; fs.writeFileSync("data.json", JSON.stringify(arr), "utf-8"); fs.readFile("data.json", "utf-8", function(err, data) { res.end(data); }) }) } //修改功能 if(req.method == 'POST' && pathname == "/resData") { var data = ""; req.on("data", function(chunk) { data += chunk; }); req.on("end", () => { var user = querystring.parse(data); var index = user.index; fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var arr = JSON.parse(data); arr[index].username = user.username; arr[index].pwd = user.pwd; arr[index].ymd = user.ymd; arr[index].workstyle = user.workstyle; arr[index].age = user.age; fs.writeFile("data.json", JSON.stringify(arr), "utf8", (err) => { fs.readFile("data.json", "utf-8", function(err, data) { var data = JSON.stringify(data); res.end(data); }) }); } }) }); } //按使用者名稱查詢 if(req.method == 'GET' && pathname == "/searchNameData") { var query = urlObj.query; fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var arr = JSON.parse(data); console.log(arr); var mData = []; for(var i in arr) { if((arr[i].username == query.username)) { arr[i].index = i; mData.push(arr[i]); } } res.end(JSON.stringify(mData)); } }) } if(req.method == 'GET' && pathname == "/searchYmdData") { var query = urlObj.query; fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var arr = JSON.parse(data); console.log(arr); var mData = []; for(var i in arr) { if((arr[i].ymd == query.ymd)) { arr[i].index = i; mData.push(arr[i]); } } res.end(JSON.stringify(mData)); } }) } if(req.method == 'GET' && pathname == "/searchWorkData") { var query = urlObj.query; fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var arr = JSON.parse(data); console.log(arr); var mData = []; for(var i in arr) { if((arr[i].workstyle == query.workstyle)) { arr[i].index = i; mData.push(arr[i]); } } res.end(JSON.stringify(mData)); } }) } //刪除某行 if(req.method == 'POST' && pathname == "/delData") { var data = ""; req.on("data", function(chunk) { data += chunk; }); req.on("end", () => { var user = querystring.parse(data); var index = user.index; fs.readFile("data.json", "utf-8", function(err, data) { if(!err) { var data = JSON.parse(data); data.splice(index, 1); fs.writeFile("data.json", JSON.stringify(data), "utf-8", function(err, data) {}) res.end("1"); } }) }) } }) server.listen(3005); console.log("伺服器已啟動");