.NET CORE Authentication Authorization .NET CORE 鑑權
阿新 • • 發佈：2022-05-08
專案實戰
展現效果
前端：
index.html 檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>深華建設</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_3386213_idxib04xvx.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_3386213_ovriqlabk7.css"> </head> <body> <!--header start--> <!--header 頭部--> <div class="header"> <!--header-content 頭部內容--> <div class="header-content"> <h1 class="logo"> <!--javascript:void(0) 空連結 logo-title 標題--> <a href="javascript:void (0)" class="logo-title"></a> </h1> <ul class="menu"> <li class="active"><a href="javascript:void (0)">首頁</a></li> <li><a href="javascript:void (0)">公開課堂</a></li> <li><a href="javascript:void (0)">VIP課堂</a></li> <li><a href="javascript:void (0)">搜尋</a></li> </ul> <!--登入、註冊--> <div class="logo-box"> <i class="iconfont icon-denglu"></i> <span><a href="註冊.html">註冊 / </a></span> <span><a href="登入.html">登入</a></span> </div> </div> </div> <!--header end--> <!--body start--> <div class="main"> <div class="main-box clearfix"> <!-- 主體左邊區域--> <div class="main-left"> <!-- 輪播圖--> <div class="banner"> <ul class="pic"> <!-- javascript:void(0) 空連結--> <li><a href="javascript:void(0)"><img src="images/1.jpg" alt=""></a></li> <li><a href="javascript:void(0)"><img src="images/2.jpg" alt=""></a></li> <li><a href="javascript:void(0)"><img src="images/3.jpg" alt=""></a></li> <li><a href="javascript:void(0)"><img src="images/4.jpg" alt=""></a></li> </ul> <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="btn"> <li class="left"><i class="iconfont icon-icon-test"></i></li> <li class="right"><i class="iconfont icon-icon-test1"></i></li> </ul> </div> </div> <!-- 主體右邊區域--> <div class="main-right"></div> </div> </div> <!--body end--> <!--footer start--> <div class="footer"> <div class="footer-box"> <div class="footer-content"> <p> <span><a href="#">關於python</a></span> |  <span><a href="#">python爬蟲</a></span> |  <span><a href="#">Django框架</a></span> |  <span><a href="#">結構與演算法</a></span> |  <span><a href="#">機器學習</a></span> |  <span><a href="#">關於我：<i class="iconfont icon-weixin1"></i> 豬腩肉</a></span> </p> <p><a href="#">地址：廣州市天河區科華街251號樂天創意園A3棟2層A2020. 聯絡方式：020-38803244</a></p> </div> </div> <div class="bottom-content"> <p> Copyright © 2022 深華建設（深圳）股份有限公司第一分公司 版權所有 </p> </div> </div> <!--footer end--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="js/index.js"></script> </body> </html>
註冊.html 檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <style> /*清空瀏覽器內外邊距*/ *{ /*清空外邊距*/ margin: 0; /*清空內邊距*/ padding: 0; } div{ width: 500px; height: 500px; /*邊框設定:寬度2px 實線 灰色*/ border: 2px solid gray; /*外邊距居中*/ margin: auto; /*內邊距：上10 右20 下10 左20 */ padding: 10px 20px 10px 20px; } /*分界線*/ div p{ /*外邊框底部，下邊框*/ border-bottom: 2px solid gray; /*內邊框底部*/ padding-bottom: 8px; } /*設定字型 字型的下邊框*/ div p span { /*字型大小*/ font-size: 18px; /*字型加粗*/ font-weight: bold; border-bottom: 4px solid purple; padding: 0 0 2px 0; } /*操作a標籤*/ div p a{ /*浮動*/ float: right; color: aqua; /*去除a標籤下劃線*/ text-decoration: none; } /*表單*/ div form input{ width: 480px; height: 40px; /*外邊距*/ margin: 10px 0 10px 0; /*內邊距*/ padding: 0 10px 0 10px; /*邊框圓角*/ border-radius: 5px; /*字型*/ font-size: 18px; /*邊框*/ border: 1px solid gray; } .msg{ width: 300px; } div form a{ /*轉換塊級元素*/ display: block; /*邊框*/ border: 1px solid gray; /*圓角*/ border-radius: 5px; width: 160px; height: 40px; /*文字居中*/ text-align: center; /*去除下劃線*/ text-decoration: none; /*文字垂直居中*/ line-height: 40px; color: purple; /*往右浮動*/ float: right; /*上外邊距*/ margin-top: 10px; } div form #box{ background-color: dodgerblue; border: 1px solid gray; width: 500px; height: 50px; font-size: 20px; color: white; } </style> </head> <body> <div> <p> <span>請註冊</span> <a href="#">立即登入 ></a> </p> <form action=""> <input type="text" placeholder="請輸入手機號"><br> <input class="msg" type="text" placeholder="請輸入簡訊驗證碼"><a href="#">傳送驗證碼</a><br> <input type="text" placeholder="請輸入使用者名稱"><br> <input type="password" placeholder="請輸入密碼"><br> <input type="password" placeholder="請再次輸入密碼"><br> <input class="msg" type="text" placeholder="請輸入圖形驗證碼"><a href="#">獲取圖片驗證碼</a><br> <input id="box" type="submit" value="立即註冊"> </form> </div> </body> </html>
登入.html 檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登入頁面</title> <link rel="stylesheet" href="reset.css"> <style> div{ width: 500px; height: 500px; border: 2px solid gray; /*外邊距居中*/ margin: auto; /*內邊距*/ padding: 10px 20px 10px 20px; } /*分界線*/ div p{ /*下邊框*/ border-bottom: 2px solid gray; /*下內邊距*/ padding-bottom: 8px; } /*“請登入”設定*/ div p span{ /*字型大小*/ font-size: 18px; /*字型加粗*/ font-weight: bold; /*下邊框*/ border-bottom: 4px solid purple; /*內邊距*/ padding-bottom: 1px; } /*“立即註冊”設定*/ div p a{ /*右浮動*/ float: right; /*去除下劃線*/ text-decoration: none; /*字型顏色*/ color: cyan; } /*輸入框設定*/ div form input{ width: 480px; height: 40px; /*外邊距*/ margin: 10px 0 10px 0; /*內邊距*/ padding: 0 10px 0 10px; /*字型大小*/ font-size: 18px; /*圓角*/ border-radius: 5px; /*邊框*/ border: 1px solid gray; } /*“忘記密碼”設定*/ div form a{ /*右浮動*/ float: right; /*去除下劃線*/ text-decoration: none; /*轉換塊級元素*/ display: block; /*字型顏色*/ color: cyan; /*外邊距*/ margin: 10px 0 10px 0; } /*自動登入設定*/ div form #dl{ width: 16px; height: 16px; /*外邊距*/ margin: 10px 0 10px 0; } div form .box{ /*背景顏色*/ background-color: dodgerblue; /*邊框*/ border: 1px solid gray; height: 50px; /*字型大小*/ font-size: 20px; /*字型顏色*/ color: white; } </style> </head> <body> <div> <!--盒子裡可以放任意的標籤--> <p> <span>請登入</span><a href="#">立即註冊 > </a> </p> <!--資訊最終需要提交到後端，故使用表單--> <form action=""> <input type="text" placeholder="請輸入手機號"><br> <input type="password" placeholder="請輸入密碼"><br> <input id="dl" type="checkbox">七天自動登入 <a href="#">忘記密碼？</a><br> <input class="box" type="submit" value="登入"> </form> </div> </body> </html>
CSS 檔案
index.css 檔案
/* header start */
.header{
/*跟瀏覽器大小*/
width: 100%;
height: 70px;
background-color: black;
}
.header .header-content{
width: 1200px;
height: 70px;
/*居中*/
margin: auto;
/*垂直居中*/
line-height: 70px;
background-color: #333333;
}
.header .header-content .logo{
width: 235px;
height: 65px;
float: left;
}
.header .header-content .logo .logo-title{
/*轉換成塊級元素*/
display: block;
width: 100%;
height: 100%;
/* no-repeat 不平鋪*/
background: url("https://www.python.org/static/img/python-logo.png") no-repeat;
}
.header .header-content .menu{
float: left;
margin-left: 150px;
}
.header .header-content .menu li{
float: left;
height: 70px;
}
.header .header-content .menu li a{
padding: 0 30px;
font-size: 18px;
}
/*偽類選擇器*/
.header .header-content .menu li:hover{
border-bottom: 5px solid aqua;
/*在指定的盒子內操作，不會超過盒子大小*/
box-sizing: border-box;
}
/*選擇啟用的樣式，當你點選一個連結的時候讓它變成一個活動連結*/
/* 一進網頁，預設在首頁 */
.header .header-content .menu .active{
border-bottom: 5px solid aqua;
box-sizing: border-box;
}
/*圖示設定*/
.header .header-content .logo-box{
float: right;
margin-right: 20px;
}
.header .header-content .logo-box i{
font-size: 35px;
color: aqua;
/*垂直對齊*/
vertical-align: -6px;
margin-right: 10px;
}
/*header end*/
/* body start */
.main{
width: 100%;
padding: 30px 0;
}
.main .main-left{
width: 1200px;
height: 600px;
margin: auto;
background-color: #dddddd;
}
/*輪播圖 start*/
/*調整div*/
.banner{
width: 800px;
height: 400px;
/*border: 1px solid red;*/
/*相對定位*/
position: relative;
}
/*調整li標籤*/
.banner .pic li{
/*絕對定位*/
position: absolute;
left: 0;
top: 0;
}
/*調整圖片*/
.banner .pic img{
width: 800px;
height: 400px;
}
/*調整圖片下的顯示點*/
.banner .tab{
/*絕對定位*/
position: absolute;
/*下邊框*/
bottom: 10px;
/*左邊框居中*/
left: 50%;
width: 200px;
/*左外邊框往左移*/
margin-left: -64px;
height: 50px;
}
/*圖片顯示小圓點設定*/
.banner .tab li{
border: 1px solid mediumblue;
width: 20px;
height: 20px;
float: left;
border-radius: 50%;
margin-left: 10px;
}
.banner .tab li.on{
background-color: blue;
}
/*箭頭標籤設定*/
.banner .btn li i{
/*絕對定位*/
position: absolute;
font-size: 100px;
top: 50%;
margin-top: -50px;
color: white;
/*隱藏*/
display: none;
}
/* hover 懸停*/
.banner:hover .btn li i{
display: block;
}
/*左箭頭*/
.banner .btn li.left i{
left: 0;
}
/*右箭頭*/
.banner .btn li.right i{
right: 0;
}
/*輪播圖 end*/
/*body end*/
/* footer start */
.footer{
width: 100%;
background-color: black;
}
.footer .footer-box{
width: 1200px;
margin: auto;
background-color: #333333;
text-align: center;
color: white;
}
.footer .footer-box .footer-content{
line-height: 40px;
font-size: 16px;
padding: 15px 0;
background: url("https://www.python.org/static/img/python-logo.png") no-repeat;
}
.footer .bottom-content{
text-align: center;
line-height: 50px;
color: wheat;
}
.footer .bottom-content p{
width: 1200px;
margin: auto;
}
/* footer end */
reset.css 檔案
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
/*解決浮動塌陷問題 裡面的屬性和屬性值也是規定的*/
.ul:after{
content: "";
/*轉換成塊級元素*/
display: block;
/*清除所有的浮動*/
clear: both;
}
a{
/*去掉下劃線*/
text-decoration: none;
/*字型顏色*/
color: wheat;
}
後端：
index.js 檔案
// 獲取圖片
var pic = $('.banner .pic li')
// 獲取小圓點
var tab = $('.banner .tab li')
// 獲取箭頭
var btn = $('.banner .btn li')
// 獲取圖片長度
var len = pic.length
// 預設第一張圖片
var first = 0
// 初始化
// 第一個小圓點變色
tab.eq(0).addClass('on')
// 第一張圖片顯示，其他圖片隱藏
pic.hide().eq(0).show()
// 變化函式
function change(n) {
// 如果是之前的照片，那就去除樣式，進行隱藏
tab.eq(first).removeClass('on')
// fadeOut(1000) 一秒後隱藏 第一張圖片
pic.eq(first).fadeOut(1000)
first = n
// 如果是新的圖片,那就新增樣式，顯示圖片
tab.eq(first).addClass('on')
pic.eq(first).fadeIn(1000)
}
// 圓點方法
tab.click(function () {
// 點選的是第一個小圓點，則不用頁面跳轉
var x = $(this).index()
if (x!=first){
// 呼叫變化函式
change(x)
}
})
// 箭頭方法
btn.click(function () {
var x = first
if ($(this).index()){
x++
if (x>len-1){
x=0
}
}else {
x--
if (x<0){
x = len-1
}
}
// 呼叫變化函式
change(x)
})
// 定時器 自動播放功能
auto()
function auto() {
timer = setInterval(function () {
var x = first
x++
// 在四張圖片中迴圈 %= 取餘
x %= len // 0%4 0 1%4 1 2%4 2 3%4 3 4%4 0
change(x)
},3000)
}
// 清除定時器 滑鼠劃入時
$('.banner').hover(function () {
clearInterval(timer)
},auto)
```