Verwenden Sie das Gerüst, um Ideen zu bilden, hinzuzufügen, zu entfernen, zu bearbeiten und anzuzeigen.
rails generate scaffold idea name:string description:text picture:string
Aktualisieren Sie als Nächstes die Datenbank.
rails db:migrate
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Fügen Sie vor dieser einen Zeile Folgendes hinzu
app/views/layouts/application.html.erb
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
Ändern Sie außerdem das Innere von "
" wie folgt.app/views/layouts/application.html.erb
<div class="container">
<%= yield %>
</div>
Fügen Sie dann Ihrem Layout Navigation und Fußzeilen hinzu. Fügen Sie unmittelbar nach "
" Folgendes hinzu.app/views/layouts/application.html.erb
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">The Idea app</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/ideas">Ideas</a></li>
</ul>
</div>
</div>
</nav>
Fügen Sie außerdem kurz vor "</ body>" Folgendes hinzu.
app/views/layouts/application.html.erb
<footer>
<div class="container">
Rails Girls 2020
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Es ändert auch den Stil der Ideentabelle.
app/assets/stylesheets/application.css
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
Öffnen Sie Gemfile und
Fügen Sie unmittelbar nach "gem'sqlite3" die folgende Zeile hinzu:
gem 'carrierwave'
Führen Sie dann den folgenden Befehl im Terminal aus:
bundle
Anschließend können Sie mit dem folgenden Befehl Code generieren, um den Upload durchzuführen:
rails generate uploader Picture
Nächster,
app/models/idea.rb
class Idea < ApplicationRecord
Schreiben Sie unmittelbar danach Folgendes.
app/models/idea.tb
mount_uploader :picture, PictureUploader
des Weiteren,
app/views/ideas/_form.html.erb
<%= form.text_field :picture %>
Ändern Sie dies wie folgt:
app/views/ideas/_form.html.erb
<%= form.file_field :picture %>
Dies zeigt nur den Pfad der Datei. Damit
app/views/ideas/show.html.erb
<%= @idea.picture %>
Ändern Sie den obigen Code wie folgt.
app/views/ideas/show.html.erb
<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
config/routes.rb
root to: redirect('/ideas')
rails generate controller pages info
Bereiten Sie zunächst ein Heroku-Konto vor. Benutzerregistrierungsbildschirm: (https://signup.heroku.com/)
Für Mac
brew install heroku/brew/heroku
Geben Sie nach der Installation von Heroku Toolbelt den folgenden Befehl in das Terminal ein:
heroku login
Fügen Sie dann den von Ihnen erstellten Code zum Versionsverwaltungssystem hinzu. Geben Sie im Terminal den folgenden Befehl ein:
echo public/uploads >> .gitignore
git add .
git commit -m "initial commit"
gem 'sqlite3', '~> 1.4'
Ändern Sie diesen Code wie folgt:
group :development do
gem 'sqlite3', '~> 1.4'
end
group :production do
gem 'pg'
end
Führen Sie dann den folgenden Befehl auf dem Terminal aus, um es einzurichten.
bundle install --without production
git add . git commit -m "Added pg gem and updated Gemfile.lock"
Bei Erfolg wird Folgendes angezeigt.
Creating ⬢ first-app... done http://my-first-app.herokuapp.com/ | https://git.heroku.com/my-first-app.git
Wenn der Name der App bereits verwendet wird, sieht er folgendermaßen aus:
Creating ⬢ my-first-app... ! ▸ Name first-app is already taken
Code drücken
Senden Sie den Code an Heroku.
git push heroku main
Datenbankmigration
heroku run rails db:migrate
Sie können die App aus dem Internet anzeigen, indem Sie den folgenden Befehl ausführen:
herku open
Recommended Posts