首页 > 代码库 > django 项目前端小结

django 项目前端小结

上次django环境已经搭好了,并且创建了agenda项目,http://127.0.0.1:8000/agenda  页面能打开了,现在丰富agenda项目的前端内容。

首先要有 前端相关的页面呀,脚本呀。

  • Step1 创建模板目录,静态文件目录

我们的项目目录如下:

/home/wolf/Project/django/djangoproject

                                                   -----------djangoproject

                                                                                     ----------------settings.py

                                                                                    ----------------urls.py

                                                                                     ----------------__init__.py  等

                                                  -------------agenda

                                                                                    ---------------static

                                                                                                                      --------------------------images

                                                                                                                                                                --------------------------myCalendar.png

                                                                                                                      --------------------------js

                                                                                                                                                                --------------------------myCalendar.js

                                                                                                                      --------------------------style

                                                                                                                                                                --------------------------myCalendar.css

                                                                                    ----------------templates

                                                                                                                        --------------------------calendar.html

                                                                                    ----------------views.py

                                                                                    ----------------urls.py

                                                                                    ----------------modules.py

                                                                                    ----------------apps.py

                                                                                    ----------------admin.py

                                                                                     ----------------__init__.py  等

  • step2模板静态文件目录注册到setting

vi /home/wolf/Project/django/djangoproject/djangoproject/settings.py最后加上如下:

STATIC_URL = /static/
STATIC_ROOT=os.path.join(BASE_DIR,static)
STATICFILES_DIRS = (
        os.path.join(BASE_DIR,agenda/static),
        )

确保settings.py里有:

技术分享

  • step3为我们的calendar.html添加访问url,和对应view处理函数

vi --/Project/django/djangoproject/agenda/urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
            url(r^$,views.index,name=index),
            url(r^calendar/$,views.calendar,name=calendar),   //////首页面
            url(r^deleteEvent/$,views.deleteEvent,name=deleteEvent),  ////////首页面里删除event的onclick方法
            url(r^addEvent/$,views.addEvent,name=addEvent), ////////首页面里add event的onclick方法
        ]

vi --/Project/django/djangoproject/agenda/views.py

 

    
def calendar(request):
    curEvents=[]
    for itr in range(6):
        strDate=str(1+2*itr)+/5/2017
        item = {thisDay:strDate,time:06:00, title:Hello}
        curEvents.append(item)
        
    return render_to_response(‘mycalendar.html,{events: curEvents})

@csrf_exempt
def deleteEvent(request):
    if request.method == POST:
        for key in request.POST:
            print key    
    data = {response:200,status:ok}        
    
    return HttpResponse(json.dumps(data), content_type="application/json")

@csrf_exempt
def addEvent(request):
    if request.method == POST:
        for key in request.POST:
            print key    
    data = {response:200,status:ok}        
    
    return HttpResponse(json.dumps(data), content_type="application/json")
  • step4:html里显示数据
     {% for item in events %}
         <div class="events" data-date={{ item.thisDay }} data-time={{ item.time }} data-title={{ item.title }}></div>
     {% endfor %}

 

django 项目前端小结