rails experience Series 1

Posted by tomcurcuruto on Thu, 16 Dec 2021 22:01:31 +0100

In fact, as a novice just getting started, you don't need to know so many things. For rails, when you enter rails new demo, there are so many folders and so many things you can't understand when you cd to the demo. I feel like I'm one step away from learning to be buried
Especially in the case of scarce rails data, if you can rely on your own strength, rely on the official website and search data, you can only represent some people.
Blogger, when I study rails every day, I am particularly anxious, and feel that the information and books searched are particularly tasteless, and I can't experience the simplicity of rails. Always remind yourself to guard against arrogance and impatience, and you are on the verge of collapse every day. Because I'm confused.

Today I found some materials that I feel can be, although they are all in English. But fun does give you motivation to learn, doesn't it. Do as I do first. I don't think so, so I don't have to look down

rails g controller home index

If you use vs code to generate the controller class, ctl+p, find routes and add root 'home#index'
So when you go online, the first page that appears is this index page. You have to ask why, bastard's ass, do you understand.

What does rails do?

Rapid development of the web, there is no need to plug-in, you wait to write it yourself? The first step is to learn the copy function of bootstrap, no matter whether you can HTML or CSS
Enter the official website: https://getbootstrap.com/docs/5.1/getting-started/introduction/

Let's clean up our public part, layouts / application html. erb
getting start - introduction ------ pull down to find ------ Starter
template ------- copy it and don't delete the things in the code
This is my modified template. Compare it yourself. This is application html. Erb public template, no matter how many pages you create, it will always be executed and executed first

Then you say index html. Where's Erb? Don't you see?

See the "yield" below. When the home page is displayed, the yield is index html, execute other html file, the yield is other html files. In a word, all pages are "this page", which are inserted.
Where is it? It's yield
You can put the nav head on the yield
You can put foot legs under the yield
Let's put a head first

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>friend</title>This can be changed to the name you want
    -------------------------------------------This is a copy
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
----------------------------------------------------------
  </head>
  <body>
  <%= render "home/header" %>---Render (insert) home/_header.html.erb What's inside
  you header The file is not underlined render No, you're going to insert it html Underline all documents.
  <div class = "container">------This is bootstrap If you add the types in, you can make no comparison
  </br>
    </br>
  <%= yield %>------------------------Here! this
  </br>
  </div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

This is home/_header.html.erb, corresponding to the above
<%= render "home/header">

Template position of head
- Components -------- NavBar ------ pull down ----- just select a template and copy it
The template that says "navbar" can be changed by yourself

Finished running!

local
rails server(reils s)
The server
rails s -b 0.0. 0.0 (server address plus port 3000)
what? The server port has been bound
In config / environments / development rb
Add config hosts. clear
function
rails s -b 0.0.0.0 -p port number

Go to bed and do it again tomorrow!

Topics: Javascript Front-end html

Programmer Think

rails experience Series 1

Hot Topics