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 %}