Документация V3-Admin на китайском языке

внешний интерфейс Vue.js
Документация V3-Admin на китайском языке

⚡ Введение

v3-adminЭто базовое решение для системы среднего и фонового управления, основанное на Vue3, TypeScript, Element-Plus и Vue-Cli.

Гитхаб:GitHub.com/UN-Panyu/V3-…, был в производственной среде!

1️⃣ Особенности

- 用户管理
  - 登录
  - 注销
	
- 权限验证
  - 页面权限
  - 指令权限

- 多环境
  - development
  - test
  - production
  
- 全局功能
  - svg
  - 多主题切换（内置黑暗主题）
  - 动态侧边栏
  - 动态面包屑
  - 标签页快捷导航
  - Screenfull 全屏
  - 自适应收缩侧边栏
  - 前端监控（基于 mitojs）

- 错误页面
  - 401
  - 404

- Dashboard
  - admin
  - editor

- 自动部署

2️⃣ Содержание

# v3-admin
├─ .env.development   # 开发环境
├─ .env.production    # 生产环境
├─ .env.test          # 测试环境
├─ .eslintrc.js       # eslint
├─ deploy             # 自动部署
├─ public
│  ├─ favicon.ico
│  ├─ index.html
├─ src
│  ├─ @types          # ts 声明
│  ├─ api             # api 接口
│  ├─ assets          # 静态资源
│  ├─ components      # 全局组件
│  ├─ config          # 全局配置
│  ├─ constant        # 常量/枚举
│  ├─ directives      # 全局指令
│  ├─ icons           # svg icon
│  ├─ layout          # 布局
│  ├─ locales         # 国际化
│  ├─ model           # 全局 model
│  ├─ plugins         # 插件
│  ├─ router          # 路由
│  ├─ store           # vuex store
│  ├─ styles          # 全局样式
│  ├─ utils           # 全局公共方法
│  └─ views           # 所有页面
│  ├─ App.vue         # 入口页面
│  ├─ main.ts         # 入口文件
│  └─ shims.d.ts      # 模块注入
├─ tsconfig.json      # ts 编译配置
└─ vue.config.js      # vue-cli 配置

3️⃣ Установить

# 克隆项目
git clone https://github.com/un-pany/v3-admin.git

# 进入项目目录
cd v3-admin

# 安装依赖
yarn

# 启动项目
yarn dev

📚 Основы

1️⃣ Маршрутизация

элемент конфигурации

// 默认false，设置 true 的时候该路由不会在侧边栏出现
hidden: true

// 设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'

// 设定路由的名字，一定要填写不然重置路由可能会出问题
name: 'router-name'

meta: {
  // 设置该路由进入的权限，支持多个权限叠加
  roles: ['admin', 'editor']
  // 设置该路由在侧边栏和面包屑中展示的名字
  title: 'title'
  // 设置该路由的图标，记得将 svg 导入 @/assets/svg-icons/icons
  icon: 'svg-name'
  // 默认true，如果设置为false，则不会在面包屑中显示
  breadcrumb: false
  // 默认false，如果设置为true，它则会固定在 tags-view 中
  affix: true
  
  // 当一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
  // 只有一个时，会将那个子路由当做根路由显示在侧边栏
  // 若想不管路由下面的 children 声明的个数都显示你的根路由
  // 可以设置alwaysShow: true，这样就会忽略之前定义的规则，一直显示根路由
  alwaysShow: true

  // 当设置了该属性，进入路由时，则会高亮 activeMenu 属性对应的侧边栏
  activeMenu: '/dashboard'
}

динамическая маршрутизация

constantRoutesПоместите маршруты, которым не нужно оценивать разрешения, в резидентных маршрутах, таких как/login,/dashboard.

asyncRoutesМесто размещения должно динамически оценивать разрешения и проходитьaddRouteДинамически добавляемые маршруты.

Примечание: Атрибут name должен быть настроен для динамической маршрутизации, иначе при сбросе маршрутизации будет пропущена динамическая маршрутизация без этого атрибута, что может привести к ошибкам в бизнесе

2️⃣ Боковая панель и хлебные крошки

Боковая панель

sidebar1.png sidebar2.png

Боковая панель@/layout/components/sidebarОн генерируется динамически путем чтения маршрутов и объединения суждений о разрешениях (другими словами, резидентные маршруты + авторизованные маршруты).

ссылка на боковой панели

Вы можете настроить внешнюю ссылку на боковой панели.Пока вы указываете действительный URL-адрес в пути, когда вы нажимаете на боковую панель, это поможет вам открыть эту страницу.

{
  path: 'link',
  component: Layout,
  children: [
    {
      path: 'https://github.com/un-pany/v3-admin',
      meta: { title: 'link', icon: 'link' },
      name: 'Link'
    }
  ]
}

Панировочные сухари

breadcrumb.png

Панировочные сухари@/components/bread-crumbОн также динамически генерируется в соответствии с маршрутом и устанавливается для маршрута.breadcrumb: falseКогда маршрут не будет отображаться в хлебных крошках, установитеredirect: 'noRedirect'Когда маршрут не кликабельный в хлебных крошках

3️⃣ Разрешения

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

управление ролью

код управления@/router/permission.ts, здесь вы можете изменить ответ в соответствии с конкретным бизнесом:

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import router from '@/router'
import { RouteLocationNormalized } from 'vue-router'
import { store } from '@/store'
import { ElMessage } from 'element-plus'
import { whiteList } from '@/config/white-list'
import rolesSettings from '@/config/roles'
import { getToken } from '@/utils/cookies'

NProgress.configure({ showSpinner: false })

router.beforeEach(async(to: RouteLocationNormalized, _: RouteLocationNormalized, next: any) => {
  NProgress.start()
  // 判断该用户是否登录
  if (getToken()) {
    if (to.path === '/login') {
      // 如果登录，并准备进入 login 页面，则重定向到主页
      next({ path: '/' })
      NProgress.done()
    } else {
      // 检查用户是否已获得其权限角色
      if (store.state.user.roles.length === 0) {
        try {
          if (rolesSettings.openRoles) {
            // 注意：角色必须是一个数组！ 例如: ['admin'] 或 ['developer', 'editor']
            await store.dispatch('user/getInfo')
            // 获取接口返回的 roles
            const roles = store.state.user.roles
            // 根据角色生成可访问的 routes
            store.dispatch('permission/setRoutes', roles)
          } else {
            // 没有开启角色功能，则启用默认角色
            store.commit('user/SET_ROLES', rolesSettings.defaultRoles)
            store.dispatch('permission/setRoutes', rolesSettings.defaultRoles)
          }
          // 动态地添加可访问的 routes
          store.state.permission.dynamicRoutes.forEach((route) => {
            router.addRoute(route)
          })
          // 确保添加路由已完成
          // 设置 replace: true, 因此导航将不会留下历史记录
          next({ ...to, replace: true })
        } catch (err: any) {
          // 删除 token，并重定向到登录页面
          store.dispatch('user/resetToken')
          ElMessage.error(err.message || 'Has Error')
          next('/login')
          NProgress.done()
        }
      } else {
        next()
      }
    }
  } else {
    // 如果没有 token
    if (whiteList.indexOf(to.path) !== -1) {
      // 如果在免登录的白名单中，则直接进入
      next()
    } else {
      // 其他没有访问权限的页面将被重定向到登录页面
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

отменить роль

Если ваш бизнес-сценарий не角色концепции, то в@/config/rolesФункцию роли можно отключить здесь, после ее отключения система включит роль по умолчанию (обычно роль администратора с наивысшими полномочиями), то есть каждый вошедший пользователь может видеть все маршруты

interface RolesSettings {
  // 是否开启角色功能（开启后需要后端配合，在查询用户详情接口返回当前用户的所属角色）
  openRoles: boolean
  // 当角色功能关闭时，当前登录用户的默认角色将生效（默认为admin，拥有所有权限）
  defaultRoles: Array<string>
}

const rolesSettings: RolesSettings = {
  openRoles: true,
  defaultRoles: ['admin']
}

export default rolesSettings

командная власть

Простая и быстрая реализация оценки разрешений на уровне кнопок (зарегистрирована глобально и может использоваться напрямую):

<el-tag v-permission="['admin']">admin可见</el-tag>
<el-tag v-permission="['editor']">editor可见</el-tag>
<el-tag v-permission="['admin','editor']">admin和editor都可见</el-tag>

Но в некоторых случаях не подходит для использованияv-permission. Например: el-tab или el-table-column элемента и других сцен динамического рендеринга. Вы можете сделать это, только установив v-if вручную.

В это время вы можете использоватьФункция оценки разрешения

import { checkPermission } from '@/utils/permission'

<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">admin可见</el-tab-pane>
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">editor可见</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="AdminEditor">admin和editor都可见</el-tab-pane>

4️⃣ Отправить HTTP-запрос

Общий процесс выглядит следующим образом:

страница/взаимодействие
Единый API управления
Инкапсулированный сервис.ts
сервер

Единый API управления

форма импорта

@/api/login.ts

import { request } from '@/utils/service'

interface UserRequestData {
  username: string
  password: string
}

export function accountLogin(data: UserRequestData) {
  return request({
    url: 'user/login',
    method: 'post',
    data
  })
}

Обернутый сервис.ц

@/utils/service.tsОн основан на инкапсуляции axios, которая инкапсулирует глобальный перехватчик запросов, перехватчик ответов, унифицированную обработку ошибок, унифицированную обработку времени ожидания, настройку baseURL, CancelToken и т. д.

5️⃣ Несколько сред

Построить

Когда проект разработан и код упакован, есть две встроенные среды:

# 打包测试环境
yarn build:test

# 打包正式环境
yarn build:prod

Переменная

существует.env.productionЖдать.env.xxxВ файле настраиваются переменные, соответствующие окружению:

# 当前环境对应接口的 baseURL
VUE_APP_BASE_API = 'https://www.xxx.com'

способ получения:

console.log(process.env.VUE_APP_BASE_API)

✈️ Продвинутый

1️⃣ ESLint

Стандартизация вашего кода важна!

  • Элемент конфигурации: в.eslintrc.jsв файле
  • Чтобы отменить автоматическую проверку:@/config/vue.custom.config.tsгенерал-лейтенантlintOnSaveУстановить какfalse
  • Рекомендуется использовать плагин ESlint для VSCode, который может помечать код, не соответствующий спецификации, красным цветом при написании кода и автоматически исправлять некоторые простые коды, отмеченные красным, при сохранении кода (VSCode настраивает руководство по ESlint от Google).
  • Ручная проверка:yarn lint(Выполните эту команду перед отправкой кода, особенно если ваш lintOnSave имеет значение false)

2️⃣ Гит хуки

package.jsonНастроенный в gitHooks, код будет обнаруживаться каждый раз, когда делается коммит.

"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

3️⃣ Междоменный

@/configНекоторые встроенные элементы конфигурации хранятся в папке, напримерwhite-listбелый список маршрутов,vue.custom.configконфигурация файла vue.config и т. д.

один из нихvue.custom.configГде тамproxyДелайте обратный прокси.

Для соответствующей производственной среды вы можете использоватьnginxбыть обратным прокси.

обратный прокси

const vueDefaultConfig = {
  // ...其他配置
  devServer: {
    // ...其他配置
    proxy: {
      '/api/': {
        target: 'http://xxxxxx/api/',
        ws: true,
        pathRewrite: {
          '^/api/': ''
        },
        changeOrigin: true,
        secure: false
      }
    }
  }
}

module.exports = vueDefaultConfig

CORS

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

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

4️⃣ SVG

иметь глобальный@/components/svg-iconкомпоненты, значки хранятся в@/icons/svgВот и все.

Как использовать

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

<!-- name 为 svg 文件名 -->
<!-- class 可修改默认样式 -->
<svg-icon name="user" font-size="20px" class="icon" />

значок загрузки

рекомендоватьiconfont

5️⃣ Автоматическое развертывание

существуетdeploy/index.jsЗаполните IP-адрес сервера, порт, имя пользователя, пароль и другую информацию в файле, а затем выполнитеyarn deployкоманда для автоматической публикации упакованного дистрибутивного файла на соответствующий сервер

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

6️⃣ Новые темы оформления (например, тёмная тема)

Добавить файл стиля темы

  • src/style/theme/dark/index.scss
  • src/style/theme/dark/setting.scss

Зарегистрируйте новую тему

  • src/style/theme/register.scss
  • src/config/theme.ts

❓ Часто задаваемые вопросы

1️⃣ Все отчеты об ошибках

Google может решить 99% ошибок

Оставшийся 1% может вступить в группу и спросить у меня, а то я тайком зайду в гугл

2️⃣ Сбой зависимости

  • не используйте cnpm
  • рекомендуется пряжа
  • Попробуйте снова удалить зависимость node_modules
  • поищи в Гугле

3️⃣ После переключения режима роутинга на browserHistory при обновлении появляется пустая страница

Буду@/config/vue.custom.config.tsв файлеpublicPathзначение от./превратиться в/

☕ Другое

1️⃣ Встать на плечи гигантов

2️⃣ Коммуникационная группа (выдувание воды)

QQ группа: 1014374415

v3-admin.png

Категории