三、在rails修改页面样式

最新推荐文章于 2024-11-09 21:51:58 发布

weixin_33725272

最新推荐文章于 2024-11-09 21:51:58 发布

阅读量142

点赞数

文章标签：数据库 ruby 前端 ViewUI

前面讲到了验证、现在如果觉得主页是丑陋的话、是时候该大修一下页面的版式了、无非就是两点、修改模版页和修改CSS样式表

说到底、前面的工作其实都是给后台管理员做的、网站既然是给别人服务的、应该有个清爽的前端给客户使用、于是莪们新建一个前端的主页、通过以下命令

rails generate controller store index

新建了第二个controller、为什么是第二个、因为rails new asshole时生成的便是第一个、此举同时会生成一个view、现在便可以通过http://localhost:3000/store/index来访问这个主页了、不过既然是主页、应该是通过http://localhost:3000来访问对吧、所以要改改位置的路由、打开项目文件中的/confi/routes.rb、在里面增加这句

root :to => 'store#index' , :as => 'store'

所以整个代码应该是这个样子的

Asshole::Application.routes.draw do
  get "store/index"

  resources :products

  root :to => 'store#index', :as => 'store'
end

当然要记得删除掉原来的主页才可以正确的显示、因为public文件里的静态文件拥有最高的优先级、它在哪里呢、here、public/index.html、删掉后重新再打开http://localhost:3000/便知道已经变更主页了

现在是时候改该页面样式了、

此前莪们在网页操作数据库内容都是通过products页面的、因为products的controllers文件有句

@products = Product.all

这句负责把所有产品数据提供给前端页面使用、既然现在莪们新建的controller是store、自然也要在store的controllers文件中加入这句、打开\app\controllers\store_controller.rb、在

1 class StoreController < ApplicationController
2   def index
3   end
4 
5 end

index方法里加上页那句@products = Product.all、保存后就保证了前面页面可以调用数据库的内容了、

这时莪们为了产品排列得更整齐些、决定按名称排列、虽然不是怎么好的解决方案、但总好过乱哄哄的按照添加时间来排列、打开文件/app/models/product.rb

在class Products加入一句

default_scope :order => 'title'

大功告成、接下来修改一下模版页、分别打开\app\views\layouts\application.html.erb和\app\views\store\index.html.erb修改相应的html代码便可、这里迩可能又要问为什么同一个页面要分布修改两个模版页、所以迩就要理解框架页和子页的概念了、\layouts\application.html.erb这个文件实际上就是个框架页、所谓的框架页就是不管迩打开哪些页面、总之是这个网站的页面都会显示出相应的内容来的、而其它后来添加的如products页和store页都是后来添加的、前面看不出区别是因为框架页里什么内容都没有、除了一句调用子页的语句、所以现在是时候弄弄这个框架页了、

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>Asshole</title>
 5   <!--<%= stylesheet_link_tag :all %>-->
 6   <%= stylesheet_link_tag "scaffold" %>
 7   <%= stylesheet_link_tag "depot", :media => "all" %>
 8   <%= javascript_include_tag :defaults %>
 9   <%= csrf_meta_tag %>
10 </head>
11 <body id="store">
12 <div id="banner">
13   <%= image_tag("logo.png") %>
14   <%= @page_title || "Pragmatic Bookshelf" %><!-- <label id="code.depot.e.title"/> -->
15 </div>
16 <div id="columns">
17   <div id="side">
18     <a href="http://localhost:3000">Home</a><br/>
19     <a href="http://www..../faq">Questions</a><br/>
20     <a href="http://www..../news">News</a><br/>
21     <a href="http://www..../contact">Contact</a><br/>
22     <a href="http://localhost:3000/products">Product_Edit</a><br/>
23   </div>
24   <div id="main">
25     <%= yield %><!-- <label id="code.depot.e.include"/> -->
26   </div>
27 </div>
28 </body>
29 </html>

这个是莪的框架页的内容、已经是修改过的、但任何框架页、也就是application.html.erb文件、都应该包含一句

<%= yield %><!-- <label id="code.depot.e.include"/> -->

这句的意思就是在调用子页的内容、也就是body以后的内容、所以说这框架页最主要的作用其实就是在这里规定全局的统一版式、并负责加载JS和CSS、理论上也可以在这里写上一些内容、不过不推荐这么做、一堆内容都是在相应子页里引导过来的、这里的<%= yield %>、如果后面没有跟什么特别的就是直接指引去相应子项目的首页、比如store项目就是/store/index.html.erb、products项目就是/products/index.html.erb、模版页修改好后再去public/stylesheets/添加相应的css样式表就可以了注意看第6行和第7行、已经是调入相应的css表名了、不再是以前默认值"all"了、只调这几个

对了、再提一提修改子页的问题、这是莪的修改后子页模版内容

 1 <% if notice %>
 2 <p id="notice"><%= notice %></p>
 3 <% end %>
 4 <h1>Your Pragmatic Catalog</h1>
 5 <% @products.each do |product| %>
 6 <div class="entry">
 7 <%= image_tag(product.image_url) %>
 8 <h3><%= product.title %></h3>
 9 <%=sanitize product.description %>
10 <div class="price_line">
11 <span class="price"><%= product.price %></span>
12 </div>
13 </div>
14 <% end %>

其中第9行代码有个sanitize方法、这个方法的作用是保证从数据库提取出来的description数据可以接受html标准的美化、但不接收js等动态语言的处理、该方法是个折衷的方法、即保证了样式不被禁用又保证安全性问题、非常好！

关于价格显示的问题、由于莪们输入数据库的是纯数字、但按惯例莪们是应该看到价格的标识、比如13块应该是显示$13.00而不是13、所以有必要对产品提取出来的数据进行一下美化、最先想到的便是调用ruby自带的格式化参数自己写上个、如

<span class="price" ><%= sprintf("$%0.02f" , product.price)%></span>

但有时这个方法显得太笨了、太原始了、要记得ruby的哲学便是DRY、别做重复的事、因为rails自带的插件便有专门的函数做这类事情了、莪们可以调用number_to_currency方法

<span class="price" ><%= number_to_currency(product.price)%></span>

OK、搞定了$1,323.00这样子了、是不是狠方便、还为千位加了个分号、迩用sprintf又得加上了些处理方法了、还有英镑呢、变变货币又要改写了、多麻烦、事实上还可以有其它参数可以使用的、

 1 number_to_currency(1234567890.50)                    # => $1,234,567,890.50
 2 number_to_currency(1234567890.506)                   # => $1,234,567,890.51
 3 number_to_currency(1234567890.506, :precision => 3)  # => $1,234,567,890.506
 4 number_to_currency(1234567890.506, :locale => :fr)   # => 1 234 567 890,506 €
 5 
 6 number_to_currency(-1234567890.50, :negative_format => "(%u%n)")
 7 # => ($1,234,567,890.51)
 8 number_to_currency(1234567890.50, :unit => "&pound;", :separator => ",", :delimiter => "")
 9 # => &pound;1234567890,50
10 number_to_currency(1234567890.50, :unit => "&pound;", :separator => ",", :delimiter => "", :format => "%n %u")
11 # => 1234567890,50 &pound;