阿里百秀后台管理项目笔记 ---- Day02

阅读原文时间：2023年07月08日阅读：1

来吧展示：

step1: 动态获取用户头像信息

引入 jquery.js 文件
显示头像的时机：在输入完邮箱后鼠标跳转到下一个input中才显示，所以事件是 blur

$('#email').on('blur', function () {
)}
利用正则表达式去判断用户输入的是不是邮箱

var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+$/
忽略掉文本框为空或者不是一个邮箱

方法是 emailFormat.test()

 if (!value || !emailFormat.test(value)) return

利用ajax的方式去获取头像信息，使用淡入淡出方式展示图片

$.get('/admin/api/avatar.php', { email: value }, function (res) {
// 希望 res => 这个邮箱对应的头像地址
if (!res) return
// 展示到上面的 img 元素上
// $('.avatar').fadeOut().attr('src', res).fadeIn()
$('.avatar').fadeOut(function () {
// // 等到淡出完成
$(this).on('load', function () {
// // 图片完全加载成功过后
$(this).fadeIn()
}).attr('src', res)
})
})
创建一个api文件夹，专门用来存放接口文件

avatar.php

<?php
require_once '../../config.php';
// 1. 接收传递过来的邮箱
if (empty($_GET['email'])) {
exit('缺少必要参数');
}
$email = $_GET['email'];
// 2. 查询对应的头像地址
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
exit('连接数据库失败');
}
$res = mysqli_query($conn, "select avatar from users where email = '{$email}' limit 1;");
if (!$res) {
exit('查询失败');
}
$row = mysqli_fetch_assoc($res);
// 3. echo
echo $row['avatar'];
整合 login.php 代码

$(function ($) {
var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+$/
$('#email').on('blur', function () {
var value = $(this).val()
// 忽略掉文本框为空或者不是一个邮箱
if (!value || !emailFormat.test(value)) return
// console.log(value)
$.get('/admin/api/avatar.php', { email: value }, function (res) {
// 希望 res => 这个邮箱对应的头像地址
if (!res) return
// 展示到上面的 img 元素上
// $('.avatar').fadeOut().attr('src', res).fadeIn()
$('.avatar').fadeOut(function () {
// // 等到淡出完成
$(this).on('load', function () {
// // 图片完全加载成功过后
$(this).fadeIn()
}).attr('src', res)
})
})
})
})

step2: 首页index.php的站点内容统计数据的动态呈现

引入 functions.php 文件执行数据库的查询操作

require_once '../functions.php';
执行数据的查询

$posts_count = mysql_one('select count(1) as num from posts;')['num'];
$categories_count = mysql_one('select count(1) as num from categories;')['num'];
$comments_count = mysql_one('select count(1) as num from comments;')['num'];
将数据动态呈现到页面
- 篇文章（2篇草稿）
- 个分类
- 条评论（1条待审核）

step3: 使用饼图呈现统计数据

来吧展示：

echarts官网下载文件

https://echarts.apache.org/zh/index.html
找到想绘制的饼图实例
引入 echarts.min.js 文件

准备一个盒子去展示饼图

    <div class="col-md-4">
       <div id="main" style="width: 600px;height:400px;"></div>
    </div>

制作饼图

step4:获取当前登录用户信息与头像

sidebar.php

//php部分
require_once '../functions.php';
$current_user = get_userinfo();


//html部分
<div class="profile">
      <img class="avatar" src="<?php echo $current_user['avatar'] ;?>">
      <h3 class="name"><?php echo $current_user['nickname'] ;?></h3>
    </div>

step5: 分类列表数据呈现

引入 functions.php 以及判断用户登录状态

require_once '../functions.php';
get_userinfo();
查询 categories 表中所有数据

$categories = mysql_all('select * from categories;');
将查询到的数据渲染到页面上

编辑删除

step5: 添加分类功能

来吧展示：

在添加分类的 form 表单中加入 method 与 action 属性
在名称与别名中添加 name 属性 name 属性的名字与id名字一致
判断表单提交方式是否为 post ，如果是则执行add_category() 函数

if($_SERVER['REQUEST_METHOD'] === 'POST'){
add_category();
}
插入更新语句更新数据库

function add_category(){
if(empty($_POST['name']) || empty($_POST['slug'])){
$GLOBALS['message'] = '请完整填写表单';
return;
}
$name = $_POST['name'];
$slug = $_POST['slug'];
$rows = mysql_change("insert into categories values (null, '{$slug}', '{$name}');");
//添加成功与添加失败的信息提示
$GLOBALS['success'] = $rows > 0;
$GLOBALS['message'] = $rows <= 0 ? '添加失败！' : '添加成功！';
}
添加成功与添加失败的错误信息呈现

引入 bootstrap.css 文件

成功！

错误！

step6: 单条数据删除

在删除的 a 标签中更改 href 属性值，当点击删除时跳转到删除页

编辑
categroies.php

step7: 批量删除的显示与隐藏

来吧展示：

给批量删除的标签加上id属性

批量删除
实现批量删除方法一：

这个方法不能从根本上删除数据，不宜采纳

// 实现批量操作方法一：
$(function($){
var $tbodyCheckboxs = $('tbody input')
var $btnDelete = $('#btn_delete')
$tbodyCheckboxs.on('change',function(){
var flag = false
$tbodyCheckboxs.each(function(i,item){
if($(item).prop('checked')){
flag = true
}
})
flag ? $btnDelete.fadeIn() : $btnDelete.fadeOut()
})
})
实现批量操作方法二：

能从根本上实现批量删除

//实现批量操作方法二：
$(function($){
var $tbodyCheckboxs = $('tbody input')
var $btnDelete = $('#btn_delete')
var allCheckeds = []
$tbodyCheckboxs.on('change',function(){
var id = $(this).data('id')
if($(this).prop('checked')){
allCheckeds.push(id)
}else{
allCheckeds.splice(allCheckeds.indexOf(id),1)
}
console.log(allCheckeds)
allCheckeds.length ? $btnDelete.fadeIn() : $btnDelete.fadeOut()
// 显示批量删除都有哪些id值
$btnDelete.attr('href','/admin/category-delete.php?id='+allCheckeds)
// 要用到dom属性下的serch属性，所有要换成prop
})
})

step8: 编辑分类

来吧展示：

判断用户是编辑还是添加，添加是插入数据，编辑是更新数据

if (empty($_GET['id'])) {
// 添加
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
add_category();
}
}else {
$current_edit_category = mysql_one('select * from categories where id = ' . $_GET['id']);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
edit_category();
}
}
编辑函数

function edit_category () {
global $current_edit_category;
// 接收并保存
$id = $current_edit_category['id'];
$name = empty($_POST['name']) ? $current_edit_category['name'] : $_POST['name'];
$current_edit_category['name'] = $name;
$slug = empty($_POST['slug']) ? $current_edit_category['slug'] : $_POST['slug'];
$current_edit_category['slug'] = $slug;
// insert into categories values (null, 'slug', 'name');
$rows = mysql_change("update categories set slug = '{$slug}', name = '{$name}' where id = {$id}");
$GLOBALS['success'] = $rows > 0;
$GLOBALS['message'] = $rows <= 0 ? '更新失败！' : '更新成功！';
}

3.在编辑的a标签中更改href属性值，根据id去执行相应的编辑功能

<a href="/admin/categories.php?id=<?php echo $item['id']; ?>" class="btn btn-info btn-xs">编辑</a>

在页面中判断用户是添加还是编辑，分别显示不同的页面

编辑《》

名称

别名
https://zce.me/category/slug

添加新分类目录

名称

别名
https://zce.me/category/slug

step 9 : 退出功能

来吧展示：

在 nav.php 文件的退出 a 链接中更改一下 href 属性值
在 login.php 文件中加入实现退出功能代码，删除 session

// 退出功能
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action']) && $_GET['action'] === 'logout') {
// 删除了登录标识session
unset($_SESSION['current_login_user']);
}