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

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

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

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

STATIC_URL = '/static/'

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

基础模板 

{% load staticfiles %}

<!DOCTYPE html>

<html lang="zh-cn">

	<head>

		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>{% block title %}{% endblock %}</title>

		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-theme.min.css">

		<link rel="stylesheet" type="text/css" href="/static/css/base.css">

		<script type="text/javascript" src="/static/js/jquery.min.js"></script>

		<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

		<!--[if lt IE 9]>

			<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

		<![endif]-->

	</head>

	<body>

		<!--Here is the navbar-->

		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

			<div class="container">

				<div class="navbar-header">

					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-basepage">

						<span class="icon-bar"></span>

						<span class="icon-bar"></span>

						<span class="icon-bar"></span>

					</button>

				</div>

				<div class="collapse navbar-collapse" id="navbar-collapse-basepage">

					<ul class="nav navbar-nav">

						<li id="homepage"><a href="/">主页</a></li>

						<li id="viewbook"><a href="/viewroom/">查看</a></li>

					</ul>

					<ul class="nav navbar-nav navbar-right">

						{% if user %}                   <!--user是后台数据，判断循环语句都要包在{% %}里，而一般只显示的数据在{{}}里-->

							<li><p class="navbar-text">欢迎你  <span id="base_name">{{ user }}</span></p></li>

							<li><a href="/myorder/">查看订单</a></li>

							<li><a href="/logout/">注销</a></li>

						{% else %}

							<li><a href="/regist/">注册</a></li>

							<li><a href="/login/">登录</a></li>

						{% endif %}

					</ul>

				</div>

			</div>

		</nav>

		<!-- /nav -->

		<!-- header -->

		<header class="jumbotron subhead" id="header-base">

			<div class="container">

				<h1>会议室预约系统</h1>

			</div>

		</header>

		<!-- /.header -->

		<!-- main part -->

		{% block content %}{% endblock %}

		<!-- /.main -->

		<!-- footer -->

		<footer class="footer" role="contentinfo">

			<hr>

			<div class="container">

				<p class="text-center">Copyright © LFL&ZMD</p>

				<h5 class="text-center"> Thanks For  Duan Yi </h5>

			</div>

		</footer>

		<!-- /.footer-->

		<script type="text/javascript">

		    var act = document.getElementById("{{ active_menu }}");

		    act.setAttribute("class","active");

		</script>

	</body>

</html>

主页 

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}会议室预约{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-8 col-md-offset-2 well">

			<h2>欢迎访问会议室预约平台！</h2>

		</div>

	</div>

</div>

{% endblock %}

登录界面

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}登陆{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">

			{% if status == 'not_exist_or_passwd_err' %}

				<div class="well">

					<h2 class="text-danger text-center">用户不存在或密码错误</h2>

				</div>

			{% endif %}

			<form method="POST" role="form" class="form-horizontal">

				{% csrf_token %}

				<h1 class="form-signin-heading text-center">请登陆</h1>

				<div class="form-group">

					<label for="id_user_name" class="col-md-3 control-label">用户名：</label>

					<div class="col-md-9">

						<input type="text" class="form-control" id="id_user_name" required name="username" autofocus>

					</div>

				</div>

				<div class="form-group">

					<label for="id_passwd" class="col-md-3 control-label">密码：</label>

					<div class="col-md-9">

						<input type="password" class="form-control" required name="passwd" id="id_passwd">

					</div>

				</div>

				<div class="form-group">

					<div class="col-md-4 col-md-offset-4">

						<button class="btn btn btn-primary btn-block" type="submit">登陆</button>

					</div>

				</div>

			</form>

		</div>

	</div>

</div>

{% endblock %}

注册

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}注册{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">

			{% if status == 'success' %}

				<div class="well">

					<h2 class="text-success text-center">注册成功！</h2>

				</div>

			{% elif status == 're_err' %}

				<div class="well">

					<h2 class="text-warning text-center">密码重复错误</h2>

				</div>

			{% elif status == 'user_exist' %}

				<div class="well">

					<h2 class="text-danger text-center">用户已经存在</h2>

				</div>

			{% endif %}

			<form method="POST" role="form" class="form-horizontal">

				{% csrf_token %}

				<h1 class="form-signin-heading text-center">请注册</h1>

				<div class="form-group">

					<label for="id_user_name" class="col-md-3 control-label">用户名：</label>

					<div class="col-md-9">

						<input type="text" class="form-control" id="id_user_name" required name="username" autofocus>

					</div>

				</div>

				<div class="form-group">

					<label for="id_passwd" class="col-md-3 control-label">密码：</label>

					<div class="col-md-9">

						<input type="password" class="form-control" required name="passwd" id="id_passwd">

					</div>

				</div>

				<div class="form-group">

					<label for="id_repasswd" class="col-md-3 control-label">重复密码：</label>

					<div class="col-md-9">

						<input type="password" class="form-control" required name="repasswd" id="id_repasswd">

					</div>

				</div>

				<div class="form-group">

					<label for="id_email" class="col-md-3 control-label">电话号码：</label>

					<div class="col-md-9">

						<input type="text" class="form-control" required name="phone" id="id_phone">

					</div>

				</div>

				<div class="form-group">

					<div class="col-md-4 col-md-offset-4">

						<button class="btn btn btn-primary btn-block" type="submit" id="id_submit">注册</button>

					</div>

				</div>

			</form>

		</div>

	</div>

</div>

{% endblock %}

查看

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}查看{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-10 col-md-offset-1">

			<div class="col-md-2">

				<div class="list-group">

					<a href="/viewroom/" class="list-group-item" id="id_typ_all">全部会议室</a>

					{% for acad in acad_list %}     <!--循环学院列表-->

					<a href="/viewroom?acad={{ acad }}" class="list-group-item" id="id_typ_{{ acad }}">{{ acad }} </a>

					{% endfor %}

				</div>

				<script type="text/javascript">

				    var act_typ = document.getElementById("id_typ_{{acad_list}}");

				    var new_class = act_typ.getAttribute("class") + " active"

				    act_typ.setAttribute("class",new_class);

				</script>

			</div>

			<div class="col-md-9 col-md-offset-1">

				<div class="col-md-4 col-md-offset-8">

					<form role="form" method="post" name="search_form">

						{% csrf_token %}

						<input type="search" class="form-control" name="number" placeholder="Enter keywords to search" id="id_search_input" onkeyup="whenkeyup()" autofocus="True">

					</form>

				</div>

				<script type="text/javascript">

					function whenkeyup () {

						var oldvalue = document.getElementById('id_search_input').value

						setTimeout(function(){

							var newvalue = document.getElementById('id_search_input').value

							if (oldvalue == newvalue) {

								document.search_form.submit();

							};

						},1500);

					}

				</script>

				<table class="table table-hover">

					<thead>

						<tr>

							<th>会议室号</th>

							<th>会议室名</th>

							<th>大小</th>

							<th>详情</th>

						</tr>

					</thead>

					<tbody>

						{% for room in room_list %}

						<tr>

							<td>{{ room.num }}</td>

							<td>{{ room.name }}</td>

							<td>{{ room.size }}</td>

							<td><a href="/detail/?id={{room.id}}">查看</a></td>

						</tr>

						{% endfor %}

					</tbody>

				</table>

				<nav>

					<ul class="pager">

						{% if room_list.has_previous %}

							<li class="previous"><a href="?typ={{room_acad}}&page={{ room_list.previous_page_number }}">上一页</a></li>

						{% else %}

							<li class="previous disabled"><a href="#">上一页</a></li>

						{% endif %}

						第 {{ room_list.number }} / {{ room_list.paginator.num_pages }}页

						{% if room_list.has_next %}

							<li class="next"><a href="?acad={{room_acad}}&page={{ room_list.next_page_number }}">下一页</a></li>

						{% else %}

							<li class="next disabled"><a href="#">下一页</a></li>

						{% endif %}

					</ul>

				</nav>

			</div>

		</div>

	</div>

</div>

{% endblock %}

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

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}查看会议室{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-10 col-md-offset-1">

			<div class="col-md-5">

				{% if img_list %}

					<div id="carousel-generic" class="carousel slide" data-ride="carousel">

						<ol class="carousel-indicators">

						{% for item in img_list %}

							<li data-target="#carousel-generic" data-slide-to="{{forloop.counter0}}" {% if forloop.first %}class="active"{% endif %}></li>

						{% endfor %}

						</ol>

						<div class="carousel-inner" role="listbox">

						{% for img in img_list %}

							<div {% if forloop.first %}class="item active"{%else%}class="item"{% endif %}>

								<img src="/static/{{img.img}}">

							</div>

						{% endfor %}

						</div>

						<a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">

							<span class="glyphicon glyphicon-chevron-left"></span>

						</a>

						<a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">

							<span class="glyphicon glyphicon-chevron-right"></span>

						</a>

					</div>

				{% else %}

					<p class="text-center">暂无图片</p>

				{% endif %}

			</div>

			<div class="col-md-6 col-md-offset-1">

				<h2 class="text-center">{{room.name}}会议室</h2>

				<br>

				<h3>会议室名  ：{{room.name}}</h3>

				<h3>会议室大小：可容纳{{room.size}}人</h3>

				<h3>可预约时间：{{ro.time}}</h3>

			{% if or_sta == "yes" %}

				<h3><a href="/order/">预约</a></h3>

			{% elif or_sta == "no" %}

				<h3>已被预约</h3>

			{% endif %}

			</div>

		</div>

	</div>

</div>

{% endblock %}

查看预定：

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}查看{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-10 col-md-offset-1">

			<div class="col-md-9 col-md-offset-1">

				{% if us_sta == "no" %}

				<table class="table table-hover">

					<thead>

						<tr>

							<th>用户名</th>

							<th>会议室代号</th>

							<th>会议室名称</th>

							<th>会议室时间</th>

							<th>会议室大小</th>

							<th>用户电话</th>

							<!--<th>预约时间</th>-->

							<th>备注</th>

						</tr>

					</thead>

					<tbody>

						{% for order in myorder %}

						<tr>

							<td>  {{ order.user }}  </td>

							<td>  {{ order.num }}  </td>

							<td>  {{ order.name }}  </td>

							<td>  {{ order.time }}  </td>

							<td>  {{ order.size }}  </td>

							<td>  {{ order.phone }}  </td>

							<!--<td>  {{ order.ntime }}  </td>-->

							<td><a href="/cancel/?id={{order.id}}">取消定单</a></td>

						</tr>

						{% endfor %}

					</tbody>

				</table>

				{% else %}

				<h2>你还没有预约，请先预约！</h2>

				{% endif %}

			</div>

		</div>

	</div>

</div>

{% endblock %}

最后一个： 

{% extends "base.html" %}

{% load staticfiles %}

{% block title %}会议室预约{% endblock %}

{% block content %}

<div class="container">

	<div class="row">

		<div class="col-md-8 col-md-offset-2 well">

			<h2>  恭喜你预约成功！</h2>

		</div>

	</div>

</div>

{% 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，谢谢开源。

django 简单会议室预约（6）的更多相关文章

  1. django 简单会议室预约（5）

    再来看看views.py的后半部分,对数据库的增删改查 #获取学院列表 def get_acad_list(): room_list = ConfeRoom.objects.all() #对数据库的操 ...

  2. django 简单会议室预约（4）

    基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...

  3. django 简单会议室预约（2）

    --我们先打开settings.py 配置文件: import os #指明django APP目录路径 BASE_DIR = os.path.dirname(os.path.dirname(os.p ...

  4. django 简单会议室预约（1）

    django 是python的一个web框架,为什么要用django,作者之前用过另一个框架flask,虽然flask比较简单很容易让人学,但是flask没有整体感,会让初学着茫然. 这里我们用dja ...

  5. django 简单会议室预约（3）

    URL配置: 今天配置一下URL,打开urls.py配置如下: from django.conf.urls import patterns, include, url from djapp impor ...

  6. DJango简单的后台定义登录验证

    第一步创建一个新的项目 APPLICATIONNAME : 表示创建子项目 第二步:找到主项目的url 进行 include 分发式url 简单的说,就是将app里边的url放在这里. 这里也可以找到 ...

  7. 基于django的会议室预订系统

    会议室预订系统 一.目标及业务流程 期望效果: 业务流程: 用户注册 用户登录 预订会议室 退订会议室 选择日期:今日以及以后日期 二.表结构设计和生成 1.models.py(用户继承Abstrac ...

  8. Django简单的数据库操作

    当然,本篇的前提是你已经配置好了相关的环境,这里就不详细介绍. 一. 在settings.py文件中设置数据库属性. 如下: DATABASES = { 'default': { 'ENGINE': ...

  9. 循序渐进Python3（十二） --2--  web框架之django简单实现oracle数据库操作

    在 Django 中构建 Oracle 数据库支持的 Web 应用程序 了解如何配置 Django 以便与 Oracle 数据库交互,并使用 ORM 进行数据库连接.             产能在软 ...

随机推荐

  1. OpenCV图像处理篇之腐蚀与膨胀

    转载请注明出处:http://xiahouzuoxin.github.io/notes 腐蚀与膨胀 腐蚀和膨胀是图像的形态学处理中最主要的操作,之后遇见的开操作和闭操作都是腐蚀和膨胀操作的结合运算. ...

  2. JAVA并发--volatile

    学过计算机组成原理的一定知道,为了解决内存速度跟不上CPU速度这个问题,在CPU的设计中加入了缓存机制,缓存的速度介于CPU和主存之间.在进行运算的时候,CPU将需要的数据映射一份在缓存中,然后直接操 ...

  3. VGA接口时序约束

    SF-VGA模块板载VGA显示器DA转换驱动芯片AVD7123,FPGA通过OUPLLN连接器驱动ADV7123芯片产生供给VGA显示器的色彩以及同步信号.SF-CY3核心模块与SF-VGA子模块连接 ...

  4. php中对象转数组有哪些方法（总结测试）

    php中对象转数组有哪些方法(总结测试) 一.总结 一句话总结:json_decode(json_encode($array),true)和array强制转换(或带递归) 1.array方式强制转换对 ...

  5. orm 通用方法——RunProc调用存储过程

    该方法暂不支持带返回值的存储过程,期待能人补充指点. 定义代码: /** * 描述:执行存储过程 * 作者:Tianqi * 日期:2014-09-16 * param:rs orm.RawSeter ...

  6. HDU 5883 欧拉回路

    题面: 思路: 这里面有坑啊啊啊-.. 先普及一下姿势: 判断无向图欧拉路的方法: 图连通,只有两个顶点是奇数度,其余都是偶数度的. 判断无向图欧拉回路的方法: 图连通,所有顶点都是偶数度. 重点:图 ...

  7. MySQL中好用的GROUP_CONCAT函数

    今天看到同事的代码,又学到了一个有用的函数,刚看的时候不太懂,就搜了下用法,看下面这篇文章讲的挺详细就直接转载了,我也写不那么好,呵呵,感谢作者的无私奉献. http://blog.sina.com. ...

  8. git hub在windows上的使用

    每次使用都需要查找,太麻烦了. 转过来自己用! git hub在windows上的使用 一. 首先安装客户端 Git for Windows. 按提示默认安装后,进入git bash(桌面上) 首先检 ...

  9. 九度 题目1154：Jungle Roads

    题目描写叙述: The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid mon ...

  10. VS添加程序集

    项目->添加->引用->程序集 可在项目的引用目录中,查看引用的程序集