匹配系统的前端偷懒设计

221 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

甲方拿了个界面(如下),让我做个类似的游戏匹配系统。说实话嘛,这个东西我的想法就是一个注册登录,一个匹配系统,一个排行榜,一个论坛(甲方说这个不急)

f7575773b6eed33742f8a4cc92547da.jpg

技术选型

网站界面我就直接用我熟悉的vue-element-admin框架魔改好了。

后端直接选SpringBoot。

数据库直接选择mysql。

选这些是因为我只会这些。

vue前端部分搭建

这个vue的介绍里面有安装指南,跟着一步步来就行,几乎傻瓜式操作。 介绍 | vue-element-admin (panjiachen.github.io)

image.png

运行出来之后,关注一个目录src下的views。这个目录里面就是我们打开界面的目标界面。

image.png

image.png

像我们就是想删一大堆界面,同时我们也要保证router下的index.js里面的目录和界面一一对应。 image.png

因为这个vue-element-admin里面的界面实在太多了,删起来很麻烦,所以我们直接选择他的简单基础模板vue-admin-template

是根据上面一样的方法,不过git clone 的地址要换成这个github.com/PanJiaChen/…

image.png

事实上,我们很多时候都会用template为模板开发,用admin这个完全的版本作为功能开发的参考。需要什么就复制过来呗。

然后把一些不需要的页面删除,留下几页作为我们的功能界面。然后一个可以在前期交差的版本就差不多了。

image.png

总结

至于后续的界面优化,数据库的搭建。这不得一步步来吗,今天下班了就到这吧,