您的位置：首页 > Web前端

一个前端写的php博客系统2--前台展示+后台登录

2016-08-01 14:29 435 查看

部署的演示地址

我的博客地址： http://www.weber.pub 可以查看到具体的站点展示

github 地址：https://github.com/baiyuming/byblog

前台首页展示

首页的侧边预留的位置是给后面的统计，热门之类的版块预留位置。。。

控制器

文章列表展示要考虑到文章数量增多后分页展示，那么我们要统计文章数量，使用

count()

计算文章总数，然后使用

thinkphp

提供的分页方法，传入总记录数和每页显示的记录数后进行输出。。。

统计各个月份分别发表了多少篇文章，这里使用的是

query

方法来执行

sql

语句。

代码如下：

public function index(){
// 文章列表
// 查询满足要求的总记录数
$count = M('article')->count();
$this->assign('count',$count);
// 实例化分页类 传入总记录数和每页显示的记录数
$Page  = new \Think\Page($count,15);
// 分页显示输出
$show  = $Page->show();
$article = M('article') ->order('a_time desc') -> field('a_id,a_title,a_remark,a_time,a_keyword,a_hit') ->limit($Page->firstRow.','.$Page->listRows)->select();
// 赋值数据集
$this->assign('data',$article);
// 赋值分页输出
$this->assign('page',$show);
//这块是统计各个月份的文章数量
$Count = M();
$sql = "SELECT DATE_FORMAT(FROM_UNIXTIME(a_time),'%Y%m') a_time,
COUNT(1) a_sum
FROM `by_article`
GROUP BY DATE_FORMAT(FROM_UNIXTIME(a_time),'%Y%m') desc";
$res = $Count->query($sql);
$this -> assign('count',$res);

$this->display();
}

分页基于

thinkphp

，但是样式是我自己调整的，看起来稍微美观点。。。

前台展示页面（View）

<!DOCTYPE html>
<html>
<head>
<title>首页 - ByBlog </title>
<meta name="keywords" content="ByBlog,markdown,thinkphp,博客系统,前端博客" />
<meta name="description" content="ByBlog,markdown,thinkphp,博客系统,前端博客" />
<include file = "./Public/Public_head_link"/>
</head>
<body>
<include file = "./Public/Public_header"/>
<div id="content" class="home-index container">
<div class="row pt-xlg">
<div class="col s12 m12 l9">
<volist name="data" id="vo">
<div class="a-list">
<p class="f-24 mb-none">
<a class="waves-effect waves-light" href="{:U('Home/Content/content/id/'.$vo['a_id'])}">{$vo.a_title}</a>
</p>
<p class="c-666">{$vo.a_remark}</p>
<p class="c-999">20{$vo.a_time|date="y/m/d H:i",###}发表</p>
</div>
</volist>
</div>
<div class="col s12 m12 l3">
<div>
<volist name="count" id="vo2">
<p class="f-18 m-none">{$vo2.a_time} （{$vo2.a_sum}）</p>
</volist>
</div>
<!--预留给多说评论-->
</div>
</div>

<div class="pagination center">
{$page}
</div>
</div>
<include file = "./Public/Public_footer"/>
<include file = "./Public/Public_foot_script"/>
</body>
</html>

侧边预留给多说评论的版块是评论排行，和评论展示。。。关于多说评论确实好用，推荐下。。。

内容详情页展示

控制器

这里就是根据首页文章链接的

id

去数据库查询

Article

表中的数据，然后推到前台页面展示

public function content($id=2){
$Form   =   M('Article');
// 读取数据
$data =   $Form->find($id);
//var_dump($data);
if($data) {
$this->assign('data',$data);
}else{
$this->error('数据错误');
}
$this->display();
}

页面

<div class="container pt-xlg">
<div class="row">
<div class="col s12 m8 l9">
<p class="f-36 mb-none">{$data.a_title}</p>
<p class="c-999">20{$data.a_time|date="y/m/d H:i",###}发表</p>
<hr>
<p id="contentMd" style="display: none">{$data.a_content}</p>
<div id="content">
</div>
<p class="f-18">分享到：</p>
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a>
<a title="分享到Facebook" href="#" class="bds_fbook" data-cmd="fbook"></a>
<a title="分享到linkedin" href="#" class="bds_linkedin" data-cmd="linkedin"></a>
<a title="分享到Twitter" href="#" class="bds_twi" data-cmd="twi"></a>
</div>
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{$data.a_id}" data-title="{$data.a_title}" data-url="{:U('Home/Content/content/id/'.$vo['a_id'])}"></div>
<!-- 多说评论框 end -->
</div>
<div class="col s12 m4 l3">
22222222
</div>
</div>
</div>

这里文章详情页的底部我分别加了百度分享，和多说评论

后台登录功能的实现

登录功能主要是

session

控制做了挺久的。。。

登录页面

<div id="content" class="container">
<div class="row center-align">
<form class="col offset-s3 s6" action="{:U('Admin/Login/login')}" method="post">
<div class="row">
<div class="input-field col s12">
<input id="username" name="username" type="text" class="validate">
<label for="username">用户名</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" name="password" type="password" class="validate">
<label for="password">密码</label>
</div>
</div>
<div class="col s12 p-none">
<button class="btn waves-effect waves-light right" type="submit" name="action">登录
<i class="by bym-feiji right"></i></button>
</div>
</form>
</div>
</div>

登录控制器

前端提交用户名和密码到后台，首先我们判断是否是使用的

post

提交。。。

根据提交的用户名去查询用户表中的数据，如果数据库返回没有这个用户或者用户提交的密码经过

md5

加密后的值和数据库中密码不匹配，返回错误。

如果前面都没有问题，我们就可以更新用户表中的最后登录时间、登录电脑的

ip

，然后向

session

中写入用户数据，用来判断用户的登录，从而禁止用户不登录直接操作。

public function login(){
// 判断是否是post提交
if(!IS_POST) halt('页面错误');

$db = M('user');
// 根据提交的用户名 查询数据库
$user = $db -> where(array('name' => I('post.username'))) -> find();

if(!$user || $user['password'] != I('post.password','','md5')){
$this -> error('账号或密码错误');
}

$data = array(
'id' => $user['id'],
'last_time' => time(),
'ip' => get_client_ip()
);
// 更新登录时间 和 ip
$db -> save($data);

// 写入session
session('uid',$user['id']);
session('username',$user['name']);
session('username',$user['name']);
session('logintime',date('Y-m-d H:i:s'),$user['last_time']);
session('ip',$user['ip']);
// 跳转到后台列表页
redirect('../Blog/listA');

}

session信息的使用

在控制器文件夹创建一个

common

控制器，使用

_initialize

函数判断

session

，如果

session

不存在，跳转到登录页面。。。

让其他的控制器全部继承

common

控制器，比如：

class BlogController extends CommonController {
....
}

CommonController

控制器代码如下：

class CommonController extends Controller {

Public function _initialize(){
// 判断session 是否存在，不存在跳转到登录页
if(!isset($_SESSION['uid'])){
$this -> redirect('Admin/Login/index');
}
}

}

部署到阿里云

上传代码

使用

FileZilla

上传到服务器

创建数据库

执行上篇文章中的

sql

语句，再给用户表手动添加数据的时候密码是需要经过

md5

加密的

后续

php实在不怎么熟悉了，代码写的不够优雅，多担待哈。。。还有很多的功能尚未实现，后续会继续更新。。。有问题的话欢迎吐槽（但是别喷我啊。。。）

未完待续。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： thinkphp github 博客 markdown

相关文章推荐

新的分享

章节导航