Part 1：
1.首先要克隆专案；
https://github.com/quanzhanying/jdstore打开，然后复制地址：
2.在本地跑起来：
git clone git@github.com: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
<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
<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
<!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 controller
touch app/views/welcome/index.html.erb
新增一个空的 HelloWorld 页面
填入
app/views/welcome/index.html.erb
<h1> Hello World! </h1>
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| %>
<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
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
- <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
//= 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 %>
<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存档
git add .
git commit -m "install font-awesome-rails"
