Путь обучения DvaJS 1 — пример обучения на официальном сайте dva+umi

Предварительное знание

dva
roadhog
umi
карта знаний два
Улучшите разработку проектов dva с umi

umi+dva, приложение CURD для управления пользователями

Эта статья в основном написана двумя авторами@sorryccпримерumi+dva, приложение CURD для управления пользователямиОсновано на некоторых моих собственных учебных записях. Копия того, что сказали друзья в области комментариев@sorryccВопрос о статье на гитхабе великого бога, пожалуйста, ответьте здесь, да, более 90% текста в этой статье взято изumi+dva, приложение CURD для управления пользователямиЭта статья, а также автор и источник статьи ясно объяснили в начале. Цель написания этой статьи - записать процесс пошагового следования учебнику для завершения приложения. Это не учебник. Я надеюсь что друзья учебника,@sorryccсильно вdvaОфициальный сайт предоставляет множество богатых примеров для справки.

Обновлено 10 сентября 2018 г., umi был обновлен до версии 2.0. Студенты, желающие использовать разработку umi@2, могут перейти наDvaJS Learning Road 2 — umi@2 + dva, полное приложение CURD для управления пользователями.

до начала:

Убедитесь, что версия узла 8.4 или выше.
Использование cnpm или yarn может сэкономить ваше время при установке зависимостей.

Шаг 1. Установите dva-cli@next и создайте приложение

Установить первымdva-cli, и убедитесь, что используется версия 1.0.0-beta.2 или выше.

$ cnpm i dva-cli@next -g
$ dva -v
dva-cli version 1.0.0-beta.4
    dva version 2.3.1

Здесь следует отметить, что причиной установки версии dva-cli@next является то, что в настоящее время umi не предоставляет официального инструмента для формирования шаблонов, его необходимо использовать в сочетании с dva + umi и можно использовать метод dva-cli@next. для инициализации проекта. Видеть:Примеры и строительные леса.

Затем создайте приложение:

$ dva new user-dashboard
$ cd user-dashboard

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

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

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

Затем запустите приложение: (эта команда всегда включена, перезапускать позже не нужно)

$ npm start

Браузер автоматически откроется и откроетсяhttp://localhost:8000.

доступhttp://localhost:8000/api/users, вы можете получить доступjsonplaceholder.typicode.com/usersДанные. (так какtypicode.comСтабильность службы может иногда давать сбои. Но это не беда, просто нам удобно потом разбираться с ошибками)

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

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

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

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

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

Примечание: используйте соглашение umisrc/pagesФайлы в каталоге — это маршруты, а файлы экспортируют компоненты реакции. Вы можете увидеть характеристики umi: в измерении страницы модели и услуги организованы вместе.

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

Добавить услугу:src/pages/users/services/users.js:

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 });
        }
      });
    },
  },
};

Здесь есть несколько способов письма, которые раньше не использовались: например,{ payload: { data: list, total } }, это способ использовать псевдоним при уничтожении;return { ...state, list, total }В методе записи используется оператор спреда...для создания новых объектов см.Карта знаний dva #Объекты и массивы ES6

Поскольку нам нужно получить общее количество пользователей из заголовков ответа, нам нужно изменить его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;
}

Примечание: здесь используется функция async/await ES7. Сначала я не очень хорошо с ней знаком. Прочитав несколько статей об async/await, я обнаружил, что семантически семантически это более семантически, чем способ Promise. Следующий абзац как я переписал Promise. :

/**
 * 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 function request(url, options) {
  let headers = {}
  return fetch(url, options)
    .then(checkStatus)
    .then(response => {
      const data = parseJSON(response)
      if (response.headers.get('x-total-count')) {
        headers['x-total-count'] = response.headers.get('x-total-count');
      }
      return data;
    }).then((data) => {
      return {data, headers}
    }).catch(err => ({ err }));
}

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

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

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

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

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

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

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

Users.js использует компоненты antd, но проект не устанавливает antd вручную, оказалось, что umi помог нам внедрить antd.

В Users.js модель и компоненты связаны, обратите внимание наconst { list, total, page } = state.users;внутриusersзаmodelвнутриnamespaceназвание.

Мы не регистрировали модель вручную, с этим нам помог umi, подробнее см.src/pages/.umi/DvaContainer.jsфайл, который автоматически обновляется. Связанные правила см.официальный сайт umi #регистрация моделиодин период.

Вы можете использовать модуль css напрямую

Шаг 6. Добавьте макет

Добавление макета позволяет нам переключаться между домашней страницей и страницей со списком пользователей. договор в умиlayouts/index.jsЭто глобальный маршрут, поэтому мы добавляемsrc/layouts/index.jsи CSS-файлы.

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

Уведомление:

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

Шаг 7. Обработайте состояние загрузки

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

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

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

+ loading: state.loading.models.users,

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

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

Шаг 8. Обработка нумерации страниц

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

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

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

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

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

Шаг 9. Обработка удаления пользователя

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

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

service
model
компонент Сейчас мы начинаем добавлять функцию удаления пользователей.
обслуживать, модифицироватьsrc/pages/users/services/users.js:

export function remove(id) {
  return request(`/api/users/${id}`, {
    method: 'DELETE',
  });
}

модель, модифицироватьsrc/pages/users/models/users.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 } });
},

компонент, изменитьsrc/pages/users/components/Users.js,заменятьdeleteHandlerсодержание:

dispatch({
  type: 'users/remove',
  payload: id,
});

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

Шаг 10. Обработка пользовательских правок

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

service
model
компонент Первое обслуживание, модификация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/models/users.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.

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

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

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

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

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

Шаг 11. Обработка создания пользователя

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

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

официальный сайт ДВА
официальный сайт уми

(Заканчивать)

Суммировать

Выполняя это упражнение, вы в основном понимаете, как два и уми используются вместе, и используете некоторые способы написания уми и характеристики уми. Я чувствую, что после изучения Redux dva начнет работать очень быстро Ресурсы веб-сайта Dva очень богаты Я надеюсь учиться вместе с вами, и в будущем будут статьи об обучении dva.