【Ruby on Rails实战】3.3 网站主页面以及相关设置

编程语言 2019-01-13 16:05:03 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shine_a/article/details/86413827

1、在config/routes.rb文件中，添加代码，指定网站首页的路径

root 'home#index'

每次打开网站，系统会通过root 'home#index’将请求分配到home_controller.rb中的index方法，如果和数据库有数据交互的话，在index方法中调用model模型来实现与数据库的交互，最后将得到的数据显示在app/views/home/index.html.erb页面上。我们再来复习一下网页请求的路径

网页请求路径

2、在项目文件夹下运行语句rails g controller home index

其中home是controller的名字，index是controller中实例方法（即action）的名字

/vagrant/data_system$ rails g controller home index
#系统返回信息
      create  app/controllers/home_controller.rb
      route  get 'home/index'
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.coffee
      invoke    scss
      create      app/assets/stylesheets/home.scss
从系统返回信息中，我们可以看出：
  • 创建文件 app/controllers/home_controller.rb，文件里面创建了index方法
  • 创建文件 app/views/home/index.html.erb，我们会在里面添加html、js代码
  • 创建文件 app/assets/stylesheets/home.scss，我们会在里面添加css样式代码
  • 在routes.rb路由文件中添加了语句get 'home/index’，这条语句删掉即可。
index.html.erb文件名的.erb后缀：

erb是Embedded RuBy的简写，意思是「嵌入式的Ruby」。erb允许把一个HTML文件里面加入Ruby代码。插入ruby代码有以下两种形式。
（1）<% ruby代码 %> 结果不需要打印，通常用来声明变量，或者if等判断语句
（2）<%= ruby代码 %> 结果需要打印。

home.scss文件名的.scss后缀：

scss是一种语言，可以看成是css的扩展语言，比css更加简洁灵活。即使你是css零基础，也可以直接学习scss。rails是自带scss支持的，将css文件后缀添加上.scss，rails会自动转换。

3、用sublime打开项目文件，在app/assets/stylesheets目录下创建common.css.scss文件

该文件里面放系统通用的样式代码，粘贴下列语句到文件中：

body {
  font-family: sans-serif;
  margin: 0;
  font-size: 14px;
  color: #666;
}
.container {
  width: 1170px;
  margin: 0 auto;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #f5999d;
}
a:hover {
  color: #845534;
}

.btn-primary {
  color: white;
  background: #f5999d;
  border-color: #f49bc1;
  &:hover {
    background-color: #f49bc1;
    border-color: #845534;
  }
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

form {
  input {
    font-size: 21px;
    width: 100%;
    padding: 10px 12px;
    color: #101010;
    border: 1px solid #acacac;
    outline:none
  }
  textarea {
    height: 210px;
    font-size: 21px;
    width: 100%;
    padding: 10px 12px;
    color: #101010;
    border: 1px solid #acacac;
    outline:none
  }
  label {
    display: inline-block;
    margin-bottom: 5px;
    color:#f5999d;
  }
  dd {
    margin: 0;
  }
  .error {
  margin: 5px 0 9px 0;
  color: #DB8A14;
  }
}
.notice {
  position: absolute;
  background: #f5999d;
  right: 50%;
  bottom: 50%;
  color: white;
  padding: 20px;
  -webkit-box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
  -moz-box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
  box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
}
td{
  text-align: center;
  height: 40px;
}

th{
  text-align: center;
  height: 30px;
}

4、在app/assets/stylesheets目录中创建layout.css.scss文件,粘贴下面代码

该文件里面放网站头部和尾部样式，其实将下列代码放在common.css.scss文件中也可以，但为了让代码更加规整，我们将网站头部和尾部样式统一放到layout.css.scss文件中。

.navbar {
  background: #f49bc1;
  position: relative;
  height: 60px;
  z-index: 1000;
  a {
    color: #fff;
  }
  a:hover {
    color: #ebebeb;
  }
}
.navbar-brand {
  float: left;

  padding-left: 0;
  line-height: 60px;
  font-size: 30px;
}
.nav.left {
  float: left;
  margin-left: 40px;
  font-size: 14px;
}
.nav.right {
  float: right;
}
.nav  li {
  float: left;
}
.nav  li  a {
  display: block;
  font-size: 1.1em;
  padding: 5px 10px;
  margin: 15px 10px;
}
.nav  li  a:hover {
  color: #000;
  background: #fff;
}

.footer {
  border-top: 1px solid #c5c5c5;
  min-height: 200px;
  margin: 3em 0;
  padding-top: 3em;
  padding-bottom: 3em;
  background: #f8f5f0;
}

.home-banner{
  height: 600px;
}

5、在app/assets/stylesheets/home.scss文件中，粘贴下列语句

这个文件是我们在第2步运行rails g controller home index系统自动产生的文件，这里面主要放views/home文件夹下的页面所对应的样式。

.issue-list-header {
  border-bottom: 1px solid #ddd;
  margin-top: 0;
  margin-bottom: 30px;
  background: #f5999d;
  color: #fff;
  .issue-list-heading {
    font-size: 2em;
    font-weight: normal;
  }
}

.align{
    font-family: "museo-sans-condensed";
    font-size: 20px;
    text-align:center; 
}

.home-banner-links {
  position: absolute;
  left: 160px;
  top: 280px;
  .banner-btn {
    padding: 10px 10px;
    font-size: 1.2em;
    font-weight: 300;
    font-family: "museo-sans-condensed";
    border-radius: 5px;
    color: #fff;
    background: rgba(220,20,60,0.2);
    border: 1px solid transparent;
    &:hover {
      border: 1px solid rgba(0,0,0,0.2);
    }
  }
}

6、app/views/layouts/application.html.erb文件完善

application.html.erb文件是控制页面总体样式的文件，比如在每个页面都需要显示的网站头部和尾部、flash提示、js css文件加载等等，都在此文件定义。

（1）我们先来介绍一下目前application.html.erb文件中代码的含义：

  • 开头的<!DOCTYPE html>
    说明这是一份HTML5文件，向下相容于所有浏览器的HTML4。

  • <title>DataSystem<title>
    代表网站标签显示的名称

  • <%= csrf_meta_tags %>
    防止CSRF攻击

  • <%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
    加载app/assets/stylesheets/application.css文件，之后有外来的css文件，我们也在这里加载

  • <%= javascript_include_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
    加载app/assets/javascripts/application.js文件，之后有外来的js文件，我们也在这里加载

  • <%= yield %>
    代表被加载的views页面，比如我们现在本节创建的home/index.html.erb页面，当要打开网站首页时yield就代表index.html.erb页面

（2）我们将网站标签改为“萌宠之家”
<!--原先代码-->
<title>DataSystem</title>
<!--改为-->
<title>萌宠之家</title>
（3）在网站头部添加登录注册入口，在<%= yield %>上面粘贴以下代码
<div class="navbar clearfix">
  <div class="container">
    <a class="navbar-brand" href="/">萌宠之家</a>
    <ul class="nav right">
        <li><%= link_to "登录","#" %></li>
        <li><%= link_to "注册","#" %></li>
    </ul>
  </div>
</div>
<!--参考代码，无需粘贴
<%= yield %>-->

代码解析：

  • <a class=“navbar-brand” href="/">萌宠之家</a>
    href="/"代表点击「萌宠之家」a标签，页面回到根目录也就是网站主页面

  • <li><%= link_to “登录”,"#" %><li>
    这里应用了嵌入式ruby<%= %>，这行代码相当于<li><a href="#">登录</a><li>，因为我们没有定义登录页面，先用#代替登录页面的链接

（4）定义网站尾部以及flash提示，在<%= yield %>代码下面粘贴下列代码
<!--参考代码，无需粘贴
<%= yield %>-->
<% if flash.notice %>
  <div class="notice"><%= flash.notice %></div>
<% end %>
<div class="footer">
  <div>
    <p class="align">©版权所属©  2018</p>
  </div>
</div>
<script>
  var hideNotice = function(){
    $(".notice").fadeOut("slow");
  }
  setTimeout(hideNotice, 2000);
</script>

代码解析：

  • <% if flash.notice %>
      <div class=“notice”><%= flash.notice %></div>
    <% end %>
    如果flash.notice有值，页面会弹出flash.notice的值。flash.notice的用法将会在下一节看到

  • <div class=“footer”></div>
    此div标签里面定义了网站尾部的内容

  • <script>
       var hideNotice = function(){
       $(".notice").fadeOut(“slow”);
       }
       setTimeout(hideNotice, 2000);
    </script>
    在script标签里面包含的是js方法hideNotice，意思是flash.notice提示在展示2秒后消失

7、设置网站主页面图片，并且加载jQuery插件（jquery-anystretch）来保证背景图根据窗口的变化来自动调整大小

jquery-anystretch插件使用说明
https://github.com/danmillar/jquery-anystretch

（1）打开下面链接，将照片命名为index.jpg，并保存到app/assets/images目录中。

https://b-ssl.duitang.com/uploads/item/201510/11/20151011223210_wxjQy.jpeg

（2）我们先来添加jQuery插件jquery-anystretch，在app/assets/javascripts文件夹中新建vendor文件夹，在vendor文件夹下，创建文件jquery.anystretch.min.js，然后再文件中粘贴下面代码。

这个文件应该在「插件使用说明」的链接中下载下来，然后粘贴到项目中。我们现在直接在文件中创建这个文件，并粘贴下面代码（即链接中的代码https://raw.githubusercontent.com/danmillar/jquery-anystretch/master/jquery.anystretch.min.js），效果都是一样的

/*
* jQuery Anystretch
* Version 1.2 (@jbrooksuk / [me.itslimetime.com](http://me.itslimetime.com))
* [https://github.com/jbrooksuk/jquery-anystretch](https://github.com/jbrooksuk/jquery-anystretch)
* Based on Dan Millar's Port
* [https://github.com/danmillar/jquery-anystretch](https://github.com/danmillar/jquery-anystretch)
*
* Add a dynamically-resized background image to the body
* of a page or any other block level element within it
*
* Copyright (c) 2012 Dan Millar (@danmillar / [decode.uk.com](http://decode.uk.com))
* Dual licensed under the MIT and GPL licenses.
*
* This is a fork of jQuery Backstretch (v1.2)
* Copyright (c) 2011 Scott Robbin ([srobbin.com](http://srobbin.com))
*/
(function(a){a.fn.anystretch=function(d,c,e){var b=this.selector.length?false:true;return this.each(function(q){var s={positionX:"center",positionY:"center",speed:0,elPosition:"relative",dataName:"stretch"},h=a(this),g=b?a(".anystretch"):h.children(".anystretch"),l=g.data("settings")||s,m=g.data("settings"),j,f,r,p,v,u;if(c&&typeof c=="object"){a.extend(l,c)}if(c&&typeof c=="function"){e=c}a(document).ready(t);return this;function t(){if(d||h.length>=1){var i;if(!b){h.css({position:l.elPosition,background:"none"})}if(g.length==0){g=a("<div />").attr("class","anystretch").css({left:0,top:0,position:(b?"fixed":"absolute"),overflow:"hidden",zIndex:(b?-999999:-999998),margin:0,padding:0,height:"100%",width:"100%"})}else{g.find("img").addClass("deleteable")}i=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(A){var z=a(this),y,x;z.css({width:"auto",height:"auto"});y=this.width||a(A.target).width();x=this.height||a(A.target).height();j=y/x;o(function(){z.fadeIn(l.speed,function(){g.find(".deleteable").remove();if(typeof e=="function"){e()}})})}).appendTo(g);if(h.children(".anystretch").length==0){if(b){a("body").append(g)}else{h.append(g)}}g.data("settings",l);var w="";if(d){w=d}else{if(h.data(l.dataName)){w=h.data(l.dataName)}else{return}}i.attr("src",w);a(window).resize(o)}}function o(i){try{u={left:0,top:0};r=k();p=r/j;if(p>=n()){v=(p-n())/2;if(l.positionY=="center"||l.centeredY){a.extend(u,{top:"-"+v+"px"})}else{if(l.positionY=="bottom"){a.extend(u,{top:"auto",bottom:"0px"})}}}else{p=n();r=p*j;v=(r-k())/2;if(l.positionX=="center"||l.centeredX){a.extend(u,{left:"-"+v+"px"})}else{if(l.positionX=="right"){a.extend(u,{left:"auto",right:"0px"})}}}g.children("img:not(.deleteable)").width(r).height(p).filter("img").css(u)}catch(w){}if(typeof i=="function"){i()}}function k(){return b?h.width():h.innerWidth()}function n(){return b?h.height():h.innerHeight()}})};a.anystretch=function(d,b,e){var c=("onorientationchange" in window)?a(document):a(window);c.anystretch(d,b,e)}})(jQuery);
（3）修改config/initializers/assets.rb文件，指定需要预编译的文件类型，在文件最下面加入下面这行代码
Rails.application.config.assets.precompile += %w(*.css *.js */*.css */*.js *.png *.jpg *.jpeg *.gif */*.png */*.jpg */*.jpeg */*.gif)

代码解析：

  • Rails.application.config.assets.precompile += %w(*.css *.js /.css /.js *.png *.jpg *.jpeg *.gif /.png /.jpg /.jpeg /.gif)
    表示系统会将项目中所有以.js、.css、.png为后缀的文件进行预编译

预编译：
资源预编译就是系统把要编译的文件(这些文件通过Rails.config.assets.precompile指定)，编译好(解释，合并，压缩，打指纹等)形成静态资源，然后把这些静态资源挪到public/assets目录下，以供nginx, apache等web服务器访问。可以提高访问速度，也可以防止浏览器缓存导致显示旧的样式。
具体原理目前不需要深究，我们只需要知道编写ruby项目，需要配置好Rails.config.assets.precompile，系统会自动编译，预编译好的文件，我们就可以在项目中引入了。

（4）根据「插件使用说明」修改app/views/layouts/application.html.erb文件

A、在application.html.erb文件中引入刚刚添加的jquery.anystretch.min.js文件。

#原代码
<%= javascript_include_tag "application", 'data-turbolinks-track': 'reload'%>
#改成
<%= javascript_include_tag "application","vendor/jquery.anystretch.min", 'data-turbolinks-track': 'reload'%>

代码解析：（了解即可）

  • <%= javascript_include_tag “application”,“vendor/jquery.anystretch.min”, ‘data-turbolinks-track’: ‘reload’%>
    此代码相当于下面代码：
    <script src="/assets/application.js?body=1" data-turbolinks-track=“reload”></script>
    <src="/assets/vendor/jquery.anystretch.min.js?body=1" data-turbolinks-track=“reload”></script>

预编译复习：
我们上面说到预编译好的文件，我们就可以在项目中引入了。我们刚刚添加的jquery.anystretch.min.js文件在application.html.erb文件中引入。"vendor/jquery.anystretch.min"被编译成了 /jquery.anystretch.min.self-0316f0c78a4cee85193583472bed190a949676dcdfeef7a69334c4f25463c529.js。其中self-0316f0c78a4cee85193583472bed190a949676dcdfeef7a69334c4f25463c529就是编译后的jquery.anystretch.min.js的指纹，它是唯一的，并且会随着jquery.anystretch.min.js内容的改变而改变。

B、 引入两个js文件（根据「插件使用说明」）

<!-- 参考代码，无需粘贴
<%= csrf_meta_tags %> -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- 参考代码，无需粘贴
<%= stylesheet_link_tag "application" , media: 'all', 'data-turbolinks-track': 'reload'%> -->

C、在js中使用anystretch方法

//参考代码，无需粘贴
//<script>
  $('.home-banner').anystretch();
//参考代码，无需粘贴
//  var hideNotice = function(){

8、清空app/views/home/index.html.erb文件，粘贴下面语句

<div class="home-banner" data-stretch="<%= image_url '/assets/index.jpg' %>">
    <div class="banner-inner container clearfix">
      <div class="home-banner-links">
        <%= link_to "发布新帖", "#", class: "banner-btn btn" %>
      </div>
      <div class="home-banner-links" style="left: 100px;top: 100px;">
        <%= link_to "个人中心", "#", class: "banner-btn btn" %>
      </div>
      <div class="home-banner-links" style="left: 350px;top: 150px;">
        <%= link_to "流浪猫救助活动", "#", class: "banner-btn btn" %>
      </div>
    </div>
</div>
<div class="issue-list-header">
  <div class="container clearfix">
    <h1 class="issue-list-heading"></h1>
  </div>
</div>

代码解析：

  • <div class=“home-banner” data-stretch="<%= image_url ‘/assets/index.jpg’ %>">
    class=“home-banner” 这个div标签class的名字是home-banner，home.scss文件里面写了这个class的对应的样式。上面我们刚刚在application.html.erb文件里面加的js $(’.home-banner’).anystretch();其中.home-banner指的就是class为home-banner的标签。
    data-stretch是结合jquery.anystretch插件使用的，意思是引入文件路径为/assets/index.jpg的图片

  • <%= link_to “发布新帖”, “#”, class: “banner-btn btn” %>
    我们又遇到了嵌入式ruby，这条代码相当于<a href="#" class=“banner-btn btn”>发布新帖</a>
    网站主页面

最后我们重启项目，在浏览器中打开项目，我们看到上面图片效果，说明网站主页面已经成功完成~

猜你喜欢

转载自blog.csdn.net/shine_a/article/details/86413827
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022