用node實現ttms(票務管理系統)---上
阿新 • • 發佈：2018-11-23
用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 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