By

文章目录
  1. 1. 课程目标
  2. 2. 课程复盘
    1. 2.1. 1. 找出系统核心组件与角色
    2. 2.2. 2. User Story
      1. 2.2.1. 商家
      2. 2.2.2. 消费者
      3. 2.2.3. 订单部分
    3. 2.3. 3. 常用网站基础建设
      1. 2.3.1. Part 1: 安装 Bootstrap
      2. 2.3.2. Part 2:修改样式
      3. 2.3.3. Part 3:增加 flash 功能
      4. 2.3.4. Part 4:安装 Devise
      5. 2.3.5. Part 5: 安装 SimpleForm
      6. 2.3.6. Part 6: 安装 font-awesome-rails
      7. 2.3.7. Part 7: 安装debug套件
      8. 2.3.8. Part 8: 安装展示model关系的gem套件

课程目标

这一课商店网站，你将会学到至少以下的主题：

  • 购物车设计
  • 结帐订单
  • 第三方整合
  • 代码重构
    熟练掌握这个课程的主题后，能够让你在未来写出绝大多数的网站功能。

技术议题包含：

  • Model 设计原则
  • 自定义 before_action
  • 自定义 Routing
  • validation
  • session 操作
  • find_by 操作
  • where / order
  • 巢状表单
  • State Machine
  • ActiveJob
  • Mailer
  • Partial / Helper

课程复盘

1. 找出系统核心组件与角色

Must Have / Should Have / Could Have / Nice to Have

当书写过一轮功能之后，会发现最后留下的 Must Have / Should Have 中，最核心的功能应该会剩下以下几部分：

  • 购买机制 - 消费者购买商品，放入购物车
  • 结帐机制 - 消费者将购物车中的商品，结帐生成订单
  • 上架机制 - 商家上架物品，设定开卖
  • 配送机制 - 商家针对订单配送

整个系统有两个核心角色：

  • 消费者
  • 商家

2. User Story

商家

身为商家（管理者），我要能够在后台上架我的商品，并设定能够贩卖

  • 身为商家，我要能够登入后台
    • 整个商店网站分为两种权限：admin (商家=管理者) / user （消费者）
    • 商家可以登入 /admin 后台
  • 身为商家，我要能够登入后台上架商品
    • 后台上架网址必须要是 /admin/products
    • 商品的内容分为商品名称、描述、价格、库存
    • 商品要能够设定是否能上架贩卖
    • 商品必须要有商品图片

消费者

订单部分

3. 常用网站基础建设

  • Fork或 rails new 新项目

Part 1: 安装 Bootstrap

Step 1. 挂上 bootstrap-sass 这个 gem

Gemfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
gem 'bootstrap-sass'
``
Step 2. bundle install
执行 `bundle install`
Step 3. 将 Bootstrap 的 CSS 套件装进专案里面
在终端输入
`mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss`
然后修改 `app/assets/stylesheets/application.scss` 档案，在最后加入以下两行
```ruby app/assets/stylesheets/application.scss
/*
 * ...(一堆注解)
 *= require_tree .
 *= require_self
 */
+ @import "bootstrap-sprockets";
+ @import "bootstrap";

Step 4. 将变更 commit 进 git 里面

1
2
git add .
git commit -m "add bootstrap to project"

Part 2:修改样式

Step 1. 新增 app/views/common 资料夹
mkdir app/views/common

Step 2. 新增 navbar

touch app/views/common/_navbar.html.erb

填入

app/views/common/_navbar.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/">JDStore </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 navbar-right">
                <li><%= link_to("登入", '#') %></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Step 3. 新增 footer

touch app/views/common/_footer.html.erb

填入

app/views/common/_footer.html.erb
1
2
3
4
5
6
<footer class="container" style="margin-top: 100px;">
    <p class="text-center">Copyright ©2017 JDStore
        <br>Design by yourname
        
    </p>
</footer>

Step 4. 修改全域 HTML 样式 application.html.erb

app/views/layouts/application.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <title>JDStore </title>
        <%= csrf_meta_tags %>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>
    <body>
        <div class="container-fluid">
            <%= render "common/navbar" %>
            <%= yield %>
        </div>
        <%= render "common/footer" %>
    </body>
</html>

Step 5. 产生一个新的空 Hello World 页面 （放在 welcome#index)

执行
rails g controller welcome

新增一个 welcome controllertouch app/views/welcome/index.html.erb

新增一个空的 HelloWorld 页面
填入

app/views/welcome/index.html.erb
1
<h1> Hello World! </h1>

Step 6. 将首页指到 welcome 下的 index.html.erb 页面

修改config/routes.rb，改成以下内容

config/routes.rb
1
2
3
Rails.application.routes.draw do
  root 'welcome#index'
end

Step 7. git 进度存档

1
2
git add .
git commit -m "add bootstrap html"

Step 8. 重开 Rails Server

Part 3:增加 flash 功能

Step 1. 将 Boostrap 的 js 提示套件 bootstrap/alert “挂”进专案里面

在 requre_tree 上加入一行 //= require bootstrap/alert

Step 2. 新增 app/views/common/_flashes.html.erb

touch app/views/common/_flashes.html.erb

填入

app/views/common/_flashes.html.erb
1
2
3
4
5
6
7
8
<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>

Step 3. 加入 app/helpers/flashes_helper.rb

touch app/helpers/flashes_helper.rb

填入以下内容：

app/helpers/flashes_helper.rb
1
2
3
4
5
6
7
8
9
10
11
module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze
  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end
  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning" 
  end
end

Step 4. 在 application.html.erb 内加入 flash 这个 partial

在 <%= yield %> 前加入 <%= render "common/flashes" %>

app/views/layouts/application.html.erb
1
2
<%= render "common/flashes" %>
<%= yield %>

Step 5. git 存档

1
2
git add .
git commit -m "add bootstrap flash function"

Step 6: 测试 flash helper 的功能

加入 flash[:notice] = "早安！你好！"。你应该可以看到系统跳出“绿色”提示窗。

app/controllers/welcome_controller.rb
1
2
3
4
5
class WelcomeController < ApplicationController
  def index
    flash[:notice] = "早安！你好！"
  end
end

Part 4:安装 Devise

Step 1: 安装登入系统

Devise 是一个 Rails 内热门的 gem，专门用来快速实作“登入系统”。在这一节我们会用 devise 实作登入功能。

Gemfile 新增一行 gem 'devise'

Gemfile
1
gem 'devise'

然后执行bundle install

Step 2 : 产生会员系统的必要档案

执行

1
2
3
rails g devise:install
rails g devise user
rake db:migrate

重启rails s

Step 3: 修改 app/views/common/_navbar.html.erb

app/views/common/_navbar.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-                <li> <%= link_to("登入", '#') %>   </li>
+                <% if !current_user %>
+                  <li><%= link_to("注册", new_user_registration_path) %> </li>
+                  <li><%= link_to("登入", new_user_session_path) %></li>
+                <% else %>
+                  <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                        Hi!, <%= current_user.email %>
+                        <b class="caret"></b>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li> <%= link_to("登出", destroy_user_session_path, method: :delete) %> </li>
+                    </ul>
+                  </li>
+                <% end %>

Step 4: 修改 app/assets/javascripts/application.js

加入一行//= require bootstrap/dropdown

app/assets/javascripts/application.js
1
2
//= require bootstrap/alert
+ //= require bootstrap/dropdown

成果应该会是这样的效果。

Step 5: git 储存

1
2
git add .
git commit -m "user can login/logout/signup"

Part 5: 安装 SimpleForm

Step 1. 使用 SimpleForm 简化

首先我们要来安装 simple_form

打开 Gemfile，然后新增一行 gem 'simple_form'

Gemfile
1
2
3
gem 'bootstrap-sass'
gem 'devise'
+ gem 'simple_form'

然后执行bundle install ,安装 gem。

Step 2. 安装 simple_form for bootstrap 的设定

执行：rails generate simple_form:install --bootstrap

然后重开 rails server（ ctrl+c 然后 rails s）

Step 3. git 存档

1
2
git add .
git commit -m "install simpleform with bootstrap"

Part 6: 安装 font-awesome-rails

Step 1. 挂上font-awesome-rails

Gemfile
1
2
3
gem 'devise'
gem 'simple_form'
+ gem 'font-awesome-rails'

Step 2. bundle install

执行 bundle install

重启rails s

Step 3. 将 font-awesome装进专案里面

app/assets/stylesheets/application.scss
1
@import "font-awesome";

Step 4. 修改 app/views/common/_navbar.html.erb

app/views/common/_navbar.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
             <% if !current_user %>
               <li><%= link_to("注册", new_user_registration_path) %> </li>
-                  <li><%= link_to("登入", new_user_session_path) %></li>
+                  <li><%= link_to(content_tag(:i, '登入', class: 'fa fa-sign-in'), new_user_session_path) %></li>
             <% else %>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     Hi!, <%= current_user.email %>
                     <b class="caret"></b>
                 </a>
                 <ul class="dropdown-menu">
-                        <li> <%= link_to("登出", destroy_user_session_path, method: :delete) %> </li>
+                        <li> <%= link_to(content_tag(:i, '登出', class: 'fa fa-sign-out'), destroy_user_session_path, method: :delete) %> </li>
                 </ul>
               </li>
             <% end %>

登入、登出旁会出现新图标

Step 5. git存档

1
2
git add .
git commit -m "install font-awesome-rails"

Part 7: 安装debug套件

打开Gemfile

Gemfile
1
2
3
4
5
6
7
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
  gem 'sqlite3'
+ gem 'pry'
+ gem 'awesome_rails_console'
end

执行

1
2
3
4
bundle install
rails g awesome_rails_console:install
git add .
git commit -m "install pry and awesome_rails_console"

Part 8: 安装展示model关系的gem套件

安装 Graphviz 2.22+:

终端机中执行

1
brew install graphviz

安装gem rails-erd

ruby Gemfile
1
2
3
4
gem 'qiniu-rs'
gem 'figaro'
+ gem 'rails-erd'
group :development, :test do

执行

1
2
3
bundle install
git add .
git commit -m "install graphviz and rails-erd"

使用说明：

  • 终端机中执行 rake erd 可生成erd文件
  • GEM自动生成的PDF格式文件，在ATOM中无法正常打开，显示一堆乱码。
  • 在ATOM中找到新建的 erd.pdf ，右击找到 Show in Finder点击进入文件夹找到该文件，打开即可看到目前的model之间的关系。
文章目录
  1. 1. 课程目标
  2. 2. 课程复盘
    1. 2.1. 1. 找出系统核心组件与角色
    2. 2.2. 2. User Story
      1. 2.2.1. 商家
      2. 2.2.2. 消费者
      3. 2.2.3. 订单部分
    3. 2.3. 3. 常用网站基础建设
      1. 2.3.1. Part 1: 安装 Bootstrap
      2. 2.3.2. Part 2:修改样式
      3. 2.3.3. Part 3:增加 flash 功能
      4. 2.3.4. Part 4:安装 Devise
      5. 2.3.5. Part 5: 安装 SimpleForm
      6. 2.3.6. Part 6: 安装 font-awesome-rails
      7. 2.3.7. Part 7: 安装debug套件
      8. 2.3.8. Part 8: 安装展示model关系的gem套件