搭建一个网站(2)

今天rails 出现故障,在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 = 创建一个名为 .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 里面,执行以下命令
git add .
git commit -m "add bootstrap to project"

让全站的 HTML 架构,套用 Bootstrap 的制服

新增文件夹app/views/common

执行命令mkdir app/views/common

新增navbar

执行命令touch app/views/common/_navbar.html.erb
(从这两个文件可以看出两个新建的命令的区别,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 href="http://courses.growthschool.com/courses/rails-101/" 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>

产生一个新的空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 内加入 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的网络公开课程。

删除掉brach的方法

先离开你要删除的分支,接着执行 git branch -d 你要删除的分支名称


以上学习内容来自xdite老师的网络公开课,https://courses.growthschool.com/courses/rails-101/lectures/1639140,本文只是个人学习课程的实操记录。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容