Trello clone with Phoenix and React (第八章节)

这篇文章属于基于Phoenix Framework 和React的Trello系列

卡片展示和创建

现在我们已经完成用户注册和权限管，同时连接到Socket，并加入到channels。我们将进入下一阶段：让用户展示和创建自己的卡片。

卡片迁移

首先，我们需要创建迁移和模型，如下所示：

  1. $ mix phoenix.gen.model Board boards board_id:references:board name:string

将会创建新的类似如下所示的迁移文件：

  1. # priv/repo/migrations/20151224093233_create_board.exs
  3. defmodule PhoenixTrello.Repo.Migrations.CreateBoard do
  4.   use Ecto.Migration
  6.   def change do
  7.     create table(:boards) do
  8.       add :name, :string, null: false
  9.       add :user_id, references(:users, on_delete: :delete_all), null: false
  11.       timestamps
  12.     end
  14.     create index(:boards, [:user_id])
  15.   end
  16. end

新建数据表表名是boards，包含id和timestamps字段，以及name字段，name字段是外键，关联于users表。注意如果用户被删除了，数据库将删除这个用户所有的卡片。同时为这个表添加索引，便于查询，和name添加空约束。

完成这些修改后，运行它：

  1. $ mix ecto.migrate

Board模型

让我们看看Board模型：

  1. # web/models/board.ex
  3. defmodule PhoenixTrello.Board do
  4.   use PhoenixTrello.Web, :model
  6.   alias __MODULE__
  8.   @derive {Poison.Encoder, only: [:id, :name, :user]}
  10.   schema "boards" do
  11.     field :name, :string
  12.     belongs_to :user, User
  14.     timestamps
  15.   end
  17.   @required_fields ~w(name user_id)
  18.   @optional_fields ~w()
  20.   @doc """
  21.   Creates a changeset based on the `model` and `params`.
  23.   If no params are provided, an invalid changeset is returned
  24.   with no validation performed.
  25.   """
  26.   def changeset(model, params \\ :empty) do
  27.     model
  28.     |> cast(params, @required_fields, @optional_fields))
  29.   end
  30. end

到现在还没有重要的需要提醒的事情，我们仅需要更新User模型，并关联到owned_boards：

  1. # web/models/user.ex
  3. defmodule PhoenixTrello.User do
  4.   use PhoenixTrello.Web, :model
  6.   # ...
  8.   schema "users" do
  9.     # ...
  11.     has_many :owned_boards, PhoenixTrello.Board
  13.     # ...
  14.   end
  16.   # ...
  17. end

为什么是owned_boards？用户创建的卡片和用户添加其他人的卡片是有区别的，现在不用考虑这些，以后我们会更深入地讨论。

BoardController

为了实现新的boards，我们将更新路由文件，并添加必要的入口，便于处理各种请求。

  1. # web/router.ex
  3. defmodule PhoenixTrello.Router do
  4.   use PhoenixTrello.Web, :router
  6.   # ...
  8.   scope "/api", PhoenixTrello do
  9.     # ...
  11.     scope "/v1" do
  12.       # ...
  14.       resources "boards", BoardController, only: [:index, :create]
  15.     end
  16.   end
  18.   # ...
  19. end

在添加boards资源时，仅创建了index和create动作，BoardController将会处理这些请求：

  1. $ mix phoenix.routes
  2. board_path  GET     /api/v1/boards    PhoenixTrello.BoardController :index
  3. board_path  POST    /api/v1/boards    PhoenixTrello.BoardController :create

让我们创建新的控制器：

  1. # web/controllers/board_controller.ex
  3. defmodule PhoenixTrello.BoardController do
  4.   use PhoenixTrello.Web, :controller
  6.   plug Guardian.Plug.EnsureAuthenticated, handler: PhoenixTrello.SessionController
  8.   alias PhoenixTrello.{Repo, Board}
  10.   def index(conn, _params) do
  11.     current_user = Guardian.Plug.current_resource(conn)
  13.     owned_boards = current_user
  14.       |> assoc(:owned_boards)
  15.       |> Board.preload_all
  16.       |> Repo.all
  18.     render(conn, "index.json", owned_boards: owned_boards)
  19.   end
  21.   def create(conn, %{"board" => board_params}) do
  22.     current_user = Guardian.Plug.current_resource(conn)
  24.     changeset = current_user
  25.       |> build_assoc(:owned_boards)
  26.       |> Board.changeset(board_params)
  28.     case Repo.insert(changeset) do
  29.       {:ok, board} ->
  30.         conn
  31.         |> put_status(:created)
  32.         |> render("show.json", board: board )
  33.       {:error, changeset} ->
  34.         conn
  35.         |> put_status(:unprocessable_entity)
  36.         |> render("error.json", changeset: changeset)
  37.     end
  38.   end
  39. end

注意：我们从Guardian添加了 EnsureAuthenticated 插件，因此在这个控制器中只允许有授权的连接。在index动作中，我们从连接中获取当前用户，并从数据库检索相关卡片信息，便于在BoardView展示。几乎同时，在create动作中，我们从user建立了owned_board变更，并插入到数据库，如果一切顺利就渲染卡片。

让我们创建 BoardView：

  1. # web/views/board_view.ex
  3. defmodule PhoenixTrello.BoardView do
  4.   use PhoenixTrello.Web, :view
  6.   def render("index.json", %{owned_boards: owned_boards}) do
  7.     %{owned_boards: owned_boards}
  8.   end
  10.   def render("show.json", %{board: board}) do
  11.     board
  12.   end
  14.   def render("error.json", %{changeset: changeset}) do
  15.     errors = Enum.map(changeset.errors, fn {field, detail} ->
  16.       %{} |> Map.put(field, detail)
  17.     end)
  19.     %{
  20.       errors: errors
  21.     }
  22.   end
  23. end

React 视图组件

服务器后端已经准备好处理卡片展示和创建请求，现在让我们着重于前端。在用户登陆后，首先将展示用户的卡片，同时可以点击窗口创建新的卡片，让我们来创建HomeIndexView：

  1. // web/static/js/views/home/index.js
  3. import React                from 'react';
  4. import { connect }          from 'react-redux';
  5. import classnames           from 'classnames';
  7. import { setDocumentTitle } from '../../utils';
  8. import Actions              from '../../actions/boards';
  9. import BoardCard            from '../../components/boards/card';
  10. import BoardForm            from '../../components/boards/form';
  12. class HomeIndexView extends React.Component {
  13.   componentDidMount() {
  14.     setDocumentTitle('Boards');
  16.     const { dispatch } = this.props;
  17.     dispatch(Actions.fetchBoards());
  18.   }
  20.   _renderOwnedBoards() {
  21.     const { fetching } = this.props;
  23.     let content = false;
  25.     const iconClasses = classnames({
  26.       fa: true,
  27.       'fa-user': !fetching,
  28.       'fa-spinner': fetching,
  29.       'fa-spin':    fetching,
  30.     });
  32.     if (!fetching) {
  33.       content = (
  34.         <div className="boards-wrapper">
  35.           {::this._renderBoards(this.props.ownedBoards)}
  36.           {::this._renderAddNewBoard()}
  37.         </div>
  38.       );
  39.     }
  41.     return (
  42.       <section>
  43.         <header className="view-header">
  44.           <h3><i className={iconClasses} /> My boards</h3>
  45.         </header>
  46.         {content}
  47.       </section>
  48.     );
  49.   }
  51.   _renderBoards(boards) {
  52.     return boards.map((board) => {
  53.       return <BoardCard
  54.                 key={board.id}
  55.                 dispatch={this.props.dispatch}
  56.                 {...board} />;
  57.     });
  58.   }
  60.   _renderAddNewBoard() {
  61.     let { showForm, dispatch, formErrors } = this.props;
  63.     if (!showForm) return this._renderAddButton();
  65.     return (
  66.       <BoardForm
  67.         dispatch={dispatch}
  68.         errors={formErrors}
  69.         onCancelClick={::this._handleCancelClick}/>
  70.     );
  71.   }
  73.   _renderAddButton() {
  74.     return (
  75.       <div className="board add-new" onClick={::this._handleAddNewClick}>
  76.         <div className="inner">
  77.           <a id="add_new_board">Add new board...</a>
  78.         </div>
  79.       </div>
  80.     );
  81.   }
  83.   _handleAddNewClick() {
  84.     let { dispatch } = this.props;
  86.     dispatch(Actions.showForm(true));
  87.   }
  89.   _handleCancelClick() {
  90.     this.props.dispatch(Actions.showForm(false));
  91.   }
  93.   render() {
  94.     return (
  95.       <div className="view-container boards index">
  96.         {::this._renderOwnedBoards()}
  97.       </div>
  98.     );
  99.   }
  100. }
  102. const mapStateToProps = (state) => (
  103.   state.boards
  104. );
  106. export default connect(mapStateToProps)(HomeIndexView);

这里内容很多，让我们一个一个的看：

  • 首先我们必须牢记：组件需要连接到sotre，并且属性改变来自于我们创建的卡片reducer。
  • When it mounts it will change the document’s title to Boards and will dispatch and action creator to fetch the boards on the back-end.
  • For now it will just render the owned_boards array in the store and also the BoardForm component.
  • Before rendering this two, it will first check if the fetching prop is set to true. If so, it will mean that boards are still being fetched so it will render a spinner. Otherwise it will render the list of boards and the button for adding a new board.
  • When clicking the add new board button it will dispatch a new action creator for hiding the button and showing the form.

现在让我们来添加BoardForm 组件：

  1. // web/static/js/components/boards/form.js
  3. import React, { PropTypes } from 'react';
  4. import PageClick            from 'react-page-click';
  5. import Actions              from '../../actions/boards';
  6. import {renderErrorsFor}    from '../../utils';
  8. export default class BoardForm extends React.Component {
  9.   componentDidMount() {
  10.     this.refs.name.focus();
  11.   }
  13.   _handleSubmit(e) {
  14.     e.preventDefault();
  16.     const { dispatch } = this.props;
  17.     const { name } = this.refs;
  19.     const data = {
  20.       name: name.value,
  21.     };
  23.     dispatch(Actions.create(data));
  24.   }
  26.   _handleCancelClick(e) {
  27.     e.preventDefault();
  29.     this.props.onCancelClick();
  30.   }
  32.   render() {
  33.     const { errors } = this.props;
  35.     return (
  36.       <PageClick onClick={::this._handleCancelClick}>
  37.         <div className="board form">
  38.           <div className="inner">
  39.             <h4>New board</h4>
  40.             <form id="new_board_form" onSubmit={::this._handleSubmit}>
  41.               <input ref="name" id="board_name" type="text" placeholder="Board name" required="true"/>
  42.               {renderErrorsFor(errors, 'name')}
  43.               <button type="submit">Create board</button> or <a href="#" onClick={::this._handleCancelClick}>cancel</a>
  44.             </form>
  45.           </div>
  46.         </div>
  47.       </PageClick>
  48.     );
  49.   }
  50. }

这是一个很简单的组件。用于渲染表格This is a very simple component. It renders the form and when submitted it dispatches an action creator to create the new board with the supplied name. The PageClick component is an external component I found which detects page clicks outside the wrapper element. In our case we will use it to hide the form and show the Add new board… button again.

action creators

我们最少需要 3个 action creators：

  1. // web/static/js/actions/boards.js
  3. import Constants              from '../constants';
  4. import { routeActions }       from 'react-router-redux';
  5. import { httpGet, httpPost }  from '../utils';
  6. import CurrentBoardActions    from './current_board';
  8. const Actions = {
  9.   fetchBoards: () => {
  10.     return dispatch => {
  11.       dispatch({ type: Constants.BOARDS_FETCHING });
  13.       httpGet('/api/v1/boards')
  14.       .then((data) => {
  15.         dispatch({
  16.           type: Constants.BOARDS_RECEIVED,
  17.           ownedBoards: data.owned_boards
  18.         });
  19.       });
  20.     };
  21.   },
  23.   showForm: (show) => {
  24.     return dispatch => {
  25.       dispatch({
  26.         type: Constants.BOARDS_SHOW_FORM,
  27.         show: show,
  28.       });
  29.     };
  30.   },
  32.   create: (data) => {
  33.     return dispatch => {
  34.       httpPost('/api/v1/boards', { board: data })
  35.       .then((data) => {
  36.         dispatch({
  37.           type: Constants.BOARDS_NEW_BOARD_CREATED,
  38.           board: data,
  39.         });
  41.         dispatch(routeActions.push(`/boards/${data.id}`));
  42.       })
  43.       .catch((error) => {
  44.         error.response.json()
  45.         .then((json) => {
  46.           dispatch({
  47.             type: Constants.BOARDS_CREATE_ERROR,
  48.             errors: json.errors,
  49.           });
  50.         });
  51.       });
  52.     };
  53.   },
  54. };
  56. export default Actions;
  • fetchBoards: it will first dispatch the BOARDS_FETCHING action type so we can render the spinner previously mentioned. I will also launch the http request to the back-end to retrieve the boards owned by the user which will be handled by the BoardController:index action. When the response is back, it will dispatch the boards to the store.
  • showForm: this one is pretty simple and it will just dispatch the BOARDS_SHOW_FORM action to set whether we want to show the form or not.
  • create: it will send a POST request to create the new board. If the response is successful then it will dispatch the BOARDS_NEW_BOARD_CREATED action with the created board, so its added to the boards in the store and it will navigate to the show board route. In case there is any error it will dispatch the BOARDS_CREATE_ERROR.

The reducer

The last piece of the puzzle would be the reducer which is very simple:

  1. // web/static/js/reducers/boards.js
  3. import Constants from '../constants';
  5. const initialState = {
  6.   ownedBoards: [],
  7.   showForm: false,
  8.   formErrors: null,
  9.   fetching: true,
  10. };
  12. export default function reducer(state = initialState, action = {}) {
  13.   switch (action.type) {
  14.     case Constants.BOARDS_FETCHING:
  15.       return { ...state, fetching: true };
  17.     case Constants.BOARDS_RECEIVED:
  18.       return { ...state, ownedBoards: action.ownedBoards, fetching: false };
  20.     case Constants.BOARDS_SHOW_FORM:
  21.       return { ...state, showForm: action.show };
  23.     case Constants.BOARDS_CREATE_ERROR:
  24.       return { ...state, formErrors: action.errors };
  26.     case Constants.BOARDS_NEW_BOARD_CREATED:
  27.       const { ownedBoards } = state;
  29.       return { ...state, ownedBoards: [action.board].concat(ownedBoards) };
  31.     default:
  32.       return state;
  33.   }
  34. }

Note how we set the fetching attribute to false once we load the boards and how we concat the new board created to the existing ones.

Enough work for today! In the next post we will build the view to show a board and we will also add the functionality for adding new members to it, broadcasting the board to the related users so it appears in their invited boards list that we will also have to add. 同样，别忘记查看运行演示和下载最终的源代码：

演示 源代码