08 管理平臺開發(fā)
09 管理平臺：分類管理開發(fā)
10 管理平臺 商品管理
11 管理平臺 商品圖片管理
12 分類和商品頁面開發(fā)
13 購物車功能開發(fā)
08 管理平臺開發(fā)
去除默認(rèn)的routes的設(shè)定
#config/application.rb
config.generators do |generator|
generator.skip_routes true
end
routes.rb中建立獨立的admin路由
namespace :admin do
root "sessions#new"
resources :sessions
resources :categories
end
終端創(chuàng)建controller
rails g controller admin::sessions new #會自動生成routes,但是前面已經(jīng)skip routes了
rails g controller admin::categories index new
針對controller層，為了代碼看起來更有邏輯性酱畅，可以生成一個Admin::BaseController繼承于ApplicationController则拷，Admin::SessionsController和Admin::CategoriesController同時繼承于這個類。
針對view層甩牺，建立views/admin文件夾蘑志，其中建立layouts目錄，這是針對管理平臺頁面的布局贬派，其中建立頭文件_menu.html.erb文件和布局文件admin.html.erb文件急但。
_menu.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="<%= admin_root_path %>">管理平臺</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="<%= admin_root_path %>">Home <span class="sr-only">(current)</span></a></li>
<li><a href="<%= admin_categories_path %>">分類</a></li>
</ul>
</div>
</div>
</nav>
admin.html.erb代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>管理平臺 - 蛋人商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<%= csrf_meta_tags %>
<!--下面會新增admin這個css文件-->
<%= stylesheet_link_tag 'admin', media: 'all' %>
<%= yield :stylesheets %>
</head>
<body>
<%= render 'admin/layouts/menu' %>
<div class="container">
<% unless flash[:notice].blank? %>
<div class="alert alert-info"><%= flash[:notice] %></div>
<% end -%>
<%= yield %>
</div>
<!--下面會新增admin.js這個js文件-->
<%= javascript_include_tag 'admin' %>
<%= yield :javascripts %>
</body>
</html>
對父模板進(jìn)行引用
#base_controller.rb
class Admin::BaseController < ActionController::Base
layout "admin/layouts/admin"
end
因為為后臺添加了樣式，所以針對這個新的樣式添加新的css和js文件搞乏。
#app/assets/javascripts/admin.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree . #這句代碼需刪除波桩，因為這句代碼會把javascript中所有的js代碼都加載進(jìn)去，application.js中也刪除該代碼
##app/assets/javascripts/admin.scss
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";
因為會獨立引用css和js文件查描，所以需要對預(yù)編譯文件進(jìn)行配置
#config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(
admin.js
admin.css
)
09 管理平臺：分類管理開發(fā)
category的model,controller,view層的開發(fā),這里有一級分類和二級分類突委。
product.rb
class Category < ApplicationRecord
validates :title, presence: { message: "名稱不能為空" }
validates :title, uniqueness: { message: "名稱不能重復(fù)" }
has_ancestry orphan_strategy: :destroy
has_many :products, dependent: :destroy
before_validation :correct_ancestry
private
def correct_ancestry
self.ancestry = nil if self.ancestry.blank?
end
end
categories_controller.rb
class Admin::CategoriesController < Admin::BaseController
before_action :find_root_categories, only: [:new, :create, :edit, :update]
before_action :find_category, only: [:edit, :update, :destroy]
def index
if params[:id].blank?
@categories = Category.roots
else
@category = Category.find(params[:id])
@categories = @category.children
end
@categories = @categories.page(params[:page] || 1).per_page(params[:per_page] || 10)
.order(id: "desc")
end
def new
@category = Category.new
end
def create
@category = Category.new(params.require(:category).permit!)
if @category.save
flash[:notice] = "保存成功"
redirect_to admin_categories_path
else
render action: :new
end
end
def edit
render action: :new
end
def update
@category.attributes = params.require(:category).permit!
if @category.save
flash[:notice] = "修改成功"
redirect_to admin_categories_path
else
render action: :new
end
end
def destroy
if @category.destroy
flash[:notice] = "刪除成功"
redirect_to admin_categories_path
else
flash[:notice] = "刪除失敗"
redirect_to :back
end
end
private
def find_root_categories
@root_categories = Category.roots.order(id: "desc")
end
def find_category
@category = Category.find(params[:id])
end
end
views/admin/categories/new.html.erb和index.html.erb
#new.html.erb
<div>
<h1><%= @category.new_record? ? "新建分類" : "修改分類 ##{params[:id]}" %></h1>
</div>
<div class="form-body">
<%= form_for @category,
url: (@category.new_record? ? admin_categories_path : admin_category_path(@category)),
method: (@category.new_record? ? 'post' : 'put'),
html: { class: 'form-horizontal' } do |f| %>
<% unless @category.errors.blank? %>
<div class="alert alert-danger">
<ul class="list-unstyled">
<% @category.errors.messages.values.flatten.each do |error| %>
<li><i class="fa fa-exclamation-circle"></i> <%= error %></li>
<% end -%>
</ul>
</div>
<% end -%>
<div class="form-group">
<label for="ancestry" class="col-sm-2 control-label">所屬分類:</label>
<div class="col-sm-5">
<select name="category[ancestry]">
<option></option>
<% @root_categories.each do |category| %>
<!--不能為自己的父類-->
<% next if category == @category %>
<option value="<%= category.id %>" <%= @category.ancestry == category.id.to_s ? 'selected' : '' %>><%= category.title %></option>
<% end -%>
</select>
為空為一級分類
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">名稱:*</label>
<div class="col-sm-5">
<%= f.text_field :title, class: "form-control" %>
</div>
</div>
<div class="form-group">
<label for="weight" class="col-sm-2 control-label">權(quán)重:</label>
<div class="col-sm-5">
<%= f.text_field :weight, class: "form-control" %> 數(shù)值越大越靠前
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<%= f.submit (@category.new_record? ? "新建分類" : "編輯分類"), class: "btn btn-default" %>
</div>
</div>
<% end -%>
</div>
#index.html.erb
<div>
<div class="pull-right">
<%= link_to "新建分類", new_admin_category_path, class: "btn btn-primary" %>
</div>
<h1>
<% if @category %>
分類:<%= @category.title %>(<%= @categories.total_entries %>)
<% else %>
分類(<%= @categories.total_entries %>)
<% end -%>
</h1>
</div>
<div>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>名稱</th>
<th>Weight</th>
<th></th>
</tr>
<% @categories.each do |category| %>
<tr>
<td><%= category.id %></td>
<td><%= category.title %></td>
<td><%= category.weight %></td>
<td align="right">
<%= link_to "編輯", edit_admin_category_path(category) %>
<%= link_to "刪除", admin_category_path(category), method: :delete, 'data-confirm': "確認(rèn)刪除嗎?" %>
<% if category.root? %>
<%= link_to "查看子分類", admin_categories_path(id: category) %>
<% end -%>
</td>
</tr>
<% end -%>
</table>
<%= will_paginate @categories %>
</div>
10 管理平臺 商品管理
product.rb模型描述
#product.rb
class Product < ApplicationRecord
validates :category_id, presence: { message: "分類不能為空" }
validates :title, presence: { message: "名稱不能為空" }
validates :status, inclusion: { in: %w[on off],
message: "商品狀態(tài)必須為on | off" }
validates :amount, numericality: { only_integer: true,
message: "庫存必須為整數(shù)" },
if: proc { |product| !product.amount.blank? }
validates :amount, presence: { message: "庫存不能為空" }
validates :msrp, presence: { message: "MSRP不能為空" }
validates :msrp, numericality: { message: "MSRP必須為數(shù)字" },
if: proc { |product| !product.msrp.blank? }
validates :price, numericality: { message: "價格必須為數(shù)字" },
if: proc { |product| !product.price.blank? }
validates :price, presence: { message: "價格不能為空" }
validates :description, presence: { message: "描述不能為空" }
belongs_to :category
before_create :set_default_attrs
module Status
On = 'on'
Off = 'off'
end
private
def set_default_attrs
self.uuid = RandomCode.generate_product_uuid
end
end
products_controller.rb描述
class Admin::ProductsController < Admin::BaseController
before_action :find_product, only: [:edit, :update, :destroy]
def index
@products = Product.page(params[:page] || 1).per_page(params[:per_page] || 10)
.order("id desc")
end
def new
@product = Product.new
@root_categories = Category.roots
end
def create
@product = Product.new(params.require(:product).permit!)
@root_categories = Category.roots
if @product.save
flash[:notice] = "創(chuàng)建成功"
redirect_to admin_products_path
else
render action: :new
end
end
def edit
@root_categories = Category.roots
render action: :new
end
def update
@product.attributes = params.require(:product).permit!
@root_categories = Category.roots
if @product.save
flash[:notice] = "修改成功"
redirect_to admin_products_path
else
render action: :new
end
end
def destroy
if @product.destroy
flash[:notice] = "刪除成功"
redirect_to admin_products_path
else
flash[:notice] = "刪除失敗"
redirect_to :back
end
end
private
def find_product
@product = Product.find(params[:id])
end
end
設(shè)置常量的值
#product.rb
class Product < ApplicationRecord
module Status
On = 'on'
Off = 'off'
end
end
設(shè)置new.html.erb和index.html.erb
#index.html.erb
<div>
<div class="pull-right">
<%= link_to "新建商品", new_admin_product_path, class: "btn btn-primary" %>
</div>
<h1>
商品(<%= @products.total_entries %>)
</h1>
</div>
<div>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>名稱</th>
<th>UUID/SKU</th>
<th>MSRP</th>
<th>Price</th>
<th>庫存</th>
<th>狀態(tài)</th>
<th></th>
</tr>
<% @products.each do |product| %>
<tr>
<td><%= product.id %></td>
<td><%= product.title %></td>
<td><%= product.uuid %></td>
<td><%= product.msrp %></td>
<td><%= product.price %></td>
<td><%= product.amount %></td>
<td><%= product.status %></td>
<td align="right">
<%= link_to "編輯", edit_admin_product_path(product) %>
<%= link_to "刪除", admin_product_path(product), method: :delete, 'data-confirm': "確認(rèn)刪除嗎?" %>
</td>
</tr>
<% end -%>
</table>
<%= will_paginate @products %>
</div>
#new.html.erb
<div>
<h1><%= @product.new_record? ? "新建商品" : "修改商品 ##{params[:id]}" %></h1>
</div>
<div class="form-body">
<%= form_for @product,
url: (@product.new_record? ? admin_products_path : admin_product_path(@product)),
method: (@product.new_record? ? 'post' : 'put'),
html: { class: 'form-horizontal' } do |f| %>
<% unless @product.errors.blank? %>
<div class="alert alert-danger">
<ul class="list-unstyled">
<% @product.errors.messages.values.flatten.each do |error| %>
<li><i class="fa fa-exclamation-circle"></i> <%= error %></li>
<% end -%>
</ul>
</div>
<% end -%>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">名稱:*</label>
<div class="col-sm-5">
<%= f.text_field :title, class: "form-control" %>
</div>
</div>
<div class="form-group">
<label for="category_id" class="col-sm-2 control-label">所屬分類:</label>
<div class="col-sm-5">
<select name="product[category_id]">
<option></option>
<% @root_categories.each do |category| %>
<optgroup label="<%= category.title %>"></optgroup>
<% category.children.each do |sub_category| %>
<option value="<%= sub_category.id %>" <%= @product.category_id == sub_category.id ? 'selected' : '' %>><%= sub_category.title %></option>
<% end -%>
<% end -%>
</select>
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">上下架狀態(tài):*</label>
<div class="col-sm-5">
<select name="product[status]">
<% [[Product::Status::On, '上架'], [Product::Status::Off, '下架']].each do |row| %>
<option value="<%= row.first %>" <%= 'selected' if @product.status == row.first %>><%= row.last %></option>
<% end -%>
</select>
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-2 control-label">庫存*:</label>
<div class="col-sm-5">
<%= f.text_field :amount, class: "form-control" %> 必須為整數(shù)
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-2 control-label">價格*:</label>
<div class="col-sm-5">
<%= f.text_field :price, class: "form-control" %>
</div>
</div>
<div class="form-group">
<label for="msrp" class="col-sm-2 control-label">MSRP*:</label>
<div class="col-sm-5">
<%= f.text_field :msrp, class: "form-control" %>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">描述*:</label>
<div class="col-sm-5">
<%= f.text_area :description, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<%= f.submit (@product.new_record? ? "新建商品" : "編輯商品"), class: "btn btn-default" %>
</div>
</div>
<% end -%>
</div>
11 管理平臺 商品圖片管理
參考peperclip這個gem進(jìn)行代碼填充，和這個gem代碼唯一的不同是冬三，這個gem中的代碼沒有添加product_image與product的關(guān)聯(lián)關(guān)系匀油。如果要應(yīng)用到這個項目中姿现，需要添加這兩個model的關(guān)聯(lián)關(guān)系框杜，同時修改controller和view中的代碼曹铃。
12 分類和商品頁面開發(fā)
這個章節(jié)需要處理
1暮屡、左邊標(biāo)簽欄的創(chuàng)建
2弱睦、右邊面包屑以及圖片成列
3亿笤、N+1問題的處理
對于標(biāo)簽的左邊欄顯示參考ancestry的生成一二級標(biāo)簽欄頁面的代碼脓豪。
利用scope查詢只有上架的商品被顯示
#routes.rb
resources :categories, only: [:show]
resources :products, only: [:show]
#product.rb
class Product < ApplicationRecord
scope :onshelf, ->{ where(status: Status::On) }
end
#welcome_controller.rb
class WelcomeController < ApplicationController
def index
fetch_home_data #已經(jīng)在ApplicationController類中被定義
@products = Product.onshelf.page(params[:page] || 1).per_page(params[:per_page] || 12)
.order("id desc").includes(:main_product_image)
end
end
#app/views/welcome/index.html.erb滨砍，使用兩個嵌套模板
<div class="row">
<div class="col-lg-3">
<%= render 'shared/categories' %>
</div>
<div class="col-lg-9">
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<%= render 'shared/products' %>
</div>
</div>
#app/views/shared/categories.html.erb
<ul class="list-group">
<% @categories.each do |group| %>
<li class="list-group-item"><%= group.first.title %></li>
<% group.last.each do |sub_category| %>
<li class="list-group-item"><a href="<%= category_path(sub_category) %>"><%= sub_category.title %></a></li>
<% end -%>
<% end -%>
</ul>
#app/views/shared/products.html.erb
<div class="row">
<% @products.each do |product| %>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<%= link_to image_tag(product.main_product_image.image.url(:middle), alt: product.title), product_path(product) %>
<div class="caption">
<h4><%= link_to product.title, product_path(product), class: 'title' %></h4>
<p><strong>￥<%= product.price %></strong> <span class="msrp">￥<%= product.msrp %></span></p>
<p><a href="#" class="btn btn-danger btn-sm" role="button">加入購物車</a></p>
</div>
</div>
</div>
<% end -%>
</div>
<%= will_paginate @products %>
通過product.main_product和includes解決N+1問題
#product.rb
class Product < ApplicationRecord
has_one :main_product_image, -> { order(weight: 'desc') },
class_name: :ProductImage
end
#welcome_controller.rb
class WelcomeController < ApplicationController
def index
fetch_home_data #已經(jīng)在ApplicationController類中被定義
@products = Product.onshelf.page(params[:page] || 1).per_page(params[:per_page] || 12)
.order("id desc").includes(:main_product_image)
end
end
添加相關(guān)樣式#stylesheets/home.css蒲每，需要在application.scss文件中進(jìn)行import
.list-group-item a {
display: block;
}
.msrp {
text-decoration: line-through;
}
.thumbnail {
height: 290px;
&.detail {
height: auto;
}
a.title {
color: #333;
}
}
點擊左邊標(biāo)簽纷跛，顯示該標(biāo)簽下面的商品
#categories_controller.rb
class CategoriesController < ApplicationController
def show
@category = Category.find(params[:id])
@products = @category.products.onshelf.page(params[:page] || 1).per_page(params[:per_page] || 12)
.order("id desc").includes(:main_product_image)
end
end
<div class="row">
<div class="col-lg-3">
<%= render 'shared/categories' %>
</div>
<div class="col-lg-9">
<ol class="breadcrumb">
<li><a href="<%= root_path %>">Home</a></li>
<li class="active"><%= @category.parent.title %></li>
<li class="active"><%= @category.title %></li>
</ol>
<h1><%= @category.title %></h1>
<%= render 'shared/products' %>
</div>
</div>
點擊商品，查看商品的詳細(xì)信息
class ProductsController < ApplicationController
def show
fetch_home_data
@product = Product.find(params[:id])
end
end
<div class="row">
<div class="col-lg-3">
<%= render 'shared/categories' %>
</div>
<div class="col-lg-9">
<ol class="breadcrumb">
<li><a href="<%= root_path %>">Home</a></li>
<li class="active"><%= @product.category.parent.title %></li>
<li><a href="<%= category_path @product.category %>"><%= @product.category.title %></a></li>
<li class="active"><%= @product.title %></li>
</ol>
<h1><%= @product.title %></h1>
<div class="row">
<% @product.product_images.each do |product_image| %>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail detail">
<%= image_tag product_image.image.url(:middle) %>
</a>
</div>
<% end -%>
</div>
<ul class="list-unstyled">
<li>商品編號: <%= @product.uuid %></li>
<li>庫存: <%= @product.amount %></li>
</ul>
<h3><strong>￥<%= @product.price %></strong> <span class="msrp">￥<%= @product.msrp %></span></h3>
<p><%= link_to "加入購物車", "#", class: "btn btn-danger" %></p>
<br />
<br />
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="javascript:;">商品描述</a></li>
</ul>
<br />
<div>
<%= @product.description.html_safe %>
</div>
</div>
</div>
13 購物車功能開發(fā)
場景描述和解釋：
因為在不同的電腦上都可以查看到用戶的購物車邀杏，因此這個購物車到存儲到數(shù)據(jù)庫中贫奠。正常情況下唬血，這個購物車需要指定屬于哪個用戶，所以需要user_id這個字段（允許為空）唤崭，但是也可以在用戶不登錄的情況下創(chuàng)建購物車拷恨，所以需要user_uuid這個字段，用來追蹤這個購物車屬于哪個用戶谢肾，[這里采取的策略是腕侄，任何一個用戶打開這個網(wǎng)站的時候，都在瀏覽器的cookies中設(shè)置一個user_uuid（唯一字符串）芦疏，當(dāng)用戶添加購物車的時候冕杠，將使用這個user_uuid來追蹤當(dāng)前的用戶]，當(dāng)用戶進(jìn)行注冊的時候眯分，則將user_uuid綁定到用戶創(chuàng)建這個用戶表中來拌汇，如果是要進(jìn)行登錄，那么將用戶表中本身存在user_uuid值取出弊决，然后更新存儲于瀏覽器的cookies中的user_uuid值噪舀。這樣保證了用戶是否登錄，user_uuid追蹤用戶都是有效的飘诗。
ShoppingCart模型創(chuàng)建和User模型修改
#創(chuàng)建ShoppingCart模型
class CreateShoppingCarts < ActiveRecord::Migration[5.0]
def change
create_table :shopping_carts do |t|
t.integer :user_id
t.string :user_uuid
t.integer :product_id
t.integer :amount
t.timestamps
end
add_index :shopping_carts, [:user_id]
add_index :shopping_carts, [:user_uuid]
end
end
#修改User模型
class AddUserUuidColumn < ActiveRecord::Migration[5.0]
def change
add_column :users, :uuid, :string
add_index :users, [:uuid], unique: true
User.find_each do |user|
user.uuid = RandomCode.generate_utoken
user.save
end
end
end
用戶未登錄下購物車功能的實現(xiàn)
思路：整個購物車的實現(xiàn)主要是通過user_uuid和uuid兩個字段來實現(xiàn)的与倡。不管是登錄還是注冊，將用戶的uuid和瀏覽器中cookies中的user_uuid進(jìn)行綁定即可昆稿。
1纺座、任何一個用戶打開這個網(wǎng)站的時候，都在瀏覽器的cookies中設(shè)置一個user_uuid（唯一字符串）
#application_controller.rb
class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
before_action :set_browser_uuid
protected
def set_browser_uuid
uuid = cookies[:user_uuid]
unless uuid
if logged_in?
uuid = current_user.uuid
else
uuid = RandomCode.generate_utoken
end
end
update_browser_uuid uuid
end
def update_browser_uuid uuid
#添加cookies是為了長久保持在瀏覽器當(dāng)中
session[:user_uuid] = cookies.permanent['user_uuid'] = uuid
end
end
2溉潭、用戶注冊的時候净响，需要將瀏覽器中user_uuid綁定到用戶中，當(dāng)用戶進(jìn)行登錄喳瓣，那么將用戶表中本身存在user_uuid值取出馋贤，然后更新存儲于瀏覽器的cookies中的user_uuid值。
#users_controller.rb,用戶注冊的情況畏陕，存在于create方法中
@user.uuid = session[:user_uuid]
#sessions_controller.rb,用戶登錄的情況下配乓，參考application_controller.rb文件中方法
update_browser_uuid user.uuid
3、購物車添加惠毁、刪除和更新功能實現(xiàn)
#routes.rb
resources :shopping_carts
#shopping_carts_controller.rb
class ShoppingCartsController < ApplicationController
def index
@
end
end
