• SpringMVC4.1.2 Tickets电影购票网站实现


    SpringMVC4.1.2 Tickets电影购票网站实现#

    先扯些有的没的

    由于这学期的系统分析需要做一个网站,但之前唯一有过的做网站的经历也只是在分布式计算中随便做了一个期末项目,(使用的spring-root做的)而且做的糊里糊涂,所以这学期的项目决定边学边做,学下springMVC并实现一个电影购票网站,由于没有前端工程师~——~,所以前端的一些东西也只能随便搞搞了,毕竟Angular这样的框架学起来还是需要一些时间成本的。

    准备阶段

    首先使用eclipse创建一个项目,第一次还是在网上找了好多博客来帮助创建的,具体创建的博客可以参见这一篇,可以跟着步骤一步一步来创建直到看到一个Hello,world。可是这样创建完了之后会看到我们的jsp有一个warn:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 这个警告解决方法参见这个博客之后为了了解整个项目代码的大概含义参考了一些博客如下:

    1. 史上最全的SpringMVC学习笔记
    2. springMVC4(3)方法入参灵活绑定

    接下来做一个项目重要的当然是版本管理啦,当然要学会使用git啦,可是直接在命令行下使用git还是比较心慌,想想eclipse这样一个集成工具应该是有git的集成吧,就百度了一下还真的有,具体如何使用参见这篇博客eclipse中使用git这样就可以在做出一定成果后及时更新的我的github上,附上一张这个项目的提交记录,图片带有github项目地址

    顺便推荐一下一个截屏软甲FastStone,截屏真的强,可以长截网页

    这样代码就可以开始码了,不过还有一些要考虑的,前端不能就直接写原生的HTML,js, css吧,那样又丑又麻烦。所以我稍微看了下angular是怎么做的,偶尔瞄到了一个bootstrap的好东西,在网上找到了很好的教程BootStrap菜鸟教程,这个教程很详细,我之后的前端布局之类的都是按照这个教程来写的,而且另一个优势是我前端打算使用jquery,而这个bootstrap正好是需要这个东西的,所以两全其美。在项目里包含这三个文件就可以了:

    有了这个前端就可以基本有着落了,后端需要搞定的一个问题是数据库的问题,我打算使用mysql数据库,之前用jdbc搞过所以这次打算继续搞下去,但还是搞了一段时间,我犯了一个傻叉的错误,我电脑里装了两个mysql,但我启动的是一个适用版的mysql alpha,产生很多奇奇怪怪的问题,不过删掉这个可恶的alpha后情况就顺利解决了。首先我们要装mysql的驱动这里我的驱动的依赖代码是:

    
    	<groupId>mysql</groupId>
    	<artifactId>mysql-connector-java</artifactId>  
    	<version>5.1.37</version>
    

    记得版本过高过低都会有些问题,版本太高会有lowercase的问题,太低对mysql里面的utf8mb4格式不支持,这两个问题的解决网上都说是版本问题,所以我就用我原来那个没有出错的版本5.1.37了,完美连接数据库,连接数据库的代码:

    这样可以连接数据库了,以后的内容无非就是写bean类,dao类来进行数据库的增删改查操作,然后controller调用dao的函数操作数据库就好了。

    第一阶段

    接下来就开始编写代码了,首先先做了前端的index和login, regist, userinfo, movieinfo,找了组员帮我设计了下界面然后开始照着bootstrap教程开搞。关于登录注册的逻辑部分,也就是关于js的部分暂时先搁置了,暂时使用假数据来做页面,磨磨蹭蹭几天这个阶段算是结束了。总结下这阶段的几个收获:

    • 做的过程中有个一直模糊的概念session和cookie有点明白了,根据这篇博客的内容,加上自己做了点实验,用chrome开发工具查看了自己登录自己网站的cookie内容和网站上的sessionId,是一致的。session是服务器的概念,cookie是客户端的概念cookie存储一个JSESSIONID,当向服务器发送请求时候,服务器就可以通过请求中的cookie的这个ID来判断是哪个session的请求,也就可以把识别是哪个用户发出的请求。
    • 另一个是服务器如何跳转页面,在用ReqeustMapping注解的方法返回的字符串代表的是用哪个jsp来生成界面,而如果返回的字符串是"redirect:login"这样的的话,就代表重定向到login.jsp生成的界面。
    • 还有就是JSP如何方便的根据model传来的值的不同来生成不同的界面,一个例子就是我们的主页面当没有登录时是显示登录注册的,如果登录后右上角是Welcome 名字的,如下:



      这个就需要用到一个叫做JSTL标签的东西,这是JSP的一个扩展标签,可以方便的使用JSP的一些功能,推荐一个好的教程JSP 标准标签库(JSTL),使用里面的<c:choose><c:when><c:otherwise>标签就可以实现这个简单的功能,还有JSP页面的数据是可以在Controller的函数中用Model来传递的,在JSP使用EL表达式就可以使用Model里的变量,比如我在controller里model添加一个变量

      我在JSP就可以这样使用这个变量
      还要记得在使用这个c开头的标签时,JSP的开头要加上
      <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
      有关JSP的一些内容也可以根据这个教程的其他板块来学习
    • 关于css,js等资源的访问,一开始是访问不了的,要在dispatcher servlet中加上,这样对这些资源的访问才不会被拦截
    • eclipse一开始对写jsp,java这些编辑器没有自动补全,很是难受,于是找了一篇教程,这样就可以编辑器自动补全,方便很多,虽然还是没有AndroidStudio,VS补全的更方便,不过好了很多。
    • 找了组员设计了下网站数据库的类图,用PowerDesiger来设计,根据类图来设计后台数据库方便很多,在增删改查的函数设计中,关于ResultSet的使用还是废了一番功夫,详情参见这个博客,由于ResultSet第一次的位置是第一个查询到的项之前,所以即使查询只有一个项,也要while(resultset.next())这样,才可以获得查询结果,结果通过rs(resultset)的get×××方法,参数是建表时的列名,就可以获得相应数据,然后存储到一个对象中,返回就可以了,如果是得到一堆数据,还可以返回一个List。
    • 关于电影的图片,预告视频资源,一开始是想设定一个类的属性给出目录的,但是后来一想movie的Id不就是一个很好的区分么,所以固定了一下格式,用id_big.jpg代表横版海报,id.jpg代表竖版海报,id.mp4代表预告片,这样就可以了。
    • 这个阶段唯一涉及到JS的就是info界面的更改姓名了,更改头像暂时搁置了,我使用Jquery的post方法来向服务器post我要更改的姓名。当然前端在改名时一些阶段的变化是要有的,但关键还是post数据!



      然后在服务端,对数据库进行更改原来名字那项的名字的操作就好了。

    电影评论

    这样第一个阶段就可以了,休息了一天后开始进行电影页面的评论,评论我们使用一个表来存储用户,电影和评论内容,这样每个电影页面查找对应电影的评论就可以了。评论界面用<c:foreach>来显示后台每一个数据:


    ,而增加和删除如何向后台传数据成了一个问题,传完如何解析,返回的数据如何及时更新到页面上,这些问题老实说我最近才解决,首先,我js中用post,传递一个json数据,{ "comment": "", "deleteId": commentId }
    这个数据在后台来判断哪个属性有就是哪个功能,然而后台需要一个能处理json数据的东西,于是参考这篇博客添加了一个依赖,后台开始解析json数据,操作数据库,返回一个json数据删除功能好做,只需要调用dao就好了:

    但是添加涉及到一个问题,刚添加的项如何获得那个自增的ID,这里我采用一个Mysql语句来获得:

    用这个就可以获得最新添加的评论的Id,返回的数据在js里在显示到页面上
    这样评论功能就算基本完事,(不过隐约还是感觉有点问题,万一多个用户同时评论,这个获取自增ID的方法还能奏效么)

    订票,选座,订单功能

    这个地方一开始在数据库的设计上遇到了麻烦,因为如果按照正常电影网站上的做法,每个电影院有不同的大厅,每个大厅还有不同的座位布局,,如果把放映厅单独拿出来,不是每种放映厅的布局都一样的,所以就商量了很久,最后决定先简化设计吧,因为实在不知道那些电影网站是怎么设计这块的数据库的,所以直接将hall设为schedule的一个属性,然后固定座位的分布,这样就很方便了,首先实现Cinema,Schedule,的设计,解决排片显示的问题,然后座位直接存选过的座位,这样数据量只有在电影上映排片一段时间后面会多一些,不用存储那些无用的数据。
    关于电影网站选座的页面很是好奇是怎么实现的,于是随便找了个网站看了下选座页面的布局,原来只是一个一个<li>来实现的,于是我的选座的页面就这样设计了:

    ,之后又进一步简化了下,直接限制一次只能选一个座,订单上座位就一个,这样就很简化了,那些多座位的以后在进一步迭代的时候在优化吧。

    管理员功能

    做完前面的事情后,有一个严重的问题还没有解决,就是后台的那些排片,电影,影院数据都是自己操作mysql添加的,即没有管理员页面,所以我接下来就开始做管理员页面了,做的过程中又多了一些收获:

    • HTTP的数据上传不止有GET,POST还有PUT和DELETE,使用方法可以参见这个博客
    • 在电影管理时涉及到文件上传,这个需要两个依赖,参见这个博客上传的文件使用MultipartFile来获取,然后用这个request.getSession().getServletContext().getRealPath("/") + "images/movie/";来获取要存储的位置,之后使用MultipartFile的transferTo方法来存到目录下的文件!



    表单验证

    这个工作交给了我的伙伴来做,但是她只是给了一个静态验证的,而且没有考虑到我使用的Jquery,而是自己用了一个库,而那个库使用的符号和我的jquery符号还冲突了,都是(符号,所以我看过理解了之后哦,改成的)$来改变她的库。

    关于github上团队协作

    由于之前一直是自己写代码,写一部分提交一部分,没有考虑如何团队协作来进行github的提交,关键的是如何让我的伙伴提交文件到我的github仓库中,直接push的话会有错误,后来慢慢明白,别人要想上传文件到我的仓库需要先fork我的仓库,通俗点说就是先将我的项目弄到他自己的仓库(或本地)中,然后在尽心添加文件,之后在给我发一个pullRequest,我在进行确认是否可以merge,才能完成一次操作。

  • 相关阅读:
    在winfrom下利用c#代码,实现kindEditor的JavaScript方法:editor.html(),实现上报窗体的自动提交。
    Alwayson辅助副本上如何创建同步账号
    AD重建DNS
    SQL 删除用户的时候,产生“数据库主体在该数据库中拥有架构,无法删除”的解决办法
    FSLOGIX 安装记录,组策略记录
    使用FSLOGIX 部署配置文件漫游,首次生成VHD ,注销后无法登录。The user profile failed to attach please contact support
    定制ESXi版本下载
    SQL Server 数据库添加AlwaysOn高可用自定义登陆用户的方法
    RabbitMQ删除队列不重启消费者,动态重启
    获取某一年的某一周的周一//周日的日期
  • 原文地址:https://www.cnblogs.com/eggplant-is-me/p/6825175.html
Copyright © 2020-2023  润新知