創(chuàng)建模板與關(guān)聯(lián)數(shù)據(jù)庫

時間：2023-06-09 23:48:02 | 來源：網(wǎng)站運營

時間：2023-06-09 23:48:02 來源：網(wǎng)站運營

創(chuàng)建模板與關(guān)聯(lián)數(shù)據(jù)庫：上一篇我把插件與網(wǎng)頁模板給放到了public目錄與application/index/view/index/index.html下了，網(wǎng)頁模板路徑倒是比較長，畢竟用的是別人家的框架而不是自己開發(fā)的，雖說真要自己開發(fā)難度倒不大，最基本的東西也就是數(shù)據(jù)庫IO與目錄結(jié)構(gòu)了。

現(xiàn)在的話我已經(jīng)把首頁模板給處理完了，效果如下

我簡要說明一下自己的處理方法，也就是把網(wǎng)頁模板里的不重要的東西全部刪除。

接下來就是比較關(guān)鍵的東西了，思路我是按照以前開發(fā)的CMS來搞的，所以看起來可能會比較奇怪吧，根據(jù)自己的習(xí)慣來就好。

左邊的側(cè)邊欄我暫時不理會，先把首頁的東西搞定，我在AdminLTE里找了個模板

<div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div></div>我個人喜歡把首頁的設(shè)定為SEO的相關(guān)數(shù)據(jù)，修改了一下變成

<div class="form-group"> <label for="web_name" class="col-sm-2 control-label">網(wǎng)站名稱</label> <div class="col-sm-10"> <input type="text" class="form-control" id="web_name"> </div></div>重復(fù)幾個分別變成keywords、description，效果如下

這種布局看起來并不好看，不過目前還是開發(fā)效率優(yōu)先，優(yōu)化等之后再說，就是旁邊的系統(tǒng)監(jiān)視器有點擋視線。

現(xiàn)在有了三個字段，而且字段必須要與數(shù)據(jù)庫記錄綁定才能動態(tài)修改數(shù)據(jù)。

本來我還不想設(shè)計SEO部分的，不過出于習(xí)慣，并且搞這個數(shù)據(jù)非常簡單所以就從這個開始了。

現(xiàn)在我在數(shù)據(jù)庫里新建了一張系統(tǒng)表（system）：ID、系統(tǒng)字段名、系統(tǒng)字段值

我現(xiàn)在在仨字段下面加一個“保存”按鈕

為了測試數(shù)據(jù)方便，我把服務(wù)器上的數(shù)據(jù)庫拷貝到本地，以后寫文章就連本地測試數(shù)據(jù)庫就可以了，等最后要上線了再把東西拷貝一份到服務(wù)器上就可以了。

現(xiàn)在我再新建一個main.js文件到public目錄中，由首頁模板文件導(dǎo)入，在JS文件里寫“保存”的點擊事件，提交數(shù)據(jù)為了外觀的好看，我采用Ajax動態(tài)修改數(shù)據(jù)。

有一件事我現(xiàn)在才發(fā)現(xiàn)，AdminLTE是后臺管理系統(tǒng)的模板，而我放到了index分組下，我試了一下，如果放到了admin分組下，會出現(xiàn)靜態(tài)資源的導(dǎo)入問題，我們先把手頭上的問題搞定所以先在index分組下開發(fā)，等后臺管理開發(fā)完畢了再移動到admin分組下。

我先在admin分組的admin模塊中創(chuàng)建change_seo方法

代碼我先這么寫了，以后要有問題再改就是了，目前我也是在考慮開發(fā)一個什么東西能達到代碼0問題的效果。

我想通過Ajax異步獲取數(shù)據(jù)并操作DOM，Ajax用jQuery來實現(xiàn)更方便，jQuery是非常簡單的JS框架，Ajax功能我只用三種方法：$.ajax，$.post，$.get，后兩種我平時不太用了，現(xiàn)在統(tǒng)一使用$.ajax，功能更健全?，F(xiàn)在我把自己的代碼貼出來：

seo_save就是那個保存按鈕，在點擊后禁用以防止重復(fù)發(fā)起請求引起沖突，這也是我的個人習(xí)慣。

由于這個模塊是在Admin分組下的，所以我就直接寫在了Admin下，以后我還會把后臺的模板調(diào)整到Admin下，現(xiàn)在的話臨時先在Index下調(diào)試，Index可以訪問Admin的控制器。

由于在數(shù)據(jù)庫中還沒有相關(guān)記錄，所以我就手動建三個，以后就操作這三個了。

現(xiàn)在讓我來測試一下“保存”按鈕是否可用。

看來沒有什么用，那就讓我們來看看是什么原因，排錯的方法有很多，我個人喜歡查日志，日志文件就在runtime/log/日期下

我們直接看最后一段日志信息，這個日志記錄是自上而下的，每次操作都會記錄，在開發(fā)環(huán)境下最好還是開著方便調(diào)試。

第一段是執(zhí)行的文件
第二段是加載文件的信息
第三段是使用的語言包
第四段是路由信息
第五段是請求信息
第六段是參數(shù)列表
第七段。。。感覺沒啥意義，忽略了

因為在執(zhí)行的文件里并沒有Admin的路由，所以我們可以認為控制器沒有執(zhí)行，我先看看控制臺的情況

發(fā)現(xiàn)系統(tǒng)沒有找到這個文件，好吧這是我的鍋，為了結(jié)構(gòu)可讀性我把main.js扔到了public/static下了，現(xiàn)在先不用關(guān)心可讀性的問題，實現(xiàn)功能才是第一步，完美主義傾向還是忍一下吧，把main.js從static目錄移到public下刷新沒有這個問題了，我再輸入表單數(shù)據(jù)并保存一下。

卡了兩分多鐘終于活過來了，鬼知道為什么卡成這樣的呢。。。

不過。。。又失敗了，不過沒關(guān)系，失敗了就等于還需要改進，再看一下日志。

現(xiàn)在的話日志信息感覺有點亂了，我們可以直接把日志文件刪除再試一次，日志文件就會重新建立了。

剛要刪除文件呢，我好像想起了一些什么事，看了一下main.js，發(fā)現(xiàn)自己搞錯了，忘了寫type: 'POST'了，這請求默認是GET，所以才會卡兩分鐘還操作失敗，我在后端寫的時候是取POST參數(shù)的，現(xiàn)在我加上了這個參數(shù)再看一下。

看來還是不行，不過就這幾次失敗我已經(jīng)順便把一些知識點講了一下，剩下的我就自己看一下是什么原因，然后再整理出來吧。。。

---

原因已經(jīng)找到了，果然是好久沒用TP5了，已經(jīng)很手生了，很多地方的東西都沒注意到。

在application/database.php里還需要配置數(shù)據(jù)庫，順便把main.js做了一些修改，我這里貼一下數(shù)據(jù)庫配置信息與修改后的main.js

我這里只講一下最難理解的部分

$(data.responseText).find('.message').html()首先在Ajax的error里錯誤信息都是保存到responseText中的，data這個名字倒無所謂，寫其他的名字也可以，就是responseText別寫錯了。

后面的比較難理解，我用的是TP5，如果出現(xiàn)了錯誤會出現(xiàn)一個錯誤頁面，哪怕是Ajax也會把頁面的所有代碼全部返回，我們?yōu)榱烁玫挠^察錯誤信息所以就查找類為message的元素并將html代碼取出來，取出來的就是比較直觀的錯誤信息了。

現(xiàn)在再保存一下，沒有卡住，這是個好兆頭，然后打開phpMyAdmin看看數(shù)據(jù)

三條數(shù)據(jù)全部都更新了，以后的話每點一次保存都會對所有數(shù)據(jù)進行更新了，當然因為這里只有三條，所以在JS端手寫三條也就可以了，還不需要針對性更新。

更新已經(jīng)完成了，但頁面刷新后三個文本框又會為空，這就需要后端在打開頁面的時候把數(shù)據(jù)都取出來扔到文本框中了。我們回到application/index/controller/Index.php，寫以下代碼：

db是TP5下的助手函數(shù)，參數(shù)為表名，field是字段函數(shù)，寫字段用的，select就是操作方式了，與SQL里的SELECT一樣，就是查詢數(shù)據(jù)的函數(shù)。

assign的意思是分配，這里是要把$data變量賦值到data中，這樣前臺就可以用$data變量了，這是框架中的機制，利用的是PHP中的extract，很好理解的，我在開發(fā)自己的框架的時候也是用的這個方法達到控制器與視圖分離的效果的，其中還包括了require關(guān)鍵字。

前端代碼我也貼一下，這個就更簡單了，直接無腦寫value就行了

現(xiàn)在可以上最終的效果了，現(xiàn)在不管刷新多少次，文本框里總是數(shù)據(jù)庫中的對應(yīng)的數(shù)據(jù)了

這篇到這里就結(jié)束了，下一篇將會講解文章分類與鏈表結(jié)構(gòu)轉(zhuǎn)樹結(jié)構(gòu)