java springboot+mybatis电影售票网站管理系统前台+后台设计和实现

置顶 java李杨勇

已于 2023-10-27 17:19:08 修改

阅读量2w

点赞数 173

分类专栏： Java潜力新星计划 Java精品毕设实战案例文章标签：新星计划 java项目实战

于 2021-06-07 07:46:05 首次发布

本文链接：https://blog.csdn.net/weixin_39709134/article/details/117640297

版权

Java精品毕设实战案例同时被 2 个专栏收录

1191 篇文章 6700 订阅

订阅专栏

Java潜力新星计划

12 篇文章 16 订阅

订阅专栏

博主介绍：✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌

🍅文末获取源码联系🍅

👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟

2022-2024年最全的计算机软件毕业设计选题大全：1000个热门选题推荐✅

Java项目精品实战案例《100套》

Java微信小程序项目实战《100套》

感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人

主要技术框架：spring、 springmvc、 springboot、mybatis 、 jquery 、templates模板、bootstarp.js tomcat、maven、拦截器等

主要功能实现：

前端主要功能实现：

影院首页、轮播图展示、电影查看、热门影院、热门电影、热门资讯等、影院查看、电影资讯查看、电影信息详情查看、查看场次、电影座位选座购票、电影评论、订单支付、查看订单信息、帮助说明、个人中心、我的影评、我的账户余额等

后台主要功能实现：

后台主页树状图大数据信息查看、对影院个数据进行统计、主要统计有、入住影院、场次、注册用户、订单信息、放映场次、充值、票房等数据统计展示。

具体业务模块为：

系统设置、菜单管理、用户管理、角色管理、日志管理、地域信息管理、电影管理、评价管理、影厅管理、拍片管理、资讯管理、资讯分类管理、用户管理、订单管理、支付管理等

主要截图展示：

前台影院首页：

项目启动进入电影主页、主要查看电影轮播信息以及热门电影、热门影院和资讯等信息、用户可以登录注册、登录后可以查看个人信息、订单、以及帮助中心等具体功能操作。

电影信息：

点击电影信息查看正在热映或即将上映的电影信息、可以查看列表、点击可以查看详情信息

电影详情：

电影详情模块主要查看电影详情信息、以及在线选票功能或查看评价电影信息

电影评价：

用户可以查看具体选座信息以及对电影进行评价

选座功能：

用户点击选座购票进入购票页面、选择场次、选座、支付、提交订单

选座主要前端代码设计：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=990, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <title>猫眼电影票网_电影在线选座购票平台</title>
    <meta name="keywords" content="猫眼电影票,猫眼电影票网,猫眼电影院,猫眼影票,猫眼电影,电影票，电影"/>
    <meta name="description" content="猫眼电影票网是猫眼最大的电影票在线选座平台，同时猫眼电影票网还提供电影排期，影院信息查询、猫眼本土电影行业资讯等服务。看电影，来猫眼电影票选座"/>
    <#include "../common/head-css.ftl"/>
    <link href="/home/css/jquery.jPages.css" rel="stylesheet" />
</head>
<body>
	<#include "../common/header.ftl"/> 
<div id="body" class="main">
<div class="wrapper-film-chooseseat">
    <div class="tip-nav-choosseeat">
        <ul>
            <li class="wd1">1.选择影片场次</li>
            <li class="wd2 act">2.在线选座</li>
            <li class="wd3">3.确认订单支付</li>
            <li class="wd4">4.影院取票观影</li>
        </ul>
    </div>
    <div class="fiml-chooseseat fn-clear">
        <div class="film-choose-seat">
            <div class="bg_screen clearfix"><span>荧幕</span></div>
            <div class="seat-description fn-acenter">
                <p class="fn-clear">
                    <img src="/home/images/seat_able.png" /><span>可选</span>
                    <img class="pl10" src="/home/images/seat_seled.png" /><span>已选</span>
                    <img class="pl10" src="/home/images/seat_unable.png" /><span>已售</span>
                    <img class="pl10" src="/home/images/seat_love.png" />
                    <img src="/home/images/seat_love.png" /><span>情侣座</span>
                    </p>
            </div>
            <div class="box-seat-des">
                <div id="seatcontainer">
                	<table id="seattable" class="seatdt">
                		<tbody>
                			<#list cinemaHallSeatList as cinemaHallSeat>
		                      <#if cinemaHallSeat.x == 1>
		                      <tr>
		                      </#if>
                				<td class="show-seat" style="width:38px;position:relative;cursor:pointer;padding-bottom:5px;" seatcol="${cinemaHallSeat.x}" seatrow="${cinemaHallSeat.y}" seatno="${cinemaHallSeat.id}" status="${cinemaHallSeat.status}" type="${cinemaHallSeat.type}" onclick="seatClick(this)">
                					<div class="seatno" style="width:38px;top:6px;"><#if cinemaHallSeat.status == 1 && cinemaHallSeat.type == 1>${cinemaHallSeat.x}</#if></div>
                					<#if cinemaHallSeat.status == 1>
                					<#if cinemaHallSeat.type == 2>
                					<img style="z-index:120;" width="38px" height="30px" src="/home/images/seat_love.png">
                					<#else>
                					<img style="z-index:120;" width="38px" height="30px" src="/home/images/seat_able.png">
                					</#if>
                					<#else>
                					<img style="z-index:120;" width="38px" height="30px" src="/home/images/seat_unable.png">
                					</#if>
                				</td>
                			  <#if cinemaHallSeat.x == cinemaHallSession.cinemaHall.maxX>
		                      </tr>
		                      </#if>
		                    </#list>
                		</tbody>
                	</table>
                </div>
            </div>
            <table id="indextable" class="seatdt">
            	<tbody>
            		<#list 1..cinemaHallSession.cinemaHall.maxY as y>
            		<tr style="height:35px;">
            			<td align="center" valign="middle">${y}</td>
            		</tr>
            		</#list>
            	</tbody>
            </table>
        </div>
        <div class="box-film-info">
            <div class="film-info">
                <h2>${cinemaHallSession.movie.name}</h2>
                <p>片长：${cinemaHallSession.movie.time}分钟</p>
                <p>语言：${cinemaHallSession.movie.language.getName()}</p>
                <span class="pic"><img src="/photo/view?filename=${cinemaHallSession.movie.mainPic}" width="72" height="100" /></span>
            </div>
            <div class="film-detail">
                <p><span class="cor999">影院：</span><span>${cinemaHallSession.cinema.name}</span></p>
                <p><span class="cor999">影厅：</span><span>${cinemaHallSession.cinemaHall.name}</span></p>
                <p><span class="cor999">票价：</span><span>${cinemaHallSession.newPrice} 元/张</span></p>
                <div class="screen-info fn-clear">
                    <span class="cor999">场次：</span>
                    <span class="red">${cinemaHallSession.startTime}</span>
                    <span class="change-showtime"></span>
                    <div class="box-screen-today">
                    </div>
                </div>
                <div class="box-seatchoose">
                    <div id="seatchoose" class="fn-clear">
                        <div id="lblmsg" class="cor999">请选择座位</div>
                    </div>
                    <p class="tip">已选择<em>0</em>个座位，再次点击座位可以取消</p>
                    <span class="tg cor999">座位：</span>
                </div>
                
            </div>
            <div class="choose-result">
                <p class="total"><span class="cor999">总计：</span><strong>0</strong><em class="fn-bold">元</em></p>
                <p><a class="btn" id="btnconfirm" href="javascript:void(0)">立即购票</a></p>
            </div>
        </div>
    </div>
    <div class="tip-description-choosseeat">
        <h3><span class="titb">使用说明</span></h3>
        <p>
            1.选择你要预定的座位，重复点击取消所选座位。<br />
            2.每笔订单最多可选购4张电影票，情侣座不单卖。<br />
            3.选座时，请尽量选择相邻座位，请不要留下单个座位。<br />
            4.下单后请于15分钟内完成支付，超时系统将不保留座位。<br />
            5.电影票售出后暂不支持退换。<br />
            6.购票过程产生的各项咨询，请拨打客户电话400-660-5335。
        </p>
    </div>
</div>
</div>
<#include "../common/footer-js.ftl"/> 
<script src="/home/js/jquery.jPages.min.js" type="text/javascript"></script>
<#include "../common/footer.ftl"/> 
<#include "../common/login-dialog.ftl"/>
<script type="text/javascript">
$(document).ready(function(){
	 //提交订单
	 $("#btnconfirm").click(function(){
	 	if(selectedSeats == null || selectedSeats == 'undefined'){
	 		alert('请至少选择一个座位!');
	 		return;
	 	}
	 	var data = {};
	 	data.cinema_hall_session_id = ${cinemaHallSession.id};
	 	data.cinema_hall_seat_ids = JSON.stringify(selectedSeats);
	 	ajaxRequest('/home/order/generate_order','post',data,function(rst){
	 		//订单提交成功，跳转到支付页面
	 		window.location.href = '/home/order/order_pay?order_sn=' + rst.data;
	 	});
	 });
	 //遍历所有的座位，根据订单中的值改变其状态
	 $(".show-seat").each(function(i,e){
	 	if(orderSeats.includes(parseInt($(e).attr('seatno')))){
	 		$(e).attr('status',0);
	 		$(e).children("img").attr('src','/home/images/seat_unable.png');
	 		$(e).children(".seatno").text('');
	 	}
	 });
});
var NormalPrice = parseFloat("${cinemaHallSession.newPrice}");
var selectedSeatMax = ${selectedSeatMax};
var selectedSeats;
var orderSeats = ${orderSeatList!"[]"};
function seatClick(e){
	if($(e).attr('status') == 1){
		if($(e).attr('selected') != 'selected'){
			if($('td[selected="selected"]').length >= selectedSeatMax){
				alert('最多可选择' + selectedSeatMax + '个座位!')
				return;
			}
			$(e).children("img").attr('src','/home/images/seat_seled.png');
			$(e).attr('selected','selected');
		}else{
			if($(e).attr('type') == '2'){
				$(e).children("img").attr('src','/home/images/seat_love.png');
				$(e).removeAttr('selected');
			}else{
				$(e).children("img").attr('src','/home/images/seat_able.png');
				$(e).removeAttr('selected');
			}
		}
		setSeat();
	}
}
function setSeat() {
    var html = '';
    selectedSeats = new Array();
    $('td[selected="selected"]').each(function(i,e){
	    var seatno = $(e).attr('seatno');
	    var seatrow = $(e).attr('seatrow');
	    var seatcol = $(e).attr('seatcol');
	    html += '<div id="' + seatno + '" class="seatinfo">' + seatrow + "排" + seatcol + "座" + '</div>';
    	selectedSeats.push({id:seatno});
    });
    $("#seatchoose div.seatinfo").remove();
    $("#seatchoose").append(html);
    var selectedNum = $('td[selected="selected"]').length;
    if(selectedNum <= 0){
    	$("#lblmsg").show();
    }else{
    	$("#lblmsg").hide();
    }
    $(".choose-result .total strong").text(NormalPrice * selectedNum);
    $(".tip em").text(selectedNum);
}
</script>
</body>
</html>

提交订单：

提交订单模拟支付完成购票操作

影片订单详情/取票：

在我的个人中心查看购票信息、订单详情以及我的评论和余额管理等具体操作、这个整个流程是非常完善的

影院信息：

影院详情：

点击进入查看影院详情信息、电影排片、影院介绍、影院评论等功能

资讯信息：

用户可以查看一些管理员发布的资讯信息、

我的个人中心：

后台主要功能设计：

后台管理员登录页面、后台主要功能有菜单管理、用户管理、角色管理、日志管理、地域信息管理、电影管理、评价管理、影厅管理、拍片管理、资讯管理、资讯分类管理、用户管理、订单管理、支付管理等、太多了我就不一一截图了

后台系统主页：

对影院个数据进行统计、主要统计有、入住影院、场次、注册用户、订单信息、放映场次、充值、票房等数据统计展示。

系统设置:

菜单管理:

点击菜单管理查看后台菜单信息、管理员可以对菜单进行添加、修改、删除等一系列操作。

用户管理:

电影管理:

添加电影信息：

添加电影前端代码：

评价管理:

影厅管理:

排片管理:

订单管理:

数据库主要表设计：

用户表

CREATE TABLE `NewTable` (
`id`  bigint(20) NOT NULL AUTO_INCREMENT ,
`create_time`  datetime NOT NULL ,
`update_time`  datetime NOT NULL ,
`email`  varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`head_pic`  varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`mobile`  varchar(12) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`password`  varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`sex`  int(11) NULL DEFAULT NULL ,
`status`  int(11) NULL DEFAULT NULL ,
`username`  varchar(18) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`role_id`  bigint(20) NULL DEFAULT NULL ,
PRIMARY KEY (`id`),
FOREIGN KEY (`role_id`) REFERENCES `movie_role` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT,
UNIQUE INDEX `UK_btsosjytrl4hu7fnm1intcpo8` (`username`) USING BTREE ,
INDEX `FKg09b8o67eu61st68rv6nk8npj` (`role_id`) USING BTREE 
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=6
ROW_FORMAT=COMPACT
;

电影表：

CREATE TABLE `NewTable` (
`id`  bigint(20) NOT NULL AUTO_INCREMENT ,
`create_time`  datetime NOT NULL ,
`update_time`  datetime NOT NULL ,
`abs`  varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`actor`  varchar(512) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`area`  int(11) NULL DEFAULT NULL ,
`directed_by`  varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`info`  varchar(1280) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`language`  int(11) NOT NULL ,
`name`  varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`picture`  varchar(512) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`rate`  decimal(19,2) NULL DEFAULT NULL ,
`show_time`  datetime NULL DEFAULT NULL ,
`time`  int(11) NULL DEFAULT NULL ,
`total_money`  decimal(19,2) NULL DEFAULT NULL ,
`type`  varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`video`  varchar(512) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`is_show`  bit(1) NULL DEFAULT NULL ,
`rate_count`  int(11) NULL DEFAULT NULL ,
PRIMARY KEY (`id`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=18
ROW_FORMAT=COMPACT
;

获取源码：

总体来说这个项目功能相对还是比较简单优秀的、适合初学者作为课程设计和毕业设计参考

查看博主主页联系或下方微信获取联系方式~

精彩系列推荐

Java毕设项目精品实战案例《100套》

HTML5大作业实战案例《100套》

java李杨勇

关注

173
点赞
踩
330

收藏

觉得还不错? 一键收藏
打赏
162
评论
java springboot+mybatis电影售票网站管理系统前台+后台设计和实现

影院首页、轮播图展示、电影查看、热门影院、热门电影、热门资讯等、影院查看、电影资讯查看、电影信息详情查看、查看场次、电影座位选座购票、电影评论、订单支付、查看订单信息、帮助说明、个人中心、我的影评、我的账户余额等后台主页树状图大数据信息查看、对影院个数据进行统计、主要统计有、入住影院、场次、注册用户、订单信息、放映场次、充值、票房等数据统计展示。具体业务模块为：系统设置、菜单管理、用户管理、角色管理、日志管理、地域信息管理、电影管理、评价管理、影厅管理、拍片管理、资讯管理、资讯分类管理、用户管理、订单管理、
复制链接

扫一扫