这篇博客详细介绍了如何在学习Node.js三个月后，利用Express框架和EJS模板构建一个电影院管理系统（TTMS）。从创建网站基本结构、安装MySQL和其他依赖包，到监听端口、连接数据库、设置路由规则，再到设计各种后台和前台页面，博主逐步展示了整个开发过程。系统包括后台登录、经理和管理员页面，以及影院相关页面，如电影列表、选座等。
用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=
最低0.47元/天 解锁文章
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
