专案起始流程

Posted on

1.mkdir 文件夹名称 －－－－新建一个你需要放专案的文件夹（可省略）
2.rails new 专案名称 －－－－新建一个专案
3.cd 专案名称 －－－－进入你的专案

4.atom ./打开atom，选择 File > Add Project Folder…
－－－－在你的atom中打开专案
5-1.git init －－－－把repository（repo）初始化到一个叫做 .git 的资料夹
git add . －－－－告诉 git 你想要把目前资料夹（即 .）还有它底下的所有东西加进repo
git commit -m “xxx” －－－－告诉 git 真的要执行你叫它做的事
5-2.prepare work
(1).install bootstrap:
在atom修改 Gemfile，在 group :development, :test do前一行加入 gem ‘bootstrap-sass’（＃32）
bundle install
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
将 application.css 更名为 application.scss

app/assets/stylesheets/application.scss
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
       @import "bootstrap-sprockets";
       @import "bootstrap";
```          
 (2).应用bootstrap到全栈（navbar & footer）
        mkdir app/views/common
        touch app/views/common/_navbar.html.erb
```ruby app/views/common/_navbar.html.erb
         <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
           
            <div class="navbar-header">
             <a class="navbar-brand" href="/">Rails 101</a>
            </div>
         
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
                 <li>
                     <%= link_to("登入", '#') %>
                 </li>
             </ul>
         </div>
         </div>
       </nav>
```      
     touch app/views/common/_footer.html.erb
```ruby app/views/common/_footer.html.erb
       <footer class="container" style="margin-top: 100px;">
         <p class="text-center">Copyright ©2016 Rails101
         <br>Design by
          <a href="http://courses.growthschool.com/courses/rails-101/" target=_new>xdite</a>
         </p>
       </footer>
```      
```ruby   app/views/layouts/application.html.erb
      <!DOCTYPE html>
      <html>
         <head>
         <title>Rails101</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>

(3).提示信息
s1.

app/assets/javascripts/application.js
1
2
3
4
5
6
  ... (一堆注解)
  //= require jquery
  //= require jquery_ujs
 //= require turbolinks
+//= require bootstrap/alert
 //= require_tree .

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

app/views/common/_flashes.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
          <% 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 %>
```      
  s3.touch app/helpers/flashes_helper.rb
```ruby 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
app/views/layout/application.html.erb
1
2
<%= render "common/flashes" %>
<%= yield %>

s4. flash[:alert] = “xxx”
(4).登录系统
s1.gem “devise” –> bundle install –> rails g devise:install –> rails g devise user –> rake db:migrate
s2.

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 %>

s3.

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

(5).安装simple_form
gem “simple_form” –> bundle install –> rails generate simple_form:install –bootstrap
重开sever

1
2
3
4
5
6
7
  <%= simple_form_for @group do |f| %>
  <div class="form-group">
    <%= f.input :title, input_html: { class: "form-control"} %>
    <%= f.input :description, input_html: { class: "form-control"} %>
  </div>
  <%= f.submit "Submit", class: "btn btn-primary", data: { disable_with: "Submitting..." } %>
<% end %>

6.rails g model xxx 栏位:字符型
rake db:migrate
rails g controller xxxs
(rails g controller welcome)
CRUD
7.touch app/views/xxxs/index.html.erb
(touch app/views/welcome/index.html.erb)
8.resources :xxxs／root “welcome#index”
－－－－在route.rb中添加路径