Mobile Mall Note 3--implementation of the first page in the background

Next we make the backstage, because the backstage also has login landing and so on the page, in order to and the reception area separate, we all add a prefix back good.

1. We create the controller of the background administrator, add the login action

1. Create the corresponding view folder and put the login page code of the background clean template into

To add a route:

1. Create a background CSS and IMG directory and put the styles and pictures used in the background, such as

1. Set background reference style file and picture path constants 11 rows and 12 rows

1. Replace the background login page with a path constant referring to styles and pictures

The href in line 9th was originally

Replaced by:

?

Then the picture reference uses the Ctrl+r to implement all substitutions:

?

(6) As a result, we're going to let the page not use the layout file:

1. Considering that the background should have its own layout, rather than using the same layout as the foreground, the complete steps for setting up the background page are as follows:

The first step is to create a base class that uses the Admin_application layout, where the second line of code sets the layout to be rendered so that it does not use the layout file used by the Application.html.erb foreground. We created a new admin directory for the partition, put this base class into the directory

1. Modify the background backmanager_controller.rb file, let it inherit the base class we created, note that the admin: this can not be less error, so that can achieve the layout of the rendering is just admin_application. And if you don't inherit this class, you won't be able to render the admin_application layout, so that the foreground doesn't change because a new layout is added, because the front desk won't use the layout.

（8）我们还没有admin_application这个布局文件，所以我们去新建这个布局文件如下，就是把最原始的application布局文件代码复制过来就行，如。甚至我们只要留下<%= yield %>这行代码就可以了，因为我们使用的纯净页面都包含了那些

(9) Not using the foreground layout, but using the background of their own layout file Admin_application.html.erb, the effect is as follows

?

As shown on the page should be missing some pictures and console did not error, but we also know from the experience in the production of the foreground may be the style file has introduced some pictures but the path we have not modified, We have the experience of the foreground page (that is, the review element to see the browser parsing path and then know how to change). /IMG all replaced by: /.. /IMG is replaced as follows, because the landing page only uses User_ Login.css This style file, so it is correct to modify this, but we still have all the style files in the image reference path in accordance with this change, to prevent the later forget to modify the (but do not change, because the other two style files do not reference the picture)

?

The following effects are modified:

?

Realize the background of the first page

Background framework uses FRAMESET tags for font layout

1. Defining the Controller

1. Add route

1. Create a view folder corresponding to the controller, create 4 page templates, copy the pure page code to these 4 pages, and replace the TOC constants with the style catalog as background style, and replace all the catalog constants with the background style of the picture catalog, all the same steps as before.

The directory structure is as follows, with Head.html.erb as the example code:

Access to the Head page effect is (in reference to the style has not been introduced to the picture only a few pictures can not be displayed, it seems almost none, but yes, because the head is actually a few pictures of it)

1. To modify the left and right pages in the same way, the results are as follows:

1. Changes to the index page in front of a few pages, is to modify the reference to the first 3 pages of the road is also very simple

The original index page code:

Modify the reference path to 3 pages, this is very simple but can not write wrong, is/controller/page name, remember the page name do not use suffix html.erb otherwise the page will be blank, the result code is as follows:

1. If the previous page reference does not use a suffix, the format is correct, or blank, because of the reason for the layout

因为后台页面都使用admin_application.html.erb这个布局文件，我们知道每个子页面都有html的声明，引用的布局也有html5的声明，因为子页面是替换<%= yield %>，所以合并后的页面是html5的声明<!DOCTYPE html>…然后才是子页面html的声明，因为html5的声明在开头所以默认页面是html5的形式而不是老版本的html的形式。前面做的页面都没错是因为兼容，而html5不能使用frameset了，所以导致index页面空白

Modify the method is to delete the layout and sub-page HTML declaration part of the same function of the code can be modified as follows:

1. Note: Because we used the common header footer, the old version of the HTML declaration replaced the HTML5 declaration in the layout file, the page will not be messy. In the future if you use the old version of the HTML page declaration, it is best to remove the HTML5 declaration in the layout file, otherwise the code is correct, but the page may appear to be uncoordinated.

?

In this way, the background of the general framework has been completed, and other pages and functions to gradually improve after the line.

Mobile Mall Note 3--implementation of the first page in the background