为什么我在Rails 6中无法启动？

如何解决为什么我在Rails 6中无法启动？

我想在我的Rails应用程序中有一个模式/弹出窗口。最后甚至还有幻灯片/旋转木马。我遵循了一些教程，但是所有教程都不起作用。例如：CrashingChandelier。同样，堆栈溢出中的许多问题也无济于事，因为它们大多数处理js文件。

这门课程说它可以使用Bootstrap-modal而无需使用Javascript文件。尽管它应该很简单，但是我无法修复它，也不知道如何调试它。所以请帮助我。

这是 index.html.erb ，带有按钮和模式。

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!--MODAL-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
            <div class="pull-left"><h4>Your picture gallery</h4></div>
              <button type="button" class="close" data-dismiss="modal" title="Close">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
          </div>
    <div class="modal-body">

      <p>hello,world!</p>

    </div><!--end modal-body-->
        <div class="modal-footer">
        <div class="pull-left">
        </div>
          <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
      </div><!--end modal-footer-->
    </div><!--end modal-content-->
  </div><!--end modal-dialoge-->
</div><!--end myModal-->

这是我的 application.scss

/*
 *
 */

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

这是我的 application.js ：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

这是我的 Gemfile ：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails',github: 'rails/rails'
gem 'rails','~> 6.0.3','>= 6.0.3.4'

# Database

# Use postgresql as the database for Active Record
gem 'pg','>= 0.18','< 2.0'

# Server

# Use Puma as the app server
gem 'puma','~> 4.1'

# Layout
gem 'bootstrap-sass','3.4.1'
gem 'jquery-rails'

# Popups
gem 'popper_js'

# Use SCSS for stylesheets
gem 'sass-rails','>= 6'
# Manipulate images
gem 'image_processing','1.9.3'
gem 'mini_magick','4.9.5'

# Security

# Use Active Model has_secure_password
gem 'bcrypt'

# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker','~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks','~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder','~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis','~> 4.0'

# Use Active Storage variant
# gem 'image_processing','~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap','>= 1.4.2',require: false


group :development,:test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug',platforms: [:mri,:mingw,:x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console','>= 3.3.0'
  gem 'listen','~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen','~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara','>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
  gem 'minitest'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'

  gem 'rails-controller-testing'
end

group :production do
  gem "aws-sdk-s3",require: false
end

# Windows does not include zoneinfo files,so bundle the tzinfo-data gem
gem 'tzinfo-data',platforms: [:mingw,:mswin,:x64_mingw,:jruby]

如果我将'

'变成class=“modal show”，则可以看到模态。但是关闭按钮无法起作用。

看来这一切必须足以至少获得一个弹出窗口/模式

编辑： javascript可能有问题？

我放在视图中<script> function myFunction() { alert(“Alert!”); } </script>来检查javascript是否有效并且什么都没发生。

有人可以告诉我如何使javascript工作吗？

1 个答案:

答案 0 :(得分：2)

如果您使用的是Rails 6，请不要使用

gem 'bootstrap-sass','3.4.1'
gem 'jquery-rails'

您需要通过yarn和webpacker安装引导程序。 方法是：

控制台：

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

environment.js：

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide",new webpack.ProvidePlugin({
    $: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',Popper: ['popper.js','default']
  }))
module.exports = environment

在application.html.erb中添加（而不是替换）：

= stylesheet_pack_tag 'application',media: 'all','data-turbolinks-track': 'reload'

application.js：

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

现在，您可以转到bootstrap docs/modals并复制粘贴模式，它将起作用。

Source

解决方法

如果您使用的是Rails 6，请不要使用

gem 'bootstrap-sass','3.4.1'
gem 'jquery-rails'

您需要通过yarn和webpacker安装引导程序。 方法是：

控制台：

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

environment.js：

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide",new webpack.ProvidePlugin({
    $: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',Popper: ['popper.js','default']
  }))
module.exports = environment

在application.html.erb中添加（而不是替换）：

= stylesheet_pack_tag 'application',media: 'all','data-turbolinks-track': 'reload'

application.js：

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

现在，您可以转到bootstrap docs/modals并复制粘贴模式，它将起作用。

Source