В Rails 7 webpack устарел, и по умолчанию существует конвейер assest для рендеринга содержимого javaScript (importmap), и добавление элементов javaScript в ваш проект стало сложной проблемой.
теперь создайте файл stripe.rb в config/initializers. Я собираюсь показать, как легко вы можете создать базу вашего проекта Rails 7, чтобы добавить все jQuery| JavaScript| начальная загрузка | Cсс.
Создать новое приложение rails | добавить следующие изменения в существующее приложение | Переход на версию rails 7
rails new demo-7
ваше новое приложение с rails 7 и ruby 3.0 будет создано. перейдите в каталог demo-7.
Запустите сервер rails и перейдите на localhost:3000, чтобы увидеть свою домашнюю страницу.
создайте домашний контроллер, чтобы увидеть изменения.
rails g controller home index;
это изменит следующие файлы.
app/controllers/home_controller.rb app/helpers/home_helper.rb app/views/home/index.html.erb test/controllers/home_controller_test.rb routes.rb
добавьте root ‘home#index’ в route.rb, чтобы сделать страницу корневой.
запустите приложение и посмотрите свою индексную страницу.
Теперь я добавлю загрузочный файл:
::я добавлю панель навигации, чтобы увидеть изменения в загрузочном файле:
перейдите в gemfile и добавьте
gem "bootstrap" gem "sassc-rails"
Запустите bundle install
Переименуйте app/assets/stylesheets/application.css в app/assets/stylesheets/application.scss
Удалитевсе содержимое и добавьте в app/assets/stylesheets/application.scss
@import "bootstrap";
попал в файл app/javascript/application.js и добавил
import "popper" import "bootstrap"
добавить в app/views/layouts/application.html.erb после основного текста.
<body>
<%= render 'shared/navbar' %>
<%= yield %>
</body>
Создайте app/views/shared/_navbar.html.erb новый файл и вставьте
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
посетите config/importmap.rb и обновите его как
# Pin npm packages by running ./bin/importmap pin "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" pin "popper", to: 'popper.js', preload: true pin "bootstrap", to: 'bootstrap.min.js', preload: true
добавить config/initializers/assets.rb
# Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = "1.0" # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js) # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets # folder are already added. # Rails.application.config.assets.precompile += %w( admin.js admin.css )
Запустите ваше приложение, и вы увидите что-то вроде этого, ваш загрузчик успешно установлен:
Теперь мы добавим jquery | jquery-ui и отличный шрифт
добавить следующий драгоценный камень в свой gemfile
gem "bootstrap" gem "sassc-rails" gem 'jquery-rails' gem 'jquery-ui-rails' gem "sassc-rails"
запустить пакетную установку
Перейдите в app/assets/stylesheets/application.scss и добавьте:
@import "bootstrap"; @import "jquery-ui.css";
Перейдите в app/javascript/application.js и добавьте:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" import "controllers" import "popper" import "bootstrap" import "@fortawesome/fontawesome-free"; import "jquery" import "jquery_ujs" import "./jquery_ui"
Создайте app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
this.element.textContent = "Hello World!"
}
}
Создайте app/javascript/controllers/home_controller.js
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
console.log("home controller has been connected");
$( "#datepicker" ).datepicker();
var initial_val = 0;
$("#btn-click").click(function (e) {
e.preventDefault();
var date_value = $("#datepicker").val();
alert(`button has been clicked ${initial_val} and date ${date_value} `);
initial_val+= 1;
});
$( function() {
$( "#draggable" ).draggable();
} );
}
}
Создайте app/javascript/jquery_ui.js и добавьте:
//= require jquery-ui
Перейдите в app/views/home/index.html.erb и сделайте это:
<div class="container">
<h3>Fontawesome icon </h3>
<p>
<i class="fa-solid fa-flag"></i>
<i class="fa-brands fa-amazon"></i>
<i class="fa-regular fa-bell"></i>
</p>
<br>
<hr>
<div data-controller="home">
<h6> Pick date using jQuery Datepicker </h6>
<p>Date: <input type="text" id="datepicker"></p>
<br>
<hr>
<h6> JQuery Draggable Element </h6>
<div style="width: 300px; height: 100px;" id="draggable" class="ui-widget-content border border-danger">
<p style="width: 300px; height: 100px;">Drag me around</p>
</div>
<br>
<hr>
<h6> Click Event using JQuery </h6>
<button id="btn-click"> Click Me </button>
</div>
</div>
сделайте ваш config/importmap.rb лайком
# Pin npm packages by running ./bin/importmap pin "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" pin "popper", to: 'popper.js', preload: true pin "bootstrap", to: 'bootstrap.min.js', preload: true pin "@fortawesome/fontawesome-free", to: "@fortawesome/[email protected]/js/all.js">https://ga.jspm.io/npm:@fortawesome/[email protected]/js/all.js" pin "jquery", to: "jquery.min.js", preload: true pin "jquery_ujs", to: "jquery_ujs.js", preload: true pin "jquery-ui", to: "jquery-ui.min.js", preload: true
сделайте свой config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js jquery.min.js jquery_ujs.js jquery-ui.min.js)
Запустите приложение и перейдите на домашнюю страницу
Теперь у вас есть jQuery| JavaScript| начальная загрузка | CSS в Rails 7
Удачного кодирования 😃 😄
#Rails7 #ruby #код #jquery #JavaScript #Css #bootstrap
