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

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

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

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

  1. STATIC_URL = '/static/'
  3. MEDIA_PATH = './image/'      #图片路径

基础模板 

  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="zh-cn">
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  8. 		<title>{% block title %}{% endblock %}</title>
  9. 		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
  10. 		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-theme.min.css">
  11. 		<link rel="stylesheet" type="text/css" href="/static/css/base.css">
  12. 		<script type="text/javascript" src="/static/js/jquery.min.js"></script>
  13. 		<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
  14. 		<!--[if lt IE 9]>
  15. 			<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16. 			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  17. 		<![endif]-->
  18. 	</head>
  19. 	<body>
  20. 		<!--Here is the navbar-->
  21. 		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  22. 			<div class="container">
  23. 				<div class="navbar-header">
  24. 					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-basepage">
  25. 						<span class="icon-bar"></span>
  26. 						<span class="icon-bar"></span>
  27. 						<span class="icon-bar"></span>
  28. 					</button>
  29. 				</div>
  31. 				<div class="collapse navbar-collapse" id="navbar-collapse-basepage">
  32. 					<ul class="nav navbar-nav">
  33. 						<li id="homepage"><a href="/">主页</a></li>
  34. 						<li id="viewbook"><a href="/viewroom/">查看</a></li>
  35. 					</ul>
  36. 					<ul class="nav navbar-nav navbar-right">
  37. 						{% if user %}                   <!--user是后台数据，判断循环语句都要包在{% %}里，而一般只显示的数据在{{}}里-->
  38. 							<li><p class="navbar-text">欢迎你  <span id="base_name">{{ user }}</span></p></li>
  39. 							<li><a href="/myorder/">查看订单</a></li>
  40. 							<li><a href="/logout/">注销</a></li>
  42. 						{% else %}
  43. 							<li><a href="/regist/">注册</a></li>
  44. 							<li><a href="/login/">登录</a></li>
  45. 						{% endif %}
  46. 					</ul>
  47. 				</div>
  49. 			</div>
  50. 		</nav>
  51. 		<!-- /nav -->
  52. 		<!-- header -->
  53. 		<header class="jumbotron subhead" id="header-base">
  54. 			<div class="container">
  55. 				<h1>会议室预约系统</h1>
  56. 			</div>
  57. 		</header>
  58. 		<!-- /.header -->
  59. 		<!-- main part -->
  60. 		{% block content %}{% endblock %}
  61. 		<!-- /.main -->
  63. 		<!-- footer -->
  64. 		<footer class="footer" role="contentinfo">
  65. 			<hr>
  66. 			<div class="container">
  68. 				<p class="text-center">Copyright © LFL&ZMD</p>
  69. 				<h5 class="text-center"> Thanks For  Duan Yi </h5>
  70. 			</div>
  71. 		</footer>
  72. 		<!-- /.footer-->
  73. 		<script type="text/javascript">
  74. 		    var act = document.getElementById("{{ active_menu }}");
  75. 		    act.setAttribute("class","active");
  76. 		</script>
  77. 	</body>
  78. </html>

主页 

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}会议室预约{% endblock %}
  5. {% block content %}
  7. <div class="container">
  8. 	<div class="row">
  9. 		<div class="col-md-8 col-md-offset-2 well">
  10. 			<h2>欢迎访问会议室预约平台！</h2>
  11. 		</div>
  12. 	</div>
  13. </div>
  15. {% endblock %}

登录界面

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}登陆{% endblock %}
  4. {% block content %}
  5. <div class="container">
  6. 	<div class="row">
  7. 		<div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
  8. 			{% if status == 'not_exist_or_passwd_err' %}
  9. 				<div class="well">
  10. 					<h2 class="text-danger text-center">用户不存在或密码错误</h2>
  11. 				</div>
  12. 			{% endif %}
  13. 			<form method="POST" role="form" class="form-horizontal">
  14. 				{% csrf_token %}
  15. 				<h1 class="form-signin-heading text-center">请登陆</h1>
  17. 				<div class="form-group">
  18. 					<label for="id_user_name" class="col-md-3 control-label">用户名：</label>
  19. 					<div class="col-md-9">
  20. 						<input type="text" class="form-control" id="id_user_name" required name="username" autofocus>
  21. 					</div>
  22. 				</div>
  24. 				<div class="form-group">
  25. 					<label for="id_passwd" class="col-md-3 control-label">密码：</label>
  26. 					<div class="col-md-9">
  27. 						<input type="password" class="form-control" required name="passwd" id="id_passwd">
  28. 					</div>
  29. 				</div>
  30. 				<div class="form-group">
  31. 					<div class="col-md-4 col-md-offset-4">
  32. 						<button class="btn btn btn-primary btn-block" type="submit">登陆</button>
  33. 					</div>
  34. 				</div>
  35. 			</form>
  36. 		</div>
  37. 	</div>
  38. </div>
  40. {% endblock %}

注册

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}注册{% endblock %}
  4. {% block content %}
  5. <div class="container">
  6. 	<div class="row">
  7. 		<div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
  8. 			{% if status == 'success' %}
  9. 				<div class="well">
  10. 					<h2 class="text-success text-center">注册成功！</h2>
  11. 				</div>
  12. 			{% elif status == 're_err' %}
  13. 				<div class="well">
  14. 					<h2 class="text-warning text-center">密码重复错误</h2>
  15. 				</div>
  16. 			{% elif status == 'user_exist' %}
  17. 				<div class="well">
  18. 					<h2 class="text-danger text-center">用户已经存在</h2>
  19. 				</div>
  20. 			{% endif %}
  21. 			<form method="POST" role="form" class="form-horizontal">
  22. 				{% csrf_token %}
  23. 				<h1 class="form-signin-heading text-center">请注册</h1>
  25. 				<div class="form-group">
  26. 					<label for="id_user_name" class="col-md-3 control-label">用户名：</label>
  27. 					<div class="col-md-9">
  28. 						<input type="text" class="form-control" id="id_user_name" required name="username" autofocus>
  29. 					</div>
  30. 				</div>
  31. 				<div class="form-group">
  32. 					<label for="id_passwd" class="col-md-3 control-label">密码：</label>
  33. 					<div class="col-md-9">
  34. 						<input type="password" class="form-control" required name="passwd" id="id_passwd">
  35. 					</div>
  36. 				</div>
  37. 				<div class="form-group">
  38. 					<label for="id_repasswd" class="col-md-3 control-label">重复密码：</label>
  39. 					<div class="col-md-9">
  40. 						<input type="password" class="form-control" required name="repasswd" id="id_repasswd">
  41. 					</div>
  42. 				</div>
  43. 				<div class="form-group">
  44. 					<label for="id_email" class="col-md-3 control-label">电话号码：</label>
  45. 					<div class="col-md-9">
  46. 						<input type="text" class="form-control" required name="phone" id="id_phone">
  47. 					</div>
  48. 				</div>
  49. 				<div class="form-group">
  50. 					<div class="col-md-4 col-md-offset-4">
  51. 						<button class="btn btn btn-primary btn-block" type="submit" id="id_submit">注册</button>
  52. 					</div>
  53. 				</div>
  54. 			</form>
  55. 		</div>
  56. 	</div>
  57. </div>
  58. {% endblock %}

查看

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}查看{% endblock %}
  5. {% block content %}
  7. <div class="container">
  8. 	<div class="row">
  9. 		<div class="col-md-10 col-md-offset-1">
  10. 			<div class="col-md-2">
  11. 				<div class="list-group">
  12. 					<a href="/viewroom/" class="list-group-item" id="id_typ_all">全部会议室</a>
  13. 					{% for acad in acad_list %}     <!--循环学院列表-->
  14. 					<a href="/viewroom?acad={{ acad }}" class="list-group-item" id="id_typ_{{ acad }}">{{ acad }} </a>
  15. 					{% endfor %}
  16. 				</div>
  17. 				<script type="text/javascript">
  18. 				    var act_typ = document.getElementById("id_typ_{{acad_list}}");
  19. 				    var new_class = act_typ.getAttribute("class") + " active"
  20. 				    act_typ.setAttribute("class",new_class);
  21. 				</script>
  22. 			</div>
  23. 			<div class="col-md-9 col-md-offset-1">
  24. 				<div class="col-md-4 col-md-offset-8">
  25. 					<form role="form" method="post" name="search_form">
  26. 						{% csrf_token %}
  27. 						<input type="search" class="form-control" name="number" placeholder="Enter keywords to search" id="id_search_input" onkeyup="whenkeyup()" autofocus="True">
  28. 					</form>
  29. 				</div>
  30. 				<script type="text/javascript">
  31. 					function whenkeyup () {
  32. 						var oldvalue = document.getElementById('id_search_input').value
  33. 						setTimeout(function(){
  34. 							var newvalue = document.getElementById('id_search_input').value
  35. 							if (oldvalue == newvalue) {
  36. 								document.search_form.submit();
  37. 							};
  38. 						},1500);
  39. 					}
  40. 				</script>
  41. 				<table class="table table-hover">
  42. 					<thead>
  43. 						<tr>
  44. 							<th>会议室号</th>
  45. 							<th>会议室名</th>
  46. 							<th>大小</th>
  47. 							<th>详情</th>
  48. 						</tr>
  49. 					</thead>
  50. 					<tbody>
  51. 						{% for room in room_list %}
  52. 						<tr>
  54. 							<td>{{ room.num }}</td>
  55. 							<td>{{ room.name }}</td>
  56. 							<td>{{ room.size }}</td>
  57. 							<td><a href="/detail/?id={{room.id}}">查看</a></td>
  58. 						</tr>
  60. 						{% endfor %}
  61. 					</tbody>
  62. 				</table>
  63. 				<nav>
  64. 					<ul class="pager">
  65. 						{% if room_list.has_previous %}
  66. 							<li class="previous"><a href="?typ={{room_acad}}&page={{ room_list.previous_page_number }}">上一页</a></li>
  67. 						{% else %}
  68. 							<li class="previous disabled"><a href="#">上一页</a></li>
  69. 						{% endif %}
  70. 						第 {{ room_list.number }} / {{ room_list.paginator.num_pages }}页
  71. 						{% if room_list.has_next %}
  72. 							<li class="next"><a href="?acad={{room_acad}}&page={{ room_list.next_page_number }}">下一页</a></li>
  73. 						{% else %}
  74. 							<li class="next disabled"><a href="#">下一页</a></li>
  75. 						{% endif %}
  76. 					</ul>
  77. 				</nav>
  78. 			</div>
  79. 		</div>
  80. 	</div>
  81. </div>
  83. {% endblock %}

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

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}查看会议室{% endblock %}
  5. {% block content %}
  7. <div class="container">
  8. 	<div class="row">
  9. 		<div class="col-md-10 col-md-offset-1">
  10. 			<div class="col-md-5">
  11. 				{% if img_list %}
  12. 					<div id="carousel-generic" class="carousel slide" data-ride="carousel">
  13. 						<ol class="carousel-indicators">
  14. 						{% for item in img_list %}
  15. 							<li data-target="#carousel-generic" data-slide-to="{{forloop.counter0}}" {% if forloop.first %}class="active"{% endif %}></li>
  16. 						{% endfor %}
  17. 						</ol>
  18. 						<div class="carousel-inner" role="listbox">
  19. 						{% for img in img_list %}
  20. 							<div {% if forloop.first %}class="item active"{%else%}class="item"{% endif %}>
  21. 								<img src="/static/{{img.img}}">
  22. 							</div>
  23. 						{% endfor %}
  24. 						</div>
  25. 						<a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
  26. 							<span class="glyphicon glyphicon-chevron-left"></span>
  27. 						</a>
  28. 						<a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
  29. 							<span class="glyphicon glyphicon-chevron-right"></span>
  30. 						</a>
  31. 					</div>
  32. 				{% else %}
  33. 					<p class="text-center">暂无图片</p>
  34. 				{% endif %}
  35. 			</div>
  36. 			<div class="col-md-6 col-md-offset-1">
  37. 				<h2 class="text-center">{{room.name}}会议室</h2>
  38. 				<br>
  39. 				<h3>会议室名  ：{{room.name}}</h3>
  40. 				<h3>会议室大小：可容纳{{room.size}}人</h3>
  41. 				<h3>可预约时间：{{ro.time}}</h3>
  42. 			{% if or_sta == "yes" %}
  43. 				<h3><a href="/order/">预约</a></h3>
  44. 			{% elif or_sta == "no" %}
  45. 				<h3>已被预约</h3>
  46. 			{% endif %}
  47. 			</div>
  48. 		</div>
  49. 	</div>
  50. </div>
  52. {% endblock %}

查看预定：

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}查看{% endblock %}
  5. {% block content %}
  7. <div class="container">
  8. 	<div class="row">
  9. 		<div class="col-md-10 col-md-offset-1">
  10. 			<div class="col-md-9 col-md-offset-1">
  11. 				{% if us_sta == "no" %}
  12. 				<table class="table table-hover">
  13. 					<thead>
  14. 						<tr>
  15. 							<th>用户名</th>
  16. 							<th>会议室代号</th>
  17. 							<th>会议室名称</th>
  18. 							<th>会议室时间</th>
  19. 							<th>会议室大小</th>
  20. 							<th>用户电话</th>
  21. 							<!--<th>预约时间</th>-->
  22. 							<th>备注</th>
  23. 						</tr>
  24. 					</thead>
  25. 					<tbody>
  26. 						{% for order in myorder %}
  27. 						<tr>
  28. 							<td>  {{ order.user }}  </td>
  29. 							<td>  {{ order.num }}  </td>
  30. 							<td>  {{ order.name }}  </td>
  31. 							<td>  {{ order.time }}  </td>
  32. 							<td>  {{ order.size }}  </td>
  33. 							<td>  {{ order.phone }}  </td>
  34. 							<!--<td>  {{ order.ntime }}  </td>-->
  35. 							<td><a href="/cancel/?id={{order.id}}">取消定单</a></td>
  36. 						</tr>
  37. 						{% endfor %}
  38. 					</tbody>
  39. 				</table>
  40. 				{% else %}
  41. 				<h2>你还没有预约，请先预约！</h2>
  42. 				{% endif %}
  44. 			</div>
  45. 		</div>
  46. 	</div>
  47. </div>
  49. {% endblock %}

最后一个： 

  1. {% extends "base.html" %}
  2. {% load staticfiles %}
  3. {% block title %}会议室预约{% endblock %}
  5. {% block content %}
  7. <div class="container">
  8. 	<div class="row">
  9. 		<div class="col-md-8 col-md-offset-2 well">
  10. 			<h2>  恭喜你预约成功！</h2>
  11. 		</div>
  12. 	</div>
  13. </div>
  14. {% endblock %}

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

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

  1. from django.contrib import admin
  2. from djapp.models import *
  4. admin.site.register(MyUser)
  5. admin.site.register(ConfeRoom)
  6. admin.site.register(Order)
  7. 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. Unity multiplayer

    using UnityEngine; using System.Collections; public class multiplayer_Button : MonoBehaviour { void ...

  2. PHP长整型在32位系统中强制转化溢出

    CleverCode近期遇到一个PHP项目整形转化问题,mysql有一个字段id是bigint的,里面有长整型,如id = 5147486396.可是php代码因为历史原因却部署在多台机器中,当中A机 ...

  3. poj--2007--Scrambled Polygon(数学几何基础)

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Su ...

  4. BZOJ 1103 DFS序+线段树

    思路: 先搞出来DFS序 进入这个点 +1 出这个点 -1 线段树维护前缀和 (因为还要修改) 搞定 修改的时候只修改底下节点就OK了 (边权–>点权 不多说) //By SiriusRen # ...

  5. c# 读取 excel文件内容，写入txt文档

    1 winform 读取excel文档 1)点击button按钮,弹出上传excel窗口 private void button_headcompany_Click(object sender, Ev ...

  6. Json与JsonPath

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因为它良好的可读性与易于机器进行解析和生成等特性,在当前的数据整理和收集中得到了广泛的应用. JSON和XM ...

  7. 编程里的API是什么意思？

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...

  8. 00076_BigDecimal

    1.在程序中执行下列代码,会出现什么问题? System.out.println(0.09 + 0.01); System.out.println(1.0 - 0.32); System.out.pr ...

  9. 洛谷 P1885 Moo

    P1885 Moo 题目描述 奶牛Bessie最近在学习字符串操作,它用如下的规则逐一的构造出新的字符串: S(0) = “moo” S(1) = S(0) + “m”+ “ooo” + S(0) = ...

  10. jni中调用java方法获取当前apk的签名文件md5值

    相应的java方法: void getsign(Context context) throws Exception { PackageInfo localPackageInfo = context.g ...