目錄結構

前言

一、安裝

二、配置成可以自己使用的后臺模板

三、添加自己的后臺模塊

四、關于數據庫設計

五、請求接口返回403

六、解決列表頁顯示的是分類ID而不是分類名稱

七、為什么添加和修改都不管用了？

八、列表字段顯示的為英文

九、如何在一個模板上設置按鈕，然后顯示設置的表格

十、關于數據庫字段設置為state查詢條件沒用

十一、設置的enum類型頁面怎么是下拉框，不是單選框

十二、發起ajax成功后如何實現刷新數據

前言

本文會對fastadmin進行簡單安裝和配置，并且對fastadmin在使用過程中遇到的問題全程記錄。

如你也有相關的問題，那么就評論區見

一、安裝

下載地址：https://www.fastadmin.net/download.html?ref=docs

咔咔這里使用的使用源碼安裝方式，比較方便。

點擊上邊的下載地址，然后下載源碼包，進行解壓。

然后將解壓的文件放置到php環境目錄中。

配置phpstudy虛擬域名。

這里一定要注意你的PHP環境。

“

PHP >= 7.1 且 = 5.5.0 (需支持innodb引擎) apache 或 nginx pdo PHP Extension MBstring PHP Extension cURL PHP Extension Node.JS (可選,用于安裝Bower和less,同時打包壓縮也需要使用到) composer (可選,用于管理第三方擴展包) Bower (可選,用于管理前端資源) Less (可選,用于編輯less文件,如果你需要增改css樣式,最好安裝上)

”

這里咔咔配置的地址是www.fast.com。

然后直接訪問www.fast.com/install.php即可

接下來就是填寫一些數據庫信息即可。

安裝成功的后臺樣子。

這里你可以看到上邊有一個小提示，這個提示在安裝成功后的后臺訪問目錄是一串自動生成的目錄。

就是因為咔咔將目錄地址改為了admin然后給的提示。

這里將admin改為fastadmin，在來看一下。

這樣就可以正常的使用了。

二、配置成可以自己使用的后臺模板

可以根據上邊的這個圖來看，菜單中有很多都是不需要的，接下來就進行刪除。

舉個例子刪除插件管理的這一個菜單。

刪除代碼里邊所有關于插件的代碼，這里的地址可以在瀏覽器中看到

然后在后臺的菜單管理中，將插件的這個選項刪除掉即可。

其余的菜單都是一樣的，由于這個插件的是沒有表的，所以就沒有涉及到表結構刪除。

三、添加自己的后臺模塊

創建一級文件：php think crud -t picture -u 1

創建一個二級文件夾：php think crud -t video -c video/video -u 1

創建駝峰的文件：php think crud -t video_subject -c video/videoSubject -u 1

刪除二級文件目錄：php think crud -t picture -d picture/picture -u 1

四、關于數據庫設計

使用圖片上傳功能

image smallimage varchar 識別為圖片文件，自動生成可上傳圖片的組件,單圖

images smallimages varchar 識別為圖片文件，自動生成可上傳圖片的組件,多圖

createtime 創建時間 int 記錄添加時間字段,不需要手動維護

updatetime 更新時間 int 記錄更新時間的字段,不需要手動維護

text 文本型自動生成textarea文本框

weigh 權重 int 后臺的排序字段，如果存在該字段將出現排序按鈕，可上下拖動進行排序

五、請求接口返回403

將以下代碼添加到api基類即可

<span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span>header(<span class="hljs-string" style="color: #98c379; line-height: 26px;">"Access-Control-Allow-Methods:?*"</span>);<br>header(<span class="hljs-string" style="color: #98c379; line-height: 26px;">'Access-Control-Allow-Origin:?域名'</span>);<br>header(<span class="hljs-string" style="color: #98c379; line-height: 26px;">"access-control-allow-credentials:?true"</span>);<br><span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?響應頭設置</span><br><span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');</span><br><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">if</span>?($_SERVER[<span class="hljs-string" style="color: #98c379; line-height: 26px;">'REQUEST_METHOD'</span>]?==?<span class="hljs-string" style="color: #98c379; line-height: 26px;">'OPTIONS'</span>){<br>????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?瀏覽器頁面ajax跨域請求會請求2次，</span><br>????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?第一次會發送OPTIONS預請求,不進行處理，直接exit返回，</span><br>????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?但因為下次發送真正的請求頭部有帶token，</span><br>????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//?所以這里設置允許下次請求頭帶token否者下次請求無法成功</span><br>????header(<span class="hljs-string" style="color: #98c379; line-height: 26px;">'Access-Control-Allow-Headers:x-requested-with,content-type,token,userid,laravelsession'</span>);<br>????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">exit</span>(<span class="hljs-string" style="color: #98c379; line-height: 26px;">"ok"</span>);<br>}<br>

然后將跨域檢測注釋掉

六、解決列表頁顯示的是分類ID而不是分類名稱

其實這個問題很好解決，不要想的太過復雜。

你可以試想一下在thinkphp框架是怎么解決這個問題的。

在thinkphp中解決這個問題就是使用獲取器來處理的。

只需要在對應的模型中設置獲取器即可。

頁面顯示

但是真的是這樣處理的嗎？不要一看數據出來了，就萬事大吉了。

你可以思考一下，在index頁面沒有顯示出分類的名字，但是在修改時卻出現了名字。

那么是不是可以得出的結論為首頁沒有使用獲取器，而add、edit頁面使用了獲取器。

若按照上邊的方法，直接暴力的在模型中添加獲取器，會造成一個非常嚴重的問題，那就是修改會無法顯示數據。不信你可以試一下。

就跟下圖一樣，這不是鬧玩呢木。

所以說這種方案肯定不行。

試想一下，在thinkphp框架中，除了獲取器可以表字段處理外，同樣使用模型關聯也可以。當然用最原始的json方法也是可以的。

在fastadmin中，控制器的方法都繼承于application/admin/library/traits/Backend.php這個文件中。

在這個文件中可以看到index方法

那只能做的一件事情就是在需要顯示分類名稱的控制器中重寫這個方法index唄！

在重寫之前需要做的一件事情就是需要在對應的模型中寫上模型關聯

然后在你需要的控制器上重寫index代碼

源碼

<span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span>????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">/**<br>?????*?查看<br>?????*/</span><br>????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">public</span>?<span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">function</span>?<span class="hljs-title" style="color: #61aeee; line-height: 26px;">index</span><span class="hljs-params" style="line-height: 26px;">()</span><br>????</span>{<br>????????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//設置過濾方法</span><br>????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;request-&gt;filter([<span class="hljs-string" style="color: #98c379; line-height: 26px;">'strip_tags'</span>,?<span class="hljs-string" style="color: #98c379; line-height: 26px;">'trim'</span>]);<br>????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">if</span>?(<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;request-&gt;isAjax())?{<br>????????????<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">//如果發送的來源是Selectpage，則轉發到Selectpage</span><br>????????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">if</span>?(<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;request-&gt;request(<span class="hljs-string" style="color: #98c379; line-height: 26px;">'keyField'</span>))?{<br>????????????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span>?<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;selectpage();<br>????????????}<br>????????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">list</span>($where,?$sort,?$order,?$offset,?$limit)?=?<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;buildparams();<br><br>????????????$list?=?<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;model<br>????????????????-&gt;with(<span class="hljs-string" style="color: #98c379; line-height: 26px;">'category'</span>)<br>????????????????-&gt;where($where)<br>????????????????-&gt;order($sort,?$order)<br>????????????????-&gt;paginate($limit);<br>????????????$result?=?<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">array</span>(<span class="hljs-string" style="color: #98c379; line-height: 26px;">"total"</span>?=&gt;?$list-&gt;total(),?<span class="hljs-string" style="color: #98c379; line-height: 26px;">"rows"</span>?=&gt;?$list-&gt;items());<br><br>????????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span>?json($result);<br>????????}<br>????????<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span>?<span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">$this</span>-&gt;view-&gt;fetch();<br>????}<br>

到這里可并沒有萬事大吉啊！還需要修改模板，在對應的js文件中添加即可

<span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span>{field:?<span class="hljs-string" style="color: #98c379; line-height: 26px;">'category.name'</span>,?title:?__(<span class="hljs-string" style="color: #98c379; line-height: 26px;">'分類名稱'</span>),?formatter:Table.api.formatter.search},<br>

文檔中說是還需要設置屬性設置屬性protected $relationSearch = true;，反正咔咔測試設置不設置都一樣，你們看著來，目前還沒發現這個參數到底是控制什么的。官方文檔說是控制開啟關聯查詢，但是經測試，好像沒什么大礙。

來看一下最終結果吧！

如果只是一對一那解決方案會有很多種。

你可以使用json來直接查詢，同樣你也可以循環查詢出來的數據，然后根據每個分類ID進行查詢出對應的分類名即可。

七、為什么添加和修改都不管用了？

這里的問題首先去看看數據庫的表結構，看你的表結構是否有問題。

表結構不要設置為field_id結尾，這樣的字段是不可以的。

直接暴力就是fieldId即可。

關于這塊后期看一下fastadmin源碼，看是不是后綴帶id的都會做什么操作。

經過看源碼得出的結論。

fastadmin在一鍵curd時會將后綴為_id的字段識別為表外鍵，在新增記錄時無論填入任何值都和報錯“xxx_id不能為空”，這是因為fastadmin將其識別為了外鍵在add.html語句中這個字段的input是這樣的：

<span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><input class="hljs-string" style="color: #98c379; line-height: 26px;">"c-xxx_id"?data-rule=<span class="hljs-string" style="color: #98c379; line-height: 26px;">"required"</span>?data-source=<span class="hljs-string" style="color: #98c379; line-height: 26px;">"xxx/index"</span>?<span class="hljs-class" style="line-height: 26px;"><span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">class</span>="<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">form</span>-<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">control</span>?<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">selectpage</span>"?<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">data</span>-<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">field</span>="<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">name</span>"?<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">name</span>="<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">row</span>[<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">xxx_id</span>]"?<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">type</span>="<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">text</span>"?<span class="hljs-title" style="color: #e6c07b; line-height: 26px;">value</span>=""&gt;<br><br></span>

八、列表字段顯示的為英文

這個問題就很簡單了，咔咔沒有看源碼理解就是語言包沒有你設置的這個字段名。

直接打開到對應的js文件，然后修改初始化表格中的title值即可。

修改完之后就可以看到中文名了。

九、如何在一個模板上設置按鈕，然后顯示設置的表格

先看實現效果，點擊回收站之后彈出一個表格。

那么如何給自己需要的模板設置同樣的效果呢？

接下來就使用官方給的案例進行解讀。

首先來到test的index模板中可以看到回收站的這個按鈕。

這里需要注意這個herf的值，如果是自己自定義的按鈕直接把title替換成自己設置的名字即可。

接著來到test的js模板，在這個js中你能看到出了index初始化表格外，還存在一個recyclebin這個方法。

如果你不想寫直接把這個方法拿過去即可，但是一定要修改url地址哈！

但是此時做的這些修改遠遠還是不夠的，還需要控制器，那么test的recyclebin的這個方法是在application/admin/library/traits/Backend.php這個文件里邊。

如果你想設置你自己的方法，那么你需要在控制器新增加一個方法，然后把這個文件中的index方法代碼復制過來即可。

既然有了控制器，有了js創建了表格，那么還缺什么呢！

還缺一個模板嘍！創建一個跟你的方法名一樣的html文件，然后隨便復制一個index.html模板進去即可。

在復制的時候只留下這些代碼，其余的就可以刪除了，咔咔測試如果加上上邊的代碼會出現無法訪問的情況。

html文件名的設置就跟下圖一樣

做完這些工作那就可以看到你想要的東西了。

實現步驟

在控制器Test中寫需要顯示列表的方法，例如display方法
創建了控制器就需要創建跟display方法對應的display.html模板文件
html模板文件的創建位置是在Test目錄下
找到Test的js文件，然后添加display方法，這個方法不會寫的話就直接使用案例中test.js中的recyclebin
然后就大功告成了

如果你還不會那么就只能私信咔咔了，哈哈

這里有個注意點就是如果你是用的test.js方法中的recyclebin，那么會存在一個問題就是操作的按鈕問題。

這個按鈕就是在recyclebin的初始化表格中設置的，自行設置即可。

也就是換換classname和名字即可。

修改完后的圖，只要細心這個框架使用起來還是非常順手的。

十、關于數據庫字段設置為state查詢條件沒用

如果你發現你對state這個字段設置where條件后沒有效果時，試著查詢一條數據，然后看一下這個state類型

<span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span>string(<span class="hljs-number" style="color: #d19a66; line-height: 26px;">1</span>)?<span class="hljs-string" style="color: #98c379; line-height: 26px;">"1"</span><br>

如果類型是上邊打印的結果，那么你就要注意了，在查詢條件中需要寫上”1″ ，也就是字符串1，而非整型1。

看到這里是不是恍然大悟，趕緊去改你的查詢條件吧！