Wagtail/CodeRedCMS

CodeRedCMS는 Django/Wagtail의 구조 위에 만들어진 CMS 환경입니다.
디자인상의 신기성을 크게 요구하지 않으면, 설치한 채로 별로 커스터마이즈 하는 일 없이 사이트의 구축을 할 수 있을 것 같은 느낌입니다.

Ajax

페이지의 전이를 수반하지 않고, 콘텐츠의 내용을 변화시키는 구조로 그렇게 드물지 않은 생각이 듭니다.
JQuery를 사용하여 구현하는 것이 일반적이지만 Django/Wagtail/CoderedCMS와 메타 규칙에 통합하는 것이 번거로울 것입니다.
이번에는 어느 정도 콘텐츠 속에서 완결되어 버리는 방법으로 원래의 JavaScript를 CMS 감리하의 페이지에 쓰는 것으로 실현해 보았습니다.
그렇게 커스터마이징하고 싶지 않습니까?

요약

0.CodeRedCMS 설치 등
1.RESPONSIVE GRID ROW 의 COLUMN
2.XMLHttpRequest에 의한 비동기 호출
3. DOM의 내용을 바꾼다
4. 서비스 만들기
5. 동작 샘플

0.CodeRedCMS 설치 등

설치등에 대해서는 이전 투고한 이쪽을 참조해 주시면 좋겠습니다.
→ nginx+Django+CodeRedCMS를 세운 건 비망록

1.RESPONSIVE GRID ROW 의 COLUMN

CodeRedCMS의 「RESPONSIVE GRID ROW」의 COLUMN 부품에서는 HTML을 직접 기입할 수 있으므로, 여기에 HTML의 부품과 JavaScript로의 비동기 리퀘스트와 DOM의 교환의 코드를 써 버린다.



　↓↓↓



내용 전문은 이하. GET 요청이라면 이 정도.

<br>
<button id="aiXhrButton"  onclick="requestAiXhr( true );">XHR ボタン</button>

<script>
    function createHttpRequest(){
        request = new XMLHttpRequest();
        return request;
    }
    function on_responseAiXhr(obj)
    {
        text  = obj.responseText;
        var target = document.getElementById('insertpoint');
        target.innerHTML = text;
    }

    function requestAiXhr( async ){
        var vurl = "/aixhr/";
        var httpoj = createHttpRequest();
        httpoj.open( 'GET' , vurl , async );

        httpoj.onreadystatechange = function() {
            if (httpoj.readyState==4) {
                on_responseAiXhr(httpoj);
            }
        }
        httpoj.send();
    }
</script>
<div id="insertpoint"><p>XHR 差込みポイント</p></div>

2.XMLHttpRequest에 의한 비동기 호출

개별적으로 메모를하면. . .

        var vurl = "/aixhr/";
        var httpoj = createHttpRequest();
        httpoj.open( 'GET' , vurl , async );

createHttpRequest 안에서 new XMLHttpRequest() 한 요청의 객체에 메소드와 URL을 지정.
URL을 쓰는 법은 나중에 하마리 곳곳에. . .
→ 4. 서비스 만들기
이번에 같은 서비스내에 호출처를 준비했으므로, 베이스 URL 이하의 패스를 기술했습니다.

        httpoj.onreadystatechange = function() {
            if (httpoj.readyState==4) {
                on_responseAiXhr(httpoj);
            }
        }

응답을 on_responseAiXhr에서 받으십시오.

        httpoj.send();

그리고 요청을 실행.

3. DOM의 내용을 바꾼다

이번은 script 태그의 외측에 이하와 같이 기술해 꽂는 장소를 준비.<div id="insertpoint"><p>XHR 差込みポイント</p></div>
XHR의 응답을 받은 처리 중 insertpoint라는 ID로 검출하여 DOM 요소의 내용을 다시 씁니다.

    function on_responseAiXhr(obj)
    {
        text  = obj.responseText;
        var target = document.getElementById('insertpoint');
        target.innerHTML = text;
    }

4. 서비스 만들기

실은 Request의 호출처를 어떻게 준비할까 생각하고 있었습니다만, 다른 서버로 하는 것도 어떨까 생각 CoderedCMS의 project내에 원시 Django로 앱을 만들어 보았습니다.
처음 Django 앱 만들기 ...를 참조하십시오.
htps : // / cs. d 쟈고 p 로지 ct. 이 m / 그럼 / 2.2 / 인 t로 / 쓰리 아 l01 / # w 리테 - r 푸 rst ゔ ぃ w

이번에는 CodeRedCMS를 설치한 서버측에서의 조작이 됩니다.

$ python manage.py startapp aixhr

프로젝트 폴더내에서 상기를 실시해 이번은 aixhr라는 이름의 어플리케이션을 작성.
여기서는 crcsite라는 프로젝트 내에서 이야기한다.

views.py를 만들어 뭔가 응답을 반환합니다.

crcsite/aixhr/views.py

from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. Trial to XHR.")

이 앱 내에서 URL을 views.index로 처리하는 작업을 urls.py에 씁니다.

crcsite/aixhr/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

그리고 부모가 되는 CodeRedCMS 프로젝트로 이 경로를 참조하도록 기술 추가.

crcsite/crcsite/urls.py

urlpatterns = [
    # Admin
    path('django-admin/', admin.site.urls),
    path('admin/', include(coderedadmin_urls)),

    # XHR trial
    path('aixhr/', include('aixhr.urls')),　　#追加

응용 프로그램을 활성화합니다.

crcsite/settings/base.py

INSTALLED_APPS = [
    # This project
    'website',
    'aixhr',　　#追加

　　・・・・

그런 다음 migration 한 다음 서비스를 다시 시작합니다.

5. 동작 샘플

동작 샘플은 이하. 하드 코딩된 (?웃음) 일기 예보가 나타납니다.
→10월의 스케줄과 날씨

(단 내용은 예고 없이 변경합니다.다운하고 있는 일도 있을까 생각합니다.

참고하신 기사
jQuery를 사용하지 않고 장고에서 아약스!
htps : // 코 m/멘타/있어 ms/79422df67에 5f3c9b2325