购物网站基础建设

Part 1：

1.首先要克隆专案；
https://github.com/quanzhanying/jdstore打开，然后复制地址：

2.在本地跑起来：
git clone [email protected]:XXXXX/jdstore.git
cd jdstore
cp config/database.yml.example config/database.yml

（这是因为我们一般要保护config/database.yml文件，因此在上传到github之前会创建一个config/database.yml.example文件用来config/database.yml文件但是它不是真正的config/database.yml文件因此，如果想保证专案能正常运行，需要建立一个config/database.yml文件config/database.yml.example文件内容复制进去）

bundle check
bundle install
git checkout -b EPIC-1
rails s

---

Part 2:安装bootstrap

1.在gemfile里挂上：

Gemfile
gem 'bootstrap-sass'```
2.终端输入`bundle install` 
3.将 Bootstrap 的 CSS 套件装进专案里面
`mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss`
####app/assets/stylesheets/application.scss
```/*
 * ...(一堆注解)
 *= require_tree .
 *= require_self
 */

+ @import "bootstrap-sprockets";
+ @import "bootstrap";

---

Step 4. 将变更 commit 进 git 里面

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

---

---

Part3 修改网页样式

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

mkdir app/views/common

---

Step 2. 新增 navbar

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

app/views/common/_navbar.html.erb

    

        
        

            JDStore 
        

        
        

            

                
<%= link_to("登入", '#') %>
            
        
        
    
    

---

Step 3. 新增 footer

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

app/views/common/_footer.html.erb

    
Copyright ©2017 JDStore
        
Design by yourname
        
    

---

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

app/views/layouts/application.html.erb

    
        
        <%= csrf_meta_tags %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    

    

        

            <%= render "common/navbar" %>
            <%= yield %>
        

        <%= render "common/footer" %>

    

---

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

rails g controller welcome

新增一个 welcome controller

touch app/views/welcome/index.html.erb

新增一个空的 HelloWorld 页面

填入

app/views/welcome/index.html.erb
 Hello World! 

---

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

修改 config/routes.rb

改成以下内容

config/routes.rb

Rails.application.routes.draw do
  root 'welcome#index'
end

Step 7. git 进度存档

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

Step 8. 重开 Rails Server

rails s

---

Part 4 增加 flash 功能

---

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

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

app/assets/javascripts/application.js

... (一堆注解)
//= require jquery
//= require jquery_ujs
//= require turbolinks
+//= require bootstrap/alert
//= require_tree .

---

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

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

填入

app/views/common/_flashes.html.erb

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    

      ×
      <%= value %>
    
  <% end %>
<% end %>

---

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

touch app/helpers/flashes_helper.rb

填入以下内容：

app/helpers/flashes_helper.rb

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/layout/application.html.erb

<%= render "common/flashes" %> <%= yield %>

---

Step 5. git 存档

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

---

Step 6: 测试 flash helper 的功能

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

app/controllers/welcome_controller.rb

class WelcomeController < ApplicationController
  def index
    flash[:notice] = "早安！你好！"
  end
end

---

Part 5 安装 Devise

Step 1: 安装登入系统

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

Gemfile 新增一行 gem 'devise'

Gemfile

gem 'devise'

然后执行
bundle install

---

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

执行
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

-                
 <%= link_to("登入", '#') %>   
+                <% if !current_user %>
+                  
<%= link_to("注册", new_user_registration_path) %> 
+                  
<%= link_to("登入", new_user_session_path) %>
+                <% else %>
+                  

+                    
+                        Hi!, <%= current_user.email %>
+                        
+                    
+                    

+                        
 <%= link_to("登出", destroy_user_session_path, method: :delete) %> 
+                    
+                  
+                <% end %>

---

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

加入一行 //= require bootstrap/dropdown

app/assets/javascripts/application.js

//= require bootstrap/alert+ //= require bootstrap/dropdown

---

Step 5: git 储存

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

---

Part 6 安装 SimpleForm

Step 1. 使用 SimpleForm 简化

首先我们要来安装simple_form
打开 Gemfile，然后新增一行gem 'simple_form'

Gemfile

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 存档

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

Part 7 安装 font-awesome-rails

Step 1. 挂上font-awesome-rails

Gemfile

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

@import "font-awesome";

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

app/views/common/_navbar.html.erb

    <% if !current_user %>
               
<%= link_to("注册", new_user_registration_path) %> 
-                  
<%= link_to("登入", new_user_session_path) %>
+                  
<%= link_to(content_tag(:i, '登入', class: 'fa fa-sign-in'), new_user_session_path) %>
             <% else %>
               

                 
                     Hi!, <%= current_user.email %>
                     
                 
                 

-                        
 <%= link_to("登出", destroy_user_session_path, method: :delete) %> 
+                        
 <%= link_to(content_tag(:i, '登出', class: 'fa fa-sign-out'), destroy_user_session_path, method: :delete) %> 
                 
               
             <% end %>

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

Step 5. git存档

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