乐趣区

关于后端:前端学Ruby全栈论坛地宫项目一

jiezi

原本想做 buddha（菩萨）论坛的，发现自己参考的我的项目太难实现，猝

笔者回炉重修了一番，正好发现了 realworld，遂决定将 realworld 我的项目代替原先的 buddha 我的项目，还是要不自量力，不要独断独行（我的项目布局太大，节约太多工夫学习）

先介绍一下 realworld 我的项目

源码：https://github.com/gothinkster/realworld

demo：https://demo.realworld.io/#/

UI：https://github.com/gothinkster/conduit-bootstrap-template

页面剖析：https://www.jianshu.com/p/6014a9fefabd

从页面角度讲，只有七个页面，即

  • 首页（index）
  • 文章详情页（article）
  • 登录页（login）
  • 注册页（register）
  • 写文章页（editor）
  • 设置页（settings）
  • 集体页（profile）

接口方面和数据结构间接看 文档 就好，不说虚的，这个我的项目有 19 个接口，19 个接口放其余语言要做多久？不晓得，但 Ruby 应该花不了多少工夫

介于此我的项目是个全栈我的项目，遂会前后端交叉地写，我的项目名我起好了：地宫（Underground Palace）

文章目录

搭建我的项目并部署

应用脚手架创立 article

穿上 bootstrap

新增 fontawesome

device 用户体系

devise-i18n 国际化

设置页

集体页

模型建设

查问性能

订阅性能

分页性能

再次部署

logo 设计

后记

搭建我的项目并部署

咱们先新建我的项目

rails new underground-palace
cd list

而后去 config/routes.rb 中批改根目录：

Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  root "rails/welcome#index"
end

咱们通过 fly.io 来部署咱们的服务，对其不过多介绍，具体可看上篇文章——前端学 Ruby：唐诗我的项目部署优化

fly launch # 创立
fly deploy # 部署
fly open # 关上刚刚部署的我的项目

此时拜访 https://underground-palace.fly.dev/（这里咱们的 underground 少写了一个字母，无伤大雅，后续已修改）就能看到刚还在本地新建的我的项目，是不是很快，有点意想不到的感觉

应用脚手架创立 article

rails 的一个特点是一个命令就做很多事件，例如接下来咱们要用 rails generate scaffold 实现 article 的增删改查

rails g scaffold article title:string description:string body:text 
rails db:migrate # 数据迁入

并且批改config/routes.rb：

Rails.application.routes.draw do
  resources :articles
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "articles#index"
  # root "rails/welcome#index"
end

如此，用脚手架搭建的文章的增删改查就实现了，是不是很快

穿上 bootstrap

realworld 我的项目是基于 bootstrap 的，咱们须要下载 bootstrap 的 gem

这里须要做一下阐明，像 bootstrap-sass gem 是基于 bootstrap 3 的款式，bootstrap gem 是最新版的 boostrap，也能够了解为 bootstrap 3 及一下可应用 bootstrap-sass，反之则用 boostrap

因为 realworld 是基于 bootstrap4.0.0，所以下载时咱们须要先设定好版本。依照 readme 的步骤，在 gemfile 文件中引入 boostrap 和 jquery-rails 包，再新增 common/footer 和 common/header 页面，将模板代码放进去

然而 readlworld 所提供的 bootstrap 和 线上版本 有差别，并不是间接援用能用（后续看到文档中有现成的 模板，但不晓得有没有坑）

既然抉择了做用 bootstrap 来做 UI，索性用最新的 bootstrap5

咱们不依照 gem 形式引入 bootstrap，用 cssbundling-rails、 jsbundling-rails 来构建资源

bundle add cssbundling-rails jsbundling-rails

查找咱们与 css 相干的构建命令

rails | grep css

同理查看咱们与 javascript 构建相干的命令

rails | grep javascript

咱们下载 bootstrap，基于 yarn

rails css:install:bootstrap

下载 esbuild，也是基于 yarn 下载，

rails javascript:install:esbuild

然而报错 Could not resolve "app/javascript/*.*"

不必慌，去package.json 批改 build 中的配置，将esbuild app/javascript/*.* --bundle --sourcemap... 改成 esbuild app/javascript/application.js --bundle --sourcemap...

并执行 npm run build 执行代码，当然，有些文件须要暗藏的这里不做过多形容

当能 build 胜利后，咱们开发就是用bin/dev 命令来开发

但因为笔者应用的是 window 零碎，所以会因而报错：

unset 不是 window 的命令，所以咱们要革新，返回根目录下的 Procfile.dev 批改：

web: set "PORT=" && rails s
css: yarn build:css --watch
js: yarn build --watch

此时执行 /bin/dev 就能启动咱们的我的项目了，其以上代码是启动 rails 服务，css 和 js 都是通过 yarn build 打包后监听（watch）变动，所以能做到热更新

新增 fontawesome

依照好 bootstrap 后还不够，还须要装置图标，例如咱们罕用的 fontawesome

首先装置 Font Awesome：

yarn add @fortawesome/fontawesome-free

而后在 config/initializers/assets.rb 增加以下内容：

Rails.application.config.assets.paths << Rails.root.join('node_modules/@fortawesome/fontawesome-free/webfonts')

最初在 app/assets/stylesheets/application.sass.scss 增加以下内容：

$fa-font-path: ".";

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";

接着就是把具体的 articles、articles#show、articles#new页面的模板款式补充好

用户体系

咱们应用 devise 来做咱们的登录注册

装置 devise gem 包

bundle add devise

运行以下命令生成 Devise 文件

rails g devise:install

创立一个用户模型（例如User），并运行以下命令生成 Devise 所须要的视图和控制器：

rails g devise user

运行数据库迁徙以创立 Devise 所须要的表

rails db:migrate

如此这般，登录注册遗记明码等一系列 CRUD 就做好了，咱们只须要在 header.html.erb 中批改配置，将未登录时显示登录注册款式即可，即

...
<% if !current_user %>
        <!-- 未登录 -->
        <div class="col-md-3 text-end">
          <%= link_to '注册', new_user_registration_path, class: 'btn btn-outline-primary me-2' %>
          <%= link_to '登入', new_user_session_path, class: 'btn btn-primary' %>
        </div>
<% else %>
 <!-- 登录 -->
<% end %>
...

默认状况下，咱们是看不到 devise 的视图和控制器的，因为咱们要批改 UI，所以将视图释放出来：

rails g devise:views

返回视图层，批改views/devise/registrations/new.html.erb（注册页）和views/devise/session/new.html.erb（登录页）的款式

默认状况下，注册、登录的路由是 users/sign_up 和users/sign_in，和传统意义上的注册、登录路由不符，这里做一下映射，返回config/routes.rb 中批改：

Rails.application.routes.draw do
    
  - devise_scope :user
  + devise_scope :user do
  +   get '/login' => 'devise/sessions#new'
  +   get '/register' => 'devise/registrations#new'
  + end
    ...
end

并返回views/common/_header.html.erb 中批改代码：

<!-- 未登录 -->
<div class="col-md-3 text-end">
  <%= link_to '注册', register_path, class: 'btn btn-outline-primary me-2' %>
  <%= link_to '登入', login_path, class: 'btn btn-primary' %>
</div>

动态页面放进后，当初咱们要思考的是将其动态化，首先革新的是注册页面，咱们用form_for 来做表单，这里须要留神的是，在 devise 默认的字段里没有 username，咱们须要加上

创立一个 migration 文件，用于向 User 模型增加 username 字段

rails g migration AddUsernameToUser username:string:uniq

uniq 示意惟一

将这个 migration 迁徙至数据库

rails db:migrate

在 models/user.rb 中新增对 username 的验证

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  validates :username, presence: true, uniqueness: {case_sensitive: false}, length: {minimum: 3, maximum: 25}

end
  • presence: true 验证：该属性必须存在（不能为 nil 或空白字符串）
  • uniqueness: {case_sensitive: false} 验证：该属性的值必须是惟一的（即数据库中不存在雷同的值）。此外，该验证规定将疏忽大小写，因而相似的两个字符串，例如 abc 和 ABC，将被认为是相等的
  • length: {minimum: 3, maximum: 25} 验证：该属性的长度必须介于 3 到 25 个字符之间

批改注册页面视图，新增用户名款式

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  ...
  <div class="form-group mb-3">
    <%= f.text_field :username, autofocus: true, autocomplete: "username", 
    class: "form-control form-control-lg",
    placeholder: "用户名" %>
  </div>
  ...
<% end %>

在革新时，咱们还须要生成 devise 的控制器，让表单在提交时返回正确的控制器处（因为咱们定制了登录注册门路，而不是用默认的，所以还要革新）

rails g devise:constroller -c # 生成所有 devise 的控制器

再在 config/routes.rb 中批改

 ...
 devise_for :users, path: "", path_names: {
    sign_in: "login",
    sign_out: "logout",
    sign_up: "register" 
  }, controllers: {
    registrations: "users/registrations",
    sessions: "users/sessions",
  }
  devise_scope :user do
    get '/login' => 'devise/sessions#new'
    get '/register' => 'devise/registrations#new'
  end
  ...

如此，注册页面就革新完了，持续革新登录页面

devise-i18n 国际化

当咱们做完登录页之后，提醒报错信息还都是英文的，这次须要引入 i18n 来做中文提醒

老规矩，先装置 devise-i18n gem

bundle add devise-i18n

在 config/application.rb 文件中增加如下代码：

config.i18n.default_locale = "zh-CN"

执行 devise:i18n 生成中文命令

rails generate devise:i18n:locale zh-CN

再去config/locales/devise.zh-CN.yml 中批改不称心的翻译，如此就实现了国际化

如此咱们曾经实现了 5 个页面，即首页、文章详情页、登录页、注册页、写文章页，还剩下设置页和集体页

设置页

如果说 article 和 user 是通过命令行来生成的，那么接下来的两个页面（设置、集体页），就是咱们失常开发时的开发流程

先创立一个 Settings 控制器：

rails g controller Settings index

在 config/routes.rb 中新增一个 “seetings”（复数资源）资源路由，凋谢 show 和 update：

resource :settings, only: [:show, :update]

创立 app/views/settings/index.html.erb 页面，加上 bootstrap 款式，settings 的动态页面就能拜访了

看动态页面咱们就晓得，users 数据中咱们还短少头像（avatar）和简介（bio），所以咱们须要在 users 表中新增两个字段

生成一个迁徙文件，该文件增加 avatar 和 bio 列到 users 表中

rails g migration AddAvatarAndBioToUsers avatar:string bio:string

运行 rails db:migrate 批改数据库中的表

rails db:migrate

接着咱们返回 settings_controller.rb 控制器，批改为后续渲染页面

class SettingsController < ApplicationController
    before_action :authenticate_user!
    before_action :set_user

    def show
    end

    def update
       if @user.update(user_params)
            # 后续跳转到集体设置页面
            redirect_to root_path
            flash[:notice] = '批改胜利'
        else
            render :show
        end
    end
    
    private

    def set_user
      @user = current_user
    end

    def user_params
        params.require(:user).permit(:username, :email, :avatar, :bio)  
    end
end

同样，视图也要批改，删除更改明码一栏，为什么呢？因为 devise 中批改明码，须要输出原明码，是很麻烦的，笔者尝试了一下，放弃了

集体页

咱们持续做集体页，也是咱们的最初一个页面，尽管还有很多细节（比方评论、点赞文章、珍藏文章等逻辑），然而从页面的角度讲，这就是最初一个页面了

先建设控制器

rails g controller profile

在 config/routes.rb 处，新增一个路由映射

get '/:name', to: 'profile#show', as: :profile

返回views/common/_header.html.erb 处，批改原来的 username 视图

 <li class="nav-item">
    <%= link_to profile_path(current_user.username), class: "nav-link px-2" do %>
      <%= image_tag current_user.avatar, alt: "avatar", class: "user-pic" %>
      <%= current_user.username %>
    <% end %>
  </li>

而后咱们去 view/profile/show.html.erb 写好咱们的动态页面，7 个页面就此实现，但这只实现了一半。接下来，咱们要对页面进行革新，加上文章评论、点赞 / 勾销点赞、关注 / 勾销用户等等性能

如此，曾经耗尽一天功夫，劳动一晚，今天再战

系列文章

  • 前端学 Ruby：前言
  • 前端学 Ruby：装置 Ruby、Rails
  • 前端学 Ruby：相熟 Ruby 语法
  • 前端学 Ruby：相熟 Rails
  • 前端学 Ruby：唐诗 API 我的项目
  • 前端学 Ruby：唐诗我的项目部署优化
退出移动版