用node实现ttms影院管理系统
在学习node三个月后写了一个ttms影院管理系统（node基于express框架ejs模板）
1.用express创建网站基本结构
如果你还没有在电脑上安装express的话，请先安装express
$ npm install -g express 然后通过下面命令创建网站基本结构
express -e ttms 下来会提示要进入文件夹还有运行 npm install。它自动安装了依赖 ejs 和 express。因为在项目内的package.json会的所有依赖包都生成出到本地项目ttms目录下,会生成一个node_modules模块。这个模块里面是所有的依赖包。
2.安装其他依赖包
安装mysql
首先在电脑上安装mysql，再将mysql安装到项目内：
npm mysql在mysql里面创建数据库，建表。我自己建的表，和表之间的关系，仅供参考：
boby-parser、cookie-parser、cookie-session、querystring
npm body-parser cookie-parser cookie-session querystring3.监听端口
在app.js里面添加如下代码：
app.listen(8080);这段代码添加到 module.exports = app; 的上面
4.连接数据库
在项目文件夹下创建model文件夹，并在文件夹下创建db.js文件。
db.js的内容如下：
var mysql = require('mysql');
var db = mysql.createConnection({
host:'localhost',
port:3308,
user:'root',
password:'123456',
database:'1111'
},console.log("数据库连接成功！"));
db.connect();
// 将这个模块公有化
// 使得其他js文件可以通过require语句来引入。
module.exports = db;
5.设置路由规则
这里只是将大致的路由规划了一下，在后面会详细的将代码给出。
app.js里面在建立项目的时候就已经将父路由设置完成，接下来只需要在routes文件夹下的index.js里面设置好路由规则就行。
将安装好的依赖包require到文件内.
index.js的代码内容如下：
var express = require('express');
var router = express.Router();
var db = require('../model/db');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var session = require('cookie-session');
const querystring=require('querystring');
/*电影主页*/
router.get('/', function(req, res, next) {
});
/*删除座位*/
router.post('/', function(req, res, next) {
});
/*选座页面 */
router.get('/posts/:moviename/:key/:item',require("./posts"));
router.post('/posts/:moviename/:key/:item',require("./posts"));
/*电影信息页面 */
router.get('/movie/:id',require("./movie"));
router.post('/movie/:id',require("./movie"));
/*后台系统登录界面*/
router.get('/login',require("./login"));
router.post('/login',require("./login"));
/*经理页面*/
router.get('/bossindex',require("./bossindex"));
router.post('/bossindex',require("./bossindex"));
router.get('/bossindex/useradd',require("./bossadd"));
router.post('/bossindex/useradd',require("./bossadd"));
router.get('/bossindex/userlist',require("./userlist"));
router.post('/bossindex/userlist',require("./userlist"));
router.get('/adindex',require("./adindex"));
router.post('/adindex',require("./adindex"));
router.get('/adindex/movielist',require("./movielist"));
router.post('/adindex/movielist',require("./movielist"));
router.get('/adindex/movieadd',require("./movieadd"));
router.post('/adindex/movieadd',require("./movieadd"));
router.get('/adindex/playadd',require("./movieadd"));
router.post('/adindex/playadd',require("./movieadd"));
router.get('/adindex/playlist',require("./movieadd"));
router.get('/adindex/playmovie',require("./movieadd"));
router.post('/adindex/playmovie',require("./movieadd"));
router.get('/adindex/played',require("./movieadd"));
router.post('/adindex/played',require("./movieadd"));
router.get('/user',require("./user"));
router.post('/user',require("./user"));
router.post('/users',require("./users"));
router.get('/users',require("./users"));
router.get('/bossindex/bill',require("./bossadd"));
router.post('/bossindex/bill',require("./bossadd"));
module.exports = router;
我是不想让index.js的代码太多，所以讲个个路由规则require到routes下的文件内。
routes文件夹的文件如图：
我这里的路由规则有点乱，大家也可以根据自己的需求重新建立路由规则…
很多路由规则都是在当时写项目写了一半的时候创建的，所以很多路由规则创建的比较随意。
将路由设置好，就可以先放到一边了，接下来就要到view文件夹下搞点事了。
6.建立网页
在建立网页的时候，因为用ejs模板，所以可以很方便的将网页分割。
1.后台登录页面
首先完成后台界面的基本代码，在views文件夹下创建login.ejs文件。当时在写项目时因为时间短，所以我直接在网上下载的网页模板。
login.ejs的文件代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>系统登录 - 影院管理</title>
<link rel="stylesheet" href="/stylesheets/css/style.css"/>
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
</head>
<body class="login_bg">
<section class="loginBox">
<header class="loginHeader">
<h1>影院管理系统</h1>
</header>
<section class="loginCont">
<form class="loginForm" id="myform" method="post" action="/login">
<div class="inputbox">
<label for="user">用户名：</label>
<input id="username" type="text" name="username" placeholder="请输入用户名" value="">
</div>
<div class="inputbox">
<label for="mima">密码：</label>
<input id="password" type="password" name="password" placeholder="请输入密码"
value="">
</div>
<div class="subBtn">
<input type="submit" value="经理登录" / id="sub1" name="boss">
<input type="submit" value="管理员登录" / id="sub2" name="admin">
</div>
</form>
</section>
</section>
</body>
</html>在login.ejs里面
<link rel="stylesheet" href="/stylesheets/css/style.css"/>href链接的目录是public，这个目录可以在app.js里面设置：
app.use(express.static(path.join(__dirname, 'public')));
其余的链接都是一样设置的。
在from表单内
<form class="loginForm" id="myform" method="post" action="/login">method和action属性规定了数据传输的方式和地址，这里的地址和方法就是路由规则里设置的地址。
例：这个表单相对应的routes里面是这样的：
index.js中
router.get('/login',require("./login"));
router.post('/login',require("./login"));2.经理相关页面
这个系统的后台使用者是经理和管理员。经理和管理员登录到不同的页面，有着不同的功能。经理的功能有日账单查询，添加管理员。
首先将创建bossheader.ejs，其代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>影院管理系统</title>
<link rel="stylesheet" href="/stylesheets/css/public.css"/>
<link rel="stylesheet" href="/stylesheets/css/style.css"/>
<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
<h1>影院管理系统</h1>
<div class="publicHeaderR">
<p><span>下午好！</span><span style="color: #fff21b"><%= title%></span> , 欢迎你！</p>
<a href="/login">退出</a>
</div>
</header>
<!--时间-->
<!--主体内容-->
<section class="publicMian">
<div class="left">
<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
<nav>
<ul class="list">
<li><a href="/bossindex/userlist">管理员信息</a></li>
<li><a href="/bossindex/useradd">添加管理员</a></li>
<li><a href="/bossindex/bill">日账单查询</a></li>
<li><a href="/login">退出系统</a></li>
</ul>
</nav>
</div>
1.经理登录首页
创建bossindex.ejs，代码如下：
<%- include bossheader.ejs %>
<div class="right">
<img class="wColck" src="img/clock.jpg" alt=""/>
<div class="wFont">
<h2>Admin</h2>
<p>欢迎来到影院管理系统!</p>
<span id="hours"></span>
</div>
</div>
</section>
<footer class="footer">
</footer>
<script src="js/time.js"></script>
</div>
</body>
</html>在bossindex里引入提前切割好的网页（bossheader.ejs），这样可以让代码长度变短，并且更方便。
<%- include bossheader.ejs %>2.管理员信息
创建userlist.ejs文件，其代码如下:
<%- include bossheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>管理员信息页面</span>
</div>
<div class="search">
<span>用户名：</span>
<input type="text" placeholder="请输入用户名"/>
<input type="button" value="查询"/>
<a href="/bossindex/useradd">添加管理员</a>
</div>
<!--用户-->
<table class="providerTable" cellpadding="0" cellspacing="0">
<tr class="firstTr">
<th width="10%">管理员编码</th>
<th width="20%">管理员名称</th>
<th width="10%">性别</th>
<th width="10%">年龄</th>
<th width="10%">电话</th>
<th width="30%">操作</th>
</tr>
<% for(var i = 0; i < data.length; i++) { %>
<tr>
<td>
<%= data[i].id %>
</td>
<td>
<%= data[i].name %>
</td>
<td>
<%= data[i].password %>
</td>
<td>
<%= data[i].sex %>
</td>
<td>
<%= data[i].photo %>
</td>
<td>
<a href="#" class="removeProvider" action="/adindex/movieadd" method="post"><img src="/images/img/schu.png" alt="删除" title="删除"/></a>
</td>
</tr>
<% } %>
</table>
</div>
</section>
<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
<div class="removerChid">
<h2>提示</h2>
<div class="removeMain">
<p>你确定要删除该用户吗？</p>
<a href="#" id="yes">确定</a>
<a href="#" id="no">取消</a>
</div>
</div>
</div>在ejs模板中，用<%= %>和<% %>实现页面数据的渲染。在尖括号内的数据，是由res.render()内的参数传递的数据，在写后台逻辑的时候会具体说明。
3.添加管理员
创建bossadd.ejs文件，其代码如下：
<%- include bossheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>用户管理页面 >> 用户添加页面</span>
</div>
<div class="providerAdd">
<form action="/bossindex/useradd" method="post">
<!--div的class 为error是验证错误，ok是验证成功-->
<div class="">
<label for="userId">管理员编码：</label>
<input type="text" name="userId" id="userId"/>
<span>*请输入管理员编码，且不能重复</span>
</div>
<div>
<label for="userName">管理员姓名：</label>
<input type="text" name="userName" id="userName"/>
<span >*请输入管理员姓名</span>
</div>
<div>
<label for="userpassword">密码：</label>
<input type="text" name="userpassword" id="userpassword"/>
<span>*密码长度必须大于6位小于20位</span>
</div>
<div>
<label for="userRemi">确认密码：</label>
<input type="text" name="userRemi" id="userRemi"/>
<span>*请输入确认密码</span>
</div>
<div>
<label >性别：</label>
<select name="sex">
<option>男</option>
<option>女</option>
</select>
<span></span>
</div>
<div>
<label for="data">年龄：</label>
<input type="text" name="userAge" id="age"/>
<span >*</span>
</div>
<div>
<label for="userphone">电话：</label>
<input type="text" name="userphone" id="userphone"/>
<span >*</span>
</div>
<div class="providerAddBtn">
<!--<a href="#">保存</a>-->
<!--<a href="userList.html">返回</a>-->
<input type="submit" value="保存" />
<input type="submit" value="返回" />
</div>
</form>
</div>
</div>
</section>
4.日账单查询
创建bill.ejs文件，其代码如下：
<%- include bossheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>日账单查询</span>
</div>
<div class="search">
<span>日期：</span>
<input type="text" placeholder="请输入日期"/ id="1">
<input type="button" value="查询账单"/ id="d1">
</div>
<table class="providerTable" cellpadding="0" cellspacing="0" id="ta">
<tr class="firstTr">
<th width="10%">电影名称</th>
<th width="20%">售出票数</th>
<th width="10%">总金额</th>
</tr>
</table>
<script type="text/javascript">
$("#d1").click(function(){
var data=document.getElementById('1').value;
$.ajax({
url: '/bossindex/bill',
dataType: 'json',
data:{data},
type:'post',
success: function(data){
$('#ta tr:gt(0)').remove();
item1 = data;
var item='';
var moviename=[];
var num=[0,0,0,0,00,0,0,0,0,0,0,0,0];
var prices=[0,0,0,0,00,0,0,0,0,0,0,0,0];
moviename[0]=item1[0].moviename;
for(var i=1;i<item1.length;i++)
{
for(var y=0;y<moviename.length;y++)
{
if(item1[i].moviename!=moviename[y])
{
y=y+1;
moviename[y]=item1[i].moviename;
}
}
}
for(var i=0;i<item1.length;i++)
{
for(var y=0;y<moviename.length;y++)
{
if(item1[i].moviename===moviename[y])
{
prices[y]=prices[y]+item1[i].price;
num[y]=num[y]+1;
}
}
}
console.log( moviename,num,prices);
for(var i=0;i<moviename.length;i++)
{
item+= '<tr><td>' + moviename[i] + '</td><td>' + num[i] + '</td><td>' + prices[i] + '</td></tr>';
}
console.log(item);
$('#ta').append(item);
// $('#ta').append(item);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
});
</script>2.管理员相关页面
管理员的功能如下：查看电影列表，添加电影，演出厅管理，添加演出厅，添加演出，查看演出计划。
和经理相关页面一样，首先创建adheader.ejs文件，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>茅坡村影院管理系统</title>
<link rel="stylesheet" href="/stylesheets/css/public.css"/>
<link rel="stylesheet" href="/stylesheets/css/style.css"/>
<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
<h1>茅坡村影院管理系统</h1>
<div class="publicHeaderR">
<p><span>下午好！</span><span style="color: #fff21b"><%= title%></span> , 欢迎你！</p>
<a href="/login">退出</a>
</div>
</header>
<!--时间-->
<!--主体内容-->
<section class="publicMian">
<div class="left">
<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
<nav>
<ul class="list">
<li><a href="/adindex/movielist">电影列表</a></li>
<li><a href="/adindex/movieadd">添加电影</a></li>
<li><a href="/adindex/playlist">演出厅管理</a></li>
<li><a href="/adindex/playadd">添加演出厅</a></li>
<li><a href="/adindex/playmovie">添加演出</a></li>
<li><a href="/adindex/played">演出计划</a></li>
<li><a href="/login">退出系统</a></li>
</ul>
</nav>
</div>1.管理员登录首页
创建adindex.ejs文件，代码如下：
<%- include adheader.ejs %>
<div class="right">
<img class="wColck" src="img/clock.jpg" alt=""/>
<div class="wFont">
<h2>Admin</h2>
<p>欢迎来到影院管理系统!</p>
<span id="hours"></span>
</div>
</div>
</section>
<footer class="footer">
</footer>
<script src="js/time.js"></script>
</div>
</body>
</html>2.电影列表页面
创建movielist.ejs文件，代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>电影管理页面</span>
</div>
<table class="providerTable" cellpadding="0" cellspacing="0">
<tr class="firstTr">
<th width="10%">电影名称</th>
<th width="10%">电影时长</th>
<th width="10%">电影类型</th>
<th width="10%">图片路径</th>
<th width="30%">电影简介</th>
<th width="20%">操作</th>
</tr>
<% for(var i = 0; i < data.length; i++) { %>
<tr>
<td class="td">
<%= data[i].moviename %>
</td>
<td>
<%= data[i].movielenth %>
</td>
<td>
<%= data[i].moviestyle %>
</td>
<td>
<%= data[i].movieimage %>
</td>
<td>
<%= data[i].movieintroduction %>
</td>
<td>
<button class="btn btn-primary subt" onclick="return tuipiao(this)" id=<%= i %>>删除</button>
</td>
</tr>
<% } %>
</table>
</div>
<script type="text/javascript">
function tuipiao(obj)
{
alert(obj.id);
var i=obj.id;
var td=document.getElementsByClassName('td')[i].innerText;
console.log(td);
$.ajax({
url: '/bossindex/userlist',
dataType: 'json',
data:{td},
type:'post',
success: function(data){
alert("删除成功！");
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
}
</script>
<script src="/javascripts/js/jquery.js"></script>
<script src="/javascriptsjs/js.js"></script>
<script src="/javascripts/js/time.js"></script>
</body>
</html>图片位置在此说明：在数据库中，我只是将图片的路径保存。
这里的ajax实现了电影的删除功能。
2.添加电影
创建movieadd.ejs文件，代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>添加电影页面</span>
</div>
<div class="providerAdd">
<form action="/adindex/movieadd" method="post" >
<div class="">
<label for="userId">电影名称：</label>
<input type="text" name="moviename" id="userId"/>
<span>*请输入电影名称，且不能重复</span>
</div>
<div>
<label for="userName">电影时长</label>
<input type="text" name="movielenth" id="userId"/>
</div>
<div>
<label for="userpassword">图片路径：</label>
<input type="text" name="movieimage"/>
</div>
<div>
<label >电影类型</label>
<input type="text" name="moviestyle" id="userName"/>
</div>
<div>
<label for="userphone">电影简介</label>
<input type="text" name="movieintroduction" id="userphone"/>
</div>
<div>
<label for="userphone">上映时间</label>
<input type="text" name="movietime" id="userphone"/>
</div>
<div class="providerAddBtn">
<!--<a href="#">保存</a>-->
<!--<a href="userList.html">返回</a>-->
<input type="submit" value="保存" onclick="history.back(-1)"/ >
<input type="button" value="返回" onclick="history.back(-1)"/>
</div>
</form>
</div>
3.演出厅管理页面
创建playlist.ejs文件，代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>演出厅信息</span>
</div>
<!--供应商操作表格-->
<table class="providerTable" cellpadding="0" cellspacing="0">
<tr class="firstTr">
<th width="20%">演出厅名称</th>
<th width="20%">演出厅行数</th>
<th width="20%">演出厅列数</th>
<th width="40%">操作</th>
</tr>
<% for(var i = 0; i < data.length; i++) { %>
<tr>
<td>
<%= data[i].playname %>
</td>
<td>
<%= data[i].playrow %>
</td>
<td>
<%= data[i].playcol %>
</td>
<td>
<a href="#" class="removeProvider" action="/adindex/movieadd" method="post"><img src="/images/img/schu.png" alt="删除" title="删除"/></a>
</td>
</tr>
<% } %>
</table>
</div>
4.添加演出厅
创建playadd.ejs，其代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>演出厅管理</span>
</div>
<div class="providerAdd">
<form action="/adindex/playadd" method="post" >
<div>
<label for="playName">选择演出厅：</label>
<input type="text" name="playname" id="userName"/>
</div>
<div>
<label >添加座位行数：</label>
<input type="text" name="playrow" id="userName"/>
</div>
<div>
<label >添加座位列数：</label>
<input type="text" name="playcol" id="userName"/>
</div>
<div class="providerAddBtn">
<!--<a href="#">保存</a>-->
<!--<a href="userList.html">返回</a>-->
<input type="submit" value="保存" onclick="history.back(-1)"/ >
<input type="button" value="返回" onclick="history.back(-1)"/>
</div>
</form>
</div>5.添加演出计划
创建playmovie.ejs文件，其代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>添加剧目</span>
</div>
<div class="providerAdd">
<form action="/adindex/playmovie" method="post" >
<!--div的class 为error是验证错误，ok是验证成功-->
<div>
<label for="playName">选择演出厅：</label>
<select name="playname">
<% for(var i = 0; i < data.length; i++) { %>
<option>
<%= data[i].playname %>
</option>
<% } %>
</select>
</div>
<div>
<label >选择电影：</label>
<select name="moviename">
<% for(var i = 0; i < data1.length; i++) { %>
<option>
<%= data1[i].moviename %>
</option>
<% } %>
</select>
</div>
<div>
<label >影片播放时间：</label>
<input type="data" name="time" />
</div>
<div>
<label >影片播放具体时间：</label>
<input type="data" name="playtime" />
</div>
<div>
<label >票价：</label>
<input type="int" name="price" />
</div>
<div class="providerAddBtn">
<!--<a href="#">保存</a>-->
<!--<a href="userList.html">返回</a>-->
<input type="submit" value="保存" onclick="history.back(-1)"/ >
<input type="button" value="返回" onclick="history.back(-1)"/>
</div>
</form>
</div>6.演出计划查询
创建played.ejs文件，代码如下：
<%- include adheader.ejs %>
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>演出计划</span>
</div>
<table class="providerTable" cellpadding="0" cellspacing="0">
<tr class="firstTr">
<th width="20%">演出厅名称</th>
<th width="20%">电影名称</th>
<th width="20%">播放时间</th>
<th width="20%">票价</th>
<th width="40%">操作</th>
</tr>
<% for(var i = 0; i < data.length; i++) { %>
<tr>
<td class="td">
<%= data[i].playname %>
</td>
<td>
<%= data[i].moviename %>
</td>
<td class="pt">
<%= data[i].playtime %>
</td>
<td>
<%= data[i].price %>
</td>
<td>
<button class="btn btn-primary subt" onclick="return tuipiao(this)" id=<%= i %>>删除</button>
</td>
</tr>
<% } %>
</table>
</div>
<script type="text/javascript">
function tuipiao(obj)
{
var i=obj.id;
var td=document.getElementsByClassName('td')[i].innerText;
var pt=document.getElementsByClassName('pt')[i].innerText;
$.ajax({
url: '/adindex/played',
dataType: 'json',
data:{td,pt},
type:'post',
success: function(data){
alert("删除成功！");
window.location.href=window.location.href;
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
}
</script>这里的ajax实现了演出计划的删除。
3.影院相关页面
影院相关页面一共有三层：
1.首页
2.电影信息页面
3.购票页面
首先创建header.ejs文件，在这三个页面里，可以直接引入，避免了代码过长。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>茅坡村电影网站</title>
<link href="/stylesheets/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link rel="stylesheet" href="/stylesheets/menu.css" />
<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Show Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<!-- start menu -->
<link href="/stylesheets/megamenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="/javascripts/megamenu.js"></script>
<script type="text/javascript" src="/javascripts/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="/stylesheets/font-awesome.min.css" />
<script src="/javascripts/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true // 100% fit in a container
});
});
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="/javascripts/move-top.js"></script>
<script type="text/javascript" src="/javascripts/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
<!---- start-smoth-scrolling---->
</head>
<body>
<!-- header-section-starts -->
<div class="header-top-strip">
<div class="container">
<div class="header-top-left">
<h3 id="name"><%= name %></h3>
</div>
<div class="header-top-right">
<!-- /.modal -->
<!-- Button trigger modal -->
<!---//pop-up-box---->
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#2" id="d1">我的订单</button>
<button class="btn btn-primary" data-toggle="modal" data-target="<%= data%>"><%= test%></button>
</div>
<div class="modal fade" id="2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div id="test">
<table id="ta" class="providerTable" cellpadding="0" cellspacing="0" style="width: 100%;border: 1px solid #ccc;">
<tr class="firstTr">
<th width="20%">电影名称</th>
<th width="20%">演出厅</th>
<th width="20%">演出时间</th>
<th width="20%">座位</th>
<th width="5%">价格</th>
<th width="15%">操作</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#d1").click(function(){
$.ajax({
url: '/users',
dataType: 'json',
type:'get',
success: function(data){
$('#ta tr:gt(0)').remove();
item1 = data;
var item='';
for(var i=0;i<item1.length;i++)
{
item+= '<tr><td>' + item1[i].moviename + '</td><td>' + item1[i].playname + '</td><td>' + item1[i].playtime + '</td>'
+ '<td>' + item1[i].seatrow+"排"+ item1[i].seatcol + "座" +'</td><td>' + item1[i].price + '</td><td><button class="btn btn-primary subt" onclick="return tuipiao(this)" id="'+i+'">退票</button></td></tr>';
}
console.log(item);
$('#ta').append(item);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
});
</script>
<script type="text/javascript">
function tuipiao(obj)
{
// alert(obj.id);
// console.log(item1);
var i=obj.id;
data=item1[i].seatid;
console.log(data);
$.ajax({
url: '/',
dataType: 'json',
data:{data},
type:'post',
success: function(data){
alert("退票成功！");
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
}
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">请先登录</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#Login" data-toggle="tab">登录</a></li>
<li><a href="#Registration" data-toggle="tab">注册</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal" action="/users" method="post">
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">
电话</label>
<div class="col-sm-10">
<input type="phone" class="form-control" placeholder="请输入电话号码" / name="phone">
</div>
</div>
<div class="form-group">
<label for="Password" class="col-sm-2 control-label">
密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="请输入密码" / name="password">
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm" name="old" id="sub1">
确认</button>
<a href="javascript:;">忘记密码?</a>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal" action="/user" method="post">
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
手机号码</label>
<div class="col-sm-10">
<input type="mobile" class="form-control" name="phone" placeholder="Mobile" / id="phone">
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
姓名</label>
<div class="col-sm-10">
<input type="mobile" class="form-control" name="name" placeholder="Mobile" / id="name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password" / id="password">
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm" name="new">
确认注册</button>
<button type="button" class="btn btn-default btn-sm">
取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="main-content">
<div class="header">
<div class="logo">
<a href="index.html"><h1>影院电影</h1></a>
</div>
<div class="search">
<div class="search2">
<form>
<i class="fa fa-search"></i>
<input type="text" value="查找电影" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search for a movie, play, event, sport or more';}"/>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="bootstrap_container">
<nav class="navbar navbar-default w3_megamenu" role="navigation">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html" class="navbar-brand"><i class="fa fa-home"></i></a>
</div><!-- end navbar-header -->
<div id="defaultmenu" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">首页</a></li>
<!-- Mega Menu -->
<li class="dropdown w3_megamenu-fw"><a href="movies.html" data-toggle="dropdown" class="dropdown-toggle">影片</a>
<!-- end col-4 -->
<li class="dropdown w3_megamenu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">影院</a>
<!-- end nav navbar-nav -->
<!-- end nav navbar-nav navbar-right -->
<!-- end #navbar-collapse-1 -->
</nav><!-- end navbar navbar-default w3_megamenu -->
</div><!-- end container -->
<!-- AddThis Smart Layers END -->
创建footer.ejs文件，代码如下：
<div class="footer">
<div class="col-md-3 footer-left">
<div class="f-mov-list">
<h4>选座购票流程</h4>
<ul>
<li><a href="now-showing.html">选择影片和场次</a></li>
<li><a href="comming-soon.html">选择中意的座位</a></li>
<li><a href="celebrities.html">支付并收到取票短信</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 footer-left">
<div class="f-mov-list">
<h4>取票流程</h4>
<ul>
<li><a href="#">收到取票短信</a></li>
<li><a href="#">影院自助取票</a></li>
<li><a href="#">短信重发方式</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 footer-left">
<div class="f-mov-list">
<h4>常见问题</h4>
<ul>
<li><a href="donate.html">是否支持退票</a></li>
<li><a href="vochers.html">填错手机号怎么办</a></li>
<li><a href="gift-cards.html">更多问题</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3 footer-left">
<div class="f-mov-list">
<h4>协议规范</h4>
<ul>
<li><a href="movies.html">用户服务协议</a></li>
<li><a href="movies.html">食品管理规范</a></li>
<li><a href="movies.html">隐私权政策</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>1.影院首页
创建index.ejs文件，代码如下：
<%- include header.ejs %>
<div class="main-banner">
<div class="banner col-md-8">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/21克拉.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;">
</li>
<li>
<img src="images/2.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;">
</li>
<li>
<img src="images/3.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;">
</li>
<li>
<img src="images/4.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;">
</li>
</ul>
</div>
</section>
<!-- FlexSlider -->
<script defer src="/javascripts/jquery.flexslider.js"></script>
<link rel="stylesheet" href="/stylesheets/flexslider.css" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</div>
<div class="col-md-4 banner-right">
<h4>票房周冠军</h4>
<div class="grid_3 grid_5">
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<div id="myTabContent" class="tab-content">
<table class="table table-hover">
<tbody>
<td>1</td>
<td><a href=>复仇者联盟3</a></td>
</tbody>
<tbody>
<td>2</td>
<td><a href=>战狼2</a></td>
</tbody>
<tbody>
<td>3</td>
<td><a href=>后来的我们</a></td>
</tbody>
<tbody>
<td>4</td>
<td><a href=>寂静之地</a></td>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="review-slider">
<ul id="flexiselDemo1">
<% for(var i=0 ;i<data1.length;i++) { %>
<li>
<a href="/movie"><img src = <%=data1[i].movieimage %> alt=""/ style="width: 198px;height: 231px;"></a>
<div class="slide-title"><h4 class="moviename"><%= data1[i].moviename %></h4></div>
<div class="date-city">
<h5><%= data1[i].movielenth%></h5>
<div class="buy-tickets">
<a href="/movie/id=<%= data1[i].moviename%>" class="aint" >订票</a>
</div>
</div>
</li>
<% } %>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
visibleItems: 5,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: false,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 2
},
landscape: {
changePoint:640,
visibleItems: 3
},
tablet: {
changePoint:800,
visibleItems: 4
}
}
});
});
</script>
<script type="text/javascript" src="/javascripts/jquery.flexisel.js"></script>
<div class="footer-top-grid">
<div class="list-of-movies col-md-8">
<div class="tabs">
<div class="sap_tabs">
<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
<ul class="resp-tabs-list">
<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>正在上映</span></li>
<div class="clearfix"></div>
</ul>
<div class="resp-tabs-container">
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
<ul class="tab_img">
<% for(var i=0;i<data1.length;i++) { %>
<li>
<div class="view view-first">
<a href="movie-select-show.html">
<img src=<%=data1[i].movieimage %> class="img-responsive" alt=""/ style="width: 250.8px;height: 263.01px"></a>
<div class="info1"> </div>
<div class="mask">
</div>
<div class="tab_desc">
<a href="/movie/id=<%= data1[i].moviename%>">买票</a>
<div class="percentage-w-t-s">
<h5>97</h5>
<p>% <br> 好评率</p>
<div class="clearfix"></div>
</div>
</div>
</div>
</li>
<% } %>
</ul>
</div>
<div class="clearfix"></div>
</ul>
</div>
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
<ul class="tab_img">
<li>
<div class="view view-first">
<a href="/movie"> <img src="images/pic-6.jpg" class="img-responsive" alt=""/ style="width: 214.31px;height: 263.01"></a>
<div class="mask">
<div class="info1"> </div>
</div>
<div class="tab_desc">
<a href="movie-select-show.html">订票</a>
</div>
</div>
</li>
<li>
<div class="view view-first">
<a href="/movie"> <img src="images/pic-1.jpg" class="img-responsive" alt=""/ style="width: 214.31px;height: 263.01"></a>
<div class="mask">
<div class="info1"> </div>
</div>
<div class="tab_desc">
<a href="movie-select-show.html">订票</a>
</div>
</div>
</li>
<li>
<div class="view view-first">
<a href="/movie"> <img src="images/pic-9.jpg" class="img-responsive" alt=""/ style="width: 214.31px;height: 263.01"></a>
<div class="mask">
<div class="info1"> </div>
</div>
<div class="tab_desc">
<a href="movie-select-show.html">订票</a>
</div>
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div></div>
</div>
<%- include footer.ejs %>2.电影信息页面
创建movie.ejs文件，代码如下：
<%- include header.ejs %>
<div class="now-showing-list">
<div class="col-md-4 movies-by-category movie-booking">
<h5><%= data1[0].moviename %></h5>
<div class="movie-ticket-book">
<div class="clearfix"></div>
<img src =../<%= data1[0].movieimage %> alt="" style="width: 250.8px;height: 263.01px"/>
<div class="bahubali-details">
<h4>上映时间:</h4>
<p><%= data1[0].movietime %></p>
<h4>片长:</h4>
<p> <%= data1[0].movielenth %> </p>
<h4>类型:</h4>
<p><%= data1[0].moviestyle %></p>
<h4>电影简介</h4>
<p><%= data1[0].movieintroduction %></p>
</div>
</div>
</div>
<div class="col-md-8 movies-dates">
<% m.forEach(function (item, key, mapObj) { %>
<div class="movie-date-selection">
<ul>
<li class="location">
<a href="/posts"><i class="fa fa-map-marker"><%= key %></i></a>
</li>
<% for(var i=0;i<item.length;i++){ %>
<li class="time">
<a href="/posts/moviename=<%= data1[0].moviename%>/key=<%= key%>/item=<%= item[i]%>"> <%= item[i] %> </a>
</li>
<% } %>
</ul>
</div>
<% }); %>
</div>
<div class="clearfix"></div>
</div>
</div>
<%- include footer.ejs %>3.选座
创建posts.ejs文件，代码如下：
<%- include header.ejs %>
<div class="e-payment-section">
<div class="col-md-8 payment-left">
<div id="main">
<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-278.html">请选座：</a></h2>
<div class="demo">
<div id="seat-map">
<div class="front">屏幕</div>
</div>
<div class="booking-details">
<p>影片：<span><%= moviename %></span></p>
<p>时间：<span><%= playtime %></span></p>
<p style="display: none" id="play"><%= playid%></p>
<p>座位：</p>
<ul id="selected-seats"></ul>
<p>票数：<span id="counter">0</span></p>
<p>总计：<b>￥<span id="total">0</span></b></p>
<button class="checkout-button " id="submit">确定购买</button>
<script type="text/javascript">
$("#submit").click(function(){
var playid = $("#play").text();
var selected = $("#selected-seats li").text();
console.log(selected);
if(confirm("你确定要购买?")){
$.ajax({
data: {selected:selected,playid:playid},
url: '/posts/:moviename/:key/:item',
dataType: 'json',
type:'post',
success: function(data){
alert("购买成功！");
window.location.href=window.location.href;
},
error: function(jqXHR, textStatus, errorThrown){
alert("失败！");
}
});
}
});
</script>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
<ul style="display: none">
<% for(var i=0;i<data1.length;i++) {%>
<li class="li"><%= data1[i].seatrow%></li>
<li class="li1"><%= data1[i].seatcol%></li>
<% } %>
</ul>
</div>
<br/>
</div>
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.seat-charts.min.js"></script>
<script type="text/javascript">
var price = <%= price %>; //票价
var col = <%= play[0].playcol %>
var row = <%= play[0].playrow %>;
var li = document.getElementsByClassName('li');
var li1 = document.getElementsByClassName('li1');
var seal=[];
for(var i=0;i<li.length;i++)
{
var c="";
c+=li[i].innerHTML;
c+="_";
c+=li1[i].innerHTML;
seal[i]=c;
}
console.log(seal);
var s = [];
var str = "";
for(var i=0;i<row;i++)
{
str+="a";
}
for(var j=0;j<col;j++)
{
s[j]=str;
}
$(document).ready(function() {
var $cart = $('#selected-seats'), //座位区
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
var sc = $('#seat-map').seatCharts({
map: s,
naming : {
top : false,
getLabel : function (character, row, column) {
return column;
}
},
legend : { //定义图例
node : $('#legend'),
items : [
[ 'a', 'available', '可选座' ],
[ 'a', 'unavailable', '已售出']
]
},
click: function () { //点击事件
if (this.status() == 'available') { //可选座
$('<li id="li">'+(this.settings.row+1)+' 排 '+this.settings.label+' 座 </li>')
.attr('id', 'cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length-1);
//更新总计
$total.text(recalculateTotal(sc)-price);
//删除已预订座位
$('#cart-item-'+this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//已售出的座位
sc.get(seal).status('unavailable');
});
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
</script>
<div class="clearfix"> </div>
</div>
<script>
$(document).ready(function() {
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").hide();
$(".tabs-menu a").click(function(event){
event.preventDefault();
var tab=$(this).attr("href");
$(".tab-grid").not(tab).css("display","none");
$(tab).fadeIn("slow");
});
});
</script>
<div class="clearfix"></div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="/stylesheets/seat.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<%- include footer.ejs %>在选座时，我用jquery的seat插件，可以在网上去看看源码。
用字符串动态实现了座位的数量。如果没有看懂如何动态实现座位，可以在底下留言。
如果想要源码的话，也可以找我。