使用 Phoenix LiveView 构建 Instagram (3)

使用PETAL(Phoenix、Elixir、TailwindCSS、AlpineJS、LiveView)技术栈构建一个简化版的Instagram Web应用程序

在第 2 部分中，我们添加了编辑帐户和上传用户头像的功能，在这部分中，我们将处理用户的个人资料。您可以赶上Instagram 克隆 GitHub Repo。

首先，我们需要路由，lib/instagram_clone_web/router.ex在根范围下打开添加以下路由:browser：

scope "/", InstagramCloneWeb do
  pipe_through :browser
  
  live "/", PageLive,  :index
  live "/:username", UserLive.Profile # THIS LINE WAS ADDED
end

然后让我们在lib/instagram_clone_web/live/user_live文件夹中创建实时查看文件：

lib/instagram_clone_web/live/user_live/profile.ex lib/instagram_clone_web/live/user_live/profile.html.leex

在里面添加以下内容lib/instagram_clone_web/live/user_live/profile.ex：

defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view
  
  @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)

    {:ok,
      socket
      |> assign(username: username)}
  end

end

里面lib/instagram_clone_web/live/user_live/profile.html.leex：

<%= @username %>

打开第 56 行的导航标题，lib/instagram_clone_web/live/header_nav_component.html.leex让我们添加新路线：

<%= live_patch to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Profile, @current_user.username)  do  %>

我们需要找到用户名参数传递给我们的实时视图的用户，打开lib/instagram_clone/accounts.ex添加一个profile()函数来为我们做到这一点：

...

  @doc """
  Gets the user with the given username param.
  """
  def profile(param) do
    Repo.get_by!(User, username: param)
  end

...

让我们更新里面的挂载函数lib/instagram_clone_web/live/user_live/profile.ex：

defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view
  
  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)

    {:ok, socket}
  end

end

我们需要处理用户名参数，打开宏lib/instagram_clone_web.ex并将其更新live_view()为以下内容：

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {InstagramCloneWeb.LayoutView, "live.html"}

      unquote(view_helpers())
      import InstagramCloneWeb.LiveHelpers

      alias InstagramClone.Accounts.User
      alias InstagramClone.Accounts # <-- THIS LINE WAS ADDED
      @impl true
      def handle_info(%{event: "logout_user", payload: %{user: %User{id: id}}}, socket) do
        with %User{id: ^id} <- socket.assigns.current_user do
          {:noreply,
            socket
            |> redirect(to: "/")
            |> put_flash(:info, "Logged out successfully.")}
        else
          _any -> {:noreply, socket}
        end
      end
      @doc """
        Because we are calling this function in each liveview, 
        and we needed access to the username param in our profile liveview, 
        we updated this function for when the username param is present,
        get the user and assign it along with page title to the socket
      """
      @impl true
      def handle_params(params, uri, socket) do
        if Map.has_key?(params, "username") do
          %{"username" => username} = params
          user = Accounts.profile(username)
          {:noreply,
          socket
          |> assign(current_uri_path: URI.parse(uri).path)
          |> assign(user: user, page_title: "#{user.full_name} (@#{user.username})")}
        else
          {:noreply,
            socket
            |> assign(current_uri_path: URI.parse(uri).path)}
        end
      end
    end
  end

Repo.get_by!(可查询、子句、选项)

从查询中获取单个结果。Ecto.NoResultsError如果未找到记录或有多个条目，则引发。在生产中，当找不到记录时会出现 404 错误。

在第 57 行打开，lib/instagram_clone_web/live/header_nav_component.htm.leex将以下内容添加到配置文件列表标记中，以在选择时关闭下拉菜单：

  • Profile

    • 里面lib/instagram_clone_web/live/user_live/profile.html.leex：

    
  
  
    
      <%= img_tag @user.avatar_url,
          class: "w-40 h-40 rounded-full object-cover object-center" %>
  
    
  

  
  
    
    
    
        
    <%= @user.username %>
    
        
    
    

    
    
      
      
          
    • 0 Posts
      • 
          
    • 0 Followers
      • 
          
    • 0 Following
      • 
      
    
    
    

    
    
      
    <%= @user.full_name %>
    
      <%= if @user.bio do %>
        
    <%= @user.bio %>
    
      <% end %>
      <%= if @user.website do %>
        <%= link display_website_uri(@user.website),
          to: @user.website,
          target: "_blank", rel: "noreferrer",
          class: "text-blue-700" %>
      <% end %>
    
    
  
    
  

    


    
  
      
    
    • 
       POSTS
    
      • 
    
    • 
      IGTV
    
      • 
    
    • 
      SAVED
    
      • 
    
    • 
      TAGGED
    
      •

    打开lib/instagram_clone_web/live/render_helpers.ex添加以下2个函数来显示和获取网站uri：

      def display_website_uri(website) do
    website = website
    |> String.replace_leading("https://", "")
    |> String.replace_leading("http://", "")
    website
  end

    现在我们需要在内部创建用户关注组件lib/instagram_clone_web/live/user_live：

    lib/instagram_clone_web/live/user_live/follow_component.ex

    defmodule InstagramCloneWeb.UserLive.FollowComponent do
  use InstagramCloneWeb, :live_component

  def render(assigns) do
    ~L"""
    
    """
  end

  def handle_event("toggle-status", _params, socket) do
    follow_btn_name? = get_follow_btn_name?(socket.assigns.follow_btn_name?)
    follow_btn_styles? = get_follow_btn_styles?(socket.assigns.follow_btn_name?)

    :timer.sleep(200)
    {:noreply,
      socket
      |> assign(follow_btn_name?: follow_btn_name?)
      |> assign(follow_btn_styles?: follow_btn_styles?)}
  end

  defp get_follow_btn_name?(name) when name == "Follow" do
    "Unfollow"
  end
  defp get_follow_btn_name?(name) when name == "Unfollow" do
    "Follow"
  end

  defp get_follow_btn_styles?(name) when name == "Follow"  do
    "py-1 px-2 text-red-500 border-2 rounded font-semibold hover:bg-gray-50 focus:outline-none"
  end
  defp get_follow_btn_styles?(name) when name == "Unfollow" do
    "py-1 px-5 border-none shadow rounded text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 focus:outline-none"
  end
end

    在我们的渲染函数中，我们只有按钮和一个将在组件内部获取句柄的单击函数。它有 2 个分配，一个用于按钮名称，另一个用于样式，这些将在我们的配置文件 LiveView 中设置，然后在我们的事件函数中，我们将它们分配回套接字。

    现在让我们在配置文件模板中使用我们的组件，打开lib/instagram_clone_web/live/user_live/profile.html.leex文件并将其更新为以下内容：

    
  
  
    
      <%= img_tag @user.avatar_url,
          class: "w-40 h-40 rounded-full object-cover object-center" %>
  
    
  

  
  
    
    
    
        
    <%= @user.username %>
    
        
          
          <%= cond do %>
            <% @current_user && @current_user == @user -> %>
              <%= live_patch "Edit Profile",
                to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings),
                class: "py-1 px-2 border-2 rounded font-semibold hover:bg-gray-50" %>

            <% @current_user -> %>
              <%= live_component @socket,
                InstagramCloneWeb.UserLive.FollowComponent,
                id: @user.id,
                follow_btn_name?: @follow_btn_name?,
                follow_btn_styles?: @follow_btn_styles? %>

            <% true -> %>
              <%= link "Follow", to: Routes.user_session_path(@socket, :new), class: "py-1 px-5 border-none shadow rounded text-gray-50 hover:bg-light-blue-600 bg-light-blue-500" %>
          <% end %>
          
        
    
    

    
    
      
      
          
    • 0 Posts
      • 
          
    • 0 Followers
      • 
          
    • 0 Following
      • 
      
    
    
    

    
    
      
    <%= @user.full_name %>
    
      <%= if @user.bio do %>
        
    <%= @user.bio %>
    
      <% end %>
      <%= if @user.website do %>
        <%= link display_website_uri(@user.website),
          to: @user.website,
          target: "_blank", rel: "noreferrer",
          class: "text-blue-700" %>
      <% end %>
    
    
  
    
  

    


    
  
      
    
    • 
       POSTS
    
      • 
    
    • 
      IGTV
    
      • 
    
    • 
      SAVED
    
      • 
    
    • 
      TAGGED
    
      •

    我们创建了一个条件来向用户显示正确的按钮，当登录并且用户在他的个人资料上时，它将获得一个编辑个人资料链接，当登录和任何其他个人资料时，我们显示该组件，当未登录时，只是一个链接到登录页面。现在我们需要发送到组件的分配，就在组件显示时，打开lib/instagram_clone_web/live/user_live/profile.ex文件并将其更新为以下内容：

    defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts

  @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)
    current_user = socket.assigns.current_user
    user = Accounts.profile(username)

    get_assigns(socket, current_user, user)
  end

  defp get_follow_btn_name? do
    "Follow"
  end

  defp get_follow_btn_styles? do
    "py-1 px-5 border-none shadow rounded text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 focus:outline-none"
  end

  defp get_assigns(socket, current_user, user) do
    if current_user && current_user !== user do
      follow_btn_name? = get_follow_btn_name?()
      follow_btn_styles? = get_follow_btn_styles?()

      {:ok,
        socket
        |> assign(follow_btn_name?: follow_btn_name?)
        |> assign(follow_btn_styles?: follow_btn_styles?)}
    else
      {:ok, socket}
    end
  end

end

    让我们创建一个关注模式来处理终端中的关注者：

    $ mix phx.gen.schema Accounts.Follows accounts_follows follower_id:references:users followed_id:references:users

    打开生成的迁移并添加以下内容：

    defmodule  InstagramClone.Repo.Migrations.CreateAccountsFollows  do
  use Ecto.Migration
  
  def  change  do
    create table(:accounts_follows)  do
      add :follower_id,  references(:users,  on_delete:  :delete_all)
      add :followed_id,  references(:users,  on_delete:  :delete_all)

      timestamps()
    end
    
    create index(:accounts_follows,  [:follower_id])
    create index(:accounts_follows,  [:followed_id])
  end
end

    另外，让我们在用户表中添加 2 个新字段，以跟踪总关注者和关注者，回到我们的终端：

    $ mix ecto.gen.migration adds_follower_followings_count_to_users_table

    打开生成的迁移并添加以下内容：

    defmodule InstagramClone.Repo.Migrations.AddsFollowerFollowingsCountToUsersTable do
  use Ecto.Migration

  def change do
    alter table(:users) do
      add :followers_count, :integer, default: 0
      add :following_count, :integer, default: 0
    end
  end
end

    返回终端运行$ mix ecto.migrate

    现在打开在该文件内生成的新架构，lib/instagram_clone/accounts/follows.ex添加以下内容：

    defmodule InstagramClone.Accounts.Follows do
  use Ecto.Schema

  alias InstagramClone.Accounts.User

  schema "accounts_follows" do
    belongs_to :follower, User
    belongs_to :followed, User

    timestamps()
  end

end

    里面lib/instagram_clone/accounts/user.ex添加以下内容：

      alias InstagramClone.Accounts.Follows

  @derive {Inspect,  except:  [:password]}
  schema "users"  do
    field :email,  :string
    field :password,  :string,  virtual:  true
    field :hashed_password,  :string
    field :confirmed_at,  :naive_datetime
    field :username,  :string
    field :full_name,  :string
    field :avatar_url,  :string,  default:  "/images/default-avatar.png"
    field :bio,  :string
    field :website,  :string
    field :followers_count, :integer, default: 0
    field :following_count, :integer, default: 0
    has_many :following, Follows,  foreign_key:  :follower_id
    has_many :followers, Follows,  foreign_key:  :followed_id
    timestamps()
  end

  def registration_changeset(user, attrs, opts \\ []) do
    user
    |> cast(attrs, [:email, :password, :username, :full_name, :avatar_url, :bio, :website])
    |> validate_required([:username, :full_name])
    |> validate_length(:username, min: 5, max: 30)
    |> validate_format(:username, ~r/^[a-zA-Z0-9_.-]*$/, message: "Please use letters and numbers without space(only characters allowed _ . -)")
    |> unique_constraint(:username)
    |> unsafe_validate_unique(:username, InstagramClone.Repo)
    |> validate_length(:full_name, min: 4, max: 255)
    |> validate_format(:full_name,  ~r/^[a-zA-Z0-9 ]*$/,  message:  "Please use letters and numbers")
    |> validate_website_schemes()
    |> validate_website_authority()
    |> validate_email()
    |> validate_password(opts)
  end

  defp validate_website_schemes(changeset) do
    validate_change(changeset, :website, fn :website, website ->
      uri = URI.parse(website)
      if uri.scheme, do: check_uri_scheme(uri.scheme), else: [website: "Enter a valid website"]
    end)
  end

  defp validate_website_authority(changeset) do
    validate_change(changeset, :website, fn :website, website ->
      authority = URI.parse(website).authority
      if String.match?(authority, ~r/^[a-zA-Z0-9.-]*$/) do
        []
      else
        [website: "Enter a valid website"]
      end
    end)
  end

  defp check_uri_scheme(scheme) when scheme == "http", do: []
  defp check_uri_scheme(scheme) when scheme == "https", do: []
  defp check_uri_scheme(_scheme), do: [website: "Enter a valid website"]

    lib/instagram_clone/accounts.ex在文件的底部和顶部添加以下函数alias InstagramClone.Accounts.Follows：

      @doc """
  Creates a follow to the given followed user, and builds
  user association to be able to preload the user when associations are loaded,
  gets users to update counts, then performs 3 Repo operations,
  creates the follow, updates user followings count, and user followers count,
  we select the user in our updated followers count query, that gets returned
  """
  def create_follow(follower, followed, user) do
    follower = Ecto.build_assoc(follower, :following)
    follow = Ecto.build_assoc(followed, :followers, follower)
    update_following_count = from(u in User, where: u.id == ^user.id)
    update_followers_count = from(u in User, where: u.id == ^followed.id, select: u)

    Ecto.Multi.new()
    |> Ecto.Multi.insert(:follow, follow)
    |> Ecto.Multi.update_all(:update_following, update_following_count, inc: [following_count: 1])
    |> Ecto.Multi.update_all(:update_followers, update_followers_count, inc: [followers_count: 1])
    |> Repo.transaction()
    |> case do
      {:ok,   %{update_followers: update_followers}} ->
        {1, user} = update_followers
        hd(user)
    end
  end

  @doc """
  Deletes following association with given user,
  then performs 3 Repo operations, to delete the association,
  update followings count, update and select followers count,
  updated followers count gets returned
  """
  def unfollow(follower_id, followed_id) do
    follow = following?(follower_id, followed_id)
    update_following_count = from(u in User, where: u.id == ^follower_id)
    update_followers_count = from(u in User, where: u.id == ^followed_id, select: u)

    Ecto.Multi.new()
    |> Ecto.Multi.delete(:follow, follow)
    |> Ecto.Multi.update_all(:update_following, update_following_count, inc: [following_count: -1])
    |> Ecto.Multi.update_all(:update_followers, update_followers_count, inc: [followers_count: -1])
    |> Repo.transaction()
    |> case do
      {:ok,   %{update_followers: update_followers}} ->
        {1, user} = update_followers
        hd(user)
    end
  end

  @doc """
  Returns nil if not found
  """
  def following?(follower_id, followed_id) do
    Repo.get_by(Follows, [follower_id: follower_id, followed_id: followed_id])
  end

  @doc """
  Returns all user's followings
  """
  def list_following(user) do
    user = user |> Repo.preload(:following)
    user.following |> Repo.preload(:followed)
  end

  @doc """
  Returns all user's followers
  """
  def list_followers(user) do
    user = user |> Repo.preload(:followers)
    user.followers |> Repo.preload(:follower)
  end

    现在让我们更新我们的文件lib/instagram_clone_web/live/user_live/profile.ex：

    defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts
  alias InstagramCloneWeb.UserLive.FollowComponent

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)

    {:ok, socket}
  end

  @impl true
  def handle_info({FollowComponent, :update_totals, updated_user}, socket) do
    {:noreply, socket |> assign(user: updated_user)}
  end

end

    我们将在组件内设置关注按钮，然后向父级实时视图发送消息以更新计数。

    在里面lib/instagram_clone_web/live/user_live/profile.html.leex更新第 20 行和第 27 行的分配名称：

    <%  @current_user ->  %>
  <%= live_component @socket,
    InstagramCloneWeb.UserLive.FollowComponent,
    id:  @user.id,
    user:  @user,
    current_user:  @current_user %>

<%  true  ->  %>
  <%= link "Follow",  to: Routes.user_session_path(@socket,  :new),  class:  "user-profile-follow-btn"  %>

    打开assets/css/app.scss并添加以下内容：

    /* This file is for your main application css. */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../node_modules/nprogress/nprogress.css";

@layer components {
  .user-profile-unfollow-btn {
    @apply  py-1  px-2  text-red-500  border-2  rounded  font-semibold  hover:bg-gray-50
  }

  .user-profile-follow-btn {
    @apply  py-1  px-5  border-none  shadow  rounded  text-gray-50  hover:bg-light-blue-600  bg-light-blue-500
  }
}

/* Styles for handling buttons click events */
.while-submitting  {  display: none;  }

.phx-click-loading  {
  .while-submitting  {  display: inline;  }
  .btns  {  display: none;  }
}

    打开lib/instagram_clone_web/live/user_live/follow_component.ex文件并将其更新为以下内容：

    defmodule InstagramCloneWeb.UserLive.FollowComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Accounts

  @impl true
  def update(assigns, socket) do
    get_btn_status(socket, assigns)
  end

  @impl true
  def render(assigns) do
    ~L"""
    
    """
  end

  @impl true
  def handle_event("toggle-status", _params, socket) do
    current_user = socket.assigns.current_user
    user = socket.assigns.user

    :timer.sleep(300)
    if Accounts.following?(current_user.id, user.id) do
      unfollow(socket, current_user.id, user.id)
    else
      follow(socket, current_user, user)
    end
  end

  defp get_btn_status(socket, assigns) do
    if Accounts.following?(assigns.current_user.id, assigns.user.id) do
      get_socket_assigns(socket, assigns, "Unfollow", "user-profile-unfollow-btn")
    else
      get_socket_assigns(socket, assigns, "Follow", "user-profile-follow-btn")
    end
  end

  defp get_socket_assigns(socket, assigns, btn_name, btn_styles) do
    {:ok,
      socket
      |> assign(assigns)
      |> assign(follow_btn_name: btn_name)
      |> assign(follow_btn_styles: btn_styles)}
  end

  defp follow(socket, current_user, user) do
    updated_user = Accounts.create_follow(current_user, user, current_user)
    # Message sent to the parent liveview to update totals
    send(self(), {__MODULE__, :update_totals, updated_user})
    {:noreply,
      socket
      |> assign(follow_btn_name: "Unfollow")
      |> assign(follow_btn_styles: "user-profile-unfollow-btn")}
  end

  defp unfollow(socket, current_user_id, user_id) do
    updated_user = Accounts.unfollow(current_user_id, user_id)
    # Message sent to the parent liveview to update totals
    send(self(), {__MODULE__, :update_totals, updated_user})
    {:noreply,
      socket
      |> assign(follow_btn_name: "Follow")
      |> assign(follow_btn_styles: "user-profile-follow-btn")}
  end

end

    内部lib/instagram_clone_web/live/user_live/profile.html.leex更新第 37、38 行：

  • <%=  @user.followers_count %> Followers
    • 

  • <%=  @user.following_count %> Following

    • 一切都应该工作正常，但是出现了一个问题，您可以在下面的 gif 图片中看到它。

    当关注按钮被触发并且我们导航到我们的个人资料时，我们仍然在同一条路线上，我们没有得到正确的编辑个人资料按钮，因为我们在标题导航中使用，所以当我们转到我们的个人资料时，live_patch/2有没有变化，唯一改变的是@user在我们的模板中，我们用来显示右侧按钮的情况永远不会被调用。

    link/2并redirect/2重新加载整页

    live_redirect/2并push_redirect/2重新加载 LiveView 但保留当前布局

    live_patch/2并push_patch/2更新当前的 LiveView 并仅发送最小的差异

    当您想要导航到当前的 LiveView 时，必须使用“修补”操作，只需更新 URL 和当前参数，而不需要挂载新的 LiveView。使用补丁时，将调用handle_params/3回调并将最小的更改集发送到客户端。请参阅下一节了解更多信息。

    一个简单的经验法则是坚持使用 live_redirect/2 和 push_redirect/2 并仅在您希望在同一 LiveView 中导航时最大程度地减少发送的数据量的情况下使用补丁帮助程序（例如，如果您想更改对表进行排序，同时更新 URL）。

    我们能想到的唯一可以解决该问题的解决方案是live_redirect/2在标题导航中使用重新加载 LiveView。在第 56 行打开，lib/instagram_clone_web/live/header_nav_component.html.leex执行以下操作：

    <%= live_redirect to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Profile,  @current_user.username)  do  %>

    现在，LiveView 重新加载，我们会显示正确的按钮。我还注意到为什么我们需要使用该handle_params()函数来分配用户，因为当我们使用live_patch/2任何内容时都没有更改并且用户分配没有重新加载，但现在 LiveView 重新加载，因此我们可以在 LiveViewmount()函数中设置用户，这是冲突的。

    打开函数lib/instagram_clone_web/live/user_live/profile.ex并将其更新mount()为以下内容：

      @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)
    user = Accounts.profile(username)

    {:ok,
      socket
      |> assign(user: user)
      |> assign(page_title: "#{user.full_name} (@#{user.username})")}
  end

    打开lib/instagram_clone_web.ex并在我们的live_view()宏中将函数更新handle_params()为以下内容：

          @impl true
      def handle_params(_params, uri, socket) do
        {:noreply,
          socket
          |> assign(current_uri_path: URI.parse(uri).path)}
      end

    另外，当我们在个人资料页面上时，我们不再需要在选择时关闭下拉菜单，因此lib/instagram_clone_web/live/header_nav_component.htm.leex在第 57 行打开，删除 AlpineJS 指令：

  • Profile

    • 让我们坚持只live_patch/2在我们只想显示使用 URLS 参数更新的内容时使用，这不会触发任何操作或更改任何状态。

    我还决定处理 LiveView 中关注按钮的条件，这是个人喜好，您可以选择任何一种方式或您感觉舒服的方式。打开lib/instagram_clone_web/live/user_live/profile.ex并添加以下私有函数：

    defp get_action(user, current_user) do
  cond do
    current_user && current_user == user -> :edit_profile
    current_user -> :follow_component
    true -> :login_btn
  end
end

    然后lib/instagram_clone_web/live/user_live/profile.ex在我们的 mount 函数中，让我们分配my_action：

      @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)
    user = Accounts.profile(username)
    my_action = get_action(user, socket.assigns.current_user)

    {:ok,
      socket
      |> assign(my_action: my_action)
      |> assign(user: user)
      |> assign(page_title: "#{user.full_name} (@#{user.username})")}
  end

    然后打开lib/instagram_clone_web/live/user_live/profile.html.leex并将条件更新为以下内容：

    
  
  
    
      <%= img_tag @user.avatar_url,
          class: "w-40 h-40 rounded-full object-cover object-center" %>
  
    
  

  
  
    
    
    
        
    <%= @user.username %>
    
        
          <%= if @my_action in [:edit_profile] do %>
            <%= live_patch "Edit Profile",
                to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings),
                class: "py-1 px-2 border-2 rounded font-semibold hover:bg-gray-50" %>
          <% end %>

          <%= if @my_action in [:follow_component] do %>
            <%= live_component @socket,
                InstagramCloneWeb.UserLive.FollowComponent,
                id: @user.id,
                user: @user,
                current_user: @current_user %>
          <% end %>

          <%= if @my_action in [:login_btn] do %>
            <%= link "Follow", to: Routes.user_session_path(@socket, :new), class: "user-profile-follow-btn" %>
          <% end %>
        
    
    

    
    
      
      
          
    • 0 Posts
      • 
          
    • <%= @user.followers_count %> Followers
      • 
          
    • <%= @user.following_count %> Following
      • 
      
    
    
    

    
    
      
    <%= @user.full_name %>
    
      <%= if @user.bio do %>
        
    <%= @user.bio %>
    
      <% end %>
      <%= if @user.website do %>
        <%= link display_website_uri(@user.website),
          to: @user.website,
          target: "_blank", rel: "noreferrer",
          class: "text-blue-700" %>
      <% end %>
    
    
  
    
  

    


    
  
      
    
    • 
       POSTS
    
      • 
    
    • 
      IGTV
    
      • 
    
    • 
      SAVED
    
      • 
    
    • 
      TAGGED
    
      •

    让我们致力于显示以下内容和关注者，我们将为此使用模态，我们需要使用handle_params()每个 LiveView 上的宏中定义的函数，因此让我们采用该函数并正确分配它。

    打开并从我们的宏中lib/instagram_clone_web.ex删除：handle_params() live_view()

          # DELETE THIS FUNCTION AND MOVE IT TO: 
      #lib/instagram_clone_web/live/user_live/settings.ex
      #lib/instagram_clone_web/live/user_live/pass_settings.ex
      #lib/instagram_clone_web/live/page_live.ex
      @impl true
      def handle_params(_params, uri, socket) do
        {:noreply,
          socket
          |> assign(current_uri_path: URI.parse(uri).path)}
      end

    现在，在我们找到另一种方法之前，我们需要current_uri_path在每个实时视图上手动分配 ，所以让我们记住这一点，我们必须记住它。

    打开lib/instagram_clone_web/router.ex：

        scope "/", InstagramCloneWeb do
      pipe_through :browser
      
      live "/", PageLive,  :index
      live "/:username", UserLive.Profile, :index # THIS LINE WAS UPDATED
    end

    scope "/", InstagramCloneWeb do
      pipe_through [:browser, :require_authenticated_user]

      get "/users/settings/confirm_email/:token", UserSettingsController, :confirm_email
      live "/accounts/edit", UserLive.Settings
      live "/accounts/password/change", UserLive.PassSettings
      live "/:username/following", UserLive.Profile, :following  # THIS LINE WAS ADDED
      live "/:username/followers", UserLive.Profile, :followers # THIS LINE WAS ADDED
    end

    打开第 56 行的导航标题，lib/instagram_clone_web/live/header_nav_component.html.leex让我们更新路线：

    <%= live_patch to: Routes.user_profile_path(@socket, :index, @current_user.username)  do  %>

    更新lib/instagram_clone_web/live/user_live/profile.ex：

    defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts
  alias InstagramCloneWeb.UserLive.FollowComponent

  @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)
    user = Accounts.profile(username)

    {:ok,
      socket
      |> assign(user: user)
      |> assign(page_title: "#{user.full_name} (@#{user.username})")}
  end

  @impl true
  def handle_params(_params, uri, socket) do
    socket = socket |> assign(current_uri_path: URI.parse(uri).path)
    {:noreply, apply_action(socket, socket.assigns.live_action)}
  end

  @impl true
  def handle_info({FollowComponent, :update_totals, updated_user}, socket) do
    {:noreply, apply_msg_action(socket, socket.assigns.live_action, updated_user)}
  end

  defp apply_msg_action(socket, :follow_component, updated_user) do
    socket |> assign(user: updated_user)
  end

  defp apply_msg_action(socket, _, _updated_user) do
    socket
  end

  defp apply_action(socket, :index) do
    live_action = get_live_action(socket.assigns.user, socket.assigns.current_user)
    
    socket |> assign(live_action: live_action)
  end

  defp apply_action(socket, :following) do
    following = Accounts.list_following(socket.assigns.user)
    socket |> assign(following: following)
  end

  defp apply_action(socket, :followers) do
    followers = Accounts.list_followers(socket.assigns.user)
    socket |> assign(followers: followers)
  end

  defp get_live_action(user, current_user) do
    cond do
      current_user && current_user == user -> :edit_profile
      current_user -> :follow_component
      true -> :login_btn
    end
  end

end

    更新lib/instagram_clone_web/live/user_live/profile.html.leex：

    <%= if @live_action == :following do %>
  <%= live_modal @socket, InstagramCloneWeb.UserLive.Profile.FollowingComponent,
    id: @user.id || :following,
    width:  "w-1/4",
    current_user: @current_user,
    following: @following,
    return_to: Routes.user_profile_path(@socket, :index, @user.username) %>
<% end %>

<%= if @live_action == :followers do %>
  <%= live_modal @socket, InstagramCloneWeb.UserLive.Profile.FollowersComponent,
    id: @user.id || :followers,
    width:  "w-1/4",
    current_user: @current_user,
    followers: @followers,
    return_to: Routes.user_profile_path(@socket, :index, @user.username) %>
<% end %>


    
  
  
    
      <%= img_tag @user.avatar_url,
          class: "w-40 h-40 rounded-full object-cover object-center" %>
  
    
  

  
  
    
    
    
        
    <%= @user.username %>
    
        
          <%= if @live_action == :edit_profile do %>
            <%= live_patch "Edit Profile",
                to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings),
                class: "py-1 px-2 border-2 rounded font-semibold hover:bg-gray-50" %>
          <% end %>

          <%= if @live_action == :follow_component do %>
            <%= live_component @socket,
                InstagramCloneWeb.UserLive.FollowComponent,
                id: @user.id,
                user: @user,
                current_user: @current_user %>
          <% end %>

          <%= if @live_action == :login_btn do %>
            <%= link "Follow", to: Routes.user_session_path(@socket, :new), class: "user-profile-follow-btn" %>
          <% end %>
        
    
    

    
    
      
      
          
    • 0 Posts
      • 
          <%= live_patch to: Routes.user_profile_path(@socket, :followers, @user.username) do %>
            
    • <%= @user.followers_count %> Followers
      • 
          <% end %>
          <%= live_patch to: Routes.user_profile_path(@socket, :following, @user.username) do %>
            
    • <%= @user.following_count %> Following
      • 
          <% end %>
      
    
    
    

    
    
      
    <%= @user.full_name %>
    
      <%= if @user.bio do %>
        
    <%= @user.bio %>
    
      <% end %>
      <%= if @user.website do %>
        <%= link display_website_uri(@user.website),
          to: @user.website,
          target: "_blank", rel: "noreferrer",
          class: "text-blue-700" %>
      <% end %>
    
    
  
    
  

    


    
  
      
    
    • 
       POSTS
    
      • 
    
    • 
      IGTV
    
      • 
    
    • 
      SAVED
    
      • 
    
    • 
      TAGGED
    
      •

    打开lib/instagram_clone_web/live/render_helpers.ex并添加以下内容以帮助我们显示模态：

      import Phoenix.LiveView.Helpers

      @doc """
  Renders a component inside the `LiveviewPlaygroundWeb.ModalComponent` component.

  The rendered modal receives a `:return_to` option to properly update
  the URL when the modal is closed.
  The rendered modal also receives a `:width` option for the style width

  ## Examples

      <%= live_modal @socket, LiveviewPlaygroundWeb.PostLive.FormComponent,
        id: @post.id || :new,
        width: "w-1/2",
        post: @post,
        return_to: Routes.post_index_path(@socket, :index) %>
  """
  def live_modal(socket, component, opts) do
    path = Keyword.fetch!(opts, :return_to)
    width = Keyword.fetch!(opts,  :width)
    modal_opts = [id: :modal, return_to: path, width: width, component: component, opts: opts]
    live_component(socket, InstagramCloneWeb.ModalComponent, modal_opts)
  end

    创建模态组件lib/instagram_clone_web/live/modal_component.ex：

    defmodule InstagramCloneWeb.ModalComponent do
  use InstagramCloneWeb, :live_component

  @impl true
  def render(assigns) do
    ~L"""
    
    

      
    
        <%= live_patch raw("×"), to: @return_to, class: "float-right text-gray-500 text-4xl px-4" %>
        <%= live_component @socket, @component, @opts %>
      
    
    
    
    """
  end

    @impl true
  def handle_event("close", _, socket) do
    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
  end
end

    创建关注者组件lib/instagram_clone_web/live/user_live/followers_component.ex：

    defmodule InstagramCloneWeb.UserLive.Profile.FollowersComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Uploaders.Avatar
end

    和模板lib/instagram_clone_web/live/user_live/followers_component.html.leex：

    
  
    Followers
    

    

<%= for follow <- @followers do %>
  
    
    
    
      <%= live_redirect to: Routes.user_profile_path(@socket, :index, follow.follower.username) do %>
        <%= img_tag Avatar.get_thumb(follow.follower.avatar_url), class: "w-10 h-10 rounded-full object-cover object-center" %>
      <% end %>

      
    
        <%= live_redirect  follow.follower.username,
          to: Routes.user_profile_path(@socket, :index, follow.follower.username),
          class: "font-semibold text-sm truncate text-gray-700 hover:underline" %>
        
    
          <%= follow.follower.full_name %>
        
    
      
    
      <%= if @current_user !== follow.follower do %>
        
          <%= live_component @socket,
            InstagramCloneWeb.UserLive.FollowComponent,
            id: follow.follower.id,
            user: follow.follower,
            current_user: @current_user %>
        
      <% end %>
    
    

  
    
<% end %>

    创建以下组件lib/instagram_clone_web/live/user_live/following_component.ex：

    defmodule InstagramCloneWeb.UserLive.Profile.FollowingComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Uploaders.Avatar
end

    和模板lib/instagram_clone_web/live/user_live/following_component.html.leex：

    
  
    Following
    

    
<%= for follow <- @following do %>
  
    
    
    
      <%= live_redirect to: Routes.user_profile_path(@socket, :index, follow.followed.username) do %>
        <%= img_tag Avatar.get_thumb(follow.followed.avatar_url), class: "w-10 h-10 rounded-full object-cover object-center" %>
      <% end %>

      
    
        <%= live_redirect  follow.followed.username,
          to: Routes.user_profile_path(@socket, :index, follow.followed.username),
          class: "font-semibold text-sm truncate text-gray-700 hover:underline" %>
        
    
          <%= follow.followed.full_name %>
        
    
      
    
      <%= if @current_user !== follow.followed do %>
        
          <%= live_component @socket,
            InstagramCloneWeb.UserLive.FollowComponent,
            id: follow.followed.id,
            user: follow.followed,
            current_user: @current_user %>
        
      <% end %>
    
    
  
    
<% end %>

    此外，我们还需要对头像上传器、打开lib/instagram_clone_web/live/uploaders/avatar.ex和以下内容进行一些小调整：

      # This was added to return the default image when no avatar uploaded
  def get_thumb(avatar_url) when avatar_url == "/images/default-avatar.png" do
    avatar_url
  end

  def get_thumb(avatar_url) do
    file_name = String.replace_leading(avatar_url, "/uploads/", "")
    ["/#{@upload_directory_name}", "thumb_#{file_name}"] |> Path.join()
  end

    让我们对标题导航菜单进行一些小的调整，以便不必在每个 LiveView 上分配 current_uri_path，并对我们的page_live组件进行一些小的调整，以在组件内部而不是父 LiveView 中设置表单。

    打开lib/instagram_clone_web/live/page_live.ex文件并将其更新为以下内容：

    defmodule InstagramCloneWeb.PageLive do
  use InstagramCloneWeb, :live_view

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    {:ok, socket}
  end

  @impl true
  def handle_params(_params, _uri, socket) do
    {:noreply,
      socket
      |> assign(live_action: apply_action(socket.assigns.current_user))}
  end

  defp apply_action(current_user) do
    if !current_user, do: :root_path
  end
end

    更新lib/instagram_clone_web/live/page_live_component.ex如下：

    defmodule InstagramCloneWeb.PageLiveComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Accounts
  alias InstagramClone.Accounts.User

  @impl true
  def mount(socket) do
    changeset = Accounts.change_user_registration(%User{})
    {:ok,
      socket
      |> assign(changeset: changeset)
      |> assign(trigger_submit: false)}
  end

  @impl true
  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset =
      %User{}
      |> User.registration_changeset(user_params)
      |> Map.put(:action, :validate)
    {:noreply, socket |> assign(changeset: changeset)}
  end

  def handle_event("save", _, socket) do
    {:noreply, assign(socket, trigger_submit: true)}
  end
end

    在第 5 行内部lib/instagram_clone_web/live/page_live_component.html.leex向表单添加一个目标：

      <%= f = form_for @changeset, Routes.user_registration_path(@socket, :create),
    phx_change: "validate",
    phx_submit: "save",
    phx_target: @myself, # <-- THIS LINE WAS ADDED
    phx_trigger_action: @trigger_submit,
    class: "flex flex-col space-y-4 w-full px-6" %>

    更新lib/instagram_clone_web/live/page_live.html.leex如下：

    <%= if @current_user do %>
  
    User Logged In Homepage
    
<% else %>
  <%= live_component @socket,
    InstagramCloneWeb.PageLiveComponent,
    id: 1 %>
<% end %>

    打开lib/instagram_clone_web/templates/layout/live.html.leex顶部逻辑并将其更新为以下内容：

    <%= if @current_user do %>
  <%= live_component @socket, InstagramCloneWeb.HeaderNavComponent, current_user: @current_user %>

<% else %>
  <%= if @live_action !== :root_path do %>
    <%= live_component @socket, InstagramCloneWeb.HeaderNavComponent, current_user: @current_user %>
  <% end %>
<% end %>

    现在我们不需要@curent_uri_path在每个liveview上，我们可以从lib/instagram_clone_web/live/user_live/profile.ex第20行里面删除它handle_params()：

      @impl true
  def handle_params(_params, uri, socket) do
    socket = socket |> assign(current_uri_path: URI.parse(uri).path) # <-- DELETE THIS LINE
    {:noreply, apply_action(socket, socket.assigns.live_action)}
  end

    制作这一部分比我预期的要困难，它变得有点具有挑战性，这个应用程序并不像我们想象的那么容易做好。我的完美主义战胜了我，这就是为什么我花了更长的时间才发布它，我对一些我必须弄清楚的事情一无所知，但毫无疑问，我很享受这个过程并学到了很多东西。在下一部分中，我们将处理用户的帖子。

    转自：Elixirprogrammer

    你可能感兴趣的:(使用 Phoenix LiveView 构建 Instagram (3))

    • 2023-02-16 执剑饮烈酒
      1、开心点，反正谁也别想活着离开这个世界。——朱德庸2、我一直以为爱的反义词是不爱，直到现在我才明白，爱的反义词是遗忘。——《寻梦环游记》3、人生的最高境界是佛为心，道为骨，儒为表，大度看世界。技在手，能在身，思在脑，从容过生活。——南怀瑾4、如果一个民族沦落到，只剩下把升官发财当成最终目标和追求的时候，那么这个民族就危险了，一旦金钱和权利成了唯一的信仰，那将是悲哀的。——鲁迅5、人和人如果不在一
    • 100天30本书读书计划（2018-06-11）DAY 62 一个姜姜
      【书名】当我谈跑步时，我谈些什么【作者】村上春树【读书页数】51--128/187【读书时间】2018年6月11日【精彩句子】01肌肉难长，易消。赘肉易长，难消。P5502肌肉也同有血有肉的动物一般无二，它也愿意过更舒服的日子，不继续给它负荷，它便会心安理得地将记忆出去。想再度输入的话，必须得从头开始，将同样的模式重复一遍。P7703不管怎样，反正得坚持跑步。每天跑步对我来说好比生命线，不能说忙就
    • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法 江上清风山间明月 FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏
      文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
    • 3/31总结 静心第一
      今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
    • 极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～ 极小狐 gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM
      安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或
    • 数据结构奇妙旅程之深入解析快速排序 山间漫步人生路 数据结构排序算法算法
      快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo
    • python抓包与解包_Python—网络抓包与解包（pcap、dpkt） weixin_39691055 python抓包与解包
      pcap安装[root@localhost~]#pipinstallpypcap抓包与解包#-*-coding:utf-8-*-importpcap,dpktimportre,threading,requests__black_ip=['103.224.249.123','203.66.1.212']#抓包：param1eth_name网卡名，如：eth0,eth3。param2p_type日志捕
    • 2022年河南省高等职业教育技能大赛云计算赛项竞赛赛卷（样卷） 忘川_ydy 云计算云计算openstackkubernetesdockerpythonk8sansible
      #需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！第一部分：私有云任务1私有云服务搭建(10分)使用提供的用户名密码，登录竞赛用的云计算平台，按要求自行使用镜像创建两台云主机，创建完云主机后确保网络正常通信，然后按要求配置服务器。根据提供安装脚本框架，补充脚本完成OpenStack平台的安装搭
    • 浪潮 M5系列服务器IPMI无法监控存储RAID卡问题. Songxwn 硬件服务器服务器运维
      简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/
    • 通俗易懂：MySQL中如何设置只读实例并确保数据一致性？ 大龄下岗程序员 mysqljavamysqlspring
      在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication
    • 5月8日盘前提示：维持短期可以操作到下周二左右的判断，重个股轻指数 九命_猫妖
      大盘：消息面。取消境外投资者额度限制，这个长线利好股市，短期影响不大，因为3000亿额度只用了1/3。额度本来就够用。走势看，昨天缩量横盘，走的还算中规中矩，近期一直弱势的次新股走势较强，前期强势股京威股份、光大嘉宝等跌停，由此判断市场还是存量博弈的市场，震荡是市场的主基调。维持短期可以操作到下周二左右的判断。下周后半段震荡回调的概率较高。思路：短期重个股轻指数行业和个股：物联网行业有利好，关注下
    • Mac命令行查找SDK/JDK安装位置 iblade Linuxmacosjava开发语言
      要在命令行中查询AndroidSDKPlatformTools的安装位置，可以使用以下步骤：使用which命令：在命令行中执行以下命令：whichadb这将输出adb命令的安装路径，通常情况下，它会在AndroidSDK的platform-tools目录下。手动查找：如果whichadb没有输出，可以手动查找AndroidSDK的安装位置。通常情况下，AndroidSDK的默认安装路径是在用户的h
    • 2022-04-30 何以解忧啊
      今日体验：把身体照顾好，把喜欢的事做好，把重要的人待好，你要的一切都在路上！你现在要做的就是好好成为更好的自己！
    • 美团自动配送车2024春季招聘 | 社招专场 美团技术团队
      关于美团自动配送团队美团自动配送以自研L4级自动驾驶软硬件技术为核心，与美团即时零售业务结合，形成满足公开道路、校园、社区、工业园区等室外全场景下的自动配送整体解决方案。美团自动配送团队成立于2016年，团队成员来自于Waymo、Cruise、Pony.ai、泛亚等自动驾驶行业头部公司，自动驾驶技术团队博士占比高达30%，依靠视觉、激光等传感器，实时感知预测周围环境，通过高精地图定位和智能决策规划
    • 天猫超市优惠获取渠道，天猫超市内部优惠劵领取方法使用教程 氧惠全网优惠
      天猫超市是一个不错的购物平台，满足用户所需，基本次日达，很方便的购物平台，那么有人问我，天猫超市优惠获取渠道在哪？怎么能够优惠的购买，今天分享给大家；1、天猫超市优惠券抢好券：天猫超市首页每天可以领取满199减30、满235减35、满299减50、满399减60、满166减30等优惠券，领劵方法复制下条口令打开淘宝进入领劵会场；隐藏神券、实时爆款、天天更新！戳>(CZ9185ZatcdhNADlJ
    • 自律计划：从早睡早起开始 犀首公孫衍
      今天天气十分不错，阳光明媚。下午趁着阳光充足，想去田野里走一走。两个多月了，几乎都是在家待着，大门不出二门不迈。上大学以来，可几乎不怎么去到田间地头看一看。3月正是油菜花开放的季节，满地的金黄色，草木也开始生出了绿色的芽儿。眼前的景儿，让人眼明心亮。一年之计在于春，春天是最美好的季节。这样一个特殊的春天，让我暂时脱离了学校，也算有了一些新的收获吧。开始有了一些好的改变，开始坚持每天读书，保持较好的
    • 华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++） 华为OD题库 华为od链表java
      须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总
    • 学习JavaEE的日子 Day32 线程池 A 北枝 学习JavaEE学习java-eejava线程池
      Day32线程池1.引入一个线程完成一项任务所需时间为：创建线程时间-Time1线程中执行任务的时间-Time2销毁线程时间-Time32.为什么需要线程池(重要)线程池技术正是关注如何缩短或调整Time1和Time3的时间，从而提高程序的性能。项目中可以把Time1，T3分别安排在项目的启动和结束的时间段或者一些空闲的时间段线程池不仅调整Time1，Time3产生的时间段，而且它还显著减少了创建
    • 花气袭人知昼暖 柒侠传
      花气袭人知昼暖高一七班黄韵熹37号花袭人，原名花珍珠，位列金陵十二钗又副册中的第二位。“袭人”这一称呼源于“花气袭人知昼暖”这一诗句，是宝玉给起的。想起来便觉得暖融融的，一如花袭人温柔的笑容。但花袭人着实是令人又爱又怕的角色。第二十一回的回目将她赞作“贤袭人”，脂砚斋在一旁批道“当得起”。花袭人对宝玉的确是一片真心。她为劝宝玉收敛他那成日在大观园里与姐姐妹妹“厮混”的性子，假借家人赎回的机会，软语
    • 淘宝天猫38节活动时间和玩法，2024年焕新周满减优惠多少 小小编007
      在2024年，淘宝天猫平台即将迎来一年一度的38节活动，这是广大消费者们翘首以待的购物狂欢节。在这篇文章中，我们将为您详细解读淘宝天猫38节活动的时间安排和玩法，以及2024年焕新周的满减优惠力度。一、淘宝天猫38节活动时间2024年淘宝天猫38节活动将于2月28日正式启动，持续至3月8日，为期10天。活动期间，消费者们可以尽情享受各种优惠折扣、满减活动以及限时秒杀，尽情释放购物热情。2024淘宝
    • 感恩日志 圆施
      张新丽2019年8月16日感恩日志：1.感恩天地滋养万物；感恩国家恩惠护佑；感恩父母养育深恩。2.感恩尊重为平台源头付出的所有人事物。3.感恩红斌、孙萍清晨7点开车来接我和小姨去安宁渠采摘。4.感恩小姨和小姨夫亲自采摘还带我们去瓜地品尝，第一次这么吃好甜啊，忘掉了炎热消了暑，拍下了瞬间，分享着快乐，带给大家。4.感恩整理收拾好小姨给大家利用午休蒸苞米。5.感恩去接爸妈参加沙龙。6.感恩祝福两位伙伴
    • ❤️ 美娟 感恩福记 32/365 让一切都成为你的助力
      感恩信守承诺完成✅的一天感恩连睡梦中都惦记着“感恩”，夜晚睡的香甜，好感恩，谢谢感恩好手艺，营养早餐，开启了美好的一天感恩感恩健身，让自己的身体肌肉变得结实，painisweaknessleavingthebody!痛苦会让软弱离开身体！好棒的，渐渐爱上燃烧脂肪的感觉，喜欢精气神饱满的自己感恩感恩奶奶的夸赞，把堉哥哥买给奶奶的蚕丝被邮寄回去了，奶奶很高兴，有人惦记着她，也是因为奶奶智慧的规劝，才遇
    • python 推导式(派生、衍生) sanduo112 人工智能pythonwindows开发语言
      python推导式一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式，可以从一个数据序列构建另一个新的数据序列的结构体。2.列表(list)推导式3.字典(dict)推导式4.集合(set)推导式5.元组(tuple)推导式二、代码概述一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式，可以从一个数据序列构建另一个新的数据序列的结构体。Python支持各种数
    • SpringMVC设置全局异常处理器 水岸齐天 javaspring
      文章目录背景分析使用@ControllerAdvice（@RestControllerAdvice）+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常，有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理，来规范所有出去的异常信息。参考：官方文档分析首先ControllerAdvice(RestControll
    • uni-app实现 步骤条 夏夏的码农 uni-app
      实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
    • 为什么说仪式和习惯非常重要？ 章鱼老师zy
      这是章鱼姐第【40】篇原创文章，日更计划第【37/100】天。阅读张萌萌姐【精力管理手册】第【6/7】章。一阅读摘要这一章萌姐讲到了习惯的重要性，为什么说养成一个习惯很重要？如何养成一个好习惯？如何建立自己的仪式感？二金句精力管理最重要的是产生什么效果。当你想做却没有动力去做一件事情时，你就应该把它养成习惯。习惯可以帮我们创造稳定框架。对于那些特别考验意志的事情，我们应该先行后思。三思考题，萌姐讲
    • 安神的投资札记——指数跟踪周报（20220602） echo安神
      本周关键词：缩表上周调整过后，本周又反弹了。最近创业板好活跃，跌的时候跌得凶，涨的时候也涨得猛。底部特征明显。上证50，0.99%；沪深300，2.21%；中证100，1.85%；中证500，3.03%；深证100，3.71%；创业板指数，5.85%；中证1000，3.75%。美联储6月1日开启缩表，每月总计减持475亿美元美国国债和MBS（抵押贷款支持证券），并将在3个月后提高缩表上限至每月95
    • 社交电商是什么意思通俗的说 氧惠好项目
      社交电商是目前电商发展的一个非常热门的领域，它将传统的电商和社交媒体相结合，让用户可以在社交平台上完成购物、支付等操作。社交电商不同于传统电商，它更加注重用户的社交性和互动性，通过社交媒体的传播，吸引用户关注，让产品能够更加快速地传播。京东密令红包：最爱领红包828红包多多148今天给大家分享我长期在做的副业，也在这里赚到人生第3桶金！氧惠APP佣金高，资质靠谱，各大应用市场均可搜索使用。【氧惠】
    • 以前开发MFC界面如何快速转成QT界面 广州视觉芯软件有限公司 mfcqtc++
      将MFC界面快速转换为Qt界面可能需要进行一些手动工作，因为MFC和Qt是两个不同的界面框架，它们具有不同的设计和实现原理。但是，以下步骤可以帮助你快速进行转换：创建一个新的Qt项目：使用QtCreator创建一个新的Qt项目。分析MFC界面：仔细分析你的MFC界面，包括窗口、对话框、控件等的布局、样式和行为。重新设计界面：使用Qt的可视化设计器重新设计界面。在QtCreator的设计器中，你可以
    • 有一种失去叫做得不到 野风狂生
      图片发自App有一种失去叫做得不到野风狂生（20190130）有一种失去叫做得不到失去的是希望是前进的方向是奋斗的动力是奇迹的召唤纵然有一天将其释怀遗憾的残迹却永留心底得不到有时也会心痛仿佛沙漠里远望着的一泓甘泉十米处被他人喝干涸仿佛黑洞里疲惫追逐的火焰在握住前一秒耗尽光明仿佛风雪彻骨的冬天被人剥剩至赤裸而夜行山莽埋葬未曾示面的野心有谁还会去祭奠不用问我问我也无可奉告不用问你问你也缄默不言去拥抱那
    • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
      昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
    • android 网络 百合不是茶 网络
      android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
    • [读书笔记]读法拉第传 comsci 读书笔记
            1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
    • 随机数的产生 沐刃青蛟 随机数
      c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
    • PHP检测函数所在的文件名 IT独行者 PHP函数
      很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
    • 银行各系统功能简介 文强chu 金融
      银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
    • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
          最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
    • php 数组 aichenglong PHP排序数组循环多维数组
      1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
    • 安装python2.7 AILIKES python
      安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
    • java异常的处理探讨 百合不是茶 JAVA异常
      //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
    • getElementsByName实例 bijian1013 element
      实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
    • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
              参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
    • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
      1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
    • 【Spark八十一】Hive in the spark assembly bit1129 assembly
      Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
    • Nginx问题定位之监控进程异常退出 ronin47
      nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
    • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
      方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
    • Netty源码学习-DefaultChannelPipeline bylijinnan netty
      package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
    • MYSQL数据库常用备份及恢复语句 chicony mysql
      备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
    • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
          之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
    • hadoop 平衡空间设置方法 daizj hadoopbalancer
      在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
    • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
        判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
    • Android学习之路 dcj3sjt126com Android学习
      转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
    • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
      转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
    • 【精典】数据库相关相关 gengzg 数据库
      package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
    • 自动补全 huyana_town 自动补全
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
    • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
      最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
    • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
        使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
    • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
      以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
    • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
      　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
    • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
      /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他