用 Phoenix LiveView 轻松搭建 Instagram (2)

2023-11-24 04:05:37

用 Phoenix LiveView 构建 Instagram (2)

在第一部分中，我们已经完成所有设置并准备好了基本布局，现在让我们开始处理用户设置。

1. 创建路由
打开 lib/instagram_clone/router.ex 文件，并添加以下代码：

scope "/user_settings", UserSettings do
  pipe_through :browser

  get "/", SettingsController, :index
  post "/", SettingsController, :update
end

2. 添加控制器
接下来，在 lib/instagram_clone/controllers/settings_controller.ex 中添加如下代码：

defmodule InstagramClone.Controllers.SettingsController do
  use InstagramClone.Web, :controller

  def index(conn, _params) do
    render(conn, "index.html")
  end

  def update(conn, %{"user" => user_params}) do
    # 在这里处理用户设置的更新
  end
end

3. 创建模板
在 templates/user_settings/index.html.heex 中添加如下代码：

<h1>用户设置</h1>

<form phx-change="update">
  <label>用户名</label>
  <input type="text" name="username" value={@user.username}>

  <label>电子邮件</label>
  <input type="email" name="email" value={@user.email}>

  <button type="submit">保存</button>
</form>

4. 实现更新用户设置的逻辑
在 lib/instagram_clone/controllers/settings_controller.ex 中添加如下代码：

def update(conn, %{"user" => user_params}) do
  user = Repo.get(User, conn.assigns.current_user.id)

  user = User.changeset(user, user_params)
  |> Repo.update!

  conn
  |> put_flash(:info, "您的设置已更新。")
  |> redirect(to: Routes.user_settings_path(conn, :index))
end