利用access做網(wǎng)站電腦培訓(xùn)網(wǎng)上免費(fèi)課程
該模塊能做到的功能：
1階：輸入賬號和密碼，輸入正確即可返回登錄成功的信息，反之則登錄失敗
2階：有簡單的前端頁面，有登錄成功和失敗的彈窗，還有登錄成功的主頁面
3階：前端頁面的注冊也可以使用，注冊完的帳號能直接登錄
1階結(jié)束了，咱們2階繼續(xù)
把前端頁面寫一下
前端登錄、注冊頁面預(yù)覽圖，登錄成功或失敗上方會有瀏覽器窗口提示
前端借鑒了一下這個(gè)的視頻的頁面
https://www.bilibili.com/video/BV1zD4y1D7y4/%EF%BC%9Fshare_source=copy_web&vd_source=21f3fc7e7628e67cf8020c7bc3880a85視頻演示源碼，源自視頻的簡介https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501
上面的鏈接只是標(biāo)明原出處，不影響接下來的步驟
在resources包里新建static包，在里面新建一個(gè)file文件，命名login.html，沒錯(cuò)這是一個(gè)html文件
再添加一個(gè)file文件，命名home.html，這兩個(gè)頁面分別是登錄頁面和登錄后的主頁面
login.html
樣式借鑒自上面的第一個(gè)鏈接視頻
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">登錄</div>
<!-- <div>注冊</div>--></div><div class="content"><div style="display: block;"><p>賬號</p><input type="text" id="name"/><p>密碼</p><input type="password" id="password"/><br/><input type="submit" value="登錄" id="btn"/></div>
<!-- <div>-->
<!-- <p>賬號</p>-->
<!-- <input type="text" placeholder="請輸入11位手機(jī)號" id="rename" />-->
<!-- <p>密碼</p>-->
<!-- <input type="password" placeholder="請輸入至少7位同時(shí)帶字母和數(shù)字的密碼" id="repassword" />-->
<!-- <br/>-->
<!-- <input type="submit" value="注冊" id="reg"/>-->
<!-- </div>--></div>
</div><script>window.onload = function(){var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for(let i=0;i<it.length;i++){it[i].onclick = function(){for(let j=0;j<it.length;j++){it[j].className = '';con[j].style.display = "none";}this.className = "active";it[i].index=i;con[i].style.display = "block";}}}var btn = document.getElementById("btn")btn.onclick = function () {const user = {name:document.getElementById("name").value,password:document.getElementById("password").value}axios.post("http://localhost:8080/doLogin",user).then(res => {if(res.data.code == 200){location.href="home.html"localStorage.setItem("name",res.data.data.name);localStorage.setItem("password",res.data.data.password);alert("登錄成功,歡迎："+ res.data.data.name)}else {alert("登錄失敗")}})}// var reg = document.getElementById("reg")// reg.onclick = function () {// const user = {// name:document.getElementById("rename").value,// password:document.getElementById("repassword").value// }// var re=/^1\d{10}$/;// var pw= new RegExp("^(?=.{7,})(((?=.*[A-Z])|(?=.*[a-z]))(?=.*[0-9])).*$", "g");// if (re.test(user.name) && pw.test(user.password)){// axios.post("http://localhost:8080/register",user)// .then(res => {// if(res.data.code == 200){// alert("注冊成功")// }// else {// alert("注冊失敗")// }// })}// else {// alert("手機(jī)號或密碼格式不正確");// }// }
</script></body><style>*{margin: 0;padding: 0;}body{background: #f3f3f3;}.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;}.item{width: 340px;height: 60px;background: #eeeeee;}.item div{width: 170px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;}.content{width: 100%;}.content div{margin: 20px 30px;display: none;text-align: left;}p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;}.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;}.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;}.active{background: white;}.item div:hover{background: #f6f6f6;}
</style>
</html>前端的登錄相對于注冊講的能輕松一些：
點(diǎn)擊登錄后，前端會將我們輸入的賬號密碼放在一個(gè)叫user的對象里，然后使用post方法帶著user將url傳給后端，根據(jù)后端返回來的數(shù)據(jù)來確定是登錄成功還是失敗。
這里一共有三處被注掉的代碼，這些是用來寫注冊功能的，現(xiàn)在用不上。
等說到注冊功能咱再解開就可以，如果你現(xiàn)在就想解開也沒事，不影響接下來代碼的運(yùn)行。
解除/添加批注快捷鍵：選中全部批注或需要批注的代碼，?ctrl+/
home.html
這是一個(gè)簡單的主頁面，畢竟咱主要寫的是后端，前端湊合能看就行
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">這是主頁面</div></div><div class="content"><div style="display: block;"><input type="submit" value="退出登錄" id="btn"/></div></div>
</div>
</body><script>window.onload = function(){let name = localStorage.getItem("name");let password = localStorage.getItem("password");if (name == null || password == null){location.href="login.html"alert("請先登錄")}const user = {name:name,password:password}axios.post("http://localhost:8080/doLogin",user).then(res => {if(res.data.code != 200){location.href="login.html"alert("請先登錄")}})var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for(let i=0;i<it.length;i++){it[i].onclick = function(){for(let j=0;j<it.length;j++){it[j].className = '';con[j].style.display = "none";}this.className = "active";it[i].index=i;con[i].style.display = "block";}}}var btn = document.getElementById("btn")btn.onclick = function () {localStorage.removeItem("name");localStorage.removeItem("password");location.href = "login.html"}</script><style>*{margin: 0;padding: 0;}body{background: #f3f3f3;}.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;}.item{width: 340px;height: 60px;background: #eeeeee;}.item div{width: 340px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;}.content{width: 100%;}.content div{margin: 20px 30px;display: none;text-align: left;}p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;}.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;}.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;}.active{background: white;}.item div:hover{background: #f6f6f6;}
</style>
</html>這里加了個(gè)本地存儲，如果在登錄界面登錄成功，前端會把輸入正確的賬號和密碼的鍵和值保存在瀏覽器。這樣就能保證主頁面只有在登錄狀態(tài)下才能正常顯示，否則（運(yùn)行后端后直接通過home.html 右上角的瀏覽器圖標(biāo)直接進(jìn)入主頁面）會彈回登錄界面。
| 鍵 | 值 |
| name | 13334455667 |
| password | 123456q |