前端實現 · 跟老楊學ThinkPHP3

由于本人不是專業的前端，也沒人給我設計一個輕博客。所以我只能利用互聯網上的資源。辛虧有了Bootstrap3，我也能冒充一下前端。 > 它山之石，可以攻玉 # 前端CSS框架選擇本來還猶豫試試Amaze UI的jquery版，但是Amaze UI 由于出來的晚，不是很完善，也沒有像 <http://expo.bootcss.com/> 這樣的案例展示墻，想參照自定義要費一番功夫。 ![2015-06-07/5573957e27c5a](http://box.kancloud.cn/2015-06-07_5573957e27c5a.png) 然后幸運的是bootstrap 自帶了一個博客案列： ![2015-06-07/55739600701b9](http://box.kancloud.cn/2015-06-07_55739600701b9.png) ![http://v3.bootcss.com/examples/blog/](http://box.kancloud.cn/2015-06-07_5573962267bee.png) 感覺上挺簡潔，也支持響應式。 # js類庫 - jquery 這是必須的，原生js不會，開發效率慢。jq的組件比較多，也比較熟。 - audiojs 用于音頻播放 - bootstrap-table 用于自己實現移植ueditor里音樂搜索功能 - jcrop 圖片裁剪庫，用于生成頭像 - jqnotifybar 用于做自定義提示 - tagsinput 實現發布頁面的標簽提示 - nprogress 用于ajax請求時的動態等待進度條 - plupload 一個html5上傳組件 - smalot-bootstrap-datetimepicker 日期選擇器支持時間的選擇 - uploadify swf上傳插件，在OneThink和之前的項目里用爛了。 - ueditor 百度文本編輯器 - swipebox 圖片展示slidebox # web組件的安裝由于要用到這么多的組件，一個個去官網上下載太麻煩了。索性用了一下 [bower-一個Web的包管理工具](https://github.com/bower/bower)。這貨可以解決包依賴問題，雖然下下來的資源可能比你需要的多，因為是將項目框架倉庫整個git pull 下來。里面可能會有demo、tests和readme.md。安裝首先要有node，這個去官網下載安裝就好。然后 `npm install -g bower` 全局安裝這個命令就好了。 ~~~ # install dependencies listed in bower.json $ bower install # install a package and add it to bower.json $ bower install <package> --save # install specific version of a package and add it to bower.json $ bower install <package>#<version> --save ~~~ 也可以卸載某個包 `$ bower uninstall <package-name>` 具體使用方法，我就不介紹了。大家可以谷歌百度。當然，有的時候由于項目可能被墻的原因，大家可能下載不了某個包。這時候只能靠人力了。我一般是 “紅杏”翻墻訪問，然后把下載地址放到115或者百度云盤里離線下載（我的迅雷會員到期了，迅雷沒落后就不想充了）。 # 前端資源目錄上面的swipebox 是我自己下的，ueditor是找了一個ThinkPHP整合版，所以手動放置了。大家可以看下我的前端目錄就知道了： ![2015-06-07/55739b1c18b6a](http://box.kancloud.cn/2015-06-07_55739b1c18b6a.png) 一般我喜歡前端資源放Public里。然后 bower_components 是bower安裝的目錄。 * css 樣式目錄 * images圖片庫 * js 自定義js * static 是手動安裝的js組件庫 html5shiv.js 和respond.js 是為了兼容性的， think.js 是OneThink里，苗兒曾經寫過 js的兼容TP U函數的js實現。還有一個setValue 表單賦值函數。 # 代碼實現 ## 變量替換前面我們找了一個博客靜態頁面。然后，我們TP就要把它套好，能正常訪問。在套之前，我們先定義下模板常量，這樣方便我們在模板中使用資源路徑。忘了交代項目目錄了： ![整個項目目錄](http://box.kancloud.cn/2015-06-07_55739eb79621b.png) 主要是應用目錄分了 Admin后臺，Api rest接口，Common 公共模塊，Home 前臺。Uploads是上傳目錄。 test是單元測試目錄。用了多入口綁定。因此除了index.php 還有 admin.php、api.php。 README.md 項目介紹文檔。在`/App/Home/Conf/config.php` 前臺配置里配置上模板解析常量 ~~~ <?php return array( /* 模板相關配置 */ 'TMPL_PARSE_STRING' => array( '__STATIC__' => __ROOT__ . '/Public/static', '__BOWER__'=>__ROOT__. '/Public/bower_components', '__IMG__' => __ROOT__ . '/Public/images', '__CSS__' => __ROOT__ . '/Public/css', '__JS__' => __ROOT__ . '/Public/js', ), 'SHOW_PAGE_TRACE'=>true, ); ~~~ 然后把 `view-source:http://v3.bootcss.com/examples/blog/` chrome里右鍵查看那個博客的源碼復制下來的代碼先存到/App/Home/View/Index/index.html里，然后所有資源文件的路徑替換掉。有的如 `http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js` 這種直接粘貼地址欄里訪問在右鍵保存到項目目錄里。替換前： ~~~ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Blog Template for Bootstrap</title>  <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">  <link href="blog.css" rel="stylesheet">   <script src="../../assets/js/ie-emulation-modes-warning.js"></script>   ~~~ 替換后： ~~~ <html> <head> <meta charset="UTF-8"> <title>Freelog - 自由的輕博客</title> <script src="__BOWER__/jquery/dist/jquery.min.js"></script> <script src="__BOWER__/bootstrap/dist/js/bootstrap.min.js"></script> <link href="__BOWER__/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="__CSS__/blog.css"> <link rel="stylesheet" href="__BOWER__/jqnotifybar/css/jquery.notifyBar.css"> <script type="text/javascript" src="__BOWER__/jqnotifybar/jquery.notifyBar.js"></script> <script type="text/javascript" src="__JS__/common.js"></script> <script type="text/javascript"> // var url = window.location.pathname + window.location.search; // url = url.replace(/(\/(p)\/\d+)|(&p=\d+)|(\/(id)\/\d+)|(&id=\d+)|(\/(group)\/\d+)|(&group=\d+)/, ""); var url = '__SELF__'; var no_pic = '__PUBLIC__/images/no-cover.png'; (function(){ var ThinkPHP = window.Think = { "ROOT" : "__ROOT__", //當前網站地址 "APP" : "__APP__", //當前項目地址 "PUBLIC" : "__PUBLIC__", //項目公共目錄地址 "DEEP" : "{:C('URL_PATHINFO_DEPR')}", //PATHINFO分割符 "MODEL" : ["{:C('URL_MODEL')}", "{:C('URL_CASE_INSENSITIVE')}", "{:C('URL_HTML_SUFFIX')}"], "VAR" : ["{:C('VAR_MODULE')}", "{:C('VAR_CONTROLLER')}", "{:C('VAR_ACTION')}"] } })(); $(function(){ //單頁高亮 $('.navbar-nav li').removeClass('active'); $('a.blog-nav-item[href="'+url+'"]').parent().addClass('active'); }) </script>  <block name="style"></block> </head> ~~~ 后面所有的靜態資源路徑都這么解決。 ## 模板繼承前端頁面其實很多頁面風格一樣，只是變了內容區域或者，上下左右某塊區域的內容。 ThinkPHP為我們提供了模板繼承這個功能，讓我們將共同的部分定義成父模板的一個個塊，讓我們子模板繼承了以后，如果不用相應的block去替換，就可以獲取父模板里原有塊的內容，非常方便。所以，我將之前的模板先全部復制了保存到 Index/base.html里。然后，定義了一些區塊 ~~~ <html> <head> <meta charset="UTF-8"> <title>Freelog - 自由的輕博客</title> <script src="__BOWER__/jquery/dist/jquery.min.js"></script> <script src="__BOWER__/bootstrap/dist/js/bootstrap.min.js"></script> <link href="__BOWER__/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="__CSS__/blog.css"> <link rel="stylesheet" href="__BOWER__/jqnotifybar/css/jquery.notifyBar.css"> <script type="text/javascript" src="__BOWER__/jqnotifybar/jquery.notifyBar.js"></script> <script type="text/javascript" src="__JS__/common.js"></script> <script type="text/javascript"> var url = '__SELF__'; var no_pic = '__PUBLIC__/images/no-cover.png'; (function(){ var ThinkPHP = window.Think = { "ROOT" : "__ROOT__", //當前網站地址 "APP" : "__APP__", //當前項目地址 "PUBLIC" : "__PUBLIC__", //項目公共目錄地址 "DEEP" : "{:C('URL_PATHINFO_DEPR')}", //PATHINFO分割符 "MODEL" : ["{:C('URL_MODEL')}", "{:C('URL_CASE_INSENSITIVE')}", "{:C('URL_HTML_SUFFIX')}"], "VAR" : ["{:C('VAR_MODULE')}", "{:C('VAR_CONTROLLER')}", "{:C('VAR_ACTION')}"] } })(); $(function(){ //導航高亮 $('.navbar-nav li').removeClass('active'); $('a.blog-nav-item[href="'+url+'"]').parent().addClass('active'); }) </script>  <block name="style"></block> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top blog-masthead"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:;">Freelog</a> </div> <div class="blog-nav collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li><a class="blog-nav-item" href="{:U('/')}">首頁</a></li> <?php if (is_login()): ?> <li><a class="blog-nav-item" href="{:U('/mine/')}">我的文章</a></li> <?php endif ?> <li> <form class="navbar-form navbar-right" id="search" method="GET" action="/Search" role="search"> <div class="form-group input-group"> <input type="text" name="kw" class="form-control" placeholder="輸入關鍵字搜索" value="{$kw|default=""}"> <span class="input-group-btn"> <button class="btn btn-default"> <span class="glyphicon glyphicon-search f20" aria-hidden="true"></span> </button> </span> </div> </form> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="javascript:;" role="button" aria-expanded="false"><if condition="is_login()">{:session('user.nickname')}</if></a></li> <if condition="is_login()"> <li><a class="blog-nav-item" href="{:U('/user/profile')}">個人信息</a></li> <li><a class="blog-nav-item" href="{:U('/user/logout')}" class="ajax-get">退出</a></li> <else/> <li><a class="blog-nav-item" href="{:U('/user/login')}">登錄</a></li> <li><a class="blog-nav-item" href="{:U('/user/reg')}">注冊</a></li> </if> </ul> </div> </div> </div> <div class="container" id="main"> <block name="header"> <div class="blog-header"> <h1 class="blog-title">The Bootstrap Blog</h1> <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> </div> </block> <div class="row"> <div class="col-sm-8 blog-main"> <block name="main"></block> </div> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <block name="sidebar"></block> </div> </div> </div> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.Modified by <a href="http://weibo.com/u/1342658313">@黑白世界4648</a></p> <p>? {:date('Y', time())} Freelog. 由 Thinkphp 強力驅動.</p> <p> <a href="#">Back to top</a> </p> </footer> <block name="script"></block> </body> </html> ~~~ - `<block name="style"></block>` 頁面自定義樣式區， - `<block name="header"></block>` 博客標題區 - `<block name="main"></block>` 博客內容區 - `<block name="sidebar"></block>` 側邊欄區 - `<block name="script"></block>` 頁面自定義js腳本區再將index.html 頁面改為繼承base模板的 ~~~ <extend name="Index/base" /> <block name="header"> <div class="blog-header"> <h4>{$title|default=""}</h4> </div> </block> <block name="main"> <volist name="list" id="post" key="post_k"> <assign name="tpl" value="$post.type"/> <switch name="tpl"> <case value="text"><include file="Index/text" /></case> <case value="picture"><include file="Index/picture" /></case> <case value="music"><include file="Index/music" /></case> <case value="video"><include file="Index/video" /></case> </switch> </volist> <empty name="list"> <div class="text-center"> <img src="__IMG__/logo-grey.png" alt="" width="135"> <br><br> 對不起，沒有相應的文章 </div> </empty> {$_page} </block> <block name="sidebar"> <include file="Index/post_btn" /> <div class="sidebar-module sidebar-module-inset"> <h4>熱門標簽</h4> <ul class="list-unstyled side-tracked-tag"> <volist name="tags" id="tag"> <li> <a class="followed-tag clearfix" href="{:U('/')}?tag={$tag['title']}"> <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>    <span class="">{$tag.title}</span> </a> </li> </volist> </ul> </div> <div class="sidebar-module"> <h4>歸檔</h4> <ol class="list-unstyled"> <volist name="archive" id="vo"> <li><a href="{:U($vo['link'])}">{$vo.text}</a></li> </volist> </ol> </div> </block> <block name="script"> <script type="text/javascript" src="__BOWER__/audiojs/audiojs/audio.min.js"></script> <script src="__STATIC__/swipebox/js/jquery.swipebox.js"></script> <link rel="stylesheet" href="__STATIC__/swipebox/css/swipebox.css"> <script type="text/javascript"> $(function(){ var single = audiojs; single.events.ready(function() { var a1 = single.createAll('', $('.single audio')); }); //圖片燈箱 $( '.swipebox' ).swipebox(); }) </script> </block> ~~~ 上面區塊中，很多已經是最終現在的代碼了。先無視掉。 # 總結前端實現方面主要涉及了三個問題，資源選擇、資源引入、模板套用。資源選擇大家可以參考 [代碼家園](http://www.daimajiayuan.com/)、[最代碼](http://www.zuidaima.com/) 這些個站長資源站點，時不時自己收藏一些類似于最好的jquery組件之類文章。模板套用要會用模板常量和模板繼承。后面還會講到模板include包含。