简易电影购票APP(jquery mobile+json+web mysql)

目录

界面截图：

使用技术架构

设计总结

1.数据库设计总结

2.页面设计总计

---

     大一的暑期实习用js和css做了一个简单的图书网站，大二的暑期实习老师在基于大一学习的知识上又新增加了一些知识。

    趁着最近数据库刚实习完，记录一下暑期实习，以下是关于暑期实习的记录和心得。

注：数据是用json文件预存的，因为暑期实习教了json，这个项目也算是实战了。其中有使用高德地图来判别影院离当前位置的距离。总的来说该app只算一个半动态app。

界面截图：

运行前需要有以下操作

1. 下载node.js
2. 安装
3. npm中安装http-server     npm install http-server -g
4. 配置http-server
5. 启动http-server (启动是http-server 文件夹名)

直接加载了文件中的index.html文件

数据加载页面和主页

我的页面及其子页面

 

影片详情

.购票和选座

购票详情界面

使用技术架构

1. 数据库webSql  （因为时间不够老师未讲到数据库，故让我们使用web数据库）
2. 数据库预存文件 json
3.  jquery mobile 和 jquery    
4. javascript

设计总结

1.数据库设计总结

     数据库的大致结构如下图，刚开始的设计由于没有考虑周全。导致后面网页需要用到数据库后时会遇到很多错误，比如最初的座位id是和影厅id关联在一起的，但其实它应该和排片id联系在一起，不然在同一影厅不同时间的片会相互影响。所以为了修改这个错误，又改了几个关联页面的内容。后来检查的时候发现电影评价没做，又临时加了一张电影评价表。

    修改数据库结构，附带着就会需要修改很多关联的页面。所以为了避免不必要的麻烦，以后要在设计好数据库之后再连接数据库。

2.页面设计总计

• 页面的样式是做网页的一大困难，在调试的时候页面总不会按照预期走，会出现很多偏差，甚至有些无论你怎么改动它也无动于衷。这些都是由于对css原理掌握不清晰造成的，比如有时候无法修改jquery mobile的样式，其实只是由于优先级不够，无法将现在的样式加到页面的元素上去。还有一个让我花费很多时间在css上的原因是，一开始对页面的规划不清晰，在中途的时候会喜欢上其它风格的页面，然后又需要对之前的页面进行修改。除了优先级，还有定位，切图，比例等都会影响到页面的效果。并且为了让app能在多个分辨率上正确显示，应该尽量少用px来定义长度，百分比和em会让页面更兼容

• 所以在初期就应该想好页面大致的样式，比如圆角还是方角，配色的选择，阴影的样式等等。这样才能使所有页面的风格统一，也会在制作过程中节省很多修改样式的时间。在设计时也应该考虑它在不同比例的情况下的显示，不然很容易出现不兼容的问题。

• 在使用jquery时也需要大致知道它的原理，比如它的选择器。记得在做的过程中就常常因为事件无法绑定到指定的元素上而苦恼，其实大部分是因为不能绑定在动态加载的元素上，只能绑定在页面本身存在的元素上面。还有代码的简洁化，如果不一遍写一遍注释或封装到函数中，很可能之后修改的时候忘记当初自己为什么写这段代码，也为了方便以后对页面的修改。  

• 因为需要从数据库中导入数据，使页面动态化，所以需要使用到很多数据库查询语句。刚开始由于数据库的知识忘了很多，联合查询的时候就会遇到很多错误。比如查询某电影在某影院某天的最低价，这条sql语句由于长期未用数据库，也花了一些时间去想。想出来后，用js去查询也很容易出现报错，比如在数据传递方面，有时候还需要将字符型的变量转换为int型才能查询到该数据。不过初期数据库的使用越多，遇到的错误越多，在后期发现遇到的错误越少。所以其实遇到错误也算是积累经验的过程。

• 同步和异步，最初使用函数时不知道js的加载顺序，以为和java，c语言一样是顺序加载。其实js的语句有时候是不定的，当你需要循环使用一段代码时，不能将它放在一个函数里面，需要直接在该循环中进行操作，不然很可能因为延迟，所有的数据传值都是相同的。造成没有报错，但是页面显示错误的问题。

源代码

https://github.com/Echoyy9/Movie-ticketing-app