用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 querystring

3.监听端口

在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 600pxfit: 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">&times;</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">&times;</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="data:images/21克拉.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;"></li><li><img src="data:images/2.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;"></li><li><img src="data:images/3.jpg" class="img-responsive" alt="" / style="width: 666px;height: 355px;"></li><li><img src="data: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="data: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="data: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="data: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插件，可以在网上去看看源码。
用字符串动态实现了座位的数量。如果没有看懂如何动态实现座位，可以在底下留言。
如果想要源码的话，也可以找我。

用node实现ttms(票务管理系统)---上相关推荐

node.js+vue汽车站售票订票选座系统客运站票务管理系统e2j0g
语言 node.js 框架:Express 前端:Vue.js 数据库:mysql 数据库工具:Navicat 开发软件:VScode 2．深入了解nodejs后台服务器及其Vue框架开发的相关技术 ...
【数据库实验】《小型MIS的开发》— JavaFx 开发民航票务管理系统
<小型MIS的开发> 需求描述数据库建表用户表的 SQL 航班信息表的 SQL 项目演示 GitHub 网址获取源代码比较重要的知识点 JavaFx 中 spring 工厂如何创建 ...
景区ota常遇问题_景区票务管理系统能给景区带来销售业绩，你知道这些功能ma？...
昨天跟各位朋友聊到了景区票务管理系统对景区的作用,可以提升售票检票高效流畅的门票管理功能.那景区票务管理系统是如何提升景区的销售业绩呢? 回流资金传统景区售票窗口即今天推出500张票,卖完为止.景区 ...
【数据库实验】《小型MIS的开发》PyQt5 开发民航票务管理系统
PyQt5 开发民航票务管理系统为什么要拿 Python 做呢? 学习一天的知识点开发环境与项目整体结构数据库建表用户表的 SQL 航班信息表的 SQL 界面代码主界面:hello.p ...
java计算机毕业设计汽车客运站票务管理系统源代码+数据库+系统+lw文档
java计算机毕业设计汽车客运站票务管理系统源代码+数据库+系统+lw文档 java计算机毕业设计汽车客运站票务管理系统源代码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语言: ...
（附源码）node.js电商管理系统毕业设计251001
node.js电商管理系统摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,电商管理系统当然也不能排除在外.电商管理系统是以实际运 ...
计算机毕业设计Java汽车客运站票务管理系统(源码+系统+mysql数据库+lw文档）
计算机毕业设计Java汽车客运站票务管理系统(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java汽车客运站票务管理系统(源码+系统+mysql数据库+lw文档) 本源码技术栈: 项目架构 ...
JAVA计算机毕业设计汽车客运站票务管理系统（附源码、数据库）
JAVA计算机毕业设计汽车客运站票务管理系统(附源码.数据库) 目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclis ...
Java毕设项目影城票务管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目影城票务管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...

用node实现ttms(票务管理系统)---上