记——博客后台管理系统

博客后台管理系统

博客后台管理系统背景介绍
项目截图
部分代码
- 登录
- 主页
- 文章列表
- 评论页
个人总结

博客后台管理系统背景介绍

在学校的时候闲来无事喜欢研究研究技术，对前端开发有浓厚的兴趣，于是我在两年前下定决心并励志成为一名出色的，能变现高效的，高质量代码的程序员。为此我在学习学校基础课程的时候花时间去探索前端开发领域，对前端开发技术一点点积累学习。这个博客后台项目是我用课余时间做出来的。
用到的技术栈：
前端：Bootstrap、jQuery
后端：PHP
数据库：MySql

项目截图

文章页

写文章

分类

评论页

图片轮播

设置

部分代码

<?php
include_once "../fn.php";
if (!empty($_POST)) {$email = $_POST['email'];$password = $_POST['password'];if (empty($email) || empty($password)) {$msg = "用户名或密码不能为空";}$sql = "select * from users where email = '$email'";$arr = my_query($sql);$user = $arr[0];if ($user['password'] === $password) {//会话保持session_start();$_SESSION['user_id'] = $user['id'];header("location: index1.php");} else {$msg = "密码错误，请重新输入";}
}
?><!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Sign in &laquo; Admin</title><link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="../assets/css/admin.css">
</head><body><div class="login"><form class="login-wrap" action="" method="POST"><img class="avatar" src="../assets/img/default.png"><!-- 有错误信息时展示 --><?php if (isset($msg)) { ?><div class="alert alert-danger"><strong>错误！</strong> <?php echo $msg ?></div><?php } ?><div class="form-group"><label for="email" class="sr-only">邮箱</label><input name="email" id="email" type="text" class="form-control" placeholder="邮箱" autofocus></div><div class="form-group"><label for="password" class="sr-only">密码</label><input name="password" id="password" type="password" class="form-control" placeholder="密码"></div><input class="btn btn-primary btn-block" type="submit" value="登录"></form></div>
</body></html>

主页

<?phpinclude_once "../fn.php";
is_login();
$pages = "index1";// 10篇文章（2篇草稿）
$sqlPost = "SELECT COUNT(*) as total from posts";
$sqlPdrafted = "SELECT COUNT(*) as total from posts where status = 'drafted'";
// 6个分类
$sqlcategories =  "SELECT COUNT(*) as total from categories";
// 5条评论（1条待审核）
$sqlcomments = "SELECT COUNT(*) as total from comments";
$sqlheld = "SELECT COUNT(*) as total from comments where status = 'held'";$respost = my_query($sqlPost)[0]['total'];
$resPdrafted = my_query($sqlPdrafted)[0]['total'];
$rescategories = my_query($sqlcategories)[0]['total'];
$rescomments = my_query($sqlcomments)[0]['total'];
$resheld = my_query($sqlheld)[0]['total'];
?><!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Dashboard &laquo; Admin</title><link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css"><link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css"><link rel="stylesheet" href="../assets/css/admin.css"><script src="../assets/vendors/nprogress/nprogress.js"></script>
</head><body><script>NProgress.start()</script><div class="main"><?php include_once "./inc/navbar.php" ?><div class="container-fluid"><div class="jumbotron text-center"><h1>脚踏实地，笃志前行</h1><p>欢迎来到个人博客后台管理系统</p><p><a class="btn btn-primary btn-lg" href="post-add.php" role="button">写文章</a></p></div><div class="row"><div class="col-md-4"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">站点内容统计：</h3></div><ul class="list-group"><li class="list-group-item"><strong><?php echo $respost ?></strong>篇文章（<strong><?php echo $resPdrafted ?></strong>篇草稿）</li><li class="list-group-item"><strong><?php echo $rescategories ?></strong>个分类</li><li class="list-group-item"><strong><?php echo $rescomments ?></strong>条评论（<strong><?php echo $resheld ?></strong>条待审核）</li></ul></div></div><div class="col-md-4"></div><div class="col-md-4"></div></div></div></div><?php include_once "./inc/aside.php" ?><script src="../assets/vendors/jquery/jquery.js"></script><script src="../assets/vendors/bootstrap/js/bootstrap.js"></script><script>NProgress.done()</script>
</body></html>

文章列表

<?php
include_once "../fn.php";
is_login();
$pages = 'posts';?>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Posts &laquo; Admin</title><link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css"><link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css"><link rel="stylesheet" href="../assets/css/admin.css"><link rel="stylesheet" href="../assets/vendors/jquery-pagination/pagination.css"><script src="../assets/vendors/nprogress/nprogress.js"></script>
</head><body><script>NProgress.start()</script><div class="main"><?php include_once "./inc/navbar.php" ?><div class="container-fluid"><div class="page-title"><h1>所有文章</h1><a href="post-add.html" class="btn btn-primary btn-xs">写文章</a></div><!-- 有错误信息时展示 --><!-- <div class="alert alert-danger"><strong>错误！</strong>发生XXX错误</div> --><div class="page-action"><!-- show when multiple checked --><a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a><!-- 分页 --><div class="pagebox pull-right"></div></div><table class="table table-striped table-bordered table-hover"><thead><tr><th class="text-center" width="40"><input type="checkbox"></th><th>标题</th><th>作者</th><th>分类</th><th class="text-center">发表时间</th><th class="text-center">状态</th><th class="text-center" width="100">操作</th></tr></thead><tbody><tr><td class="text-center"><input type="checkbox"></td><td>随便一个名称</td><td>小小</td><td>潮科技</td><td class="text-center">2016/10/07</td><td class="text-center">已发布</td><td class="text-center"><a href="javascript:;" class="btn btn-default btn-xs">编辑</a><a href="javascript:;" class="btn btn-danger btn-xs">删除</a></td></tr></tbody></table></div></div><?php include_once "./inc/aside.php" ?><?php include_once "./inc/edit.php" ?><script src="../assets/vendors/jquery/jquery.js"></script><script src="../assets/vendors/bootstrap/js/bootstrap.js"></script><script src="../assets/vendors/template/template-web.js"></script><script src="../assets/vendors/jquery-pagination/jquery.pagination.js"></script><script src="../assets/vendors/wangEditor/wangEditor.min.js"></script><script src="../assets/vendors/moment/moment.js"></script><script type="text/html" id="tpl">{{ each list v i}}<tr><td class="text-center"><input type="checkbox"></td><td>{{ v.title }}</td><td>{{ v.nickname }}</td><td>{{ v.name }}</td><td class="text-center">{{ v.created }}</td><td class="text-center">{{ state[v.status] }}</td><td class="text-center" data-id="{{ v.id }}"><a href="javascript:;" class="btn btn-default btn-xs btn-update">编辑</a><a href="javascript:;" class="btn btn-danger btn-xs btn-delete">删除</a></td></tr>{{/each}}</script><script type="text/html" id="catetpl">{{ each list v i}}<option value="{{v.id}}">{{v.name}}</option>{{ /each }}</script><script type="text/html" id="statetpl">{{ each state v k}}<option value="{{k}}">{{v}}</option>{{ /each }}</script><script>$(function() {var nowpage = 1; //当前页var translate = {drafted: "草稿",published: "已发布",trashed: "回收站"}//1.渲染数据function render(page, pagesize) {$.ajax({url: "./post/post_get.php",data: {page: page || 1,pagesize: pagesize || 10},dataType: "json",success: function(info) {var obj = {list: info,state: translate};console.log(obj);var htmlstr = template("tpl", obj);$('tbody').html(htmlstr);}})}render();//2.分页功能function setpage(page) {$.ajax({url: "./post/total.php",dataType: "json",success: function(info) {console.log(info);$('.pagebox').pagination(info.total, {prev_text: "« 上一页",next_text: "下一页 »",items_per_page: 10,num_edge_entries: 1, //两侧首尾分页条目数num_display_entries: 5, //连续分页主体部分分页条目数current_page: page - 1 || 0, //当前页索引load_first_page: false, //初始化时是否执行回调函数callback: function(index) {render(index + 1);nowpage = index + 1;}})}})}setpage();//3.删除功能$('tbody').on('click', '.btn-delete', function() {var deleteid = $(this).parent().attr('data-id');// console.log(deleteid);$.ajax({url: "./post/deletepost.php",data: {id: deleteid},success: function(info) {//删除最后一页的最后一条数据时，当前页还停留在删除前的那一页上，所以需要手动的将当前页变为最后一页//最后一页： 渲染的分页标签的最后一页，也就是总页数 总页数也就是 总数据量/设置的最大页面数据量（也就是pagesize）var maxpage = Math.ceil(info.total / 10);if (nowpage > maxpage) {nowpage = maxpage;}render(nowpage);//删除很多数据后没有那么多页数了，所以需要重新渲染分页按钮setpage(nowpage);}})})//----------------------------------模态框初始化-----------------------------------//富文本编辑框var E = window.wangEditor;var editor = new E('#content-box');editor.customConfig.onchange = function(html) {// 监控变化，同步更新到 textarea$('#content').val(html);}editor.create();//别名$('#slug').on('input', function() {var sluginp = $('#slug').val();$('#strong').html(sluginp || 0);})//本地图片预览$('#feature').on('change', function() {// console.dir(this);var file = this.files[0];var url = URL.createObjectURL(file);$('#img').attr("src", url).show();})//发布时间$('#created').val(moment().format("YYYY-MM-DDTHH:mm"));//分类$.ajax({url: "./post/category.php",dataType: "json",success: function(info) {console.log(info);var obj = {list: info}var htmlstr = template("catetpl", obj);$('#category').html(htmlstr);}})//状态var state = {drafted: '草稿',published: '已发布',trashed: '回收站'};var obj = {state: state};var htmlstr = template("statetpl", obj);$('#status').html(htmlstr);//----------------------------------模态框初始化-----------------------------------//4.编辑功能$('tbody').on('click', '.btn-update', function() {$('.edit-box').show();// 获取点击对应编辑按钮的idvar id = $(this).parent().attr("data-id");//根据id渲染数据$.ajax({url: "./post/posts_getone.php",data: {id: id},dataType: "json",success: function(info) {// console.log(info);$('#title').val(info.title);editor.txt.html(info.content);$('#slug').val(info.slug);$('#img').attr("src", info.feature).show();$('#created').val(moment(info.created).format("YYYY-MM-DDTHH:mm"));//select给value设置值会选中值对应的option$('#category').val(info.category_id);$('#status').val(info.status);$('#id').val(info.id);}})})//5.修改功能$('#btn-update').on('click', function() {// console.log($('#editForm')[0]);var formdata = new FormData($('#editForm')[0]);$.ajax({type: "post",url: "./post/edit_post.php",data: formdata,contentType: false, //由于formdata不需要设置请求头，而jQuery里面默认设置了请求头，所以要将contentType属性设置为false来取消它的设置，让浏览器自动为formdata设置请求头processData: false, //由于传入的formdata是个对象，而在jQuery里面会将传入的对象设置编码，也就是转化为字符串，那么就要将这个默认值设置为false来让formdata作为对象传入success: function(info) {console.log(info);$('.edit-box').hide();render(nowpage);}})})//6.放弃功能})</script>
</body></html>

评论页

<?php
include_once "../fn.php";
is_login();
$pages = 'comments';
?>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Comments &laquo; Admin</title><link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css"><link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css"><link rel="stylesheet" href="../assets/css/admin.css"><link rel="stylesheet" href="../assets/vendors/jquery-pagination/pagination.css"><script src="../assets/vendors/nprogress/nprogress.js"></script>
</head><body><script>NProgress.start()</script><div class="main"><?php include_once "./inc/navbar.php" ?><div class="container-fluid"><div class="page-title"><h1>所有评论</h1></div><!-- 有错误信息时展示 --><!-- <div class="alert alert-danger"><strong>错误！</strong>发生XXX错误</div> --><div class="page-action"><!-- show when multiple checked --><div class="btn-batch" style="display: none"><button class="btn btn-info btn-sm btn-allow">批量批准</button><button class="btn btn-danger btn-sm btn-delete">批量删除</button></div><!-- 分页按钮 --><div class="setpage pull-right"></div></div><table class="table table-striped table-bordered table-hover"><thead><tr><th class="text-center" width="40"><input type="checkbox" class="th-chk"></th><th>作者</th><th>评论</th><th>评论在</th><th>提交于</th><th>状态</th><th class="text-center" width="100">操作</th></tr></thead><tbody><!-- <tr><td class="text-center"><input type="checkbox"></td><td>大大</td><td>楼主好人，顶一个</td><td>《Hello world》</td><td>2016/10/07</td><td>未批准</td><td class="text-center"><a href="javascript:;" class="btn btn-info btn-xs">批准</a><a href="javascript:;" class="btn btn-danger btn-xs">删除</a></td></tr> --></tbody></table></div></div><!-- 侧边栏 --><?php include_once "./inc/aside.php" ?><script src="../assets/vendors/jquery/jquery.js"></script><script src="../assets/vendors/bootstrap/js/bootstrap.js"></script><script src="../assets/vendors/template/template-web.js"></script><script src="../assets/vendors/jquery-pagination/jquery.pagination.js"></script><script type="text/html" id="tpl">{{each list v i}}<tr><td class="text-center"><input type="checkbox" class="tb-chk" data-id="{{ v.id }}"></td><td>{{v.author}}</td><!-- substr(从哪开始, 截取多少个) --><td>{{v.content.substr(0,30)}}</td><td>《{{v.title}}》</td><td>{{v.created}}</td><td>{{ state[v.status] }}</td><td class="text-right" data-id="{{ v.id }}">{{ if v.status === 'held'}}<a href="javascript:;" class="btn btn-info btn-xs allow">批准</a>{{ /if }}<a href="javascript:;" class="btn btn-danger btn-xs delete-btn">删除</a></td></tr>{{/each}}</script><script>// NProgress.done()//评论数据渲染及分页$(function() {var currentpage = 1; //当前页面，默认为1var fanyi = {held: "待审核",approved: "准许",rejected: "拒绝",trashed: "回收站"}//渲染页面数据的方法function render(page, pagesize) {//1. 渲染页面$.ajax({type: "get",url: "./comments/comment_get.php",data: {page: page || 1,  pagesize: pagesize || 10},dataType: 'json',success: function(info) {var obj = {list: info,state: fanyi}console.log(obj);var htmlStr = template('tpl', obj);$('tbody').html(htmlStr);},error: function(){console.log("请求失败");}})}render();//2.分页// 2.1. 引包// 2.2. 准备结构//封装的分页方法//这里的page是设置当前显示的评论是在分页中的第几页function setPages(page) {$.ajax({url: "./comments/alldata.php",dataType: "json",success: function(info) {console.log(info);// 3.3. 利用总条数初始化$('.setpage').pagination(info.total, {prev_text: "« 上一页",next_text: "下一页 »",items_per_page: 10,num_edge_entries: 1, //两侧首尾分页条目数num_display_entries: 5, //连续分页主体部分分页条目数current_page: page - 1 || 0, //当前页索引load_first_page: false, //初始化时是否执行回调函数callback: function(index) {//回调函数作用于：点击对应页码，渲染对应页码的数据render(index + 1);currentpage = index + 1; //这里的当前页就是就是当前分页按钮呈现的页数，所以当我点第x页的时候，当前页也就是第x页}})}})}setPages();//3.批准功能$('tbody').on('click', '.allow', function() {var dataid = $(this).parent().attr('data-id');$.ajax({url: "./comments/allow.php",data: {id: dataid},success: function(info) {//后端没返回信息所以这里直接渲染页面就好了(这里渲染的是当前页)render(currentpage);}})})//4.删除功能$('tbody').on('click', '.delete-btn', function() {var deleteid = $(this).parent().attr('data-id');// console.log(deleteid);$.ajax({url: "./comments/delete.php",data: {id: deleteid},success: function(info) {//最后一页有个bug：删除完最后一页的最后一条数据后，会导致最大页数-1，但是渲染的还是当前页，所以需要将当前页-1//解决思路：因为这里的流程是：点击删除，删除完成渲染，所以只需要在渲染当前页之前，使我们的当前页变成最大页数就好了var maxpages = Math.ceil(info.total / 10);//只有当当前页面大于最大页面时，也就是说明删除了当前页的最后一条数据if (currentpage > maxpages) {//当当前页大于最大页数时，当前页就同步为最大页数currentpage = maxpages;}//删除完成后重新渲染当前页面的评论数据render(currentpage);//删除完成后需要重新渲染分页，否则会出现后面很多页面没数据的情况//如果这里不传值，直接调用setPages的话，当前页面的数据会在分页按钮上显示第一页数据setPages(currentpage);}})})//5.全选功能//5.1 点击全选时下面的复选框全部选中//5.2 全部选中后，批量按钮会显示，没选中时，按钮隐藏$('.th-chk').on('click',function(){var flag = $('.th-chk').prop("checked");// console.log(flag);$('.tb-chk').prop("checked",flag);if(flag){$('.btn-batch').show();}else{$('.btn-batch').hide();}})//6.选中功能//6.1 只要有一个没选中时，上面的全选按钮就不选中 （也就是说把选中按钮的长度和全部按钮的长度进行判断就好了）//6.2 当有两个以上选中时，批量按钮就出现//注意这里的复选框也是动态渲染的，所以也需要事件委托$('tbody').on('click','.tb-chk',function(){var tblength = $('.tb-chk').length;var chklength = $('.tb-chk:checked').length;if( chklength === tblength){$('.th-chk').prop("checked",true);}else{$('.th-chk').prop("checked",false);}if( chklength >= 2){$('.btn-batch').show();}else{$('.btn-batch').hide();}})// 封装的获取复选框选中id的方法// 如何获取选中复选框的id？ // 核心思路：利用数组接收这些id，然后用join转成字符串// 遍历每一个选中的复选框，将选中的复选框的id加入到数组中，再将数组转成字符串（这里不能遍历所有复选框，不然所有的id都会加入到数组中）function getchkid() {var arr = [];$('.tb-chk:checked').each(function(){var chkid = $(this).attr('data-id');arr.push(chkid);})// 这里传给后台的id需要注意是 1，2，3 的字符串格式的var str = arr.join();return str;}//7.批量批准功能// 7.1 给批量批准按钮注册点击事件$('.btn-allow').click(function(){// 7.2 获取点击的复选框的id，将复选框的id传给后台var strid = getchkid();$.ajax({url: './comments/allow.php',data: {id: strid},success: function(info){//批量批准完重新渲染页面render(currentpage);//批量操作完成后隐藏批量按钮$('.btn-batch').hide();//全选按钮选中点击批量操作完成后会出现全选按钮还在选中的bug，这时候需要取消全选按钮已选中$('.th-chk').prop("checked",false);}})})//8.批量删除功能$('.btn-delete').click(function(){var deleteid = getchkid();$.ajax({url: "./comments/delete.php",data: {id: deleteid},dataType: 'json', //这里记得要设置传json格式，否则收不到数据会影响后面maxpage的设置success: function(info){console.log(info);var maxpage = Math.ceil(info.total / 10);if( currentpage > maxpage){currentpage = maxpage;}render(currentpage);//删除完成后实际可能没那么页数，因为渲染分页是删除前渲染的，所以这里需要重新渲染为正确的分页setPages(currentpage);$('.btn-batch').hide();$('.th-chk').prop("checked",false);}})})})</script>
</body></html>

个人总结

之前在学校学习前端后端的时候在学校老师的带领下做过一个学生管理系统的开发，慢慢对前端产生兴趣，这次的个人博客系统自己做前端和后端，由于学校课程没有需要用的技术栈，所以自学了需要的技术栈，php也是从0到1慢慢摸索慢慢理解出来的，这次的项目让我提升了独立自主学习，解决困难的能力。需要的同学可以私聊我拿源码，一起交流学习，一起进步~~

记——博客后台管理系统相关推荐

Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
使用react全家桶制作博客后台管理系统
前面的话笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统概述该项目是基于react全家桶(React.React-r ...
个人博客后台管理系统
博客后台管理系统博客后台管理系统背景介绍一.项目介绍 1.1 登录 1.2 文章管理页 1.3 撰写文章页 1.4 文章分类页 1.5 用户管理页 1.6 管理员添加页 1.7 博主个人信息页二 ...
Vue实战狗尾草博客后台管理系统第三章
Vue实战狗尾草博客后台管理系统第三章 Vue实现狗尾草博客后台管理系统第三章本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自 ...
Vue实战狗尾草博客后台管理系统第七章
Vue实战狗尾草博客后台管理平台第七章本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
基于Laravel开发博客应用系列 —— 构建博客后台管理系统
一个完整的博客应用不能没有后台管理系统.所以在本节中我们将继续完善博客应用 -- 开发后台管理系统. 1.创建路由在上一节十分钟创建博客项目中,已经设置过了 app/Http/routes.php, ...
个人博客-后台管理系统前台系统 api系统开发记录未完时刻更新中
目录 1 登录 2 css变量的处理 3 数据接口处理 4一个逗号引发的血案- 5再看父子组件的传值(这一条之前理解稍微有误,可以跳过) 前台博客记录如何找到其他网站的源码实现如何找到其他网站的源 ...
JavaWeb个人博客项目：手把手教你实现博客后台系统之管理员管理模块5
上一篇博文介绍了注册和登录模块,未看过的人欢迎翻我之前博文~ 接下来就进入登录成功后的主界面,这里主要实现主界面的基础布局和管理员管理模块=w= GitHub地址:https://github.com ...
JavaWeb个人博客项目：手把手教你实现博客后台系统之界面图展示1
这几天期末答辩,老师要求做一个JavaWeb项目.由于我是一个人,思来想去之后,我就去做了个人博客系统.包含前台系统和后台系统. 这里我就主要记录一下我是如何一个星期做完我的后台系统的,前台等以后有空 ...