백엔드 개발을 수행했습니다. 특히 Django 또는 Express를 사용했을 때 서버 측의 라우팅 기능에 익숙해야합니다. 외국에서 인기있는 블로그 시스템 인 WordPress는 또한 매우 고전적인 라우팅 구현 사례입니다. 그렇다면 경로는 정확히 무엇입니까? WordPress를 통해 간단히 이야기 해 봅시다.
WordPress의 재 작성 규칙을 이해하는 사람들은 실제로 URL 액세스가 WordPress 설치 디렉토리의 Index.php를 기반으로한다는 것을 알고 있습니다 (서버에 이미 존재하는 파일에 대한 액세스 제외). WordPress 고정 링크가 모드 설정에있을 때 분명합니다. 예를 들어, 기사의 URL은 index.php? p = id이며, 분류 페이지의 URL은 index.php? cat = id입니다.
여기에서 index.php는 라우터 기능 역할을합니다. 다음 그림을 참조하십시오.
다시 말해, 어떤 주소를 방문하든 모든 요청은 결국 Index.php로 리디렉션됩니다. 이 프로그램은 액세스 URL의 특성을 기반으로 필요한 페이지 유형을 결정한 다음 데이터베이스에 쿼리를 작성하고 마지막으로 HTML 컨텐츠를 브라우저로 반환합니다.
위에서 언급 한 것은 웹 백엔드 라우팅이므로 프론트 엔드 라우팅은 무엇입니까? 실제로 프론트 엔드 라우팅 기술은 현재 널리 사용되고 있으며, 많은 오픈 소스 JS 라이브러리는 AngularJS, Ember.js, Director.js 등과 같은 프론트 엔드 라우팅을 지원합니다. 프론트 엔드 라우팅의 원리는 백엔드 라우팅과 동일합니다. 모든 상호 작용을 허용하고 한 페이지에이를 표시하여 서버 요청을 줄이고 고객 경험을 향상시킵니다. 점점 더 많은 웹 사이트, 특히 웹 응용 프로그램은 프론트 엔드 라우팅을 사용합니다.
Director.js는 가장 순수한 경로 등록/파서입니다. "#"기호를 사용하여 페이지를 새로 고치지 않고 다른 URL 경로를 구성하고 다른 URL 경로에 따라 다른 콜백 메소드를 일치시킵니다. Director.js는 클라이언트에 적용 할뿐만 아니라 Node.js를 사용하여 백그라운드에도 적용 할 수 있으며 위에서 언급 한 백엔드 라우팅 기능을 구현할 수도 있습니다. 프론트 엔드 라우팅 구현에 대한 다음 예제를 살펴 보겠습니다.
Web QQ와 유사한 웹 데스크톱 응용 프로그램을 설계해야합니다. 데스크탑에는 많은 작은 아이콘이 있으며 각 작은 아이콘은 컴퓨터 데스크탑과 유사한 기능적 애플리케이션입니다. 데스크탑에 바이두 뉴스 버튼이 있습니다. 현재 페이지에 창을 팝업하려면 클릭하십시오. 바이두 뉴스와 다른 아이콘을 볼 수 있습니다. 현재 시간을 보려면 클릭하십시오. 간단한 예는 다음과 같습니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/build/director.min.js"> {너비 : 100%; 높이 : 100%; 배경 : #3d72b8} #baidunews {너비 : 40px; 높이 : 40px; 배경 : url ( "./ du.png") no-repeat; display : margin : 50px;} #tweibo {width : 40px; 40px; No-Repeat; display : block; margin : 50px;} </style> </head> <body> <a href = "#/baidunews"id = "baidunews"> </a> <a href = "#/time"id = "tweibo"> </a> <cript> // route 정의 = {/time ": nowtime, "/baidunews": [showframe, getBaidUnews]} // Route var router = router (route) router.init (); // 현재 시간 함수를 표시하는 콜백 함수 정의 nowtime () {var now = new Date (); var y = now.getFlyEar (); var m = now.getmonth ()+1; var d = now.getDate (); var h = now.gethours (); var mi = now.getminutes (); var s = now.getSeconds (); ALERT ( "현재 시간/n"+y+"년"+m+"달"+d+"day"+h+"time"+mi+"minute"+s+"seconds"); } // 브라우저 프레임 워크 함수 showframe () {var f = document.createElement ( "div"); f.style.width = "985px"; f.style.height = "500px"; f.style.position = "절대"; f.style.top = "50px"; f.style.left = "200px"; f.style.background = "화이트"; f.style.border = "2px solid #ccc"; // 닫기 버튼 var close = document.createElement ( "span"); close.style.position = "절대"; close.style.right = "5px"; close.style.cursor = "포인터"; close.style.marginright = "5px"; close.onclick = function () {document.body.removechild (f); } close.innerhtml = "x"; // 사이트 외부에 iframe을로드 var win = document.createElement ( "iframe"); win.id = "myiframe"; WIN.Frameborder = 0; win.style.width = "100%"; win.style.height = "100%"; F. AppendChild (Close); F. AppendChild (WIN); document.body.appendChild (f); } // baidu 뉴스 웹 페이지로드 할 함수 함수 정의 getBaidUnew () {docum } </script> </body> </html>위의 코드에서 Director.js는 라우팅 및 전달을 위해 페이지에서 "#"를 사용하는 것을 볼 수 있습니다. 위의 예는 매우 간단한 예입니다. Director.js는보다 복잡하고 거대한 기능을 구현할 수 있습니다. AJAX 및 서버 데이터와 상호 작용할 수 있으며 다른 JS 클래스 라이브러리와 공존 할 수 있습니다. 강력한 웹 응용 프로그램 개발 도구입니다.
Director.js는 SEO에 영향을 미칩니 까?
모든 데이터는 한 페이지에만 있고 일부 데이터는 검색 엔진 거미에 도움이되지 않는 방식으로 저장되어 있기 때문에 Client의 Director.js는 SEO에 영향을 미칩니다. SEO 친화적이어야한다면 "웹 응용 프로그램"대신 "웹 페이지"를 구성해야합니다. Director.js는 권장되지 않습니다.
참조 : Director.js