一個前端寫的php博客系統--支持markdown哦

時間  2019-12-05
標籤 一個 前端 寫的 php 博客 系統 支持 markdown 欄目 PHP 简体版
原文   原文鏈接

部署的地址

個人博客地址：http://www.weber.pub/

原由

最近買了個新的域名，同時在阿里雲申請了免費的虛擬主機。。。藉此機會就想搞個本身的博客站點，雖然以前也使用了hexo + github 、 WordPress 作過，可是個人阿里雲虛擬主機實在是不知道怎麼去搞hexo （也許根本就搞不起來，除非本身花錢買主機，哈哈）。。。WordPress老是感受好笨重，運行起來一股的人到中年，氣喘吁吁啊。。。百度以後，typeecho成了首選，可是markdown居然有問題。。。一口老血。。。本身動手吧。。。javascript

用到的資源

thinkphp

官網
快速入門
參考手冊php

集成開發環境

phpstudycss

Materialize UI框架

中文官網
英文官網html

markdown 編輯器

marked
editor前端

代碼高亮

highlightjsjava

github 地址

項目的github地址mysql

數據庫設計

目前來講只用到了兩張表，一個是文章表，一個是後臺登陸的用戶表，其中有些字段尚未用到，先寫上備用，數據庫的設計是仿照青春博客設計git

文章表

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='用戶表';

動手吧

目錄結構

ByBloggithub

  • Admin 後臺目錄web

    • Conf 配置文件

    • Controller 控制器

    • Model 模型

    • View 頁面

  • Home 前臺目錄

    • Conf 配置文件

    • Controller 控制器

    • Model 模型

    • View 頁面

Public 公共資源目錄

  • Css 樣式目錄

  • font 、fonts 字體庫

  • Img 圖片

  • js

  • MarkdownEditor 文章編輯器

  • Plugin 插件目錄

clipboard.png

環境的搭建

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('發表失敗！');
    }
}

若是沒有問題的話呢，你就能夠看到下面的截圖了

clipboard.png

後臺博客列表功能的實現

視圖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();
    
}

而後呢你能看到的頁面是這個樣子的

clipboard.png

到目前存在的坑

寫個代碼不容易，裏面天然有幾個坑。。。

  • 時間的解碼問題
    我存到數據庫裏面的是時間戳，可是通過解碼後年份只顯示後兩位數字，因此我就本身在年份的前面加了20。。。。因此大家就看到了2070這樣的時間點是由於當時存的時間戳爲空，就成了默認的時間1970。。。可是若是是新編輯的文章仍是木有問題的。。。。

後續

代碼寫的應該有很多問題，還有不少的功能還沒有實現，下篇文章將介紹前臺的展現和列表以及後臺的用戶登陸問題（目先後臺的登陸還有點問題還沒有解決）。。。php實在不怎麼熟悉了，有問題的話歡迎吐槽（可是別噴我啊。。。）

一個前端寫的php博客系統2--前臺展現+後臺登陸
一個前端寫的php博客系統3--文章的修改和刪除

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程