搜索
首页web前端html教程揭示设计的深度,第 1 部分

揭示设计的深度,第 1 部分

在我之前的一些关于 Rails 中图像上传的文章中,我提到了 Devise,但没有深入探讨它。在本教程中,我将教您有关 Devise 的知识。

准备好了吗?让我们开始吧!

设计简介和模块

Devise 是与 Warden 一起构建的 Rails 身份验证解决方案,由 Plataformatec 的优秀人员提供。 Devise提供了不同的模块:

  • 数据库可验证:这会将密码加密并存储到数据库中,以在登录时验证用户的真实性。
  • Omniauthable:这将 OmniAuth 支持附加到 Devise。您的应用程序的用户将能够使用 Facebook、Twitter 和 Google 等帐户登录。

  • 可确认:这可以发送包含有助于验证帐户的说明的电子邮件。

  • 可恢复:当用户忘记密码并需要恢复密码时,此模块会有所帮助。这样,用户就可以重置密码。

  • 可注册:处理用户的注册。它还允许用户编辑和删除他们的帐户。

  • Rememberable:此模块使您的应用程序可以通过存储 cookie 来记住登录的用户。

  • 可跟踪:此模块有助于跟踪登录计数、时间戳和 IP 地址。

  • 可超时:此模块负责使一段时间内不活动的会话过期。

  • 可验证:使用此模块,可以验证电子邮件和密码。

  • 可锁定:这提供了额外的安全层 - 激活后,帐户可以在登录尝试失败一定次数后被锁定。

设备集成

出于本教程的目的,我们将生成一个 Rails 应用程序,用于检查 Devise 的工作情况。我们继续吧!

rails 新设计应用 -T

-T 标志告诉 Rails 在没有默认测试套件的情况下生成应用程序。导航到您的应用程序目录并将以下 gems 放入您的 Gemfile

#Gemfile

gem 'devise', '~> 4.1'
gem 'bootstrap-sass', '~> 3.3'

现在安装您刚刚添加的 Devise 和 Bootstrap gem。

捆绑安装

将您的 app/assets/stylesheets/application.css 文件重命名为 app/assets/stylesheets/application.scss 并在其中添加以下行:

#app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

打开 app/assets/javascripts/application.js 文件并需要 bootstrap-sprockets。我的看起来像这样:

#app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

接下来,您需要运行 Rails 命令来安装 Devise 的配置文件。您可以通过运行以下命令来执行此操作:

rails 生成设备:install

该命令在您的终端上生成以下内容。您应该阅读它以了解发生了什么。

create  config/initializers/devise.rb
     create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

 1. Ensure you have defined default url options in your environments files. Here
    is an example of default_url_options appropriate for a development environment
    in config/environments/development.rb:

      config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

    In production, :host should be set to the actual host of your application.

 2. Ensure you have defined root_url to *something* in your config/routes.rb.
    For example:

      root to: "home#index"

 3. Ensure you have flash messages in app/views/layouts/application.html.erb.
    For example:

      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>

 4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:

      config.assets.initialize_on_precompile = false

    On config/application.rb forcing your application to not access the DB
    or load models when precompiling your assets.

 5. You can copy Devise views (for customization) to your app by running:

      rails g devise:views

      ===============================================================================

该命令还会生成两个文件,您可以在 config 目录中找到它们。它还为我们提供了一些关于我们应该做什么的指示。

导航到您的应用程序布局,app/views/layouts/application.html.erb,并使其如下所示:

#app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>DeviseApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="container-fluid">
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
  </div>

  <div class="container-fluid">
    <%= yield %>
  </div>

</body>
</html>

您需要为您的开发环境定义默认 URL 选项。在 config/environments/development.rb 中添加以下代码。

#config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

现在您需要为 Devise 创建一个 User 模型。您可以使用终端来执行此操作。

rails 生成设备 User

这将在您的 app/models 目录中生成一个 user.rb 文件。生成的文件将如下所示:

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

你可以看到它包含了我上面提到的默认模块。您运行的命令还通过添加 devise 的路由来修改您的 config/routes.rb 文件。你应该检查一下。

此时,您需要迁移数据库。您可以通过运行以下命令来执行此操作:

rake 数据库:migrate

使用设备进行身份验证

现在您需要创建一个 PagesController 并在其周围封装 Devise 身份验证 - 这将防止未经授权的人员查看该页面。

rails 生成控制器页面索引

打开您的路由文件并设置应用程序的根目录。

#config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: "pages#index"
end

打开 PagesController 并为 indexnew 并为 indexnew 页面添加身份验证。

#app/controllers/pages_controller.rb

class PagesController < ApplicationController
  before_action :authenticate_user!, only: [:index, :new]

  def index
  end

  def new
  end
end

代码显示 indexnew 页面仅可供注册用户访问。打开终端并启动 rails 服务器。将浏览器指向 http://localhost:3000,您将自动重定向到 Devise 登录页面。

不使用电子邮件登录

登录 Devise 的默认方式涉及使用电子邮件地址和密码。如果您想让用户能够使用其唯一的用户名登录怎么办?如果那是你想要的,那是可能的。让我们看看如何。

运行命令:

rails 生成迁移 AddUsernameToUSers 用户名:string

这将在 users 表中为 username 添加一个新列。迁移您的数据库。

rake 数据库:migrate

您需要在视图中添加一个字段,用户可以在其中输入他们的用户名。当您转到 app/views 目录时,您将找不到任何呈现 Devise 视图的文件。这是因为 Devise 从其 gemset 加载视图。要自定义它,您必须生成视图的副本。下面的命令发挥了魔力。

rails 生成设备:views

这将在您的 app/views 目录中生成一些文件夹和文件。

您将需要编辑用于登录、注册和更新用户信息的页面。只需将下面的代码块粘贴到各自的文件中即可。

注册

#app/views/devise/registrations/new.html.erb

<h2 id="Sign-up">Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="form-group">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :username %>
    <%= f.text_field :username, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up", class: "btn btn-primary" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

编辑

#app/views/devise/registrations/edit.html.erb

<h2 id="Edit-resource-name-to-s-humanize">Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>

  <div class="form-group">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, class: "form-control" %>
  </div>

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
  <% end %>

  <div class="form-group">
    <%= f.label :username %>
    <%= f.text_field :username, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
    <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
    <%= f.password_field :current_password, autocomplete: "off", class: "form-control" %>
  </div>

  <div class="actions">
    <%= f.submit "Update", class: "btn btn-primary" %>
  </div>
<% end %>

<h3 id="Cancel-my-account">Cancel my account</h3>

<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

<%= link_to "Back", :back %>

登录

#app/views/devise/sessions/new.html.erb

<h2 id="Log-in">Log in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-group">
    <%= f.label :username %><br />
    <%= f.text_field :username, autofocus: true, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
  </div>

  <% if devise_mapping.rememberable? -%>
    <div class="form-group">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end -%>

  <div class="actions">
    <%= f.submit "Log in", class: "btn btn-primary" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

使用文本编辑器导航至 app/controllers/application_controller.rb。您需要修改它以允许使用用户名。将其修改为如下所示:

#app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    added_attrs = [:username, :email, :password, :password_confirmation, :remember_me]
    devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
    devise_parameter_sanitizer.permit :account_update, keys: added_attrs
  end
end

现在用户可以使用他/她的用户名登录。此时,您的申请有一些不正确的地方。当用户登录时,无法退出。这不会带来良好的用户体验。我将向您展示如何解决这个问题。

在终端中,在 app/views 文件夹中创建一个名为 shared 的新目录。

mkdir app/views/shared
touch app/views/shared/_navigation.html.erb

您上面创建的文件是用于写入导航栏代码的部分文件。添加以下代码。

#app/views/shared/_navigation.html.erb

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <%= link_to 'Tutsplus Devise', root_path, class: 'navbar-brand' %>
    </div>
    <div id="navbar">
      <ul class="nav navbar-nav">
        <li><%= link_to 'Home', root_path %></li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <% if user_signed_in? %>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <%= current_user.name %>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><%= link_to 'Profile', edit_user_registration_path %></li>
              <li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to 'Log In', new_user_session_path %></li>
          <li><%= link_to 'Sign Up', new_user_registration_path %></li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

现在您需要在应用程序布局中呈现导航栏。打开 app/views/layouts/application.html.erb 并放入代码以呈现导航栏。

#app/views/layouts/application.html.erb

...
<div class="container-fluid">
  <%= render "shared/navigation" %>

  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</div>
...

结论

在本部分中,您学习了如何安装 Devise 并向页面添加身份验证。我还提到了一部分。我将在单独的教程中介绍这一点。

在下一部分中,我们将介绍一些比这更高级的领域。我希望这值得您花时间!

以上是揭示设计的深度,第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境