美文网首页我爱编程
搭建一个网站(2)

搭建一个网站(2)

作者: 敏思乐行 | 来源:发表于2018-04-02 22:30 被阅读27次

    今天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,本文只是个人学习课程的实操记录。

    相关文章

      网友评论

        本文标题:搭建一个网站(2)

        本文链接:https://www.haomeiwen.com/subject/gvbthftx.html