rails实战

rails实战笔记

rails+bootstrap搭建求职/招聘网站
环境：windows/ubuntu + rails6 + ruby2.7
目前更新至：devise的使用

准备工作

新建项目

新建一个rails项目：

rails new 项目名 

新建一个用于测试的控制器：

rails g controller Test test --no-stylesheets

引入bootstrap相关包

安装bootstrap-sass

方法一：
在gemfile中写入：

gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'sass-rails' # 如果没有'sass-rails'也需引入这个包

然后进行bundle install
方法二：
在项目目录下启动终端，运行gem install bootstrap-sass，然后将gem 'bootstrap-sass'写入gemfile中，如果没有jquery-rails和sass-rails，也用同样的方法安装。

引入bootstrap-sass

将app/assets/stylesheets/application.css的后缀改为scss，然后删除 ：

*= require_self 
*= require_tree

加入：

 @import "bootstrap-sprockets";
 @import "bootstrap";

app/javascript/packs/application.js中加入：

//= require jquery
//= require bootstrap-sprockets

测试

在app/views/test/test.html.erb中写入：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

<h1>Test#test</h1>
<p>Find me in app/views/test/test.html.erb</p>

<form>
    <div class="form-group">
        <input id="test" type="text" class="form-control"/>
        <button id="test_btn" class="btn btn-success">点我</button>
    </div>
</form>

运行rails s，可以在127.0.0.1:3000/test/test看到下图，则说明成功引入相关包。

引入jquery

安装jquery

yarn add jquery

在config/webpack/environment.js中添加：

const { environment } = require('@rails/webpacker')

var webpack = require('webpack');
environment.plugins.append( 'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
    })
)

module.exports = environment

测试

在app/javascript/packs/application.js中添加:

$(document).on('turbolinks:load', function(){
    $("#test_btn").click(function(){
        alert($("#test").val());
    });
});

运行后点击点我按钮即可看到弹出弹窗。

参考资料

Ruby on Rails 引入 bootstrap
Rails 在 Rails 6 中使用 jQuery 和 Bootstrap

devise的使用

参考资料

rails + devise 用户注册登录及权限判断
devise官方文档