django 简单会议室预约（6）

后台完了现在来看前端，前端用了一个bootstrap框架，看起来能好看点

先看一下文件结构：在djapp里创建了两个文件夹templates和static

templates里面是要显示的页面，static里面是页面的图片、css、js

再来配置settings.py，告诉djapp静态文件的根目录

STATIC_URL = '/static/'

MEDIA_PATH = './image/'      #图片路径

基础模板

{% load staticfiles %} 


	
		
		
		
		
		
		
		
		
		
		
	
	
		
		

			

				

					
						
						
						
					
				

				

					

						
主页
						
查看
					
					

						{% if user %}                   
							
欢迎你  {{ user }}
							
查看订单
							
注销
							
						{% else %}
							
注册
							
登录
						{% endif %}
					
				

			
		
		
		
		

			

				
会议室预约系统
			
		
		
		
		{% block content %}{% endblock %}
		
	
			
		

			

			

				
				
Copyright © LFL&ZMD
				
 Thanks For  Duan Yi 
			
		
		
		
	

主页

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}会议室预约{% endblock %}

{% block content %}


	

		

			
欢迎访问会议室预约平台！
		
	


{% endblock %}

登录界面

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}登陆{% endblock %}
{% block content %}

	

		

			{% if status == 'not_exist_or_passwd_err' %}
				

					
用户不存在或密码错误
				
			{% endif %}
			

				{% csrf_token %}
				
请登陆

				

					用户名：
					

						
					
	
				

				

					密码：
					

						
					
				
				

					

						登陆
					
				
			
		
	


{% endblock %}

注册

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}注册{% endblock %}
{% block content %}

	

		

			{% if status == 'success' %}
				

					
注册成功！
				
			{% elif status == 're_err' %}
				

					
密码重复错误
				
			{% elif status == 'user_exist' %}
				

					
用户已经存在
				
			{% endif %}
			

				{% csrf_token %}
				
请注册

				

					用户名：
					

						
					
	
				
				

					密码：
					

						
					
				
				

					重复密码：
					

						
					
	
				
				

					电话号码：
					

						
					
	
				
				

					

						注册
					
				
			
		
	

{% endblock %}

查看

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}查看{% endblock %}

{% block content %}


	

		

			

				

					全部会议室
					{% for acad in acad_list %}     
					{{ acad }} 
					{% endfor %}
				
				
			
			

				

					

						{% csrf_token %}
						
					
				
				
				
						{% for room in room_list %}
						
					
				
						{% endfor %}
					

					

						

							
会议室号
							
会议室名
							
大小
							
详情
						
					
					

					
							
{{ room.num }}
							
{{ room.name }}
							
{{ room.size }}
							
查看
 
						
				
				

					

						{% if room_list.has_previous %}
							
上一页
						{% else %}
							
上一页
						{% endif %}
						第 {{ room_list.number }} / {{ room_list.paginator.num_pages }}页
						{% if room_list.has_next %}
							
下一页
						{% else %}
							
下一页
						{% endif %}
					
				
			
		
	



{% endblock %}

详情，这个页面做的有点简单了：

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}查看会议室{% endblock %}

{% block content %}


	

		

			

				{% if img_list %}
					

						

						{% for item in img_list %}
							

						{% endfor %}
						
						

						{% for img in img_list %}
							

								
							
						{% endfor %}
						
						
							
						
						
							
						
					
				{% else %}
					
暂无图片
				{% endif %}
			
			

				
{{room.name}}会议室
				

				
会议室名  ：{{room.name}}
				
会议室大小：可容纳{{room.size}}人
				
可预约时间：{{ro.time}}
			{% if or_sta == "yes" %}
				
预约
			{% elif or_sta == "no" %}
				
已被预约
			{% endif %}
			
		
	


{% endblock %}

查看预定：

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}查看{% endblock %}

{% block content %}


	

		

			

				{% if us_sta == "no" %}
				
						{% for order in myorder %}
						
						{% endfor %}
					

					

						

							
用户名
							
会议室代号
							
会议室名称
							
会议室时间
							
会议室大小
							
用户电话
							
							
备注
						
					
					

							
  {{ order.user }}  
							
  {{ order.num }}  
							
  {{ order.name }}  
							
  {{ order.time }}  
							
  {{ order.size }}  
							
  {{ order.phone }}  
							
							
取消定单
 
						
				
				{% else %}
				
你还没有预约，请先预约！
				{% endif %}
				
			
		
	



{% endblock %}

最后一个：

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}会议室预约{% endblock %}

{% block content %}


	

		

			
  恭喜你预约成功！
		
	

{% endblock %}

前端页面就这么多，有些地方直接是拷别人的，改了一下。

还有后台管理，在djapp下建立一个admin.py，这样就可以直接从后台对数据库进行管理了，比较方便。

from django.contrib import admin
from djapp.models import *

admin.site.register(MyUser)
admin.site.register(ConfeRoom)
admin.site.register(Order)
admin.site.register(Detail)

花了一个月时间，从一开始的什么都不会，查资料看文档，遇到问题就百度谷歌，到现在了解了一个网站的运作过程，确实学到了不少东西。谢谢django小组，谢谢Python，谢谢开源。