設計數據庫
CREATE TABLE `user` ( `user_id` int unsigned NOT NULL AUTO_INCREMENT, `username` varchar(255) COMMENT '用戶名', `password` longtext COMMENT '密碼', `create_ts` int COMMENT '創建時間', `update_ts` int COMMENT '修改時間', PRIMARY KEY (`user_id`) ); CREATE TABLE `article` ( `article_id` int unsigned NOT NULL AUTO_INCREMENT, `user_id` int unsigned COMMENT '用戶ID', `title` varchar(255) COMMENT '文章標題', `content` longtext COMMENT '文章內容', `create_ts` int unsigned COMMENT '創建時間', `update_ts` int unsigned COMMENT '修改時間', PRIMARY KEY (`article_id`) );
設計前端頁面
1.下載博客模板
閑言輕博客模板：https://fly.layui.com/store/layuiXianyan/
2.配置模板
先在public/static/目錄下解壓：
進入類似的目錄 D:\php\project\tp\public\static\xianyan-1.0\html\下：
把所有的html文件進行復制到 類似於 D:\php\project\tp\application\index\view\blog\ 這個目錄下面去：
最后需要創建控制器，修改html資源路徑，以index.html為例，
controller/Index.php
<?php namespace app\index\controller; class Index { public function index() { return view('blog/index'); } }
view/blog/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>閑言輕博客</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="__ROOT__/static/xianyan-1.0/res/layui/css/layui.css"> <link rel="stylesheet" href="__ROOT__/static/xianyan-1.0/res/static/css/mian.css"> </head> <body class="lay-blog"> <div class="header"> <div class="header-wrap"> <h1 class="logo pull-left"> <a href="index.html"> <img src="__ROOT__/static/xianyan-1.0/res/static/images/logo.png" alt="" class="logo-img"> <img src="__ROOT__/static/xianyan-1.0/res/static/images/logo-text.png" alt="" class="logo-text"> </a> </h1> <form class="layui-form blog-seach pull-left" action=""> <div class="layui-form-item blog-sewrap"> <div class="layui-input-block blog-sebox"> <i class="layui-icon layui-icon-search"></i> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> </div> </form> <div class="blog-nav pull-right"> <ul class="layui-nav pull-left"> <li class="layui-nav-item layui-this"><a href="index.html">首頁</a></li> <li class="layui-nav-item"><a href="message.html">留言</a></li> <li class="layui-nav-item"><a href="about.html">關於</a></li> </ul> <a href="#" class="personal pull-left"> <i class="layui-icon layui-icon-username"></i> </a> </div> <div class="mobile-nav pull-right" id="mobile-nav"> <a href="javascript:;"> <i class="layui-icon layui-icon-more"></i> </a> </div> </div> <ul class="pop-nav" id="pop-nav"> <li><a href="index.html">首頁</a></li> <li><a href="message.html">留言</a></li> <li><a href="about.html">關於</a></li> </ul> </div> <div class="container-wrap"> <div class="container"> <div class="contar-wrap"> <h4 class="item-title"> <p><i class="layui-icon layui-icon-speaker"></i>公告：<span>歡迎來到我的輕博客</span></p> </h4> <div class="item"> <div class="item-box layer-photos-demo1 layer-photos-demo"> <h3><a href="details.html">擁有詩意的心態,才能擁有詩意的生活</a></h3> <h5>發布於：<span>剛剛</span></h5> <p>父愛如山，不善表達。回想十多年前，總記得父親有個寬厚的肩膀，小小的自己跨坐在上面，越過人山人海去看更廣闊的天空，那個時候期望自己有一雙翅膀，能夠像鳥兒一樣飛得高，看得遠。雖然父親有時會和自己開玩笑，但在做錯事的時候會受到嚴厲的訓斥。父親有雙粗糙的大手掌，手把手教我走路、騎車，卻會在該放手的時刻果斷地放開讓自己去大膽嘗試，那個時候期望快快長大，能夠做自己想做的事，不用受父親的“控制”。父親是智慧樹，他無所不知、無所不曉，雖然你有十萬個為什么，但是也難不倒他。</p> <img src="__ROOT__/static/xianyan-1.0/res/static/images/item.png" alt=""> </div> <div class="comment count"> <a href="details.html#comment">評論</a> <a href="javascript:;" class="like">點贊</a> </div> </div> <div class="item"> <div class="item-box layer-photos-demo2 layer-photos-demo"> <h3><a href="details.html">擁有詩意的心態,才能擁有詩意的生活</a></h3> <h5>發布於：<span>剛剛</span></h5> <p>父愛如山，不善表達。回想十多年前，總記得父親有個寬厚的肩膀，小小的自己跨坐在上面，越過人山人海去看更廣闊的天空，那個時候期望自己有一雙翅膀，能夠像鳥兒一樣飛得高，看得遠。雖然父親有時會和自己開玩笑，但在做錯事的時候會受到嚴厲的訓斥。父親有雙粗糙的大手掌，手把手教我走路、騎車，卻會在該放手的時刻果斷地放開讓自己去大膽嘗試，那個時候期望快快長大，能夠做自己想做的事，不用受父親的“控制”。父親是智慧樹，他無所不知、無所不曉，雖然你有十萬個為什么，但是也難不倒他。</p> <img src="__ROOT__/static/xianyan-1.0/res/static/images/item.png" alt=""> </div> <div class="comment count"> <a href="details.html#comment">評論</a> <a href="javascript:;" class="like">點贊</a> </div> </div> <div class="item"> <div class="item-box layer-photos-demo3 layer-photos-demo"> <h3><a href="details.html">擁有詩意的心態,才能擁有詩意的生活</a></h3> <h5>發布於：<span>剛剛</span></h5> <p>父愛如山，不善表達。回想十多年前，總記得父親有個寬厚的肩膀，小小的自己跨坐在上面，越過人山人海去看更廣闊的天空，那個時候期望自己有一雙翅膀，能夠像鳥兒一樣飛得高，看得遠。雖然父親有時會和自己開玩笑，但在做錯事的時候會受到嚴厲的訓斥。父親有雙粗糙的大手掌，手把手教我走路、騎車，卻會在該放手的時刻果斷地放開讓自己去大膽嘗試，那個時候期望快快長大，能夠做自己想做的事，不用受父親的“控制”。父親是智慧樹，他無所不知、無所不曉，雖然你有十萬個為什么，但是也難不倒他。</p> <img src="__ROOT__/static/xianyan-1.0/res/static/images/item.png" alt=""> </div> <div class="comment count"> <a href="details.html#comment">評論</a> <a href="javascript:;" class="like">點贊</a> </div> </div> </div> <div class="item-btn"> <button class="layui-btn layui-btn-normal">下一頁</button> </div> </div> </div> <div class="footer"> <p> <span>© 2018</span> <span><a href="http://www.layui.com" target="_blank">layui.com</a></span> <span>MIT license</span> </p> <p><span>人生就是一場修行</span></p> </div> <script src="__ROOT__/static/xianyan-1.0/res/layui/layui.js"></script> <script> layui.config({ base: '__ROOT__/static/xianyan-1.0/res/static/js/' }).use('blog'); </script> </body> </html>
最后達到效果：
編寫開發邏輯
課堂上進行講解。