DvaJS Learning Road 2 — umi@2 + dva, полное приложение CURD для управления пользователями

внешний интерфейс JavaScript React.js NPM

предисловие

Использовано за последний месяцdvaРефакторинг существующих проектов компании, меньше времени на написание статей. С началом сентябрьского школьного сезона несколько используемых проектов с открытым исходным кодом недавно получили серьезные обновления. ПервыйumiНаконец-то вышла версия 2.0, конкретное введение можно посмотретьВыпущен umi 2.0, подключаемый фреймворк приложений для реагирования корпоративного уровня.. Вслед за версией ant design pro 2.0, созданной с помощью umi@2, вы можете ознакомиться с конкретным введениемКрасивый и мощный Ant Design Pro 2.0 официально выпущен. Сегодня у меня наконец-то появилось время познакомиться с umi@2, я вспоминаю первую часть своего пути по изучению двойки.запись об обученииОн был собран с помощью umi@1.X и может быть пересобран с помощью umi 2.0. Эта статья является автором два@sorryccизumi-dva-user-dashboardРеализация версии umi@2:"umi+dva, приложение CURD для управления пользователями"Переписано из версии статьи для umi@2. Репозиторий кода:umi2-dva-user-dashboard. Демонстрационный адрес:demo.

Шаг 1. Используйте скаффолд create-umi для инициализации проекта

смотрите подробностиофициальный сайт umi #Создайте проект с помощью строительных лесов

использоватьyarn createЗаказ:

$ mkdir umi2-dva-user-dashboard && cd umi2-dva-user-dashboard
$ yarn create umi

Увидев, что небольшой партнер в сообществе спросил, как использовать npm для создания проекта umi, сначала используйте npm для установки create-umi:

$ cnpm install -g create-umi

После установки войдите в проект и выполнитеcreate-umi

$ cd umi2-dva-user-dashboard
$ create-umi

Обратите внимание на официальную рекомендациюyarn createКоманда, потому что она гарантирует, что каждый раз используется последний скаффолд. Если вы похожи на меня, у компании есть только частный сервер npm в среде разработки интрасети, вы можете попробовать использовать команду npm.

После выполнения вышеописанных операций входим в интерактивную командную строку create-umi, выбираем функцию, здесь выбираем antd, dva и hard source

image

После подтверждения каталог и файл будут автоматически созданы в соответствии с вашим выбором:

image

Затем вручную установите зависимости:

$ yarn

или

$ cnpm install

После установки зависимостей запустите проект:

$ yarn start

или

$ npm start

Если все в порядке, откройте его в браузере.http://localhost:8000Вы можете увидеть следующий интерфейс:

image

Шаг 2. Настройте прокси, к которому можно получить доступ через RESTFulhttp://localhost:8000/api/users

Исправлять.umirc.js, плюс конфигурация «прокси»:

proxy: {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
},

Обратите внимание, что конфигурация прокси такая же, как у umi@1.

доступhttp://localhost:8000/api/users, вы можете получить доступjsonplaceholder.typicode.com/usersДанные.

image

Шаг 3. Создайте маршрут пользователя

Файл в umi это маршрут, поэтому нам нужно добавить новый маршрут, просто создайте новый файл, здесь мы используем обычный маршрут. смотрите подробностиваши фанаты accept.org/this/expensive/ro….

новыйsrc/pages/users.js, содержание следующее:

export default () => {
  return (
    <div>
      Users Page
    </div>
  )
}

затем посетитеhttp://localhost:8000/users,ты увидишьUsers PageВыход:

image

Здесь мы видим, что на странице есть лишний заголовок, получается, что проект, сгенерированный скаффолдингом create-umi, будетГенерируется по умолчаниюфайл глобального макетаsrc/layouts/index.js, версия umi@1.X имеет эту функцию, подробности см. в официальной документацииглобальный макет

Шаг 4. Построение модели пользователей и сервиса

Обратите внимание на только что созданныйsrc/pages/users.jsЭто простая ситуация со страницей. В настоящее время ее необходимо организовать с моделью и сервисом. Новоеsrc/pages/users/index.jsфайл, будетsrc/pages/users.jsсодержимое скопировано вsrc/pages/users/index.jsфайл, затем удалитеsrc/pages/users.jsдокумент.

Скаффолдинг create-umi не сгенерировал request.js, создайте новыйsrc/utils/request.js:

import fetch from 'dva/fetch';

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default async function request(url, options) {
  const response = await fetch(url, options);

  checkStatus(response);

  const data = await response.json();

  const ret = {
    data,
    headers: {},
  };

  if (response.headers.get('x-total-count')) {
    ret.headers['x-total-count'] = response.headers.get('x-total-count');
  }

  return ret;
}

Добавить услугу:src/pages/users/services/users.js, обратите внимание, что umi@2 добавляет псевдоним веб-пакета @, указывающий на каталог src:

import request from '@/utils/request';

export function fetch({ page = 1 }) {
  return request(`/api/users?_page=${page}&_limit=5`);
}

Обратите внимание здесьpageПараметр по умолчанию равен1,limitпараметр установлен на5

Добавить модель:src/pages/users/models/users.js, содержание следующее:

import * as usersService from '../services/users';

export default {
  namespace: 'users',
  state: {
    list: [],
    total: null,
  },
  reducers: {
    save(state, { payload: { data: list, total } }) {
      return { ...state, list, total };
    },
  },
  effects: {
    *fetch({ payload: { page } }, { call, put }) {
      const { data, headers } = yield call(usersService.fetch, { page });
      yield put({ type: 'save', payload: { data, total: headers['x-total-count'] } });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },
};

Переключитесь на браузер (который обновляется автоматически), и ничего не должно измениться, потому что данные в порядке, но с ними не связано представление. Но откройте инструменты разработчика Redux, и вы должны увидетьusers/fetchа такжеusers/saveдействие и связанное с ним состояние.

image

Шаг 5. Добавьте интерфейс для отображения списка пользователей (аналогично umi@1)

мы помещаем компонент в существованиеsrc/pages/users/components, поэтому создайте новый здесьUsers.jsа такжеUsers.css. Пожалуйста, обратитесь к этомуCommit.

Две вещи, которые следует отметить:

  1. Тонкая настройка модели, добавление страницы для указания текущей страницы
  2. Поскольку pageSize используется как в компонентах, так и в службах, он извлекается вsrc/constants.js

После внесения изменений переключитесь в браузер, и вы сможете увидеть список пользователей с разбивкой на страницы.

image

Несколько замечаний:

  • В Users.js модель и компоненты связаны, обратите внимание наconst { list, total, page } = state.users;внутриusersдляmodelвнутриnamespaceимя.
  • Мы не регистрировали модель вручную, с этим нам помог umi, подробнее см.src/pages/.umi/DvaContainer.jsфайл, который автоматически обновляется. Связанные правила см.официальный сайт umi #регистрация моделиодин период.
  • Вы можете использовать модуль css напрямую

Шаг 6. Добавить меню заголовка

Добавление компонента меню заголовка позволяет нам переключаться между домашней страницей и страницей со списком пользователей.

обратитесь к этомуCommit.

image

Шаг 7. Обработка состояния загрузки (аналогично umi@1)

dva имеет хук, который управляет выполнением эффектов, и на его основе оборачивает подключаемый модуль dva-loading. С этим плагином нам не нужно снова и снова писать showLoading и hideLoading, когда будет сделан запрос, плагин автоматически установит состояние загрузки данных в true или false. Потом привязываем при рендеринге компоненты и рендерим на основе этих данных.

umi-plugin-dva по умолчанию имеет встроенный плагин для загрузки dva.

затем вsrc/components/Users/Users.jsПривязать загрузку данных в:

+ loading: state.loading.models.users,

Обратите внимание здесьusersдляmodelизnamespace, поэтому состояние загрузки dva-loading для модели в целом.

Пожалуйста, обратитесь к этомуCommit.

Обновите браузер, ваш список пользователей загружен?

Шаг 8. Обработка пейджинга (аналогично umi@1)

изменить только один файлsrc/pages/users/components/Users.jsПросто хорошо.

Есть две идеи для обработки пагинации:

  1. Отправьте действие, запросите новые данные пейджинга, сохраните их в модели и автоматически обновите страницу.
  2. Переключить маршрутизацию (поскольку изменения маршрутизации отслеживались ранее, последующие действия будут обрабатываться автоматически)

Мы используем способ мышления 2, преимущество в том, что пользователи могут напрямую обращаться к странице 2 или другим страницам.

quan относятся к этомуCommit.

Шаг 9. Процесс удаления пользователя (аналогично umi@1)

После предыдущих 8 шагов общий контекст приложения стал ясен, и я считаю, что у каждого есть определенное понимание общего процесса.

Следующая функциональная настройка может быть выполнена в основном в соответствии со следующими тремя шагами:

  1. service

  2. model

  3. компонент Сейчас мы начинаем добавлять функцию удаления пользователей.

  4. обслуживать, модифицироватьsrc/pages/users/services/users.js:

export function remove(id) {
  return request(`/api/users/${id}`, {
    method: 'DELETE',
  });
}
  1. модель, модифицироватьsrc/pages/users/model.js:
*remove({ payload: id }, { call, put, select }) {
  yield call(usersService.remove, id);
  const page = yield select(state => state.users.page);
  yield put({ type: 'fetch', payload: { page } });
},
  1. компонент, изменитьsrc/pages/users/components/Users.js,заменятьdeleteHandlerсодержание:
dispatch({
  type: 'users/remove',
  payload: id,
});

Обратите внимание, что из-за использования стороннего веб-сайта API данные на самом деле не будут удалены, но удаление API возвращает успех, и данные извлекаются после выбора удаления, а исходные данные остаются прежними.

Шаг 10. Обработка пользовательских правок (аналогично umi@1)

Обработка пользовательских правок такая же, как и раньше, в три шага:

  1. service
  2. model
  3. компонент Первое обслуживание, модификацияsrc/pages/users/services/users.js:
export function patch(id, values) {
  return request(`/api/users/${id}`, {
    method: 'PATCH',
    body: JSON.stringify(values),
  });
}

Затем моделировать, модифицироватьsrc/pages/users/model.js:

*patch({ payload: { id, values } }, { call, put, select }) {
  yield call(usersService.patch, id, values);
  const page = yield select(state => state.users.page);
  yield put({ type: 'fetch', payload: { page } });
},

Последний компонент, см. подробностиCommit.

Следует отметить, как мы обрабатываем видимое состояние модального окна здесь, есть несколько вариантов:

  1. Сохраните его в состоянии модели dva
  2. Хранить в состоянии компонента

К тому же как сохранить тоже проблема, можно:

  1. Виден только один, а затем заполните разные данные формы в соответствии с пользователем, на который нажал пользователь.
  2. несколько пользователей несколько видимых Для этого руководства выбрано решение 2-2, то есть состояние компонента сохраняется, а видимость сохраняется пользователем. Кроме того, для удобства использования пакетUserModalс компонент.

После этого переключитесь в браузер, и вы сможете редактировать пользователя.

Шаг 11. Обработайте создание пользователя (аналогично umi@1)

Создание пользователя проще, чем редактирование пользователя, потому что им можно поделиться.UserModalкомпоненты. Он аналогичен шагу 10, поэтому повторяться не будет.Commit.

На данный момент мы завершили полное приложение CURD. Если вам интересно, вы можете дополнительно посмотреть информацию о два и уми:

(над)

Суммировать

В этой статье в основном используется umi@2 для завершенияumi-dva-user-dashboardпроект. Видно, что бизнес-код в основном такой же, как у umi@1, а стоимость миграции относительно низкая. В настоящее время проект находится на рефакторинге с использованием dva, и пока нет планов использовать umi@2, но мы продолжим уделять внимание развитию umi.

Категории