WedX - журнал о программировании и компьютерных науках

Управление URL-адресом одностраничного приложения

Обычно в одностраничном приложении (спа) у меня есть одна страница, где у меня есть боковое меню. В этом меню есть несколько тегов привязки.
URL-адрес этого тега привязки будет обрабатываться маршрутизатором angular/react/sammy js, а основной элемент div будет обновляться на основе возвращенного html-кода из контроллера.
Довольно просто, верно?
Но представьте себе сценарий. , где пользователь напрямую получает доступ к URL-адресу тега привязки через адресную строку браузера. тогда на всю страницу будет загружаться только возвращенный html-сегмент.
Есть ли способ справиться с такой ситуацией? Я имею в виду, чтобы всякий раз, когда пользователь напрямую обращался к URL-адресу, к нему обращались правильно?

РЕДАКТИРОВАТЬ: Может быть, я не совсем понимаю формулировку проблемы. Поясню немного:

  • Предположим, что адрес моей страницы: abc.com/dashboard
  • На этой странице есть меню навигации и раздел div, имя класса которого — «основной контейнер».
  • Пользователь щелкнул ссылку в меню навигации, и маршрутизатор переместил URL-адрес, например, на abc.com/view/listofXYZ. Таким образом, наш div «основной контейнер» будет загружен с ответом URL-адреса abc.com/view/listofXYZ.
  • Теперь другой пользователь, перейдите непосредственно к URL-адресу abc.com/view/listofXYZ и нажмите eneter. Тогда страница будет содержать только HTML-код ответа URL-адреса, т.е. все навигационное меню и div исчезнут.


Мой вопрос: можем ли мы реализовать какой-то подход к дизайну, чтобы эти два варианта работали хорошо?

reactjs jquery angularjs single-page-application sammy.js
07.01.2017

  • Итак, требование состоит в том, чтобы показать возвращенный пользовательский интерфейс или весь пользовательский интерфейс с запрошенным пользовательским интерфейсом? 07.01.2017
  • очевидно, весь пользовательский интерфейс с возвращенным html 07.01.2017
  • на всю страницу будет загружен только возвращенный html-сегмент. Как это возможно? 07.01.2017
  • Это то, о чем я спрашивал .... есть ли у нас какой-либо подход к дизайну, чтобы всякий раз, когда пользователь вводит новый URL-адрес, он всегда переходил на главную страницу навигации и анализировал содержимое соответственно 07.01.2017

Ответы:


1

Лучше пойти на угловой ui-router вместо sammy js router, конечно, я не знаю об этом. Но в angular-ui-router мы определяем состояния и URL-адреса, используя $stateProvider из ui-router. Даже если пользователь ввел URL-адрес непосредственно в браузере, он будет правильно адресован только в том случае, если URL-адрес, определенный в состоянии, совпадает.

https://github.com/angular-ui/ui-router/tree/legacy см. здесь для получения дополнительной информации.

Вот пример,

$stateProvider.state('',{
   url: '/',
   tempate: 'path/to/.html',
   controller: 'controllerToHandle'
})
.state('home', {
   url: '/home',
   template: 'path/to/home.html',
   controller: 'HmeCtrl'
})
.state('home.list',{  //defines child states with dot
   url: '/list', //shows url as home/list because it is a child state
   template: 'path/to/list.html'
})

Используйте $urlRouterProvider.otherwise('/'), если путь не совпадает. Точно так же пользователь может перейти от home к list, например, www.my-app.com — это имя вашего хоста. Если он ввел www.my-app.com/home/list, поскольку URL-адрес /home/list совпал, он будет перенаправлен на home/list страницу, а если он ввел неверный URL-адрес, то он будет перенаправлен на home страницу из-за метода otherwise.

Если в маршрутизаторе react/sammy есть что-то подобное, сделайте это для лучшего решения

07.01.2017
  • Тем не менее, пройдя по предложенной вами ссылке, звучит интересно. 07.01.2017
  • Прошел по предложенным ссылкам. Довольно прост в реализации и идеально подходит для моих нужд. Спасибо за предложение 07.01.2017

    • 2

    С маршрутизатором React вы можете просто обрабатывать событие onEnter, которое запускается, когда пользователь вводит новый URL. Вы можете сделать, например:

    const onEnter = (e) => {
    console.log(e.location.pathname);
}

/* ... */

<Route path="/" onEnter={onEnter} component={MyComponent} />

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

    07.01.2017
    Новые материалы
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Для любых предложений по сайту: [email protected]