「从零开始做购物网站」第38章 大扫除：清理一系列小BUG

文章目录

1. 1. 目标
2. 2. 步骤
   1. 2.1. Step 0:
   2. 2.2. Step 2:
   3. 2.3. Step 3: 修改默认的用户登录页面
   4. 2.4. Step 4:将变更 commit 进去 git 里面。
3. 3. 本章详解

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

• 清理网站制作过程中未解决的一系列小BUG

步骤

Step 0:

执行

checkout -b story30```。

### Step 1:
为了让前台navbar也居中显示，做如下修改。

```ruby app/views/common/_navbar.html.erb
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container-fluid">
+    <div class="container">

Step 2:

美化分类浏览页面，去掉页面上的分类列表，并且让商品列表居中。
打开app/views/categories/show.html.erb，完整代码如下：

app/views/categories/show.html.erb

<div class="container">
  <%= render "common/flashes" %>
  <div class="col-lg-12">
    <ol class="breadcrumb">
      <li><a href="<%= products_path %>">所有商品</a></li>
      <li class="active"><%= @category.parent.title %></li>
      <li class="active"><%= @category.title %></li>
    </ol>
 
    <%= render 'common/products' %>
  </div>
</div>

Step 3: 修改默认的用户登录页面

目前如果用户注册或登录失败会返回到默认的注册或登录页面，目前这个页面非常丑陋，如下所示。

在终端执行

g devise:views```。

因为我们之前已经安装了simple_form3 这个 gem，这个时候默认的登录页面已经改变成 simple_form 的样式了。
![](https://ww3.sinaimg.cn/large/006tNc79gy1fgrx49fwvij31h409874d.jpg)

再去看目录 app/views/ 下，多了一个文件夹 /devise ，这就是关于 devise 这个用户系统的所有页面，通过刚才的那条命令从内部复制出来了。现在我们就可以根据自己的需求定制了。

打开app/views/devise/registrations/new.html.erb，将代码修改成如下内容：
```ruby app/views/devise/registrations/new.html.erb
<div class="container col-md-4">
</div>
<div class="container col-md-4" >
  <br>
  <br>
  <br>
  <br>
  <br>
  <h2>Sign up</h2>

  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= f.error_notification %>

    <div class="form-inputs">
      <%= f.input :email, required: true, autofocus: true %>
      <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
      <%= f.input :password_confirmation, required: true %>
    </div>

    <div class="form-actions">
      <%= f.button :submit, "Sign up" %>
    </div>
  <% end %>

  <%= render "devise/shared/links" %>
</div>
<div class="container col-md-4">
</div>

打开app/views/devise/sessions/new.html.erb，将代码修改成如下内容：

app/views/devise/sessions/new.html.erb

<div class="container col-md-4">
</div>

<div class="container col-md-4">
  <br>
  <br>
  <br>
  <br>
  <br>
  <h2>Log in</h2>

  <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="form-inputs">
      <%= f.input :email, required: false, autofocus: true %>
      <%= f.input :password, required: false %>
      <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
    </div>

    <div class="form-actions">
      <%= f.button :submit, "Log in" %>
    </div>
  <% end %>

  <%= render "devise/shared/links" %>
</div>
<div class="container col-md-4">
</div>

效果展示：

Step 4:将变更 commit 进去 git 里面。

git add .
git commit -m "大扫除：清理一系列小BUG"
git push origin story30
git checkout master
git merge story30
git push origin master

本章详解

努力更新中，上班族请理解。。。。。