基于vue+php+mysql搭建一个小型交互网站

基于vue+php+mysql搭建一个小型交互网站

网站链接：http://39.105.113.112/gametheory

一.网站背景及目的

老师让搭建一个网站，于是，就有了这篇文章（纯小白的心路历程）
网站的要求：项目是有关于博弈论的，大家进入网站，系统对进入网站的用户进行分组，组内的人数达到要求后，开始游戏。每个人做出一个选择（选一个数字），然后每轮能看到其他人的选择是多少，本轮的收益是多少。随后进入下一轮，轮数到达要求后，游戏就结束，可以看到自己的最终收益。（规则介绍的有点简单，具体的大家可以进网站看）

二.遇到的一些困难及解决思路

开始

困难

1. 怎么搭建网站，怎么创建一个网站让大家都能进来
2. 如何对用户进行分组，并且记录每轮的选择，还要将所有人的选择进行汇总并均分后返回给每一个用户

解决思路

1.用IIS做服务器，将自己写好的页面部署到上面，然后使用花生壳做内网穿透，这时会得到一个网站，将这个分享出去，其他人即可进入
2.通过sessionid区分用户，将用户的id与每轮的选择都记录到数据库中，通过数据库的操作，实现分组与数据记录及返回

过程

困难

1.欢迎界面有三个页面，我不想每次点击进入到下一个页面，想通过导航栏来完成局部刷新
2.数据库怎么使用

解决思路

1.使用vue框架，组件化的设计原理刚好满足了我的需求，不过这次搭建的网站很简单，并没有完全展现vue的强大之处，使用vue-router完成局部刷新
2.单纯的html页面并不能实现连接数据库的功能，了解后，使用Php，sessionid的生成，数据库的连接在php中实现，而且发现php文件是可以写html的，所以在我的功能页面我都是用php文件写的。对于数据库，我用的是mysql，但是单独的mysql体验很不好，于是又下载了navicat，交互舒服多了

后期

困难

1. vue项目里不能放php文件
2. 页面关闭时触发函数，在不同浏览器及pc端移动端的兼容性问题

解决思路

1.当时这个困扰我很久，第一次做网站，查资料也没找到合适的，最后在vue的社区里，一个好哥们提醒了几句，别把php放vue里面，将其放在服务器上。然后就成功了！太感谢他了。
2.遇到的有onbeforeunload,pagehide,document.visibilityState.说实话这种兼容性真是让人头大，因为退出网页时需要删除每个用户的信息，这只是个一次性的游戏。我自己测试的时候是电脑、手机、平板一起，就是为了其兼容性强一点，不出意外，总是会有一端出现函数无效的问题，说实话，现在也没有很好的解决，不过移动端上document.visibilityState体验不错
（navigator.beacon效果好到爆！）

三.链接

github链接：https://github.com/llzmgjzhy/game-thoery-website

网址：http://39.105.113.112/gametheory

四.一些小想法

这次只是把网站做出来，但是代码质量、用户体验、运行速度等都没有进行过优化。点开github看源码也会发现很多冗余和不合理之处，希望大佬能帮忙改正一下，提出一下建议，我也会不断去学习与加强我的编程能力。
写的这篇文章不长，说实话写这玩意儿差不多花了一个月，真的是从空白开始，跌跌撞撞把成果交出来。希望接下来的路更难走，因为相信可以遇到很棒的伙伴，这样便不惧来路艰险。
虽然我也是一个小白，不过经过这个项目，多多少少也是攒了一些经验，对于要走相似道路的朋友们，多与我交流呀，我也想从中不断学习与进步。

最后，纪念一下这一个月，项目大体上完成，结束快乐，让我们继续奔赴下一个征程！