个人博客项目
1、后台主页
<?php
?>
<!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>XX系统</title>
<link rel="stylesheet" href="./css/layui.css">
<link rel="stylesheet" href="./css/home.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header" style="background-color: #20222A">
<div class="layui-logo"
style="background-color: #393D49;color: white;height: 210px;border-bottom: 1px solid white">
<div style="background-color: #393D49;color: #009E94;font-weight: bolder">XXXX系统</div>
<a href="#" id="tip" onmouseenter="tip()">
<img id="userImg" src="image/admin.jpg"
style="width: 90px;height: 90px" class="layui-nav-img">
</a>
<div style="font-size: 10px;text-align: center;height: 15px;margin-bottom: 8px;padding-right: 6px">
咸鱼
</div>
<div style="font-size: 10px;padding-right: 10px">
</div>
</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<div id="scrollWrap" style="float: left">
<ul id="scrollMsg">
<li><a class="scrollText" href="#"><i
class="layui-icon layui-icon-speaker"></i></a>
</li>
<li><a class="scrollText" href="#"><i
class="layui-icon layui-icon-speaker"></i></a>
</li>
<li><a class="scrollText" href="#"><i
class="layui-icon layui-icon-speaker"></i></a>
</li>
<li><a class="scrollText" href="#"><i
class="layui-icon layui-icon-speaker"></i><img
src="./image/hot001.gif"></a>
</li>
</ul>
</div>
<div id="time"></div>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item"><a href="" id="refresh">
<i class="layui-icon layui-icon-refresh"></i></a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<img src="./image/admin.jpg" class="layui-nav-img">
<span>咸鱼</span>
</a>
<dl class="layui-nav-child">
<dd><a href="#" data-id="0" class="site-demo-active"><i class="layui-icon layui-icon-user"></i> 基本资料</a>
</dd>
<dd><a href="#" data-url="#" data-id="9" data-title="修改密码" class="site-demo-active"><i
class="layui-icon layui-icon-set"></i> 修改密码</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="login.php" onclick="clearCookie()" id="logout"><i
class=""></i>退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black" style="padding-top: 150px">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item" id="userManage" style="text-align: center">
<a href="article-list.php" data-url="https://www.layui.com/" data-id="1" data-title="用户管理" class="site-demo-active"
data-type="tabAdd">
<i class=""></i>文章管理
</a>
</li>
<li class="layui-nav-item" id="class" style="text-align: center">
<a href="#" data-url="https://www.layui.com/" data-id="2" data-title="班级管理" class="site-demo-active"
data-type="tabAdd">
<i class=""></i> 班级管理
</a>
</li>
<li class="layui-nav-item" id="student" style="text-align: center">
<a href="#" data-url="https://www.layui.com/" data-id="3" data-title="学生管理" class="site-demo-active"
data-type="tabAdd">
<i class=""></i> 学生管理
</a>
</li>
<li class="layui-nav-item" id="dept" style="text-align: center">
<a href="#" data-url="https://www.layui.com/" data-id="4" data-title="部门管理" class="site-demo-active"
data-type="tabAdd">
<i class=""></i> 部门管理
</a>
</li>
<li class="layui-nav-item" id="course" style="text-align: center">
<a href="#" data-url="https://www.layui.com/" data-id="5" data-title="课程管理" class="site-demo-active"
data-type="tabAdd">
<i class=""></i> 课程管理
</a>
</li>
<li class="layui-nav-item" style="text-align: center">
<a href="javascript:;"><i class=""></i> 评价管理</a>
<dl class="layui-nav-child">
<dd>
<a href="#" data-url="https://www.layui.com/" data-id="10" data-title="分项管理"
class="site-demo-active">
<i class=""></i> 分项管理
</a>
</dd>
<dd>
<a href="#" data-url="https://www.layui.com/" data-id="11" data-title="总评"
class="site-demo-active">
<i class=""></i> 总评
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item" style="text-align: center">
<a href="javascript:;"><i class=""></i> 成绩管理</a>
<dl class="">
<dd><a href="#" data-url="" data-id="7" data-title="经理评分"
class="site-demo-active">
<i class=""></i> 经理评分
</a>
</dd>
<dd>
<a href="#" data-url="" data-id="8" data-title="教师评分"
class="site-demo-active">
<i class=""></i> 教师评分
</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body"
style="background: url(image/bodyBg.jpg) no-repeat ;background-size: 100% 100% ">
<!-- 内容主体区域 -->
<div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true" style="">
<ul class="layui-tab-title" style="background-color: rgba(255,255,255,0.1)">
<li class="layui-this" lay-id="0"><i style="font-size: smaller"
class=""></i>首页
</li>
</ul>
<div class="" style="height:400px">
<div class="">
<div style="padding-top: 100px;padding-left:400px;width: 300px">
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
<div style="text-align: center">
© 欢迎交流讨论
</div>
</div>
</div>
</body>
</html>
2、前台主页
<?php
$link=mysqli_connect('localhost','root','root','blog')or
die('连接失败'.mysqli_connect_error());
mysqli_set_charset($link,'utf8');
$sql="select * from article";
$res=mysqli_query($link,$sql);
$row=mysqli_fetch_all($res,MYSQLI_ASSOC);
$re=mysqli_num_rows($res);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
<link rel="stylesheet" href="css/style.css">
<style>
p {
color: #898a8b;
font-size: 16px;
line-height: 30px;
height: 60px;
max-height: 60px;
overflow: hidden; /* 超出的文本隐藏 */
text-overflow: ellipsis; /* 溢出用省略号显示 */
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
-webkit-line-clamp: 2; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
}
</style>
</head>
<body>
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">个人博客</h2>
<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
<a href="types.php" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
<a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
<div class="m-item right item m-mobile-hide">
<div class="ui icon input">
<input type="text" placeholder="Search..." id="title">
<i class="search link icon" id="btn"></i>
</div>
</div>
</div>
</div>
<a href="#" class="ui menu toggle black icon button m-top-right m-hide">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间-->
<div class="m-padded-tb-max">
<div class="ui container">
<div class="ui stackable grid">
<!--左边-->
<div class="eleven wide column">
<!--header-->
<div class="ui top segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">博客</h3>
</div>
<div class="right aligned column">
共 <h3 class="ui orange header m-inline-block m-text-thin"><?php echo $re ?></h3>篇
</div>
</div>
</div>
<!--博客主题-->
<div class="ui attached segment" id="box">
<?php
foreach ($row as $key=>$article){ ?>
<div class="ui m-padded-tb-max vertical segment ">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column">
<h3 class="ui header"><a href="blog.php?id=<?php echo $article['id'] ?>"><?php echo $article['title'] ?></a></h3>
<p><?php echo $article['content'] ?></p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="./uploads/<?php echo $article['arcpic'] ?>" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header"><?php echo $article['author'] ?></a></div>
</div>
<div class="item">
<i class="calendar icon"></i><?php echo date('Y-m-d H:i:s',$article['ctime']) ?>
</div>
<div class="item">
<i class="eye icon"></i> <?php echo $article['watchCount'] ?>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="blog.php?id=<?php echo $article['id'] ?>" class="ui teal basic label">阅读原文</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="#">
<img src="image/pic2.jpg" alt="" class="ui rounded image image-size">
</a>
</div>
</div>
</div>
<?php }
?>
</div>
<!--博客底部-->
<div class="ui bottom attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" class="ui mini teal basic button">下一页</a>
</div>
</div>
</div>
</div>
<!--右边-->
<div class="five wide column">
<!--分类-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="idea icon"></i>分类
</div>
<div class="right aligned column">
<a href="#">more >></a>
</div>
</div>
</div>
<div class="ui teal segment">
<div class="ui fluid vertical menu">
<a href="#" class="item">军事
<div class="ui teal basic label">10</div>
</a>
</div>
<div class="ui fluid vertical menu">
<a href="#" class="item">技术
<div class="ui teal basic label">10</div>
</a>
</div>
<div class="ui fluid vertical menu">
<a href="#" class="item">娱乐
<div class="ui teal basic label">10</div>
</a>
</div>
<div class="ui fluid vertical menu">
<a href="#" class="item">搞笑
<div class="ui teal basic label">10</div>
</a>
</div>
</div>
</div>
<!--标签-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="tags icon"></i>标签
</div>
<div class="right aligned column">
<a href="#">more >></a>
</div>
</div>
</div>
<div class="ui teal segment">
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签1</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签2</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签3</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签4</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签5</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签6</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签7</a>
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签8</a>
</div>
</div>
<!--最新推荐-->
<div class="ui segment">
<div class="ui secondary segment">
<i class="bookmark icon"></i>最新推荐
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">人生导师(my story)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">心灵鸡汤(my video)</a>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="m-black m-text-thin">自我认知</a>
</div>
</div>
<!--二维码-->
<div class="ui horizontal divider header teal m-text-thin">扫码关注我</div>
<div class="ui centered card" style="width: 13em;">
<img src="image/wechat.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-max">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="image/wechat.jpg" class="ui rounded image" alt=""style="width: 100px;">
</div>
</div>
</div>
<div class="four wide column">
<h5 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h5>
<div class="ui inverted link list">
<a href="#" class="item">人生导师(my story)</a>
<a href="#" class="item">心灵鸡汤(my video)</a>
<a href="#" class="item">自我认知(my feel)</a>
</div>
</div>
<div class="four wide column">
<h5 class="ui inverted header m-text-thin m-text-spaced ">个人信息</h5>
<div class="ui inverted link list">
<a href="#" class="item">WeChat:Yi-0802</a>
<a href="#" class="item">QQ:1692774581</a>
</div>
</div>
<div class="five wide column">
<h5 class="ui inverted header m-text-thin m-text-spaced ">博客</h5>
<p class="m-text-thin m-text-spaced m-opacity-tiny">这是我的个人博客，会定期分享我的故事,我对于自身的认识，希望可以给看我博客的人带来快乐</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2020 - 2020 Rownn Designed by Rownn</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide')
})
$("#btn").click(function (){
var title=$("#title").val();
console.log(title)
$.ajax({
type:"post",
url:"mohu.php",
data:{
"title":title
},
dataType:"json",
success:function (res){
console.log(res)
var con='';
for (var i=0;i<res.length;i++){
con+=`<div class="ui m-padded-tb-max vertical segment ">`
con+="<div class=\"ui mobile reversed stackable grid\">"
con+="<div class=\"eleven wide column\">"
con+=`<h3 class="ui header"><a href="blog.php?id=${res[i].id}\">${res[i].title}</a></h3>`
con+="<p>"+res[i].content+"</p>"
con+="<div class=\"ui grid\">"
con+="<div class=\"eleven wide column\">"
con+="<div class=\"ui horizontal link list\">"
con+="<div class=\"item\">"
con+=`<img src=\"./uploads/${res[i].arcpic}" alt="" class="ui avatar image">`
con+="<div class=\"content\">"+"<a href=\"#\" class=\"header\">"+res[i].author+"</a>"+"</div>"
con+="</div>"
con+="<div class=\"item\">"
con+=`<i class="calendar icon"></i>${new Date(parseInt(res[i].ctime) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")
}`
con+="</div>"
con+="<div class=\"item\">"
con+="<i class=\"eye icon\">"+"</i>"+res[i].watchCount
con+="</div>"
con+="</div>"
con+="</div>"
con+="<div class=\"right aligned five wide column\">"
con+=`<a href="blog.php?id=${res[i].id}" class="ui teal basic label">阅读原文</a>`
con+="</div>"
con+="</div>"
con+="</div>"
con+="<div class=\"five wide column\">"
con+="<a href=\"#\">"
con+="<img src=\"image/pic2.jpg\" class=\"ui rounded image image-size\">"
con+="</a>"
con+="</div>"
con+="</div>"
con+="</div>"
//
}
$("#box").html(con)
}
})
})
</script>
</body>
</html>
3、编辑功能
<?php
$id=$_GET['id'];
$link=mysqli_connect('localhost','root','root','blog')or
die('连接失败'.mysqli_connect_error());
mysqli_set_charset($link,'utf8');
$a="select * from category";
$r=mysqli_query($link,$a);
$categorys=mysqli_fetch_all($r,MYSQLI_ASSOC);
$mql = "SELECT * FROM article as a join category as c on a.cid=c.cid where id = $id";
$re=mysqli_query($link,$mql);
$ro=mysqli_fetch_assoc($re);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑页面</title>
<link rel="stylesheet" href="./css/article-add.css">
</head>
<body>
<form action="update.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="oldPic" value="<?php echo $ro['arcpic'] ?>">
<input type="text" value="<?php echo $ro['id'] ?>" name="id" style="display: none">
<div class="box">
<div class="one">
<span>*</span><label for="one">文章标题</label>
<input type="text" name="title" value="<?php echo $ro['title'] ?>" id="one">
</div>
<div class="two">
<span>*</span><label for="">文章状态</label>
<?php if ($ro['status']==1){ ?>
<input type="radio" name="status" value="1" checked>是
<input type="radio" name="status" value="0">否
<?php }else{?>
<input type="radio" name="status" value="1">是
<input type="radio" name="status" value="0" checked>否
<?php }
?>
</div>
<div class="three">
<span>*</span><label for="">分类栏目</label>
<select name="cid" id="select_id">
<?php
foreach ($categorys as $category){ ?>
<option value="<?php echo $category['cid'] ?>" <?php echo $ro['cid']==$category['cid']?'selected':'' ?>><?php echo $category['cname'] ?></option>
<?php }
?>
</select></div>
<div class="four">
<label for="four"> 文章作者</label>
<input type="text" name="author" id="four" value="<?php echo $ro['author'] ?>">
</div>
<div class="five">
<label for=""> 头像</label>
<img style="width:100px;" src="./uploads/<?php echo $ro['arcpic'] ?>" alt="">
<input type="file" name="pic" value="<?php $ro['arcpic'] ?>">
</div>
<div class="six">
<label for="six" id="p"> 文章内容</label>
<textarea name="content" id="six" cols="30" rows="10" style="width: 80%;resize:none"><?php echo $ro['content'] ?></textarea>
</div>
<div class="btn"> <input type="submit" value="提交" id="btn1">
<input type="submit" value="取消" id="btn2"></div>
</div>
</form>
</body>
</html>
4、增加功能
<?php
$link=mysqli_connect('localhost','root','root','blog')or
die('连接失败'.mysqli_connect_error());
mysqli_set_charset($link,'utf8');
$sql="select * from category";
$res=mysqli_query($link,$sql);
$categorys=mysqli_fetch_all($res,MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增加信息</title>
<link rel="stylesheet" href="./css/article-add.css">
</head>
<body>
<form action="article-addHandle.php" method="post" enctype="multipart/form-data">
<div class="box">
<div class="one">
<span>*</span><label for="one">文章标题</label>
<input type="text" name="title" id="one">
</div>
<div class="two">
<span>*</span><label for="">文章状态</label>
<input type="radio" name="status" value="1" >是
<input type="radio" name="status" value="0">否
</div>
<div class="three">
<span>*</span><label for="">分类栏目</label>
<select name="cid" id="">
<?php
foreach ($categorys as $category){ ?>
<option value="<?php echo $category['cid'] ?>"><?php echo $category['cname'] ?></option>
<?php }
?>
</select></div>
<div class="four">
<label for="four"> 文章作者</label>
<input type="text" name="author" id="four">
</div>
<div class="five">
<label for=""> 头像</label>
<input type="file" name="pic">
</div>
<div class="six">
<label for="six" id="p"> 文章内容</label>
<textarea name="content" id="six" cols="30" rows="10" style="width: 80%;resize:none"></textarea>
</div>
<div class="btn"> <input type="submit" value="提交" id="btn1">
<input type="submit" value="取消" id="btn2"></div>
</div>
</form>
</body>
</html>
5、删除功能
<?php
$id=$_POST['id'];//接收需要删除的id，例如[1,2,3]获取的数组
$strid=implode(',',$id);
echo $strid;
$con=mysqli_connect('localhost','root','root','blog');
if(!$con){
die('连接失败');
}
mysqli_set_charset($con,'utf8');//设置字符集
$sql="DELETE FROM article WHERE id in ($strid)";//定义sql语句
$res=mysqli_query($con,$sql);
if($res){
echo "<script>alert('删除成功');location.href='article-list.php'</script>";
}else{
echo "<script>alert('删除失败');location.href='article-list.php'</script>";
}
mysqli_close($con);
扫一扫
4461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
