django 项目前端小结

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

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

我们的项目目录如下：

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