django 简单会议室预约（6）
后台完了现在来看前端，前端用了一个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）的更多相关文章
- django 简单会议室预约（5）
再来看看views.py的后半部分,对数据库的增删改查 #获取学院列表 def get_acad_list(): room_list = ConfeRoom.objects.all() #对数据库的操 ...
- django 简单会议室预约（4）
基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...
- django 简单会议室预约（2）
--我们先打开settings.py 配置文件: import os #指明django APP目录路径 BASE_DIR = os.path.dirname(os.path.dirname(os.p ...
- django 简单会议室预约（1）
django 是python的一个web框架,为什么要用django,作者之前用过另一个框架flask,虽然flask比较简单很容易让人学,但是flask没有整体感,会让初学着茫然. 这里我们用dja ...
- django 简单会议室预约（3）
URL配置: 今天配置一下URL,打开urls.py配置如下: from django.conf.urls import patterns, include, url from djapp impor ...
- DJango简单的后台定义登录验证
第一步创建一个新的项目 APPLICATIONNAME : 表示创建子项目 第二步:找到主项目的url 进行 include 分发式url 简单的说,就是将app里边的url放在这里. 这里也可以找到 ...
- 基于django的会议室预订系统
会议室预订系统 一.目标及业务流程 期望效果: 业务流程: 用户注册 用户登录 预订会议室 退订会议室 选择日期:今日以及以后日期 二.表结构设计和生成 1.models.py(用户继承Abstrac ...
- Django简单的数据库操作
当然,本篇的前提是你已经配置好了相关的环境,这里就不详细介绍. 一. 在settings.py文件中设置数据库属性. 如下: DATABASES = { 'default': { 'ENGINE': ...
- 循序渐进Python3（十二） --2-- web框架之django简单实现oracle数据库操作
在 Django 中构建 Oracle 数据库支持的 Web 应用程序 了解如何配置 Django 以便与 Oracle 数据库交互,并使用 ORM 进行数据库连接. 产能在软 ...
随机推荐
- IOS开发之蘑菇街框架
近期公司的项目全然仿了蘑菇街client的框架,自己从网上找了一下,没有发现源代码.问遍各大QQ群也没有结果.上周五晚上一直在思考这个框架怎样搭建,周六早上有了灵感.写了一半.今天接着完好了一下. 在 ...
- 大数据时代的新BI系统架构发展趋势
商业智能(BI,Business Intelligence).它是一套完整的解决方式,用来将企业中现有的数据进行有效的整合,高速准确的提供报表并提出决策根据.帮助企业做出明智的业务经营决策. ...
- nyoj--19--擅长排列的小明(dfs)
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难 ...
- spring xml配置文件根元素（文件头文件）说明
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Weka中数据挖掘与机器学习系列之基本概念（三）
数据挖掘和机器学习 数据挖掘和机器学习这两项技术的关系非常密切.机器学习方法构成数据挖掘的核心,绝大多数数据挖掘技术都来自机器学习领域,数据挖掘又向机器学习提出新的要求和任务. 数据挖掘就是在数据中寻 ...
- pig安装配置
pig的安装配置很简单,只需要配置一下环境变量和指向hadoop conf的环境变量就行了 1.上传 2.解压 3.配置环境变量 Pig工作模式 本地模式:只需要配置PATH环境变量${PIG_HOM ...
- OpenGL常见错误之——glut.h文件的函数无法正常连接
glut.h文件的函数无法正常连接,典型的错误如下:------ 已启动生成: 项目: gears, 配置: Debug Win32 ------1>正在链接...1>GEARS.obj ...
- Linux 串口终端调试工具minicom
minicom是一个串口通信工具,就像Windows下的超级终端.可用来与串口设备通信,如调试交换机和Modem等,它的使用完全依靠键盘的操作. 一.安装: Linux各发行版因软件管理方式不同而不同 ...
- <QT之Bug制造机>QT中串口类“QSerialPort”的学习笔记
QT5中已经增加了串口类QSrialPort,可以直接调用API函数进行快速开发. 1. 获取串口信息 Dialog::Dialog(QWidget *parent) : QDialog(parent ...
- python数据处理技巧二
python数据处理技巧二(掌控时间) 首先简单说下关于时间的介绍其中重点是时间戳的处理,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00 ...