Думаем о фронтенд-проекте системы фонового управления

внешний фреймворк

Разработка системы управления фоном — это проект, с которым соприкасалось большинство фронтенд-разработчиков.Как лучше построить проект, разработать компоненты, спроектировать структуру данных и т. д. — все это вопросы, которые необходимо учитывать. . Ниже приведены мои мысли о фронтенд-проектах в фоновой системе управления, основанные на опыте некоторых проектов, а также на коде проекта и обмене технологиями с другими крупными шишками.

1. Поймите потребности, будьте знакомы с потребностями

Это требование является необходимым условием для беспрепятственной разработки проектов, будь то разработчики интерфейсов или другие разработчики. Перед разработкой проекта необходимоPMПотребности компании ясны, и дизайн прототипа можно полностью понять. Поймите значение логики каждой операции и подумайте, как проектировать компоненты и структуры данных. Однако некоторые функциональные моменты легче пропустить, просто прочитав документ с требованиями и прототип, лучше всего перепроектировать проект.思维导图, спроектируйте с точки зрения саморазвития, начиная с корневого узла проекта в целом, разделите каждый модуль и разработайте соответствующие требования для каждого модуля, чтобы гарантировать, что каждая функция не будет упущена. Несмотря на то, что на составление майндмэппинга ушло много времени, я думаю, оно того стоит, что может не только улучшить понимание всего проекта, но и лучше вовремя выявить трудности и сомнения проекта.
image.png

2. Определить технический выбор

Основной выбор технологии фоновой системы управленияVue+ElemetUI, но лично чувствую, что в дизайне компонентовAnt Design Vue изUIФреймворк лучше спроектирован, и в большей части он использует шаблон проектирования компонентов, управляемых данными, что позволяет легче отделить логические функции при разработке проекта. ноUIВыбор фреймворка по-прежнему приходится сочетать с собственной квалификацией команды разработчиков в определенном и наличием соответствующегоUIФреймворк может лучше решить трудности, существующие в проекте для всестороннего сравнения.
Глобальный импорт по запросуelement-uiКомпоненты:

import Vue from "vue";
···
import { Input } from "element-ui";
Vue.use(Input);

Компоненты используют:

<el-input
  v-model="user"
  clearable
  @keyup.enter.native="search"
  @clear="search"
></el-input>

3. Структура дизайн-проекта

пройти черезVueИнтерфейсный проект, созданный с помощью инструмента строительных лесов, находится в разработке.srcПапку можно разделить на следующие части:

  1. уровень маршрутизацииrouter 
  2. статический файловый слойassets 
  3. структура страницыviews 
  4. Слой структуры компонентаcomponents 
  5. глобальное управление состояниемstore 
  6. Уровень обработки функциональной логикиutil 
  7. постоянное управлениеconstants 

существуетVueВ проекте также могут быть представлены дополнительные конфигурации, такие как смешивание слоев.mixins, фильтрующий слойfiltters Ждать.
При разработке проекта необходимо различать логическую структуру бизнес-функций и некоммерческих функций.Для некоторых функций некоммерческих функций, которые можно отделить, обычно эта функция не определяется напрямую в бизнес-логике страницы разработки, но необходимо извлечь.Его могут вызывать несколько бизнес-функций.
Слой структуры компонентаcomponentsКак правило, для вызова многостраничными структурами разрабатываются только компоненты страницы или функциональные компоненты, относящиеся к небизнес-функциям.Если страницу необходимо разбить на несколько компонентов, и этот подкомпонент относится к бизнес-функциям, напрямую использовать слой структуры страницы.viewsТакже удобнее определять, развивать и поддерживать одну и ту же страницу.
srcСтруктура папок следующая:

├─assets
├─components
├─constants
├─mixins
├─request
├─router
├─store
├─utils
└─views

4. В методах запроса данных ИЛИ действиях

Способ запроса данных в общих проектах основан наmethodsМетод запроса вызывается в хуке или другом хуке жизненного цикла, а также есть некоторые проекты, которые отправляютdisptachМетод асинхронного запроса находится вactionsФункция запроса вызывается в . Последний оператор используется для облегчения унифицированного управления интерфейсом запроса и унифицированного управления данными, возвращаемыми запросом.
Комбинируя два вышеуказанных метода, можно оптимизировать метод запроса в проекте.Если данные, возвращаемые после отправки интерфейса запроса, необходимо разделить и использовать на нескольких страницах или в нескольких разных компонентах, рекомендуется использовать их в функции, которая необходимо отправить запрос.dispathтриггер, вactionsЗапрос отправляется в , а возвращенные данные сохраняются в глобальном управлении состоянием.state середина.
methodsОтправить метод запроса в:

getGraphicCode () {
  let vm = this;
  api.login.getCheckCode({
    type: '2'
  }).then(res => {
    if (res.code === '000') {
      vm.graphicCode = 'data:image/png;base64,' + res.data.img;
      vm.imgId = res.data.imgId;
    } else {
      vm.$message.error(res.msg);
    }
  })
}

actionsОтправить метод запроса в:

findAllRoles({ commit }) {
  return new Promise((resolve, reject) => {
    api.systemAccount.findAllRoles().then(response => {
      if (response.code === "000" && response.success) {
        commit(MUTATIONS_TYPE.AllROLES, response.data)
        resolve(response);
      } else {
        reject(new Error(response.code, response.msg))
      }
    })
  })
},

5. Логин и управление правами

tokenВалидация в настоящее время отделена от большинства интерфейсных и серверных частей.WebСамый распространенный метод проверки входа в систему для проектов. После того, как внешний интерфейс отправит учетную запись и пароль или учетную запись и проверочный код на серверную часть, внутренняя проверка вернет уникальныйtokenВ качестве учетных данных пользователя в каждом последующем запросе это должно быть включено в заголовок запроса.tokenВ качестве внутренней проверки входа в систему.tokenЕсть механизм истечения срока действия, о котором логично судить по перехвату запроса, если текущее время близко к времени истечения, то оно будет обновлено обновлениемtokenИнтерфейс для запроса обновленияtoken, приводить новый в последующих запросахtoken. В этом цикле, если пользователь не работает в течение длительного времени, пользователь может считаться не в сети.tokenСрок действия истек, при доступе к внутреннему интерфейсу произойдет ошибка, и система будет перенаправлена ​​на страницу входа в соответствии с кодом состояния ошибки, возвращенным серверной частью.
через сtokenМетод запроса заголовка запроса, серверная часть может определить, какой это пользователь, а внешний интерфейс также может получить список разрешений пользователя через интерфейс разрешений доступа и создать таблицу сопоставления маршрутизации в соответствии со списком разрешений.Если структура данных возвращена бэкэнд такой же, как и внешний интерфейс Структура данных настройки маршрута отличается.В настоящее время необходимо написать функцию бизнес-функции этого маршрута сопоставления. Если у пользователя есть это разрешение на маршрутизацию, его можно проверить с помощью глобального мониторинга маршрутизации.router.beforeEachпровестиrouter серединаaddRoutesМетод добавляет авторизованную конфигурацию маршрутизации в маршрутизацию, а боковая панель также может основываться на конфигурации маршрутизации в списке маршрутизации.metaОценка ключевого слова в поле отображается соответствующим образом. Если степень детализации разрешений составляет всего одну кнопку, вы можете использовать параметры разрешений, сопоставленные из списка разрешений, возвращенного серверной частью, для передачиv-ifЧтобы судить, визуализируется ли функциональный компонент.
Проход в управление маршрутизациейrouter.beforeEachХук определяет, пусто ли текущее разрешение маршрутизации, и если да, то может быть выполнен интерфейс для получения разрешения маршрутизации:

store.dispatch("getUserInfoAndAuthorityInfo").then(res => {
  // 根据后端返回的路由权限格式转成前端路由配置格式
  const rolesRoute = setAsyncRouterMap(res.menuList, asyncRouterMap, mainChildrenAsyncRoutes)
  store.commit(Vue.VUEX_TYPES.ROLESROUTE, rolesRoute);
  // 添加路由
  router.addRoutes(rolesRoute);
  next({ ...to })
}).catch(() => {
  Message.error("验证失败")
  next('/login')
})

6. Управление значениями постоянного перечисления

Очень необходимо управлять значениями перечисления ключевых констант в проекте. Например, используйте определенный код состояния в бэкенде проекта.1Представляет, что учетная запись включена, если она используется в проекте несколько раз.===1Чтобы определить, находится ли аккаунт в состоянии включенного состояния, когда необходимо изменить код состояния, это очень неприятно, для переднего конца, поэтому его можно сделать, надевая1Назначьте его константе и обратитесь к этой константе в коде проекта. Если вам нужно изменить код состояния, вы можете напрямую изменить код состояния, присвоенный значению перечисления константы. Конфигурация константы также может напоминать разработчикам, что этот параметр не может быть легко изменен. , что удобно для обслуживания проекта и унифицированного управления. Управление общими постоянными значениями перечисления написано наconstantsВ слое имена переменных констант пишутся заглавными буквами.
Значение перечисления состояний настраивается следующим образом:

/**
 * 账号状态对照表
 * "0" 未启用 NOTUSED_CODE
 * "1" 已启用 ENABLE_CODE
 * "2" 已停用 DISABLE_CODE
 */

const NOTUSED_CODE = "0";
const ENABLE_CODE = "1";
const DISABLE_CODE = "2";

const ACCOUNT_TYPE = {
  [NOTUSED_CODE]: "未启用",
  [ENABLE_CODE]: "已启用",
  [DISABLE_CODE]: "已停用"
};

export default Object.freeze({
  NOTUSED_CODE,
  ENABLE_CODE,
  DISABLE_CODE,
  ACCOUNT_TYPE
});

7. Дизайн компонентов

Во внешнем проекте компоненты отображения можно разделить на две части, а именно компоненты страницы и функциональные компоненты. Для компонента страницы он часто используется для отображения общего содержимого страницы, отвечает за нормальную работу бизнес-логики и имеет сильную связь с бизнесом. Функциональный компонент используется для отображения и обработки функции одного или определенного модуля.Функциональный компонент не заботится о бизнес-логике страницы и действует как функция.Пока есть ввод, будет соответствующий вывод, и его можно использовать на нескольких страницах.Компонент или функциональный компонент называется. Таким образом, при разработке компонента страницы вы должны не только учитывать, может ли компонент нормально выполнять бизнес-функцию, но также учитывать, может ли он быть отделен от бизнеса и стать функциональным компонентом.Затем создайте несколько компонентов подстраницы для строить вместе. При разработке функциональных компонентов необходимо учитывать компоновку, логику и представления компонентов.Сложность проектирования функциональных компонентов заключается в том, что они должны удовлетворять потребности в постоянном обновлении.Масштабируемость и гибкость являются основной задачей проектирования.
Формат каталога компонентов страницы следующий:
image.png

8. Необходимая документация по разработке или комментарии

Документ разработки проекта может быть записан в формате файла md и храниться в корневом каталоге проекта.Хороший документ разработки может представить предысторию проекта, объяснить структуру проекта и этапы разработки, что более важно. способствует другим разработчикам принять участие или взять на себя проект. Для более сложных логических функций в сочетании с бизнес-функциями, используемыми в проекте, введение функции и метода использования, оценка граничных условий, демонстрация входных данных и соответствующих выходных результатов могут быть новыми. созданный в проектеdocsВ папке хранится документация, используемая в процессе разработки. Для функций бизнес-логики или функций не-бизнес-логики несложных функций вы можете написать комментарий непосредственно перед определением функции, чтобы описать функцию функции и типы соответствующих входных и входных параметров.

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