
批改狀態(tài):合格
老師批語:作業(yè)寫得這么好, 為什么不寫點總結,心得呢?這樣可幫到更多的人
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用戶管理系統</title>
<link rel="stylesheet" href="style.css">
<style>
header {
display: flex;
background-color: #333;
padding: 0.5em 1em;
width: 100%;
}
a {
color: #bbb;
text-decoration: none;
}
a:hover {
color: white;
}
header nav {
margin-left: auto;
}
</style>
</head>
<body>
<header>
<a href="#">首頁</a>
<nav>
<?php if (!isset($_SESSION['email'])) : ?>
<script>
alert('請登錄后再操作!');
location.href = "login.php";
</script>
<?php else : ?>
<a href="#" class="ses"><?= $_SESSION['email'] ?></a>
<a href="handle.php?action=logout">退出</a>
<?php endif ?>
</nav>
</header>
<table>
<caption>用戶管理 <span class="tips" style="color:red;font-size:10px;"></span></caption>
<thead>
<tr>
<td>UID</td>
<td>用戶名</td>
<td>郵箱</td>
<td>注冊時間</td>
<?php if ($_SESSION['email'] === 'guest1@php.cn') : ?>
<td>操作</td>
<? endif ?>
</tr>
</thead>
<!-- 列表渲染 -->
<tbody></tbody>
</table>
<!-- 分頁渲染 -->
<p></p>
<!-- 模態(tài)框編輯 -->
<div class="md">
<div class="md-drop"></div>
<div class="md-body">
<button class="close">關閉</button>
<form action="" name="editform">
<h2>編輯用戶</h2>
<div class="md-login">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" value="">
<label for="email">郵箱:</label>
<input type="email" name="email" id="email" value="">
<button class="save">保存</button>
</div>
</form>
</div>
</div>
<!-- 模態(tài)框樣式 -->
<style>
/* 模態(tài)框初始化隱藏 */
.md {
display: none;
}
/* 遮罩層 */
.md .md-drop {
position: fixed;
background-color: rgb(0, 0, 0, .5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.md .md-body {
position: fixed;
background-color: lightcyan;
padding: 1em;
overflow: hidden;
max-width: 25em;
max-height: 20em;
/* 水平垂直居中 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 10px;
}
/* 關閉按鈕 */
.md .md-body .close {
float: right;
height: 2.5em;
width: 3em;
border: 0;
border-radius: 0.5em;
outline: none;
background-color: rgb(1, 231, 135);
}
.md .md-login {
display: grid;
gap: 1em;
margin-top: 20px;
}
</style>
<script src="ajax.js"></script>
</body>
</html>
<?php
session_start();
if(isset($_SESSION['email'])) {
echo '<script>alert("請不要重復登錄");location.href="index.php";</script>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登錄</title>
<style>
form {
display: grid;
gap: .5em;
width: 15em;
margin: 2em auto;
border: 1px solid #eee;
padding: 1em 2em;
background-color: lightskyblue;
border-radius: 0.5em;
}
</style>
</head>
<body>
<form name="login">
<span>用戶登錄</span>
<input type="email" name="email" placeholder="請輸入登錄郵箱">
<input type="password" name="password" placeholder="請輸入登錄密碼">
<!-- 此處給button類型防止默認提交 -->
<button type="button" name="submit">立即登錄</button>
<button type="button" name="registers">新用戶注冊</button>
<span class="tips"></span>
</form>
<script>
const form = document.forms.login;
const email = form.email;
const psw = form.password;
const submitBtn = form.submit;
const xhr = new XMLHttpRequest;
const tips = document.querySelector('.tips');
const regis = form.registers;
regis.onclick = (ev) => {
location.href = 'register.php';
}
submitBtn.onclick = (ev) => {
// 非空判斷
if (email.value.trim().length > 0 && psw.value.trim().length >0) {
// 請求參數
xhr.open('post','handle.php?action=login');
// 響應類型
// 設置類型為json,返回結果自動解析為js對象
xhr.responseType = 'json';
// 成功回調
xhr.onload = () => {
console.log(xhr.response);
tips.innerHTML = xhr.response.msg;
if (xhr.response.status === 1 ) {
// 登錄成功進入用戶管理頁
setTimeout(() => location.href = 'index.php',3000);
}
}
// 失敗回調
xhr.onerror = () => console.log('error!');
// 發(fā)送請求
xhr.send(new FormData(form));
} else {
tips.innerHTML = '賬戶信息不能為空!';
email.focus();
}
}
// 清空提示
[email,psw].forEach((item)=>item.oninput = () => tips.innerHTML = null);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新用戶注冊</title>
<style>
form {
display: grid;
gap: .5em;
width: 15em;
margin: 2em auto;
border: 1px solid #eee;
padding: 1em 2em;
background-color: lightskyblue;
border-radius: 0.5em;
}
</style>
</head>
<body>
<form name="register">
<span>新用戶注冊</span>
<input type="text" name="name" placeholder="請輸入用戶名">
<input type="email" name="email" placeholder="請輸入登錄郵箱">
<input type="password" name="password1" placeholder="請輸入登錄密碼">
<input type="password" name="password2" placeholder="確認登錄密碼">
<!-- 此處給button類型防止默認提交 -->
<button type="button" name="submit">立即注冊</button>
<span class="tips"></span>
</form>
<script>
const form = document.forms.register;
const name = form.name;
const email = form.email;
const psw1 = form.password1;
const psw2 = form.password2;
const submitBtn = form.submit;
const xhr = new XMLHttpRequest;
const tips = document.querySelector('.tips');
submitBtn.onclick = (ev) => {
// 非空判斷
if (name.value.trim().length > 0 && email.value.trim().length > 0 && psw1.value.trim().length >0) {
if (psw1.value !== psw2.value) {
tips.innerHTML = '確認密碼輸入不一致!';
psw1.focus();
} else {
// 請求參數
xhr.open('post','handle.php?action=register');
// 響應類型
// 設置類型為json,返回結果自動解析為js對象
xhr.responseType = 'json';
// 成功回調
xhr.onload = () => {
console.log(xhr.response);
tips.innerHTML = xhr.response.msg;
if (xhr.response.status === 1 ) {
// 注冊成功進入用戶管理頁
setTimeout(() => location.href = 'index.php',3000);
}
}
// 失敗回調
xhr.onerror = () => console.log('error!');
// 確認密碼不需要發(fā)送
const data = new FormData(form);
data.delete('password2');
// 發(fā)送請求
xhr.send(data);
}
} else {
tips.innerHTML = '賬戶信息不能為空!';
name.focus();
}
}
// 清空提示
[name,email,psw1,psw2].forEach((item)=>item.oninput = () => tips.innerHTML = null);
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #555;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
/*表格樣式*/
table {
width: 90%;
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
table caption {
font-size: 1.2rem;
margin: 10px;
}
table td,
table th {
border: 1px solid;
padding: 5px;
}
table tr:hover {
background-color: #eee;
}
table thead tr:only-of-type {
background-color: lightcyan;
}
table button {
width: 56px;
height: 26px;
}
table button:last-of-type {
color: red;
}
table button {
cursor: pointer;
margin: 0 3px;
}
/*分頁條樣式*/
body > p {
display: flex;
}
p > a {
text-decoration: none;
color: #555;
border: 1px solid #888;
padding: 5px 10px;
margin: 10px 2px;
}
.active {
background-color: seagreen;
color: white;
border: 1px solid seagreen;
}
// 頁面載入完成時渲染第一頁數據
window.onload = function () {
select(1);
};
// 編輯
document.querySelector('table:first-of-type tbody').addEventListener('click' , ev => {
// 獲取記錄id
const sid = ev.target.parentNode.parentNode.querySelector('td').textContent * 1;
const tips = document.querySelector('.tips');
// 操作類型
switch (ev.target.textContent) {
case '編輯':
// 顯示模態(tài)框
document.querySelector('.md').style.display = 'block';
// 點擊關閉按鈕
document.querySelector('.md .close').addEventListener('click',(eve) => {
document.querySelector('.md').style.display = 'none';
});
// 點擊模態(tài)框之外區(qū)域
document.querySelector('.md .md-drop').addEventListener('click',(eve) => {
document.querySelector('.md').style.display = 'none';
});
// 獲取數據
let name = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent;
let email = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent;
// 渲染到模態(tài)框
document.getElementById('name').value = name;
document.getElementById('email').value = email;
// 編輯事件
document.querySelector('.md .save').addEventListener('click',(eve) => {
// 禁止默認提交
eve.preventDefault();
// 獲取模態(tài)框數據
name = document.getElementById('name').value;
email = document.getElementById('email').value;
// 創(chuàng)建對象
let xhr = new XMLHttpRequest();
// 配置參數
xhr.open('post','api.php?action=update&sid=' + sid);
xhr.responseType = 'json';
// 處理請求
xhr.onload = () => {
// 更新數據寫會頁面
tips.innerHTML = xhr.response.msg;
if (xhr.response.status === 1 ) {
document.querySelector('.md').style.display = 'none';
ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent = name;
ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent = email;
setTimeout(() => tips.innerHTML = null,2000);
}
};
xhr.send(new FormData(document.forms.namedItem('editform')));
});
break;
case '刪除':
if (confirm('確認刪除UID:' + sid + '用戶?')) {
// 創(chuàng)建對象
let xhr = new XMLHttpRequest();
// 配置參數
xhr.open('get','api.php?action=delete&sid=' + sid);
xhr.responseType = 'json';
// 處理請求
xhr.onload = () => {
tips.innerHTML = xhr.response.msg;
if (xhr.response.status === 1) {
// 刪除節(jié)點
ev.target.parentNode.parentNode.remove();
setTimeout(() => tips.innerHTML = null,2000);
}
};
// 發(fā)送請求
xhr.send(null);
}
break;
}
})
function select(page = 1) {
// 創(chuàng)建對象
const xhr = new XMLHttpRequest();
// 配置參數
xhr.open('get', 'api.php?action=select&page=' + page);
// 處理請求
xhr.onload = () => {
// console.log(xhr.response);
let res = JSON.parse(xhr.response);
let pages = res.pages;
let users = res.users;
// 渲染數據
document.querySelector('table:first-of-type tbody').innerHTML = get_datas(users);
// 渲染分頁
document.querySelector('p:first-of-type').innerHTML = pags(page,pages);
}
// 發(fā)送請求
xhr.send(null);
}
// 渲染數據
function get_datas(datas) {
const ses = document.querySelector('.ses').innerText;
let str = '';
for (let i = 0; i < datas.length; i++) {
str += '<tr>';
str += '<td>' + datas[i]['sid'] + '</td>';
str += '<td>' + datas[i]['name'] + '</td>';
str += '<td>' + datas[i]['email'] + '</td>';
str += '<td>' + datas[i]['create_at'] + '</td>';
if (ses=== 'guest1@php.cn') {
str += '<td><button>編輯</button><button>刪除</button></td>';
}
str += '</tr>';
}
return str;
}
// 無刷新分頁
document.querySelector('p:first-of-type').addEventListener('click',ev => {
// 禁用默認跳轉
ev.preventDefault();
// 點擊當前激活頁,無效點擊
if (ev.target.classList.contains('active')) return;
// 去掉激活樣式
[...ev.currentTarget.children].forEach(ele => ele.classList.remove('active'));
// 當前頁添加激活樣式
ev.target.classList.add('active');
let url = ev.target.href,page;
// 獲取頁碼
if (url.indexOf('?') !== -1) {
page = url.split('=')[1];
} else {
page = 1;
}
select(page);
})
// 分頁數據
function pags (page = 1,pages) {
let pag = '';
let active = '';
// 首頁和上一頁
if (page <= 1) page =1;
if (page != 1) {
pag += '<a href="'+ document.URL + '?p=1">首頁</a>';
pag += '<a href="'+ document.URL + '?p=' + Math.max(1,page - 1) +'">上一頁</a>';
}
// 高亮分頁
for (i = 1; i <= pages; i++ ) {
active = '';
if (page == i) active = 'class="active"';
pag += '<a href="' + document.URL + '?p=' + i + '"' + active + '>' + i + '</a>';
}
// 下一頁和尾頁
if (page >= pages) page = pages;
if (page !== pages) {
pag += '<a href="' + document.URL + '?p=' + Math.min(page + 1,pages) + '">下一頁</a>'
pag += '<a href="' + document.URL + '?p=' + pages +'">尾頁</a>'
}
return pag;
}
$config = [
'type' => 'mysql',
'host' => '127.0.0.1',
'dbname' => 'phpedu',
'username' => 'root',
'password' => '123456',
];
extract($config);
$dsn = sprintf('%s:host=%s;dbname=%s;',$type,$host,$dbname);
try {
$pdo = new PDO($dsn,$username,$password);
// 設置結果集返回類型
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
// var_dump($pdo,'連接成功');
} catch (PDOException $e){
die('連接失敗:'. $e->getMessage());
}
// 頁碼通過get請求
$page = $_GET['page'] ?? 1;
$action = $_GET['action'] ?? 'select';
switch ($action) {
// 查詢
case 'select':
die(get_datas($pdo,$page));
break;
// 刪
case 'delete':
die(del_data($pdo,$_GET['sid'] ?? 0));
break;
// 更新
case 'update':
$sid = $_GET['sid'] ?? 0;
$name = $_POST['name'];
$email = $_POST['email'];
die(update_data($pdo,$sid,$name,$email));
break;
}
// 更新
function update_data($pdo,$sid,$name,$email) {
if ($sid) {
$sql = "UPDATE users SET name=:name, email=:email WHERE sid = :sid;";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':sid',$sid,PDO::PARAM_INT);
$stmt->bindParam(':name',$name,PDO::PARAM_STR);
$stmt->bindParam(':email',$email,PDO::PARAM_STR);
$stmt->execute();
if($stmt->rowCount() > 0) {
return json_encode(['status' => 1,'msg' => '更新成功!']);
}
}
return json_encode(['status' => 0,'msg' => '未知錯誤!']);
}
// 刪除
function del_data($pdo,$sid = 0) {
if ($sid) {
$sql = "DELETE FROM users WHERE sid = :sid;";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':sid',$sid,PDO::PARAM_INT);
$stmt->execute();
if ($stmt->rowCount() > 0) {
return json_encode(['status' => 1,'msg' => '刪除成功!']);
}
}
return json_encode(['status' => 0,'msg' => '未知錯誤!']);
}
// 獲取總頁數
function get_pages($pdo,$page = 1,$num = 5) {
// 總頁數
$num = 5;
$offset = ($page - 1 ) * $num;
$sql = "SELECT CEIL(COUNT(1)/{$num}) total FROM users";
$pages = $pdo->query($sql)->fetch()['total'];
return $pages;
}
function get_datas($pdo,$page = 1, $num = 5) {
// 獲取總頁數
$pages = get_pages($pdo);
// 每頁顯示數據
$offset = ($page - 1) * $num;
$sql = "SELECT * FROM `users` LIMIT {$offset},{$num}";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll();
$users = $pdo->query($sql)->fetchall();
return json_encode(['pages' => $pages, 'users' => $users]);
}
// 開啟session會話
session_start();
// 白名單
$allurls = [
'index.php',
'login.php',
'register.php',
'api.php'
];
$requrl = basename($_SERVER['HTTP_REFERER']);
if(!isset($_SERVER['HTTP_REFERER']) || !in_array($requrl,$allurls)) {
die('<script>alert("非法訪問");location.href="index.php";</script>');
}
// 連接數據庫
$pdo = new PDO('mysql:dbname=phpedu','root','123456');
$action = strtolower($_GET['action']);
switch ($action) {
// 登錄
case 'login':
$sql = 'SELECT * FROM user WHERE email=:email AND password=md5(:password)';
$stmt = $pdo->prepare($sql);
if ($stmt->execute($_POST)) {
if ($stmt->fetch()) {
// 登錄成功就將用戶信息寫入session
$_SESSION['email'] = $_POST['email'];
echo json_encode(['status' => 1, 'msg' => '登錄成功,3秒后跳轉...']);
} else {
echo json_encode(['status' => 0, 'msg' => '賬號或密碼錯誤!']);
}
} else {
print_r($stmt->errorInfo());
}
break;
// 注冊
case 'register':
// 確保郵箱的唯一性,在后端做判斷,不依賴數據庫索引
// 獲取標中所有郵箱返回一個數組
$stmt = $pdo->prepare('SELECT email FROM user');
$stmt->bindColumn('email',$email);
$stmt->execute();
$emails = [];
while ($stmt->fetch(PDO::FETCH_BOUND)) {
$emails[] = $email;
}
// echo json_encode($emails);
if (in_array($_POST['email'], $emails)) {
echo json_encode(['status' => -1, 'msg' => '郵箱名已被占用請更換!']);
} else {
// 郵箱可用,執(zhí)行插入操作
$sql = 'INSERT user SET name=:name,email=:email,password=md5(:password1)';
$stmt = $pdo->prepare($sql);
if ($stmt->execute($_POST)) {
if ($stmt->rowCount()==1) {
// 實現注冊后自動登錄
$_SESSION['email'] = $_POST['email'];
echo json_encode(['status' => 1, 'msg' => '注冊成功,自動登錄中...']);
} else {
echo json_encode(['status' => 1, 'msg' => '注冊異常,請聯系管理員!']);
}
} else {
print_r($stmt->errorInfo());
}
}
break;
// 退出登錄
case 'logout':
// 1.清空session變量
session_unset();
// 2.刪除session文件
session_destroy();
echo '<script>alert("退出成功");location.href="index.php";</script>';
break;
default:
exit('非法操作');
}
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號