By

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:实现后台与前台分离
    3. 2.3. Step 3: 实作后台样式admin.html.erb
    4. 2.4. Step 4:实作后台所需的header
    5. 2.5. Step 5:修改前台navbar，增加管理平台链接
    6. 2.6. Step 6:将变更 commit 进去 git 里面。
  3. 3. 本章详解

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

实现前后台分离

步骤

Step 0:建立新分支

在终端执行

checkout -b story10```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
### Step 1:准备后台开发所需的路由
打开config/routes.rb,增加后台所需的路由
```ruby config/routes.rb
  namespace :admin do
    resources :products
+   resources :categories
    resources :orders do
      member do
        post :cancel
        post :ship
        post :shipped
        post :return
      end
    end
  end

Step 2:实现后台与前台分离

在终端执行

g controller admin::base```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
打开app/controllers/admin/base_controller.rb，添加如下代码
```ruby app/controllers/admin/base_controller.rb
class Admin::BaseController < ActionController::Base
  layout 'layouts/admin'
  before_action :authenticate_user!
  before_action :admin_required
  def admin_required
   if !current_user.admin?
     redirect_to "/", alert: "You are not admin."
   end
  end
end

在终端执行

g controller admin::categories index new```。
1
2
3
4
5
打开app/controllers/admin/categories_controller.rb，修改其父辈controller
```ruby app/controllers/admin/categories_controller.rb
-  class Admin::ProductsController < ApplicationController
+  class Admin::ProductsController < Admin::BaseController

在终端执行

1
2
3
4
5
6
7
8
打开app/controllers/admin/categories_controller.rb，修改其父辈controller
```ruby app/controllers/admin/categories_controller.rb
class Admin::SessionsController < Admin::BaseController
  def new
  end
end

打开config/routes.rb,增加后台首页

config/routes.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
  namespace :admin do
+   root 'sessions#new'
    resources :products
    resources :categories
    resources :orders do
      member do
        post :cancel
        post :ship
        post :shipped
        post :return
      end
    end
  end

打开app/controllers/admin/orders_controller.rb，修改其父辈controller

app/controllers/admin/categories_controller.rb
1
2
3
4
5
6
-  class Admin::OrdersController < ApplicationController
+  class Admin::OrdersController < Admin::BaseController
-    layout "admin"
-    before_action :authenticate_user!
-    before_action :admin_required

打开app/controllers/admin/products_controller.rb，修改其父辈controller

app/controllers/admin/products_controller.rb
1
2
3
4
5
6
7
-  class Admin::ProductsController < ApplicationController
+  class Admin::ProductsController < Admin::BaseController
-    layout "admin"
-    before_action :authenticate_user!
-    before_action :admin_required

Step 3: 实作后台样式admin.html.erb

打开app/views/layouts/admin.html.erb

app/views/layouts/admin.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <title>MONSOON - 管理平台</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= render "common/adminheader" %>
    <%= render "common/flashes" %>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

Step 4:实作后台所需的header

在终端执行

app/views/common/_adminheader.html.erb```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
打开app/views/common/_adminheader.html.erb，增加如下代码
```ruby app/views/common/_adminheader.html.erb
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="# %>">管理平台</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">后台说明 <span class="sr-only">(current)</span></a></li>
        <li><a href="<%= admin_categories_path %>">分类管理</a></li>
        <li><a href="<%= admin_products_path %>">商品管理</a></li>
        <li><a href="<%= admin_orders_path %>">订单管理</a></li>
        <li><a href="<%= admin_categories_path %>">拍卖管理</a></li>
        <li><a href="<%= root_path %>">返回前台</a></li>
        <li><%= link_to(content_tag(:i, '登出', class: 'fa fa-sign-out'),
            destroy_user_session_path, method: :delete) %>
        </li>
      </ul>
    </div>
  </div>
</nav>

Step 5:修改前台navbar，增加管理平台链接

打开app/views/common/_navbar.html.erb

app/views/common/_navbar.html.erb
1
2
3
4
5
6
7
8
9
10
11
    <ul class="dropdown-menu">
         <% if current_user.admin? %>
           <li>
-             <%= link_to("后台管理", "admin_products_path" ) %>
+             <%= link_to('后台管理<span class="glyphicon glyphicon-stats pull-right">'.html_safe,
                         admin_root_path) %>
           </li>
           <li role="separator" class="divider"></li>
           <li>
              <%= link_to("我的订单", account_orders_path ) %>
           </li>

Step 6:将变更 commit 进去 git 里面。

1
2
3
4
5
6
git add .
git commit -m "实现后台与前台分离"
git push origin story10
git checkout master
git merge story10
git push origin master

本章详解

努力更新中，上班族请理解。。。。。

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:实现后台与前台分离
    3. 2.3. Step 3: 实作后台样式admin.html.erb
    4. 2.4. Step 4:实作后台所需的header
    5. 2.5. Step 5:修改前台navbar，增加管理平台链接
    6. 2.6. Step 6:将变更 commit 进去 git 里面。
  3. 3. 本章详解