搭建一個網(wǎng)站(2)

今天rails 出現(xiàn)故障,在localhost:3000瀏覽器打開失敗,提示rails 安裝有問題
查看了一下ruby版本,2.2,重新安裝ruby rails

ruby和rails安裝:

1、rvm list known 查看可用版本
2、rvm install 2.3.4 安裝ruby2.3.4
3、gem install rails -5.0.0

新建一個文件夾

rails new rails101,

保存

打開文件 cd rails101
輸入git init = 創(chuàng)建一個名為 .git 的子目錄
git add . = 開始跟蹤當前目錄下的文件
git commit -m "Initial Commit"

修改gemfile文件

在group :development, :test do 前一行加入 gem 'bootstrap-sass'


屏幕快照 2018-04-02 20.47.32.png

然后在finder中找到gem file文件,打開編輯。

屏幕快照 2018-04-02 20.50.53.png
屏幕快照 2018-04-02 21.02.22.png

至于寫這么詳細,是因為我不熟悉Mac文件夾在哪兒,找這個文件也找了好久??,希望看了這個文檔的不用再在找gemfile上面花費時間

運行bundle install

每一次修改gemfile之后都要運行一下bundle install

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

用application.css 更名為 application.scss(也可以找到這個文件夾在文件里面更改)

并在此文件中新增兩行
@import "bootstrap-sprockets";
@import "bootstrap";


屏幕快照 2018-04-02 21.15.47.png

將變更的commit 進去 git 里面,執(zhí)行以下命令
git add .
git commit -m "add bootstrap to project"

讓全站的 HTML 架構(gòu),套用 Bootstrap 的制服

新增文件夾app/views/common

執(zhí)行命令mkdir app/views/common

新增navbar

執(zhí)行命令touch app/views/common/_navbar.html.erb
(從這兩個文件可以看出兩個新建的命令的區(qū)別,mkdir是新建文件夾,touch是新建文件)

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

新增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 ?2016 Rails101

Design by
<a target=_new>xdite</a>
</p>
</footer>

修改全域 HTML 樣式

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>

產(chǎn)生一個新的空Hello World 頁面

touch app/views/welcome/index.html.erb

quote
<h1> Hello World! </h1>

git 進度存檔
git add .
git commit -m "add bootstrap html"

運行rails s

屏幕快照 2018-04-02 21.41.08.png

將 Boostrap 的 js 提示套件 bootstrap/alert “掛”進專案里面

app/assets/javascripts/application.js
在 requre_tree 上加入 //= require bootstrap/alert

屏幕快照 2018-04-02 21.48.58.png

新增app/views/common/_flashes.html.erb

屏幕快照 2018-04-02 21.54.16.png

新增 app/helpers/flashes_helper.rb

touch app/helpers/flashes_helper.rb


屏幕快照 2018-04-02 21.55.46.png

在 app/views/layout/application.html.erb 內(nèi)加入 flash 這個 partial

屏幕快照 2018-04-02 21.57.30.png

git 存檔

git add .
git commit -m "add bootstrap flash function"

測試flash helper 功能

修改 app/controllers/welcome_controller.rb。加入 flash[:alert] = "早安!你好!"。


屏幕快照 2018-04-02 22.02.49.png

運行rails s 以后打開localhost:3000,是以下效果


屏幕快照 2018-04-02 22.01.45.png

flash[:notice] 顯示的是綠色信息
flash[:alert] 顯示的是紅色信息
flash[:warning] 顯示的是黃色信息

git常用指令

存檔

cd 打開你所指定的文件
git init
git add .
git commit -m "對于修改部分的簡要敘述"

3新增一個分支

git checkout -b 你想取的分之名稱

切換分支

git checkout 你想要切換到的分支名稱
更詳細請參考xdite的網(wǎng)絡公開課程。

刪除掉brach的方法

先離開你要刪除的分支,接著執(zhí)行 git branch -d 你要刪除的分支名稱


以上學習內(nèi)容來自xdite老師的網(wǎng)絡公開課,https://courses.growthschool.com/courses/rails-101/lectures/1639140,本文只是個人學習課程的實操記錄。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容