標籤：
接下來我們來製作後台，因為後台也有login登陸之類的頁面，為了和前台區分開，我們都添加一個首碼back好了。
添加路由：
第9行的href原來為
替換後為：
?
然後圖片引用用Ctrl+R來實現全部替換：
?
(6)結果，那麼我們就要讓該頁面不去使用布局檔案：
第一步，建立一個使用admin_application布局的基類，如下第二行代碼設定了要渲染的布局，這樣就不會去使用application.html.erb這個前台使用的布局檔案了。我們為了區分開，建立了一個admin目錄，把這個基類放入該目錄
（8）我們還沒有admin_application這個布局檔案，所以我們去建立這個布局檔案如下，就是把最原始的application布局檔案代碼複製過來就行，如。甚至我們只要留下<%= yield %>這行代碼就可以了，因為我們使用的純淨頁面都包含了那些<html>、<head>必要的標籤，如下（9）沒有使用前台的布局，而是使用後台自己的布局檔案admin_application.html.erb之後，效果如下
?
如上頁面顯示應該是缺少一些圖片而且Console又沒報錯，但是我們根據我們在製作前台的經驗中也知道可能是樣式檔案中有引入一些圖片但是路徑我們還沒修改，我們根據前台頁面的經驗（就是審查元素查看瀏覽器解析路徑然後就知道怎麼改了）把../img全部替換成../../img如下就是替換後的，因為登陸頁面只使用了User_Login.css這個樣式檔案，所以修改這個就正確了，但是我們還是把全部樣式檔案中的圖片引用路徑全部按照這個改了，防止後面忘記修改了（不過不用改了，因為另外兩個樣式檔案中沒有引用圖片）
?
修改後效果如下：
?
實現背景首頁
後台架構使用frameset標籤實現品字形布局
目錄結構如下，以head.html.erb為例代碼如下：
訪問頭部頁面效果為（在引用了樣式還沒引入圖片時就只有幾張無法顯示的圖片，看起來幾乎都沒有，不過沒錯，因為頭部其實就是幾張圖片組成的而已）
原來的index頁面代碼：
修改對3個頁面的引用路徑，這個很簡單但是不能寫錯，就是/控制器/頁面名，記住頁面名不要使用尾碼html.erb不然頁面會是空白，結果代碼如下：
因為後台頁面都使用admin_application.html.erb這個布局檔案，我們知道每個子頁面都有html的聲明，引用的布局也有html5的聲明，因為子頁面是替換<%= yield %>，所以合并後的頁面是html5的聲明<!DOCTYPE html>…然後才是子頁面html的聲明，因為html5的聲明在開頭所以預設頁面是html5的形式而不是老版本的html的形式。前面做的頁面都沒錯是因為相容，而html5不能使用frameset了，所以導致index頁面空白修改方法就是刪除布局中和子頁面html聲明部分作用相同的代碼即可，修改後如下：
?
這樣一來，背景大體架構已經完成了，其他頁面和功能後面慢慢完善就行。
手機商城筆記3--實現後台第一個頁面
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
