Rails7英语学习项目从零开始


学习资料:
https://guides.rubyonrails.org/
https://api.rubyonrails.org/
数据库
pg
redis
编辑器: vim
操作系统:ubuntu 18.04.2 LTS

参考项目:
https://www.bearer.com/blog/how-to-build-modals-with-hotwire-turbo-frames-stimulusjs
hotwire-rails停掉了
https://github.com/hotwired/hotwire-rails
This gem was aggregating the dependencies of Turbo and Stimulus, but offered nothing else. Aggregating dependencies is not enough value, so this gem is now deprecated. Please use the underlying frameworks directly. See https://github.com/hotwired/turbo-rails and https://github.com/hotwired/stimulus-rails

整体流程
一、创建项目
rails new delitao
  Rails 7 新功能和特性查看
1.1 javascript
如果没有config/importmap.rb
bin/rails importmap:install
通过importmaps增加bootstrap5
bin/importmap pin bootstrap
在app/javascript/application.js里面import bootstrap
import  'bootstrap'


rails turbo:install stimulus:install

如不不用cdn,就自己编译js,如下:
For the javascript part we need to do three things:
  • Precompile the bootstrap.min.js that comes with the gem, by adding to config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )


  • pin the compiled asset in config/importmap.rb:
pin "application", preload: true
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.5/lib/index.js"
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 "@hotwired/turbo-rails", to: "turbo.min.js", preload: true


  • Include bootstrap in your app/javascript/application.js:
import 'bootstrap'
import "controllers"
import "@hotwired/turbo-rails"


I prefer this approach rather than pinning a CDN because we avoid diverging versions of Bootstrap.

1.2 CSS
gem 'bootstrap', '~> 5.1.3'
app/assets/stylesheets/application.scss  这个后缀不能是css,也不能存在css后缀的application.css
//add 
// if you want to change some variables:
$primary: #c11;
@import "bootstrap";


1.3 Layout

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>   <%# this loads Sprockets/Rails asset pipeline %>
<%= javascript_importmap_tags %> <%#  this loads JS from importmaps %>

二、创建第一个story->并实现-> 选加测试
Rails 7的新技术:
turbo_frame_tag
turbo_stream_from 
异步同步到所有客户端

turbo_frame_tag:  多个view页面下相同的 turbo_frame_tag名字的内容,在请求到该页面的时候,只返回 turbo_frame_tag包含的那一部分内容,并替换掉现有的那部分内容。
When the user will click on the Edit this todo link, as direct response to this direct user interaction, the turbo frame will be replaced with the one in the edit.html.erb page automatically.

三、初始化线上环境,并发布上线
服务器和系统准备:初始化项目,域名
Add these to Gemfile
group :development do
  # Deploy with Capistrano
  gem 'capistrano', '~>3.14',  require: false
  gem 'capistrano-rails', '~>1.6'
  gem 'capistrano-rvm', require: false
  gem 'capistrano-bundler', require: false
  gem 'capistrano3-puma', require: false
end

> bundle exec cap install

配置puma作为应用服务器,由OS管理启动。

发布:
cap production deploy

四、创建第n个story->并实现-> 选加测试
1. 用户邮箱注册登录, gem包:devise, https://betterprogramming.pub/devise-auth-setup-in-rails-7-44240aaed4be
2. 创建一个topic(对话)has many posts ,对话顺序,topic has 标题,描述,对话角色,关键字,作者, post has 角色: 内容,表情emotion  (2022.5.23)
3. 为减轻前期开发压力,暂时不设计用户录入界面,有内容后,通过脚本直接导入到后台。  (2022.5.23)
3.1 增加一个后台管理Gem administrate。https://administrate-demo.herokuapp.com/getting_started  (2022.5.23)
4. 设计页面
4.1 选择一个好的参考布局 ,自适应布局,手机优先。
4.2 分页(gem pagy)
5. 注销链接的写法:<%= link_to "注销", destroy_user_session_path, data: { turbo_method: :delete }, class: "nav-link" %>, 以前的老代码method: :delete 要改,如果新的写法没有生效,那是没有安装turbo_rails:  rails turbo:install  (finished 2022.5.28)
6. story: 导入英语脚本,手动/自动翻译中文。

五、发布,返回第四步

六、运营
=======================
Tips
sudo: no tty present and no askpass program specified
@cvandermeer could you share how you fixed the issue?
I had exactly the same issue and setting pty to true didn't make it work (it prompted for password but then got stuck)
At the moment I set my deploy user as:
deploy         ALL=(ALL)       NOPASSWD: ALL
But that is less than ideal.
I would appreciate knowing if you found any other solution that worked for you.
(这是一种不安全的设置)
由于帐号并没有开启免密码导致的 
假设当前帐号为abc
切换到root下  

1    打开sudoers
vi /etc/sudoers
2    添加免密码
abc ALL = NOPASSWD: ALL
=========================
hw@t4:~$ rvm list

   ruby-2.6.3 [ x86_64 ]
=> ruby-3.1.2 [ x86_64 ]

# Default ruby not set. Try 'rvm alias create default <ruby>'.

# => - current
# =* - current && default
#  * - default

hw@t4:~$ 
hw@t4:~$ rvm alias create default 3.1.2
Creating alias default for ruby-3.1.2....
hw@t4:~$ rvm list
   ruby-2.6.3 [ x86_64 ]
=* ruby-3.1.2 [ x86_64 ]
=========================
Because partials are shared code, it is best practice that they do not depend on specific instance variables set by a controller action. Instead, we will pass the article to the partial as a local variable.  A partial's filename must be prefixed with an underscore, e.g. _form.html.erb. But when rendering, it is referenced without the underscore, e.g. render "form".

<div>
    <%= form.label :body %><br>
    <%= form.text_area :body %><br>
    <% @article.errors.full_messages_for(:body).each do |message| %>
      <div><%= message %></div>
    <% end %>
  </div>


hw@hw-s:~/codes/blog$ rails turbo:install
You must either be running with node (package.json) or importmap-rails (config/importmap.rb) to use this gem.
hw@hw-s:~/codes/blog$ bin/rails importmap:install
Add Importmap include tags in application layout
      insert  app/views/layouts/application.html.erb
Create application.js module as entrypoint
      create  app/javascript/application.js
Use vendor/javascript for downloaded pins
      create  vendor/javascript
      create  vendor/javascript/.keep
Ensure JavaScript files are in the Sprocket manifest
      append  app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
      create  config/importmap.rb
Copying binstub
      create  bin/importmap
hw@hw-s:~/codes/blog$ rails turbo:install
Import Turbo
      append  app/javascript/application.js
Pin Turbo
      append  config/importmap.rb
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
=========================

阅读量: 209
发布于:
修改于: