一个前端写的php博客系统--支持markdown哦

部署的地址

我的博客地址：http://www.weber.pub/

起因

最近买了个新的域名，同时在阿里云申请了免费的虚拟主机。。。借此机会就想搞个自己的博客站点，虽然之前也使用了hexo + github 、 WordPress 做过，但是我的阿里云虚拟主机实在是不知道怎么去搞hexo （也许根本就搞不起来，除非自己花钱买主机，哈哈）。。。WordPress总是感觉好笨重，运行起来一股的人到中年，气喘吁吁啊。。。百度之后，typeecho成了首选，但是markdown竟然有问题。。。一口老血。。。自己动手吧。。。

用到的资源

thinkphp

官网
快速入门
参考手册

集成开发环境

phpstudy

Materialize UI框架

中文官网
英文官网

markdown 编辑器

marked
editor

代码高亮

highlightjs

github 地址

项目的github地址

数据库设计

目前来说只用到了两张表，一个是文章表，一个是后台登录的用户表，其中有些字段还没有用到，先写上备用，数据库的设计是仿照青春博客设计

文章表

DROP TABLE IF EXISTS `by_article`;
CREATE TABLE `by_article` (
  `a_id` int(11) NOT NULL AUTO_INCREMENT COMMENT ‘文章逻辑ID‘,
  `a_url` varchar(64) DEFAULT ‘‘ COMMENT ‘文章图片‘,
  `a_title` varchar(128) NOT NULL COMMENT ‘文章标题‘,
  `a_remark` varchar(256) DEFAULT ‘‘ COMMENT ‘文章描述‘,
  `a_keyword` varchar(32) DEFAULT ‘‘ COMMENT ‘文章关键字‘,
  `pid` int(11) NOT NULL DEFAULT ‘1‘ COMMENT ‘文章类别‘,
  `a_time` int(10) NOT NULL COMMENT ‘文章发表时间‘,
  `a_content` text NOT NULL COMMENT ‘文章内容‘,
  `a_view` int(11) NOT NULL DEFAULT ‘1‘ COMMENT ‘文章是否置顶‘,
  `a_hit` int(11) NOT NULL DEFAULT ‘1‘ COMMENT ‘文章点击量‘,
  `a_original` int(1) DEFAULT ‘0‘,
  `a_from` varchar(16) NOT NULL DEFAULT ‘1‘,
  `a_writer` varchar(64) NOT NULL COMMENT ‘作者‘,
  `a_ip` varchar(16) NOT NULL,
  PRIMARY KEY (`a_id`),
  KEY `a_title` (`a_title`)
) ENGINE=MyISAM AUTO_INCREMENT=71 DEFAULT CHARSET=utf8 COMMENT=‘文章表‘;

用户表

DROP TABLE IF EXISTS `by_user`;
CREATE TABLE `by_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT ‘用户逻辑Id‘,
  `name` varchar(32) NOT NULL COMMENT ‘登陆用户名‘,
  `password` varchar(32) NOT NULL COMMENT ‘登陆密码‘,
  `user` varchar(32) NOT NULL COMMENT ‘用户名‘,
  `class` int(11) NOT NULL COMMENT ‘用户类别‘,
  `last_time` int(11) NOT NULL COMMENT ‘用户登陆时间‘,
  `ip` varchar(16) NOT NULL COMMENT ‘用户登陆ip‘,
  PRIMARY KEY (`id`),
  KEY `user` (`user`)
) ENGINE=MyISAM AUTO_INCREMENT=20 DEFAULT CHARSET=utf8 COMMENT=‘用户表‘;

动手吧

目录结构

ByBlog

  • Admin 后台目录

    • Conf 配置文件
    • Controller 控制器
    • Model 模型
    • View 页面
  • Home 前台目录
    • Conf 配置文件
    • Controller 控制器
    • Model 模型
    • View 页面

Public 公共资源目录

  • Css 样式目录
  • font 、fonts 字体库
  • Img 图片
  • js
  • MarkdownEditor 文章编辑器
  • Plugin 插件目录

环境的搭建

phpstudy 是集成的开发环境，下载后解压就可以使用。。。thinkphp下载解压后放到phpstudy的www目录下，在浏览器访问该目录即可把thinkphp安装完成。。。详细的操作流程可以自行百度，或者参考我上面发的资源链接。

数据库配置

在Config文件夹下的config.php 文件中添加数据库的配置信息

//‘配置项‘=>‘配置值‘
‘DB_TYPE‘=>‘mysql‘,// 数据库类型
‘DB_HOST‘=>‘127.0.0.1‘,// 服务器地址
‘DB_NAME‘=>‘‘,// 数据库名
‘DB_USER‘=>‘‘,// 用户名
‘DB_PWD‘=>‘‘,// 密码
‘DB_PORT‘=>3306,// 端口
‘DB_PREFIX‘=>‘by_‘,// 数据库表前缀
‘DB_CHARSET‘=>‘utf8‘,// 数据库字符集
‘USER_AUTH_KEY‘=>‘authId‘

后台博客书写功能

页面view

<!DOCTYPE html>
<html>
<head>
    <title>11</title>
    <include file = "./Public/Public_head_link"/>
    <link rel="stylesheet" href="__PUBLIC__/MarkdownEditor/editor.css" />
    <script type="text/javascript" src="__PUBLIC__/MarkdownEditor/editor.js"></script>
    <script type="text/javascript" src="__PUBLIC__/MarkdownEditor/marked.js"></script>
</head>
<body>
<include file = "./Public/Public_header"/>
<div id="content" class="container">
    <form class="col s12 pt-60" method="post" action="__URL__/insert">
        <div class="row">
            <div class="col s9">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="title" name="a_title" type="text" class="validate">
                        <label for="title">文章标题</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="remark" name="a_remark" type="text" class="validate">
                        <label for="remark">文章描述</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <p class="f-16 c-999">文章内容</p>
                        <textarea name="a_content" id="textarea" class="materialize-textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="col s3">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="keyword" name="a_keyword" type="text" class="validate">
                        <label for="keyword">标签（关键字）</label>
                    </div>
                </div>
                <button class="btn waves-effect waves-light" type="submit" name="action">发表文章
                    <i class="by bym-feiji right"></i>
                </button>
            </div>
        </div>
    </form>
</div>
<include file = "./Public/Public_footer"/>
<include file = "./Public/Public_foot_script"/>
<script>
    // markdown 编辑器
    var editor = new Editor();
    editor.render();
</script>
</body>
</html>

模型Model

class ArticleModel extends Model {
    public function addArticle($data){
        // 添加文章
        if(M(‘article‘)->add($data)){
            return 1;
        }else{
            return 0;
        }
    }
}

控制器

public function insert(){
    $data = array (
        ‘a_title‘ => I(‘post.a_title‘),
        ‘a_keyword‘ => I(‘post.a_keyword‘),
        ‘a_remark‘ => I(‘post.a_remark‘),
        ‘a_content‘ => I(‘post.a_content‘),
        ‘a_time‘ => time(),
        ‘a_ip‘ => get_client_ip(),
    );
    if(D(‘Article‘)->addArticle($data)){
        $this->success(‘发表完成！‘,‘lista‘);
    }else{
        $this->error(‘发表失败！‘);
    }
}

如果没有问题的话呢，你就可以看到下面的截图了

后台博客列表功能的实现

视图view

<!DOCTYPE html>
<html>
<head>
    <title>文章列表页 -- ByBlog</title>
    <include file = "./Public/Public_head_link"/>
</head>
<body>
<include file = "./Public/Public_header"/>
<div id="content" class="container by-lista">
    <div class="row pt-xlg">
        <div class="col s12">
            <table class="hoverable">
                <thead>
                <tr>
                    <th data-field="id" class="f-20">文章标题</th>
                    <th data-field="id" class="f-20">操作</th>
                </tr>
                </thead>
                <tbody>
                    <volist name="list" id="vo">
                        <tr>
                            <td class="f-18" width="75%">{$vo.a_title} <span class="f-12 c-999">20{$vo.a_time|date="y/m/d H:i",###}</span></td>
                            <td width="25%">
                                <a class="waves-effect waves-light btn mr-lg">编辑</a>
                                <a class="waves-effect waves-light btn">删除</a>
                            </td>
                        </tr>
                    </volist>
                </tbody>
            </table>
            <div class="pagination right">
                {$page}
            </div>
        </div>
    </div>
</div>
<include file = "./Public/Public_footer"/>
<include file = "./Public/Public_foot_script"/>
</body>
</html>

控制器

public function listA(){

    // 文章列表
    // 查询满足要求的总记录数
    $count = M(‘article‘)->count();
    $this->assign(‘count‘,$count);
    // 实例化分页类 传入总记录数和每页显示的记录数
    $Page  = new \Think\Page($count,10);
    // 分页显示输出
    $show  = $Page->show();
    $article = M(‘article‘) ->order(‘a_id desc‘) -> field(‘a_title,a_time‘) ->limit($Page->firstRow.‘,‘.$Page->listRows)->select();
    // 赋值数据集
    $this->assign(‘list‘,$article);
    // 赋值分页输出
    $this->assign(‘page‘,$show);
    $this->display();

}

然后呢你能看到的页面是这个样子的

到目前存在的坑

写个代码不容易，里面自然有几个坑。。。

  • 时间的解码问题
    我存到数据库里面的是时间戳，但是经过解码后年份只显示后两位数字，所以我就自己在年份的前面加了20。。。。所以你们就看到了2070这样的时间点是因为当时存的时间戳为空，就成了默认的时间1970。。。但是如果是新编辑的文章还是木有问题的。。。。

后续

代码写的应该有不少问题，还有很多的功能尚未实现，下篇文章将介绍前台的展示和列表以及后台的用户登录问题（目前后台的登录还有点问题尚未解决）。。。php实在不怎么熟悉了，有问题的话欢迎吐槽（但是别喷我啊。。。）

一个前端写的php博客系统2--前台展示+后台登录
一个前端写的php博客系统3--文章的修改和删除

原文地址：https://www.cnblogs.com/jlfw/p/12623324.html

时间： 2024-08-11 21:37:49

一个前端写的php博客系统--支持markdown哦的相关文章

Python课程的期末项目--实现了一个及其简单的个人博客系统

目录 1. 项目简介 1.1 本项目博客地址 1.2 项目的的功能与特色 1.3 项目采取的技术栈 1.4 项目借鉴源代码的github地址或博客地址 1.5 团队成员任务分配表 2. 前期调查与需求分析 3. 项目功能架构图.主要功能流程图 4. 系统模块说明 4.1 系统中包含的模块列表 4.2 系统各模块详细描述 4.2.1 分页功能 4.2.2 标签功能 5.项目总结 5.1 系统特点 5.2 系统不足与可改进的地方 1. 项目简介 1.1 本项目博客地址 https://www.cnb

一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统

原文地址: http://www.cnblogs.com/daxnet/p/6139317.html 2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为“希赛网”)个人空间发布过一些与编程和开发相关的文章.从入行到现在,我至始至终乐于与网友分享自己的所学所得,希望会有更多的同我一样的业内朋友能够在事业上取得成功,也算是为我们的软件事业贡献自己的一份力量吧,这也是我在博客园建博客

基于Microsoft Azure、ASP.NET Core和Docker的博客系统

欢迎阅读daxnet的新博客:一个基于Microsoft Azure.ASP.NET Core和Docker的博客系统 2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为"希赛网")个人空间发布过一些与编程和开发相关的文章.从入行到现在,我至始至终乐于与网友分享自己的所学所得,希望会有更多的同我一样的业内朋友能够在事业上取得成功,也算是为我们的软件事业贡献自己的一份力

基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战

课程目标本课程通过一个完整的项目,让学员了解如何使用Jade+Node.js+Express+mongoDB+Bower+Gulp+Yeoman的组合开发Web应用.可以让学员更深入地掌握Node.js和Express技术. 适用人群node.js程序员,express程序员,JAVAscript程序员 课程简介本系统是一款博客系统,拥有博客必要的功能,如用户注册.用户登录.用户退出.文章列表,文章查看.添加文章,删除文章,修改文章.文章搜索.后台权限控制等. -----------------

博客开篇——应用Markdown编辑器呈现样式和内容

刚刚开通博客,一直了解Markdown便捷的编写能力,正好博客园支持Markdown编辑器,写此篇练习Markdown的各种[标记]语法.本文内容有参考文章 博客园Markdown编辑器指南 Markdown编辑器 在未提供Markdown的博客中,通常使用安装好的Markdown编辑软件来编写内容,然后将导出的html文档复制到该博客的内容编辑栏中.常用的工具有MarkdownPad 2和Sublime Text,但MarkdownPad 2 要付费. 笔者使用博客园提供的页面Markdown

博客园支持Mardown编辑了

开心 听说博客园支持Markdown了,作为程序员专业本能来做个测试. 图片 文章没图片怎么行呢 开始 接下来准备发一些文章,都会用Markdown来写的. 原文地址:https://www.cnblogs.com/BillySir/p/9690710.html

ASP.NET写的一个博客系统

由于域名闲置,正好也有服务器空间,短期内开发了一个博客系统. 大家都来谈  http://www.djdlt.com 目前是开放注册,免费发布.(限于空间有限,图片还是尽量少传些) 网站架构: ASP.NET SQLSERVER2008 支持多屏幕响应.如.平板.手机.自适应所有平台. 网站能干什么: 发布你的想法 参与表达你对某件事的看法 将来要怎样: 对发布信息的人提供打赏功能,实现知识就是财富. 注册的发步者实现SNS化管理,增加关注.粉丝.好友等实现交流. 感谢: 感谢博客园提供推广平台

一个超漂亮的Java版博客系统,内置14套皮肤,已经转化为标准的Eclipse项目,直接导入即可

原文:一个超漂亮的Java版博客系统,内置14套皮肤,已经转化为标准的Eclipse项目,直接导入即可 源代码下载地址:http://www.zuidaima.com/share/1550463745002496.htm MrZhao只分享精品,话不多说,直接上图      - 为了压缩文件我把WEB-INF下面的lib包打包放在网盘下载地址:http://pan.baidu.com/s/1hqqqWOc - 把lib解压进去以后项目直接导入Eclise即可运行 - 数据库Mysql,确保一个新

开源分享：用Python开发的开源博客系统Blog_mini

本博文在51CTO技术博客首发. 开源不易,Python良心之作,真心送给广大朋友,恳请给予支持,不胜感激! 0.Blog_mini送给你们:让每个人都轻松拥有可管理的个人博客 你从未架设过服务器或网站,希望可以接触一下这方面的知识-- 你从未使用过Linux操作系统,希望可以接触一下这方面的知识-- 你是初中生/高中生/大学生,希望能在学业之余锻炼一下自己的IT技能-- 你是Python新手,希望能有一个用Python开发的个人博客-- 你学习Python许久,希望有一个开源的项目可以用来学习