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