rails 添加外键_如何将JavaScript添加到Rails 6 App

rails 添加外键

As a junior Full-Stack developer, my main focus was the backend. I wanted to learn how to program my backend server to serve my web application.

作为初级全栈开发人员，我的主要重点是后端。 我想学习如何对后端服务器进行编程以服务于Web应用程序。

But after learning the basics of the the backend, I learned that the frontend was just as important as the backend. And one way to increase the liveliness of your web application is by adding JavaScript.

但是，在学习了后端的基础知识之后，我了解到前端与后端同样重要。 一种增加Web应用程序活泼性的方法是添加JavaScript。

JavaScript is essential to add interactivity to your web application. Of course, it has become far more than that now. It is a programming language that web browsers run. Many websites you have visited use some JavaScript code in their frontend.

JavaScript对于向Web应用程序添加交互性至关重要。 当然，它已经远远超过了现在。 它是Web浏览器运行的一种编程语言。 您访问过的许多网站在前端使用一些JavaScript代码。

You may have started using Ruby on Rails to build your web application and wondered how to add JavaScript to your code. In this article, I'll show you how to add JavaScript code to your Rails app.

您可能已经开始使用Ruby on Rails来构建Web应用程序，并且想知道如何在代码中添加JavaScript。 在本文中，我将向您展示如何向Rails应用程序添加JavaScript代码。

为什么要使用JavaScript？ (Why JavaScript?)

You may wonder why you even need JavaScript in your web application in the first place. In short, if you don't include any JS, then your web application's user experience will not be good.

您可能想知道为什么首先需要在Web应用程序中使用JavaScript。 简而言之，如果您不包括任何JS，则您的Web应用程序的用户体验将不会很好。

Let's say you have a form that a user fills out and you want to do form validation. If the user submits the form without filling in the proper values, the page for the form has to reload again, hitting the server and coming up again for the user. That takes a lot of time and will probably annoy the user.

假设您有一个用户填写的表单，并且想要进行表单验证。 如果用户提交表单时未填写适当的值，则必须重新加载表单页面，以使其到达服务器并再次出现。 这会花费很多时间，并且可能会惹恼用户。

Of course you can sometimes get away with HTML form validation, but that's not always possible. Adding a simple script that checks the user inputs and notifies them that they should input the correct information is much better.

当然，有时您可以摆脱HTML表单验证，但这并不总是可能的。 添加一个简单的脚本来检查用户输入并通知他们应该输入正确的信息会更好。

Of course this doesn't mean you can ignore server side validation, but that's for another article.

当然，这并不意味着您可以忽略服务器端验证，但这是另一篇文章。

Another use case is loading files asynchronously, which you can do in JavaScript without reloading the whole page. You may have used some web apps that load more pictures and articles as you scroll down without having to refresh or change the page over and over again.

另一个用例是异步加载文件，您可以使用JavaScript进行操作而无需重新加载整个页面。 向下滚动时，您可能已经使用了某些Web应用程序来加载更多图片和文章，而不必一遍又一遍地刷新或更改页面。

These and other use cases are great reasons to use JavaScript in your application. In fact, the demand for JavaScript has been increasing. You can even use it to write your backend.

这些和其他用例是在应用程序中使用JavaScript的重要原因。 实际上，对JavaScript的需求一直在增长。 您甚至可以使用它来编写后端。

But we love Rails, so we are going to stick with it for a while.

但是我们喜欢Rails，因此我们会坚持一段时间。

我们将在这里介绍 (What we'll cover here)

At the time of writing, the latest version of the framework is Rails 6, and it has brought some changes to the way you interact with JavaScript.

在撰写本文时，该框架的最新版本是Rails 6，它对与JavaScript交互的方式进行了一些更改。

Prior to Rails 6, we had the asset pipeline to manage CSS and JavaScript files. But starting from Rails 6, Webpacker is the default compiler for JavaScript. CSS is still managed by the asset pipeline, but you can also use Webpack to compile CSS.

在Rails 6之前，我们拥有资产管道来管理CSS和JavaScript文件。 但是从Rails 6开始，Webpacker是JavaScript的默认编译器。 CSS仍然由资产管道管理，但是您也可以使用Webpack来编译CSS。

You won't find your JavaScript folder in the same place as you did in Rails 5. The directory structure for JavaScript has changed to the app/javascript/packs/ folder.

您将不会在Rails 5中找到JavaScript文件夹。JavaScript的目录结构已更改为app / javascript / packs /文件夹。

In that folder you will find the application.js file, which is just like the application.css file. It will be imported by default in the application.html.erb file when you create your new Rails app.

在该文件夹中，您将找到application.js文件，就像application.css文件一样。 创建新的Rails应用程序时，默认情况下会将其导入application.html.erb文件中。

The application.html.erb file will be used by all views.

application.html.erb文件将被所有视图使用。

添加将被所有视图使用的脚本 (Adding a script that will be used by all views)

If you want your JavaScript to be available in all views or pages, you can just put it in the application.js file:

如果希望JavaScript在所有视图或页面中都可用，则可以将其放在application.js文件中：

The first four lines are there by default. I have added a console.log statement to show you that the JavaScript will be available everywhere.

默认情况下，前四行在那里。 我添加了一个console.log语句，向您展示JavaScript将随处可见。

You can test this by viewing any page in your application and opening the developer console.

您可以通过查看应用程序中的任何页面并打开开发人员控制台来进行测试。

But you may not always want your JavaScript code to be loaded on every page. Instead, you can make the script available only when visiting a specific page.

但是，您可能并不总是希望在每个页面上都加载JavaScript代码。 而是可以仅在访问特定页面时使脚本可用。

添加将由特定文件使用的脚本 (Adding a script that will be used by a specific file)

If you want your JavaScript to be available for only a specific view, then you can use the javascript_pack_tag to import that specific file:

如果您希望JavaScript仅可用于特定视图，则可以使用javascript_pack_tag导入该特定文件：

Remember that you need to add the file in the packs directory. The javascript_pack_tag should also refer to the name of the JavaScript file you created.

请记住，您需要在packs目录中添加文件。 javascript_pack_tag也应引用您创建JavaScript文件的名称。

Now the script will only run when the specific view that includes the javascript_pack_tag is loaded in the browser.

现在，只有在浏览器中加载了包含javascript_pack_tag的特定视图时，脚本才会运行。

结语 (Wrapping up)

I hope this article helps clear up any confusion you might have when updating your app to Rails 6, or if you just got started with Rails.

我希望本文有助于消除将应用程序更新到Rails 6时可能遇到的困惑，或者如果您刚开始使用Rails。

You can follow me on Github if you want to learn more.

如果您想了解更多信息，可以在Github上关注我。

翻译自: https://www.freecodecamp.org/news/how-to-add-javascript-to-your-rails-6-app/

rails 添加外键