Структура разрешений на основе vue (элемент пользовательского интерфейса) + ssm + shiro. Понять, понять, переварить!

введение

голос

В современном мире Java различные ресурсы очень богаты, я должен сказать, от распределенных, сервис-ориентированных, orm, до внешнего управления, разрешений и т. д. В Интернете есть поговорка, что языковая структура слишком повторяется. быстро, я учусь Если ты не двигаешься, почему бы тебе не вернуться и не передвинуть кирпичи, но погода такая жаркая, кирпичи горячие. Это легко программировать, но это немного холодно.

## Две главные мировые проблемы для программистов ### Колесо повтора Языковой фреймворк итерируется слишком быстро,да,просто говоря,языков высокого уровня десятки.Хотя популярных всего несколько,язык один из повторений.С точки зрения той роли,которую хочет язык чтобы выразить, это все для работы компьютера. Я думаю, что будущее компьютерных языков может быть языковой интеграцией. Конечно, это очень долгий путь. Я считаю, что некоторые создатели языков были недовольны определенным языком в начале , а потом изменил его, но большинство из них до сих пор повторяются. , У меня есть глубокое понимание этого аспекта. Сначала, просто чтобы лучше изучить принципы MVC-фреймворка, я чувствовал, что лучшее обучение — это переписать его. Наконец , например, [hulichao_framework](https://github.com/hulichao/hulichao_framework.git) Оливер ниже — это остаток результата, он просто реализует базовое отображение страницы на конец обработки и возврат обработки. На самом деле думать относительно просто, особенно принцип, то есть страница и контроллер лучше обрабатываются и мапятся, конечно, это идеальный рерайт. Я этого не делал. Уже есть много популярных открытых source mvc frameworks.yBatis,что достигается?Это взаимное сопоставление между базой данных и Java-программой.В то же время согласовано, что нет необходимости писать операторы sql в начале фиксированного метода.Что Я хочу объяснить?Во-первых, я повторяю колесо, конечно, я здесь учусь. В процессе я все же приобрел довольно много. Даже если существующий фреймворк не может выполнять некоторые функции, повторно не рекомендуется спроектировать его, если стоимость относительно высока. Во-вторых, процесс обучения заключается в том, чтобы сначала изучить принцип, затем интерфейс, а затем аннотировать код. Процесс похож на предыдущий фреймворк. С самого начала я понимаю основные функции, которые я хочу чтобы достичь, а затем обратиться к основным принципам, спроектировать интерфейс и, наконец, написать код для достижения этого.Как сложно это загрузить.

проблемы общения

Второй вопрос на самом деле касается не только людей, но и отношений между машинами и людьми. Менеджер по продукту сказал: «Я хочу сделать экскаватор для приготовления овощей. Экскаватор едет по оптимальному маршруту, как нынешние люди и автомобили». одинаковы, и в то же время они полностью укомплектованы и могут рекомендовать блюда по вкусу хозяина, так что они могут не только поддерживать свои первоначальные функции, но и служить личным помощником для приготовления самых вкусных блюд в ресторане. Самый элегантный способ, не просто ли кулинария?Многим это не сложно.Я считаю,что для открытия экскаватора особых знаний не требуется.Есть и рекомендательные алгоритмы,и нужно пригласить некоторых специалистов в смежных областях.Это не должно быть большой проблемой, но весь процесс более трудоемкий., Интернет такой, всякие реальные проблемы в жизни реализуются с мышлением в Интернете, тогда в чем проблема?Взаимодействие идей, взаимодействие машин и людей. Звучит как шутка, или сюжет фантастического фильма, ну так и есть. Для программистов общение с коллегами, общение с продакт-менеджерами, какой спрос, и как его можно достичь, зависит от подтянутости всей команды.

предположение

Полезно понять принцип, но не повторяйте колесо, не повторяйте колесо, не повторяйте колесо, а лучше идите на гитхаб, чтобы найти базовую подходящую модификацию колеса, и не пишите свои колеса просто так. притворяться, иначе будет очень неудобно.Что касается общения, то надо сказать, что его трудно понять, поэтому он вышел с интерфейсно-ориентированным дизайном и интерфейсно-ориентированным программированием, что более естественно, чем Fat Boy Happy Water .

--- # Основная тема С ростом количества проектов, разделенных между интерфейсом и сервером, интерфейсные фреймворки и взаимодействие между интерфейсом и сервером также стали проблемами.Ранее страницы, отображаемые сервером, генерировались для интерфейса. фронт-энд и бэк-энд могут быть двумя серверами.Миграция некоторых технологий, это Идея дизайна разрешительной части фреймворка опирается на идеи фронтенд-больших коров, а также на традиционный бэк схема проектирования, чтобы быть мостом, чтобы реализовать дизайн разрешений, которые разделяют интерфейс и сервер, код только для справки, идея только для справки, я считаю, что это отлично, если вы пишите свой код, будет уместнее и удобнее использовать собственные мысли. В конце концов, он имеет унифицированную структуру ответа, внешний и внутренний механизм потока данных (механизм взаимопреобразования между сообщениями HTTP и объектами Java), унифицированный механизм обработки исключений, механизм проверки параметров, механизм междоменных запросов Cors и механизм аутентификации. Фронтенд-дизайн: используя пользовательский интерфейс элементов Vue, фронтенд-дизайнеры должны хорошо понимать исходный код. Внутренний дизайн: shiro + ssm + хранилище Redis jwt Интерактивный режим: внешний интерфейс хранит jwt, который передается при доступе к серверной части, что также является единственным интерактивным методом проверки. Предварительная работа: шаблоны дизайна vue, маршрутизация, ресурсы, роли, соответствующие потребностям, и соответствующие отношения между пользователями также могут быть отражены в таблице данных. ## пиши первым В практических приложениях один заключается в том, чтобы требовать от пользователей простой регистрации и входа в систему, а другой — в их авторизации с управлением сеансами и шифрованием. Практичнее применить его к фронтенду, а в настоящее время фронтенд-фреймворки вроде vue тоже очень популярны, и в то же время они только соприкоснулись с vue. требования, структура разрешений, основанная на полном разделении передней и задней частей, абстрагируется. Кроме того, принято считать, что разрешения может делать только бэкенд, а как насчет разделения фронтенда и бэкэнда? Разве это не имело бы смысла. Кроме того, в отрасли относительно нет основного решения для контроля разрешений vue, Baidu, информации по этому аспекту не так много, и она в основном разрознена. Внешний адрес: https://github.com/hulichao/zhcc-view-source.git Адрес бэкенда: https://github.com/hulichao/zhcc-server.git ## Идеи дизайна Основная идея состоит в том, чтобы использовать Vuex и Vue Router, первый используется для управления состоянием, а второй — для привязки маршрутизации, так что разрешения могут быть напрямую связаны с компонентами, а доступ к определенному компоненту может быть получен только пользователем. определенный компонент, без необходимости назначать каждый компонент. В сочетании с контролем разрешений важно наличие единого входа. Таким образом, можно написать общую структуру (по крайней мере, общую идею), которая может быть модульной и подключаемой. Проблема с нединамической маршрутизацией заключается в том, что экземпляр Vue может быть инициализирован только после получения разрешения, поэтому страница входа должна быть отделена от SPA и превращена в отдельную страницу.Операции входа/выхода пользователя должны переходить между двумя URL-адресами. испытывать немного хуже.

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

const router = new Router({
  routes: [
    {
      path: '/login',
      name: "login",
      component: LoginView,
      meta: { requiresAuth: false }
    },{
      path: '/index',
      redirect: '/',
      meta: { requiresAuth: true }
    }
  ]
});
generateIndexRouter();

// 验证token，存在才跳转
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token')
  if(to.path === '/') {
    if(!token) {
      next({
                path: '/login',
                query: { redirect: to.fullPath }
      })
      return
    }
  }

    if(to.meta.requiresAuth) {
        if(token) {
            next()
        } else {
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        }
    } else {
        next()
    }
});

router.afterEach((to, from) => {
  // 设置面包屑
  let breadCrumbItems = []
  let homePageCrumb = {
    title: '首页',
    to: '/'
  }
  breadCrumbItems.push(homePageCrumb)
  if(to.meta.nameFullPath) {
    let fullPathSplit = to.meta.nameFullPath.split('/')
    fullPathSplit.forEach(( item, index ) => {
      let routerBreadCrumb = {
        title: item,
        to: (index == fullPathSplit.length - 1 ? to.path : '')
      }
      breadCrumbItems.push(routerBreadCrumb)
    });
  }
  // 更新到state
  router.app.$store.dispatch('setBreadcurmbItems', breadCrumbItems)
})

// 生成首页路由
function generateIndexRouter() {
  if (!sessionStorage.routers) {
    return
  }
  let indexRouter = {
    path: "/",
    name: "/",
    component: resolve => require(['@/views/home/index'], resolve),
    children: [
      ...generateChildRouters()
    ]
  }
  router.addRoutes([indexRouter])
}

// 生成嵌套路由（子路由）
function generateChildRouters() {
  let routers = JSON.parse(sessionStorage.routers)
  let childRouters = []
  for(let router of routers) {
    if(router.code != null) {
      let routerProps = JSON.parse(router.properties)
      let childRouter = {
        path: router.url,
        name: router.code,
        component: resolve => require(['@/views/' + router.code + '/index'], resolve),
        meta: { routerId: router.id, requiresAuth: routerProps.meta.requiresAuth, nameFullPath: routerProps.nameFullPath }
      }
      childRouters.push(childRouter)
    }
  }
  return childRouters
}
export default router;

Соглашения о форматах внешних и внутренних данных

Поскольку это спокойный стиль, должен быть общий класс, который возвращает статус.Следуя принципу онлайн-открытого исходного кода, класс наследует хэш-карту, чтобы он мог возвращать любые данные.Общие данные - это code.msg.data.Если есть является подкачка, будет добавлена дополнительная подкачка.Другим является data.msg.state(code).token + данные типа подкачки, такие как:

"data": {
    "list": null,
    "pagebar": {
      "page": 1,
      "total": 2,
      "limit": 10
    }
  },
 "msg": "error",
  "state": 0,
  "is_redirect": true,
  "redirect_url": "http://qq.com",
  "token": null

Принимая во внимание более позднее расширение, этот проект использует первый класс, который реализует часто используемые коды состояния сбоя и успеха и их ответы.Имя класса разработано как Result, который находится в zhcc-common и обычно инкапсулируется в ResponseEntity. , вернуться.

Соглашения о внешнем и внутреннем интерфейсе данных

В соответствии с методами get/put/post/delete протокола http соответственно, внутренние разрешения: read/:update/:create/:delete

case "get":
    permissionString += ":read";
    break;
case "put":
    permissionString += ":update";
    break;
case "post":
    permissionString += ":create";
    break;
case "delete":
    permissionString += ":delete";

проверочная часть

Используйте com.baidu.unbiz.fluentvalidator.ValidationError вместо hibernateValidator, чтобы снизить нагрузку на серверное программирование. Проверьте непосредственно в контроллере и, наконец, инкапсулируйте его в метод отказа возвращаемого результата.

Дизайн разрешений

Контроль разрешений в основном делится на четыре категории, в основном на основе принципа RBAC. маршруты, ресурсы, роли, пользователи Управляемый уровень маршрута и компонентный уровень

разработка процесса

1. Дизайн разрешений 2. Ненормальный дизайн 3. Словарь и прочее оформление интерфейса 4. Коммуникационный дизайн до и после ==

инструкция

Официальный сайт Vue.js — лучший учебник, официальный сайт vue.js — лучший учебник, официальный сайт vue.js — лучший учебник. Если вы мне не верите, давайте посмотрим!

как пользоваться?

Демонстрация, руководство по началу работы, список API и тест.

Как использовать демо
- git clone front-end address Выполнить npm run dev Перед этим вам может понадобиться следовать пакетам, от которых зависит npm, затем сначала выполнить npm init, затем npm install и, наконец, выполнить npm run dev или npm run build Вы знаете разницу между два.
- git clone Адрес бэкенда клонируется и что дальше? Измените путь к базе данных, запустите sql для импорта базы данных и, наконец, запустите ее на сервере.Конечно, это этап разработки.В производственной среде вам может понадобиться сервер nginx для развертывания внешнего кода.
Руководство по началу работы, для такого отличного вы, вероятно, вам это не нужно.
API и тестирование будут улучшены позже. Пожалуйста, следите за этим документом для получения информации в режиме реального времени.

Пожертвование

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

Ссылаться на

Ссылка 1:Интерфейсный дизайн разрешения Vue
Ссылка 2: csdnQuota.CSDN.net/course/play…
Ссылка 3: Платформы с открытым исходным кодомgit ee.com/Find Oh Rough Hengli…
Ссылка 4: официальный сайт vue
Ссылка 5: контроль разрешений vueGitHub.com/one way tech/…

преднамеренная практика

Уточним, научиться самому не сложно, например, прочитать книгу, научиться пользоваться фреймворком и т. д. Даже если с нуля до мастерства, это не займет много времени и сил, а весь стек умений-это такое накопление по крупицам,те великие боги,которые выглядят торжествующими,все "грязные" за ними.почему ты не можешь?такой быстрый успех,например,21 день на обучение от удаления библиотеки до убегания книг-это очень популярен, на самом деле нет короткого пути, только напоминание: самодисциплина может изменить жизнь, рост заключается в настойчивости и накоплении. Что можно узнать из преднамеренной практики, так это то, что, учась учиться, мы, программисты, независимо от формы, не забываем программировать -> обратная связь -> исправление -> перестраивать обучение. Больше внимания личному блогуhulichao.top, у меня тут вино, хочешь зайти?

У Се, третий мастер, новичок в области больших данных и искусственного интеллекта. Больше внимания общественному номеру